En este capítulo se amplían los conceptos vistos en el capítulo 1 y se introducen algunos nuevos conceptos sobre las hojas de estilo en cascada.
Se pueden añadir comentarios propios a las hojas de estilo, que pueden servir de recordatorio posterior. Se pueden colocar en cualquier sitio de la especificacisn, siempre que vayan englobados entre los caracteres /* y */.
H1 {font: 20pt/22pt bold; color=#00FF00} /*Color verde*/
Si quieres hacer que una linea deje de hacer efecto, simplemente añádele un * delante del selector. Al no reconocer el selector, dejara de funcionar.
Si se usa el método de incluir un bloque de estilo en la cabecera, que consiste en poner las distintas instrucciones de estilo entre las etiquetas <STYLE> y </STYLE>, tal como en el ejemplo que se visualizara:
<STYLE TYPE="text/css">
<!-- esconde codigo
H1 {
background: blue;
font-size: 14pt;
font-weight: bold;
color: red
}
H2 {
font-size: 12pt;
font-weight: bold;
color: red
}
//-- fin esconde -->
</STYLE>
En los navegadores que no implementen las hojas de estilo se ignoraran las etiquetas <STYLE> y </STYLE>, pero podrá ocurrir que aparezca como texto el bloque de definición del estilo. Para evitar esto, es conveniente englobar dicho bloque de información entre los símbolos <!-- y -->. Por tanto, es conveniente poner el bloque de definición del estilo de esta manera:
<Style Type="text/css">
<!--
BODY {
background: yellow;
font-size: 10pt;
font-family: Arial;
margin-left: 2cm;
margin-right: 2cm;
}
DIV {
background: URL(nubes.jpg)
}
-->
</Style>
El nombre de hojas de estilo en cascada, juntamente habla de la "precedencia" de aplicación de arriba hacia abajo. En otras palabras los selectores repetidos se chancan entre ellos.
El orden de los atributos es significativo. Los atributos Font-Weight y Font-Style se deben especificar antes que los demás.
Fenomeno por el cual los hijos heredan las propiedades asignadas a sus padres. No todas las propiedades son heredables. Por ejemplo: FONT (-FAMILY, -SIZE, -STYLE, -VARIANT, -WEIGHT, -SIZE-ADJUNT, -STRETCH), TEXT (-ALIGN, -INDENT, -JUSTIFY, -SHADOW, -TRANSFORM, -DECORATION-COLOR), COLOR, TAB-SIZE, WORD-SPACING, LETTER-SPACING son heredados por defecto. Hay propiedades que no son heredas por defecto como BORDER.
Como se puede ver, la etiqueta BODY engloba a todas las demás. Si se la asigna un estilo determinado a esta etiqueta, todos los elementos que están dentro de la pagina (párrafos, divisores, tablas, listas, etc.) heredaran este estilo solo si este es heredable por defecto.
Por tanto, para establecer un estilo global a la pagina entera, lo mas apropiado es atribuírselo a la etiqueta BODY. Por ejemplo:
BODY {
font: 10pt Helvetica, Arial, sans-serif navy;
background: url(isla.gif);
margin: 0 2cm 0 2cm;
}
Establece para el DOM completo la fuente, separación entre líneas, imagen de fondo y espesor de los margenes. Si se precisa que ciertos elementos concretos dentro del DOM tengan otras características distinta a la general, entonces hay que definirlas por separado.
Se puede forzar la herencia
span {border: inherit;}
La "especificidad" es algo que cada autor CSS tiene que entender y pensar. Se puede considerar como una medida específica del selector de una regla. Un selector con baja "especificidad" puede coincidir con muchos elementos (como el * que coincide con todos los elemento en el documento), mientras que un selector con alta especificidad podría coincidir con un único elemento de una página (como #nav que sólo coincide con el elemento con una ID=nav).
La "especificidad" de un selector se puede calcular fácilmente, como veremos más adelante. Si dos o más declaraciones de conflicto para un elemento dado, y todas las declaraciones tienen la misma importancia, el que aparece en la regla con el selector más específico "ganar".
La "especificidad" tiene cuatro posibles valores: a, b, c y d. Donde "a" es el más importante.
Después de un poco de contar, por lo tanto podemos cadena de esos cuatro componentes en conjunto para obtener la especificidad para cualquier regla. Declaraciones CSS en un atributo STYLE no tienen un selector, por lo que su especificidad es siempre 1,0,0,0.
| Valor | Descripción |
|---|---|
| A | es 1 para una declaración en un atributo STYLE, de lo contrario es 0. |
| B | Cantidad de IDs en el selector (aquellas que comienzan con una #). |
| C | Cantidad de CLASES en el selector, incluyendo pseudo-clases. |
| D | Cantidad de TIPOS de elementos y pseudo-elementos. |
| Selector | Especifidad A,B,C,D |
|---|---|
| h3 | 0,0,0,1 |
| .nav | 0,0,0,0 |
| #barra | 0,1,0,0 |
| <H1 STYPE=""> | 1,0,0,0 |
| h2 {color:red !important;} | 9,9,9,9 |
| html>head+body ul#nav *.home a:link{} | 0,1,2,5 |
| h3 p.texto ul#listado li a{} | 0,1,1,5 |
| .#info p a.actual{} | 0,1,1,2 |
| .#nav #manu ul li a.actual{} | 0,2,1,3 |
Aquí propongo algunas herramientas en linea que te pueden ayudar. Seguro que en la web habrá muchas mas, estas solo son las que yo conozco para darte una idea de lo que puedes encontrar como editores, texto e imagen para pruebas, indices de recomendaciones, manuales y muchos ejemplos.