Sí. Por ejemplo, en la confección de este manual se utilizan simultáneamente algunos de ellos. En las páginas del índice y de la portada se utilizan el segundo método (inclusión de la hoja de estilo en el documento HTML) y también el primero (inclusión del estilo en etiquetas concretas). Y en la totalidad de los capítulos se usan el tercero (enlace a la hoja de estilo) y el primero.
Si, pero solo podrá actuar uno de cada tipo. Si por ejemplo defines una etiqueta con letra de color rojo, todas sus etiquetas hijas serán de color rojo (herencia) a no ser que definas especificamente una de ellas de otro color.
Para evitar conflictos entre los distintos métodos usados simultáneamente, existe un orden de preferencia, es decir, cuál prevalecerá sobre el otro si dan órdenes contradictorias sobre un aspecto concreto.
El orden de preferencia es el siguiente (de mayor a menor):
Esto quiere decir que una orden de estilo, por ejemplo el color del texto, puesta dentro de un etiqueta, prevalecerá sobre la que esté indicada en los otros dos métodos, si es que se usan en esa página.
Lo más práctico es usar el tercer método (enlace a una hoja de estilo), para dar una apariencia consistente a todas las páginas, y si es necesario modificar un aspecto concreto en alguna de ellas, usar el primero o el segundo método.
Muchas propiedades (width, margin, padding, font-size) deben ser rellenadas con valores de largo. En CSS se puede usar pixeles (px), (em), porcentaje (%)
En este capítulo se amplían los conceptos vistos en los dos capítulos anteriores, y se introducen algunos nuevos sobre las hojas de estilo en cascada.
El orden de los atributos es significativo. Los atributos Font-Weight y Font-Style se deben especificar antes que los demás.
| Unidad | Descripción | Valor |
|---|---|---|
| px | pixel | ipx = 1/72 in |
| mm | Milimetro | |
| cm | Centimetro | |
| in | Pulgada | 1in = 96px = 2.54cm |
| pt | Puntos | 1pt = 1/72 in |
| pc | Picas | 1pc = 12pt |
| Unidad | Descripción |
|---|---|
| % | Relativo al padre |
| em | Relativo al tamaño de fuente actual |
| ex | Relativo a la altura de la fuente actual |
| ch | Relativo al ancho del 0 |
| rem | Relativo al tamaño de fuente del elemento raiz |
| vw | 1% del ancho de ventana |
| vh | 1% del alto de ventana |
| vmin | valor min relativo al 1% de ventana |
| vmax | valor max relativo al 1% de ventana |
h1 {
padding: 3px;
width: 100%;
margin: 1em;
Radius: 1ex;
}
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 */.
/*Comentario*/
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">
BODY {
background: yellow;
font-size: 10pt;
font-family: Arial;
margin-left: 2cm;
margin-right: 2cm
}
H1 {
background: blue;
font-size: 14pt;
font-weight: bold;
color: red
}
H2 {
font-size: 12pt;
font-weight: bold;
color: red
}
DIV {
background: URL(isla.gif)
}
</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;
}
H1 {
background: blue;
font-size: 14pt;
font-weight: bold;
color: red;
}
H2 {
font-size: 12pt;
font-weight: bold;
color: red
}
DIV {
background: URL(nubes.jpg)
}
-->
</Style>
Como sabemos, las etiquetas de un documento HTML tienen una estructura definida, que de manera muy resumida se puede poner de esta forma:
<HTML> <BODY> (conjunto de etiquetas que conforman el DOM) </BODY> </HTML>
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 (tablas, listas, párrafos, etc.) heredaran este estilo.
Por tanto, para establecer un estilo global a la pagina entera, lo mas apropiado es atribuirselo a la etiqueta <BODY>. Por ejemplo:
BODY {
font: 10pt/11pt Arial, Helvetica, sans-serif;
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 definir las por separado.