2.
Las hojas de estilo representan un avance
importante para los diseñadores de páginas
web, al darles un mayor rango de
posibilidades para mejorar la apariencia de
sus páginas. En los entornos científicos en
que la Web fue concebida, la gente estaba
más preocupada por el contenido de sus
páginas que por su presentación.
3.
CSS fue toda una revolución en el mundo del diseño
web. Entre los beneficios concretos de CSS
encontramos:
control de la presentación de muchos documentos
desde una única hoja de estilo;
control más preciso de la presentación;
aplicación de diferentes presentaciones a diferentes
tipos de medios (pantalla, impresión, etc.);
numerosas técnicas avanzadas y sofisticadas.
Beneficios de css
4.
Los autores deberían usar el elemento META para
especificar el lenguaje de hojas de estilo por defecto
de un documento. Por ejemplo, para especificar que
el valor por defecto es CSS, los autores deberían
poner la siguiente declaración en la sección HEAD
de sus documentos:
<META http-equiv="Content-Style-Type"
content="text/css">
Especificación del lenguaje de
hojas de estilo por defecto
5.
Necesitamos añadir un elemento <style> en el
archivo HTML. La hoja de estilo estará en el interior
de ese elemento.
Añadir color
6.
Los estilos se definen en una zona específica del
propio documento HTML. Se emplea la
etiqueta <style> de HTML y solamente se pueden
incluir en la cabecera del documento (sólo dentro de
la sección <head>).
Cómo incluir CSS en un
documento XHTML
8.
En este caso, todos los estilos CSS se incluyen en un
archivo de tipo CSS que las páginas HTML enlazan
mediante la etiqueta <link>. Un archivo de tipo CSS
no es más que un archivo simple de texto cuya
extensión es .css
e deben seguir los siguientes pasos:
1) Se crea un archivo de texto y se le añade
solamente el siguiente contenido:
p { color: black; font-family: Verdana; }
Definir CSS en un archivo
externo
9.
2) Se guarda el archivo de texto con el
nombre estilos.css Se debe poner especial atención a
que el archivo tenga extensión .css y no .txt
3) En la página HTML se enlaza el archivo CSS
externo mediante la etiqueta <link>:
10.
Normalmente, la etiqueta <link> incluye cuatro atributos
cuando enlaza un archivo CSS:
rel: indica el tipo de relación que existe entre el recurso
enlazado (en este caso, el archivo CSS) y la página HTML.
Para los archivos CSS, siempre se utiliza el
valor stylesheet
type: indica el tipo de recurso enlazado. Sus valores están
estandarizados y para los archivos CSS su valor siempre
es text/css
href: indica la URL del archivo CSS que contiene los
estilos. La URL indicada puede ser relativa o absoluta y
puede apuntar a un recurso interno o externo al sitio web.
media: indica el medio en el que se van a aplicar los
estilos del archivo CSS. Más adelante se explican en
detalle los medios CSS y su funcionamiento.
