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 podra actuar uno de cada tipo. Si por ejemplo defines una etiqueta con letra de color rojo, todas sus etiquetas hijas seran 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 metodo.
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 demas.
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ñadele un * delante del selector. Al no reconocer el selector, dejara de funcionar.
Si se usa el metodo 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 visúalisara:
<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 demas. Si se la asigna un estilo determinado a esta etiqueta, todos los elementos que estin dentro de la pagina (tablas, listas, parrafos, 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 caractermsticas distinta a la general, entonces hay que definirlas por separado.
Una pagina con muchos ejemplos es CSS 3 info