2. Las Hojas de Estilo en Cascada se escriben dentro del código HTML
de la página web, solo en casos avanzados se pueden escribir en un
archivo a parte y enlazar la página con ese archivo. En un principio
vamos a utilizar la manera más directa de aplicar estilos a los
elementos de la página, mas adelante veremos la declaración en
archivos externos. Para ello, y esto es la primera lección de este
artículo, vamos a conocer un nuevo atributo que se puede utilizar en
casi todas las etiquetas HTML: style.
3. Una característica esencial de las hojas de estilo en cascada (CSS) es la
posibilidad de separar los elementos formales de los de contenido. De esta
forma, sólo con una pequeña modificación de la hoja de estilo es posible
cambiar el aspecto de todas las páginas en las que se aplica esa hoja.
No todas las versiones de los navegadores las soportan. Si consideramos
los dos principales Netscape es capaz de utilizarlas desde la versión 4.0 y
Explorer desde la 3.0
4. ¿Por qué se llaman hojas de estilo?
Con las hojas de estilo podemos crear clases y
pseudoclases. Éstas nos permiten modificar e
indicarle al navegador la forma en la que tiene que
presentar cualquier elemento HTML.
5. ¿Por qué se llaman "en cascada"?
Cuando creamos un estilo, las especificaciones que se realicen para un
determinado elemento serán aplicables a todos aquellos elementos que
se encuentren "por debajo" de él atendiendo a un criterio de herencia.
Por ejemplo, si especificamos un tipo de letra para el elemento <body>
todos aquellos elementos que puedan heredar las características se
presentarán con el mismo tipo de fuente. Así, el elemento <p> heredará
el tipo de letra salvo que especifiquemos lo contrario.
También debemos de tener en cuenta que se establece un orden de
prioridad para la aplicación de las normas en caso de que resulten
contradictorias. El orden de preferencia para aplicar una norma es el
siguiente:
- Estilo especificado dentro de la etiqueta.
- Estilo especificado en la cabecera del documento.
- Estilo definido en un documento independiente al que se enlaza
nuestra página.
7. Vinculación a una hoja de estilo externa
Para crear un vínculo a una hoja de estilo externa, insertamos una
etiqueta <link> como en el ejemplo siguiente:
<head>
<title>Hoja de estilo vinculada</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
</head>
Pseudo clases
a:link
a:visited
a:hover
a:active
Como hemos visto, podemos combinar estos selectores y clases. Así tenemos
la posibilidad de crear múltiples estilos, por ejemplo para un enlace:
a.principal:link
a.pie:link
8. Reglas, declaraciones, propiedades
body {
font-family: Arial, sans-serif;
color: blue;
}
Una hoja de estilo contiene al menos una regla y puede contener tantas como
necesites.
Grupo de selectores
h1, h2, h3 {font-family: Arial, sans-serfi;}
9. Selectores ID
Son similares a los selectores de clase. Se diferencia en la semántica y en el
comportamiento.
Sintaxis:
#cabecera
<div id="cabecera">Contenido de cabecera</div>
Esto no sería correcto:
#barra
<div id="barra">Bienvenidos</div>
<div id="barra">Esto es una prueba de diseño web </div>
