Web.CSS.Identificando Elementos.
Se pueden identificar elementos HTML de forma que se le puedan dar estilos distintos en una página web. Existen 2 formas de identificar elementos:
ID. Identifica de forma inequívoca los elementos HTML de un página web y así darle estilos distintos. Un ejemplo:
...
<head>
<style type="text/css">
#azul {color:blue}
#rojo {color:red}
</style>
</head>
<body>
<h3 id="rojo">Este título es de color rojo</h3>
<p id="azul">Este texto es de color azul</p>
</body>
...
Los elementos que usen id, se deben referir a ellos en CSS mediante la almoadilla (#). Para identificar el elemento se añade la propiedad id en la etiqueta de apertura.
Clases. Sirve para identificar los elementos HTML de una página web y poder definir estilos distintos. Un ejemplo:
...
<head>
<style type="text/css">
.azul {color:blue}
.rojo {color:red}
</style>
</head>
<body>
<h3 class="rojo">Este título es de color rojo</h3>
<p class="azul">Este texto es de color azul</p>
<p class="azul">Este texto es también de color azul</p>
</body>
...
Los elementos que usen clases, se deben referir a ellos en CSS mediante el punto (.) Para identificar un elemento mediante clases se le añade la propiedad class en la etiqueta de apertura.
Vaya, parecen iguales. ¿Cual debo usar?¿Que diferencia hay entre una y otra?
La diferencia es que si se usa id, será único, ningún otro elemento podrá volver a usarlo, pero en cambio, si se utiliza clases, los nombres pueden repetirse y usarlos varias veces para darle el mismo estilo a otros elementos. Si se observa bien el ejemplo de las clases, se está utilizando la clase azul en dos elementos distintos.
Para saber cual usar, se debe pensar un poco y adelantarnos a los acontecimientos. Si se va a usar ese mismo estilo varias veces en la página, se utiliza la clase, en caso contrario pues se usa el id.
Un ejemplo:
<!DOCTYPE html>
<html>
<body>
<p><a href="#C1">Ir al capítulo 1</a></p>
<p><a href="#C2">Ir al capítulo 2</a></p>
<p><a href="#C3">Ir al capítulo 3</a></p>
<p><a href="#C4">Ir al capítulo 4</a></p>
<h2 id="C1">Capítulo 1</h2>
<p>Capítulo 1, todo el texto que de la gana poner</p>
<h2 id="C2">Capítulo 2</h2>
<p>Capítulo 2, todo el texto que de la gana poner</p>
<h2 id="C3">Capítulo 3</h2>
<p>Capítulo 3, todo el texto que de la gana poner</p>
<h2 id="C4">Capítulo 4</h2>
<p>Capítulo 4, todo el texto que de la gana poner</p>
</body>
</html>
Este ejemplo crea enlaces directos a los capítulos, de forma que cuando se le da un clic, se desplaza al capítulo en la página web.
- Se crea un id para identificar los encabezados de tipo 2 que haya.
- Para crear los enlaces, se debe poner en el propiedad href y como valor, la almodadilla y el nombre del id a donde se desplazará al hacer clic. Esto puede ser muy útil por ejemplo, para crear índices de una página.
