Los navegadores y CSS
CSS no es más que una serie de palabras escritas en un archivo simple de texto plano que indican como debe mostrarse una página web. El navegador es el que interpreta el código HTML y el formato definido por CSS. No todos los navegadores soportan todas las propiedades CSS.
Concepto de modelo de cajas.
Una página web está formada por diversos elementos HTML, que constan de una etiqueta de inicio y una etiqueta de cierre.
Ejemplo:
<html>
<head>
<title>Rosario Suárez</title>
<head>
<body>
<h1>Rosario Suárez</h1>
<p>Rosario Suárez es una exitosa bailarina clásica que nació en La Habana, Cuba. En su trayectoria profesional ha recibido importantes reconocimientos y premios</p>
<ul>
<li>2002-2006: Directora y bailarina del Ballet Rosario Suárez.</li>
<li>1999-2006: Directora y Bailarina de la Academia Rosario Suárez</li>
<li>1990: Artista invitada de la Compañía Nacional de danza de México</li>
<li>1987-1990: Primera Bailarina del Ballet Teatro de La Habana</li>
<li>1968-1994: Primera Bailarina del Ballet Nacional de Cuba.</li>
</ul>
</body>
</html>
La idea del modelo de cajas consiste en que cada elemento es interpretado como una caja que puede contener más cajas, esto es, más elementos. En el ejemplo anterior <body> contiene tres cajas más <h1>, <p> y <ul>. Cada una de las cajas consta de: contenido, margen interno (padding), borde (border) y margen externo (margin).
Modelo de cajas en CSS
El modelo de cajas consiste en que cada elemento es interpretado como una caja que consta de contenido, margen interno, borde y margen externo. Un caja puede contener más cajas. Las cajas también podemos cambiarlas de posición y tamaño, consiguiendo que se muestren en el lugar deseado.
Podemos asociar estilos a una página web de varias formas:
- En línea.
- Internamente.
- Externamente. (Es la más recomendable)
CSS en línea
Si queremos definir un estilo de línea para un elemento, debemos añadirle el atributo style y asignarles las propiedades que deseemos. Cada propiedad se define de la siguiente forma:
propiedad: valor;
Por ejemplo para los elementos p y ul anteriores le vamos a dar los siguientes estilos:
<p style=»background: black; color: white;»>
<ul style=»color: green;»>
Utilizar el método «En línea» es costoso porque hay que ir definiendo el estilo elemento a elemento, por eso hay otros métodos.
CSS Interno
Tanto si aplicamos estilos de forma interna como externa, utilizaremos la siguiente sintaxis general:
selector {
propiedad1: valor;
propiedad2: valor;
propiedadN valor;
}
siendo selector el elemento HTML al que aplicamos el estilo (h1, p, ul…) a continuación aparecen las propiedades a las que vamos a asignar un valor.
Ejemplo:
p {
background: black;
color: white;
}
De esta forma todos los elementos p tendrán fondo negro y texto blanco.
La definición de estilos de forma interna se realiza añadiendo dentro del elemento <head></head> el elemento <style>:
<style type=»text/css»> </style> Los elementos que definamos los escribiremos dentro del elemento style:
<title>Rosario Suárez</title>
<style type=»text/css»>
p {
background: black;
color: white;
}
ul {
color: gray;
}
</style>
CSS Externo
La definición de estilos de forma externa consiste en escribir todas las definiciones en un archivo distinto con extensión CSS.
En el documento HTML incluiremos un elemento link que enlazará el documento CSS:
<link rel=»stylesheet» type=»text/css» href=»archivo.css»>
archivo.css es el documento con las definiciones de estilo, pudiendo especificar la ruta en la que se encuentra. El elemento link se escribe dentro del elemento head:
<title>
<link rel=»stylesheet» type=»text/css» href=»archivo.css»/>
</head>
El contenido del archivo archiv.css es el siguiente:
p {
background: black;
color: white;
}
ul {
color: gray;
}
Cualquier cambio que modifiquemos en el archivo archivo.css nos modificará la página web.
Los estilos en línea necesitan de mucho tiempo para hacer modificaciones, los estilos definidos externamente requieren menos tiempo, por lo tanto lo más ventajoso es utilizar los estilos definidos externamente. La definición en línea permite definir algún elemento en particular y la definición interna sirve para definir pocos estilos para una página web pequeña.
Selectores
Hasta ahora hemos visto cómo aplicar un estilo a todas las apariciones de un mismo elemento mediante la definición externa, pero, ¿y si no queremos que todos los párrafos de nuestra página tengan el mismo estilo? La solución está en los selectores id y class.
Selector id
A los elementos HTML podemos asignarles un identificador único mediante el atributo id.
En el siguiente ejemplo asignamos el identificador único «títuloprincipal» al elemento h1:
<h1 id=»títuloprincipal»>Rosario Suárez</h1> Ningún otro elemento de la página web debe tener un identificador igual. Si deseamos definir un estilo para este elemento, utilizamos el selector id de la siguiente forma:
#títuloprincipal {
background: gray;
propiedad2: valor;
propiedadN: valor;
}
Tendríamos que vincularlo al documento HTML de la siguiente forma:
<h1 id=»títuloprincipal»>Rosario Suárez</h1>
Selector class Si queremos aplicar un mismo estilo a varios elementos, podemos utilizar el selector class. Para ello definimos un estilo de la forma:
.nombreclass {
propiedad1: valor;
propiedad2: valor;
propiedadN: valor;
}
Donde nombre class es el atributo asignado al atributo class de los elementos HTML. La definición comienza en un punto. Por lo tanto podemos añadir las siguientes definiciones al fichero llamado estilos.css
.elementoimpar {
background: black;
color: white;
}
.elementopar {
background: white;
color: black;
}
y modificar el documento HTML de la siguiente forma:
<li class=»elementoimpar»>… <li class=»elementopar»>… y así sucesivamente. Al contrario del elemento id pueden existir varios elementos con el mismo nombre asignado al atributo dentro de la misma página, por lo que esta opción es muy utilizada.
Los documentos CSS permiten incluir comentarios entre los símbolos /* y */, como en el siguiente ejemplo:
/* Esto es un comentario que será ignorado por el navegador */