Introducción
Los htmls sólo están pensados para meter contenido, el CSS se desarrolló posteriormente y está pensado únicamente para contenido visual. Funciona con otros códigos como xml etc y puede interactuar con bases de datos.
El archivo CSS contiene reglas que constan de un selector y una o más declaraciones. Cada declaración tiene dos partes, una propiedad (por ejemplo font size) y un valor (19 pt). Estas reglas son las que determinan cómo deberá mostrarse la página.
Slector {declaraciones}
/
/
/
declaración = propiedad ; valor
Ejemplo:
H1{
font-family: Arial, sans-serif ;
font-size: 19pt ;
color: #000FFF ;
Text-align: center ;
}
Puede haber varias declaraciones, pero hay que separar cada una con el caracter punto y coma, el cual se puede dejar después de la última declaración, pero no es obligatorio.
Hay tres formas de trabajar con CSS:
- Hojas de estilo en un archivo externo
- Hojas de estilo incrustadas
- Hojas de estilo en línea
Hojas de estilo en un archivo externo
Guardamos nuestro fichero con la extensión .css, posteriormente, aquel html que queramos que tenga este estilo y estas características, deberemos añadirle esta línea en el head.
<Link rel="stylesheet" href="nombre de nuestro archivo.css" type="text/css">
Tendremos por supuesto que guardarlo en la misma carpeta que el html.
Este elemento siempre aparece en la sección head del documento y especifica:
- El tipo de vínculo --> a una hoja de estilo (stylesheet)
- La ubicación de la hoja de estilo a través de href
- El tipo de hoja de estilo que se vincule: text/css
Ahora, todos los H1 que contengan la referencia a este archivo CSS tendrán el aspecto que hemos definido.
Es importante recordar que aquel documento que contenga las definiciones de estilo tendrá extensión .css y no podrá contener ninguna etiqueta html; sólo podrá contener los estilos.
Se pueden importar tantos documentos de estilo como se desee, siempre teniendo en cuenta que si existen definiciones que entran en conflicto entre los diferentes documentos, el navegador tendrá en cuenta únicamente la última opción leída.
Por supuesto, la definición del estilo dentro de la propia etiqueta no es la manera más eficaz de utilizar las hojas de estilo, pero pueden existir casos que lo justifiquen. La existencia de una regla como la del último ejemplo constituye por si misma una hoja de estilo, por lo que debemos declarar en el encabezado de la página el tipo de CSS que estamos usando
<STYLE type="text/css"></STYLE>
Ésta declaración no será necesaria si en la misma página estamos usando una hoja de estilo incrustada o si existe una referencia a una hoja externa.
Esta forma de aplicar a la hoja de estilo directamente en la etiqueta es similar al modo usado en el código html, pero con dos importantes diferencias:
- El conjunto de propiedades que se pueden aplicar es mucho mayor y
- Los estilos especificados en una hoja de estilo (cualquiera sea su origen) tienen preferencia
sobre los formatos aplicados con HTML.
Esto significa que si en nuestra hoja de estilo hemos definido:
P {text-align: left}
Todos los párrafos quedarán alineados por la izquierda y, si en un párrafo determinado, usamos:
<P align="center">
El párrafo seguirá estando alineado por la izquierda porque las reglas de las CSS tienen más fuerza que el formato aplicado con Html.
Se pueden importar tantos documentos de estilo como se desee, siempre teniendo en cuenta que si existen definiciones que entran en conflicto entre los diferentes documentos, el navegador tendrá en cuenta únicamente la última opción leída.
Hojas de estilo incrustadas
Este método que hemos visto es el más recomendable puesto que permite mayor flexibilidad ya que los estilos pueden cambiarse sin tocar el html, y la CSS puede ser compartida por varias páginas, pero también existe la posibilidad de poner la hoja de estilo dentro de la página html usando el elemento style en el interior del documento al que se le quiere dar estilo, en la sección head; de esta forma, los estilos serán reconocidos antes de que la página se cargue por completo.
<HTML>
<HEAD>
<TITLE>CSS incrustada</TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Título color azul</H1>
<P>Un párrafo cualquiera...</P>
</BODY>
</HTML>
Este método te permite aplicar la hoja de estilo sólo a la página que la contiene. Si bien no es tan práctico como usar una CSS externa, resulta útil cuando en nuestro sitio tenemos algunas páginas que usan un formato distinto al resto. En ciertos casos convendrá usar ambos a la vez. Como por ejemplo, poner un elemento link a una hoja externa para aplicar un estilo general y luego crear una hoja incrustada en la que solamente debemos definir las reglas específicas para esa página. Por las leyes de cascada de las CSS, en caso de existir una misma regla (una en la hoja externa, otra en la hoja incrustada) con distintos valores, tiene prioridad la definida en la hoja incrustada.
Hojas de estilo en línea
También es posible aplicar el estilo directamente en la etiqueta o elemento html utilizando este formato
<elemento style="propiedad1: valor1; propiedad2: valor2; ...">
...
</elemento>
Por ejemplo:
<p style="text-align: left; color: blue"> Texto alineado a la izquierda y
de color azul </p>
<p style="color:red">Párrafo de texto en color rojo</p>
Por supuesto, la definición del estilo dentro de la propia etiqueta no es la manera más eficaz de utilizar las hojas de estilo, pero pueden existir casos que lo justifiquen. La existencia de una regla como la del último ejemplo constituye por si misma una hoja de estilo, por lo que debemos declarar en el encabezado de la página el tipo de CSS que estamos usando
<STYLE type="text/css"></STYLE>
Ésta declaración no será necesaria si en la misma página estamos usando una hoja de estilo incrustada o si existe una referencia a una hoja externa.
Esta forma de aplicar a la hoja de estilo directamente en la etiqueta es similar al modo usado en el código html, pero con dos importantes diferencias:
- El conjunto de propiedades que se pueden aplicar es mucho mayor y
- Los estilos especificados en una hoja de estilo (cualquiera sea su origen) tienen preferencia
sobre los formatos aplicados con HTML.
Esto significa que si en nuestra hoja de estilo hemos definido:
P {text-align: left}
Todos los párrafos quedarán alineados por la izquierda y, si en un párrafo determinado, usamos:
<P align="center">
El párrafo seguirá estando alineado por la izquierda porque las reglas de las CSS tienen más fuerza que el formato aplicado con Html.
Modo de caja
Todos los elementos HTML que aparecen en un documento se emplazan dentro de una caja
rectangular que los incluye, es decir, los rodea. Esta característica se estudia por medio del
denominado “Modelo de Caja”. En este modelo se especifican determinadas áreas de la caja
de cada elemento HTML que podrán ser dotadas de estilo según las necesidades de
presentación que tengamos. El comportamiento de la caja va a depender del tipo de elemento
que vayamos a tratar.
El modelo de caja de CSS describe las cajas rectangulares que son generadas por los elementos.
El elemento raíz del documento (<HTML> o, mejor aún, <BODY> en HTML) genera una caja que
actúa como bloque de contención de las cajas generadas subsecuentemente. A su vez, cada caja
puede actuar como bloque de contención de otras cajas generadas por sus elementos
descendientes.
Cada una de las cajas puede separarse en cuatro áreas distintas que definen su aspecto:
- Contenido : es el área que contiene la información representable del elemento (textos,
imágenes, objetos... ).
- Relleno (padding): esta área es el espacio existente entre el rectángulo del contenido y
el borde definible para cada una de las cajas.
- Borde (border): línea que encierra completamente el contenido y su relleno; el
elemento puede presentar un borde con un grosor, una forma y un color que delimitan las
áreas anteriores.
- Imagen de fondo (background-image): imagen que se muestra por detrás del contenido
y el espacio de relleno.
- Color de fondo (background-color): color que se muestra por detrás del contenido y el
espacio de relleno.
- Margen (margin): la parte más externa de cada caja de elemento es el margen. Este
proporciona el espacio que separa una caja de las generadas por los elementos anterior y
siguiente.
El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se
muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se
muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún
elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de
fondo de la propia página (si están definidos).
Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es
la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento
o si la imagen tiene zonas transparentes, también se visualiza el color de fondo. Combinando
imagenes transparentes y colores de fondo se pueden lograr efectos gráficos muy interesantes.
Las áreas de padding, border y margin se dividen en cuatro segmentos: top (superior),
bottom (inferior), left (izquierdo) y right (derecho). De este modo podemos distinguir borderleft,
border-right, border-top y border-bottom (lo mismo para padding y margin).
Todo esto es muy técnico, pero ¿para qué sirve?: fundamentalmente para tener el control no
sólo de las propiedades del elemento en sí (su color, la fuente usada para el texto, etc.), sino
también de las propiedades de esa caja generada por el elemento (sus márgenes, sus bordes, la
posición dentro del documento) que será lo que nos permita componer visualmente la página
de un modo mucho más rico y flexible que con HTML.
Este modelo de caja es el que permite, por ejemplo, que cualquier elemento de la página pueda
recibir todas de las propiedades definidas en CSS. Por eso, a diferencia de lo que sucede con
HTML, todos los elementos pueden tener una imagen de fondo o un borde (sin necesidad de usar
una tabla para eso); también es posible darle una ubicación precisa a cualquier elemento dentro
de la página, ya sea con respecto a la pantalla o a otros elementos. Mejor aún, nos da la
posibilidad de usar un lenguaje como, por ejemplo JavaScript para conseguir efectos muy
interesantes modificando las propiedades de las cajas (moverlas de su posición, mostrarlas o
esconderlas, cambiar su tamaño, etc.).
Cada etiqueta HTML va a generar una caja según el tipo al que pertenezca, pero la descripción
anterior se aplica a todas ellas. La clasificación del tipo de etiquetas es la siguiente:
- Etiquetas de bloque : este tipo de etiquetas son aquellas que fuerzan un salto de línea
antes y después del elemento. Por ejemplo, las etiquetas <div> y <p> son de este tipo.
- Etiquetas en línea : son las etiquetas que se incluyen dentro de otro elemento, y que no
generarán saltos de línea, de modo que su anchura será la necesaria para mostrar su
contenido. Por ejemplo, las etiquetas <b> y <u> pertenecen a este tipo.
- Etiquetas de sustitución : se trata de las etiquetas referidas a elementos que solicitan
recursos al servidor, de forma que su caja será generada en función del objeto que se
incluye en sustitución a la etiqueta. Por ejemplo, las imágenes mediante etiquetas
<img>.
Cascada
Se llama así a la capacidad de que las informaciones de estilo provenientes de varias fuentes
puedan combinarse. Pensemos, por ejemplo, en el caso del site de una organización con varios
departamentos y otros tantos diseñadores encargados del mantenimiento de las páginas. El modo
de asegurar la uniformidad gráfica del sitio completo es utilizar una hoja de estilo común donde
estén definidos los aspectos básicos del diseño (fuentes, colores, etc.). Luego cada
departamento puede tener, además, su propia hoja de estilo donde se definirán los aspectos
específicos de ese departamento. Estas hojas de estilo particulares no necesitan reproducir
aquella hoja común, sino que basta con importarla haciendo que los estilos definidos en una y
otras actúen conjuntamente. Cualquier cambio en la hoja de estilo común (una modificación en
los colores institucionales, por ejemplo) se vería reflejado inmediatamente en todas las páginas
vinculadas.
La cascada define una secuencia ordenada de hojas de estilo en la que las reglas de las últimas
hojas tienen una prioridad mayor que las de las primeras. No todos los lenguajes de hojas de
estilo soportan la cascada.
