CSS (Cascading Style Sheets)

Programación Web:
CSS (Cascading Style Sheets)

Hora V6 LMV Semana 2 Salón 4208
Matricula Nombre Carrera
1691397 Osbaldo Valadez Rangel IAS
1797509 Miguel Ángel Vázquez Hernández ITS
1812987 Víctor Gallegos Caceres ITS
1817853 Joseph Raziel Fernandez Hernandez ITS
1823542 Emilio Guadalupe Mendoza Camarillo ITS
 CSS es un lenguaje utilizado en la presentación de documentos HTML.
Un documento HTML viene siendo coloquialmente “una página web”.
Entonces podemos decir que el lenguaje CSS sirve para organizar la
presentación y aspecto de una página web.
 Como HTML, CSS no es realmente un lenguaje de programación. Es un
lenguaje de hojas de estilo, es decir, te permite aplicar estilos de
manera selectiva a elementos en documentos HTML.
 Este lenguaje es principalmente utilizado por parte de los
navegadores web de internet y por los programadores web
informáticos para elegir multitud de opciones de presentación como
colores, tipos y tamaños de letra, etc.
 CSS permite a los diseñadores de páginas Web utilizar métodos para
crear estructuras tratando los estilos por separado. Los motores de
búsqueda revisan las tablas dos veces, con la primera pasada analizan
la estructura y con la segunda determinan su contenido.
 Pero eso no es todo, lo más importante es que utilizar CSS reduce el
tiempo de renderización, ofreciendo al cliente una conexión más
rápida y eficiente.
 Además, los documentos HTML que emplean CSS son más pequeños,
ya que el diseño del estilo es reutilizado continuamente, de hecho, la
mayoría de veces se implementa una sola vez en un solo archivo.
 Emplear CSS para nuestra página incrementa la velocidad de
transmisión de la información de los contenidos, lo cual favorece
tanto a los clientes como a los dueños de la página y a los
administradores del servidor Web.
Sintaxis de CSS
 Selector
El elemento HTML en el que comienza la regla. Esta selecciona el(los)
elemento(s) a dar estilo.
 Declaración
Una sola regla específica a cuál de las propiedades del elemento
quieres dar estilo.
 Propiedades
Maneras en las cuales puedes dar estilo a un elemento HTML. En CSS,
seleccionas que propiedad quieres afectar en tu regla.
 Valor de la propiedad
A la derecha de la propiedad, después de los dos puntos (:), tenemos
el valor de la propiedad, para elegir una de las muchas posibles
apariencias para una propiedad determinada.
Sintaxis de CSS
Nota las otras partes importantes de la sintaxis:

 Cada una de las reglas (aparte del selector) deben estar encapsulada
entre corchetes ({ }).
 Dentro de cada declaración, debes usar los dos puntos (:) para separar
la propiedad de su valor.
 Dentro de cada regla, debes usar el punto y coma (;) para separar una
declaración de la siguiente.
Ejemplo de código en CSS
Selectores y su codificación
 Selector de identificación (ID)
El elemento en la página con el ID especificado (en una página HTML
dada, solo se permite un único elemento por ID).
#nombre del ID{
propiedad: valor de la propiedad;
}
 Selector de Clase
Los elementos en la página con la clase especificada (una clase puede
aparecer varias veces en una página).
.nombre de la clase{
}
Selectores y su codificación
 Selector de atributo
Los elementos en una página con el atributo especificado.
img[src]{
}
 Selector de pseudo-clases
Los elementos especificados, pero solo cuando esté en el estado
especificado, por ejemplo cuando el puntero esté sobre él.
a:pseudo-clase{
}
Formas de enlace con un documento HTML
 CSS en el archivo HTML dentro de <head>

Se puede colocar el código CSS entre las etiquetas <style> y </style>
dentro de las etiquetas <head> y </head>.
 CSS en el archivo HTML dentro de <p>

Se coloca el código CSS dentro de la etiqueta <p> como un atributo:
<p style=”color: blue;”>
Esto solamente afectará a lo que está escrito entre esta etiqueta <p>.
Formas de enlace con un documento HTML
 Enlace de un archivo CSS externo
Una vez tenemos nuestro archivo de estilos, estilos.css, debemos de
importarlo para su uso a nuestra página web o documento HTML.
Para ello ponemos lo siguiente entre las etiquetas <head> y </head>
de nuestro código HTML.
<link rel="stylesheet" type="text/css" href="/estilos.css">
Este código lo que hace es indicar que existe un archivo con una
definición de estilos u hoja de estilos (stylesheet) que contiene
código CSS (text/css) y que se encuentra en la ruta estilos.css.
Preguntas
1. ¿Qué es el CSS?
Es un lenguaje de hojas de estilo, es decir, te permite aplicar estilos de manera selectiva a
elementos en documentos HTML.
2. Sintaxis de CSS:
• Selector
• Declaración
• Propiedades
• Valor de la propiedad
3. ¿Qué es el selector en CSS?
El elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a dar
estilo.
4. ¿ Que es la declaración en CSS?
Una sola regla específica a cuál de las propiedades del elemento quieres dar estilo.
5. ¿Qué son las propiedades en CSS?
Maneras en las cuales puedes dar estilo a un elemento HTML. En CSS, seleccionas que
propiedad quieres afectar en tu regla.
Preguntas
6. ¿Qué es el valor de la propiedad en CSS?
A la derecha de la propiedad, después de los dos puntos (:), tenemos el valor
de la propiedad, para elegir una de las muchas posibles apariencias para una
propiedad determinada.
7. ¿Para que es el sector de identificación en CSS?
El elemento en la página con el ID especificado
8. ¿Para que es el sector de clase en CSS?
Los elementos en la página con la clase especificada
9.¿Sobre que documentos es utilizado el CSS?
HTML
10.Ejemplo de CSS:
p{
color:red;
}

CSS (Cascading Style Sheets)

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CSS (Cascading Style Sheets)

Cargado por

Copyright:

Formatos disponibles

Programación Web:

CSS (Cascading Style Sheets)

Nota las otras partes importantes de la sintaxis:

 CSS en el archivo HTML dentro de <head>

 CSS en el archivo HTML dentro de <p>

<link rel="stylesheet" type="text/css" href="/estilos.css">

También podría gustarte