Hojas de estilo CSS
CSS es el lenguaje que se emplea para dar estilo a las páginas HTML, que es el lenguaje en que se escriben las páginas Web.
La especificación de CSS, como la de la mayoría de los lenguajes de la World Wide Web, la ha desarrollado el W3 Consortium.
Gracias a CSS se puede separar el trabajo de escribir una web en dos partes (no tan bien diferenciadas como sería deseable, pero suficientemente diferenciadas): la estructura y la presentación.
La estructura, que es la parte de la que se encarga HTML, es la encargada de dar importancia a unos elementos sobre otros, establecer órden entre las informaciones y decir "lo que se debe ver", mientras que la presentación, de la que se encarga CSS, es la encargada de establecer colores, tamaños, efectos visuales (o sonoros) y similares, es decir "cómo se debe ver".
Hay tres maneras de introducir estilos CSS en una página HTML:
- Mediante el atributo
styleen una marca
- Mediante la marca
style
- Mediante hojas externas enlazadas con la marca
link
En el primer caso sólo se deben especificar los estilos que se aplicarán al elemento en cuestión, mientras que en los otros dos es necesario especificar, además, a qué elementos de la página se aplicarán los estilos.
Veamos un ejemplo sencillo una lista escrita en HTML sin aplicarle absolutamente ningún tipo de estilos (ni siquiera los que vienen predeterminados por WikiLibros):
| Ejemplo | Código |
|---|---|
|
<ul> <li>El Hierro</li> <li>La Palma</li> <li>La Gomera</li> <li>Tenerife</li> <li>Gran Canaria</li> <li>Lanzarote</li> <li>Fuerteventura</li> </ul> |
Veamos ahora la misma lista con algo de estilos:
| Ejemplo | Código |
|---|---|
|
<style>
ul {
list-style-image: none; list-style-type: disc;
list-style-position: inside;
background-color: yellow; color: red;
border: groove maroon 4px;
}
li {
background-color: aqua; color:teal;
border: solid fuchsia 2px;
}
</style>
<ul>
<li>El Hierro</li>
<li>La Palma</li>
<li>La Gomera</li>
<li>Tenerife</li>
<li>Gran Canaria</li>
<li>Lanzarote</li>
<li>Fuerteventura</li>
</ul>
|
En el primer caso (HTML puro) obtenemos la estructura: se trata de una lista desordenada. En el segundo, además de la lista obtenemos una determinada decoración. Observemos exactamente la misma lista con otro estilo:
| Ejemplo | Código |
|---|---|
|
<style>
ul {
list-style-image: none; list-style-type: none;
background-color: black; color:white;
border: groove silver 4px;
}
li {
display: inline;
}
</style>
<ul>
<li>El Hierro</li>
<li>La Palma</li>
<li>La Gomera</li>
<li>Tenerife</li>
<li>Gran Canaria</li>
<li>Lanzarote</li>
<li>Fuerteventura</li>
</ul>
|
Como vemos parece haber desaparecido la estructura de lista, pero no es así. Tan sólo ha desaparecido la apariencia vertical de ser una lista, pero sigue siéndolo.
Plan de la obra: