Hojas de estilo en cascada

Instituto Tecnológico de Minatitlán
11 septiembre 2009
Programación Web
Hojas de estilo en cascada.
Profesor: Rodriguez Samado Ruben Dario Presenta: Vazquez Espinoza Luis Manuel

Hojas de estilo en cascada.
Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, oincluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.
¿Para qué sirve?
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar loselementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.
Sintaxis básica (Reglas).
Selectores
Cualquier elemento HTML es un posible selector CSS1. El selector es simplemente elelemento que está conectado a un estilo particular. Por ejemplo, el selector en:
P { text-indent: 3em }
es P.
* Selectores de clase
Un selector sencillo puede tener diferentes clases, permitiendo así al mismo elemento tener diferentes estilos. Por ejemplo, un autor puede querer mostrar el código en un color diferente dependiendo del idioma:
code.html { color: #191970 }
code.css { color:#4b0082 }
El ejemplo de arriba ha creado dos clases, css y html para usar con el elemento CODE de HTML. El atributo CLASS se usa en HTML para indicar la clase de un elemento, por ejemplo,
<P CLASS=advertencia>Solo se permite una clase por selector.
Por ejemplo, code.html.proprietario no es válida.</p>
Las clases también pueden ser declaradas sin elementos asociados:
.nota { font-size: small}
En este caso, la clase nota puede usarse con cualquier elemento.
Una buena práctica es llamar a las clases de acuerdo a su función y no por su apariencia. La clase nota del ejemplo de arriba pudo haber sido llamada pequeña (small), pero este nombre perdería todo significado si el autor decidiera cambiar el estilo de la clase de tal modo que ya no tuviera una fuente pequeña.
* Selectores IDLos selectores ID son asignados individualmente con el propósito de una definición en términos 'por elemento'. Este tipo de selector debería ser usado con moderación debido a sus inherentes limitaciones. Un selector ID se asigna mediante el uso del indicador "#" para preceder un nombre. Por ejemplo, un selector ID podría asignarse así:
#svp94O { text-indent: 3em }
Esto sería referenciado en HTML porel atributo ID:
<P ID=svp94O>Texto con sangría 3em</P>
* Selectores de contexto
Los selectores de contexto son simples cadenas de dos o más selectores simples separados por espacio en blanco. A estos selectores se les pueden asignar propiedades normales y, debido a las reglas del orden de cascada, tendrán precedencia sobre selectores simples. Por ejemplo, el selector de contextoen:
P EM { background: yellow }
es P EM. Esta regla dice que el texto con énfasis dentro del párrafo debería tener un fondo amarillo; el texto con énfasis en un encabezado no sería afectado.
Declaraciones (Propiedades)
Se asigna una propiedad a un selector a fin de manipular su estilo. Ejemplos de propiedades incluyen color, margin, y font.
Agrupamiento
A fin de disminuir declaraciones repetitivasdentro de hojas de estilo, se permite el agrupamiento de selectores y declaraciones. Por ejemplo, todos los encabezados en un documento podrían tener idénticas declaraciones mediante un agrupamiento:
H1, H2, H3, H4, H5, H6 {
color: red;
font-family: sans-serif }
Herencia
Prácticamente todos los selectores que estén anidados dentro de selectores, heredarán los valores de propiedades asignados...