Logotipo de Aprende Gratis.

CSS - Lección 9: Identificadores y clases

Hemos visto como aplicar un diseño determinado a cada elemento de la página web generada con código html. Aunque esto está bien para el diseño de nuestros sitios web, no es suficiente.

Imagina que creas un artículo constituído por párrafos; el primer párrafo tiene que ir en negrita porque es un resumen de todo el desarrollo del artículo. Con lo que sabemos hasta ahora, no podríamos ser capaces de implementar un diseño así.

Como sólo podemos hasta ahora apuntar a la etiqueta <p> por medio del selector p, no podemos aplicar diseño más que ha todo el artículo en su conjunto.

Pero existe una solución a este problema. En realidad, se puede ampliar la sintaxis de los selectores para diferenciar un determinado párrafo (u otra etiqueta html), o difenrenciar un grupo de párrafos de otro (u otras etiquetas).

Los identificadores

Con los identificadores podemos aplicar un diseño exclusivo para una determinada etiqueta dentro de las que haya en nuestro código html. Por ejemplo, si queremos poner en negrita el primer párrafo, bastaría con identificar con un nombre a la etiqueta <p> del primer párrafo y añadir un identificador al selector del código css.

Para identificar un determinado elemento en el código html, necesitamos darle un nombre por medio del atributo id. Posteriormente, necesitamos acceder a este elemento desde el código css para aplicarle el diseño. Esto se hace a través del selector: tenemos que escribir el nombre de la etiqueta seguido del símbolo # y del nombre que pusimos en el atributo id.

Veamos un código de ejemplo:

Código html:

<p id="EnNegrita">
Párrafo 1</p> <p>Párrafo 2</p> <p>Párrafo 3</p>
Código css:

p#EnNegrita {
  font-weight:bold;
 }

Observa como hemos incluído el atributo id en el código html; y como hemos pasado su valor al código css, incluyéndolo en el selector. Al ser un identificador tenemos que anteponerle la almohadilla para indicarlo a la hoja de estilos. El código anterior nos habilitaría lo siguiente en el navegador:

Imagen que muesstra lo que representaría el navegador con el código anterior.
Figura 12.  Con los identificadores podemos aplicar
un diseño diferente entre párrafos.

Como ves, ahora podemos darle un diseño exclusivo a un determinado elemento de nuestra página web; como el primer párrafo, o el último. Pero no hay necesidad de limitarnos a los párrafos; ya que podemos aplicar los identificadores a cualquier elemento, como una tabla o una lista.

Las clases

Aunque los selectores nos ofrecen más flexibilidad a la hora de diseñar, probablemente te habrás dado cuenta que, por sí solos, no son suficientes: ¿qué pasa si necesito agrupar distintos grupos de párrafos con estilos diferentes? Para ello tenemos las clases.

Las clases son similares a los identificadores, aunque en vez de identificar a un solo elemento html, nos identifica a un grupo de elementos. Esto nos permite dar estilo a varios elementos de la nisma etiqueta dentro de una página.


Figura 13.  Con las clases podemos aplicar diseño
a elementos por grupos.

En la figura 13 podemos ver una conversación entre Julia y Juan. Para distinguirlos, se han puesto las frases de Juan en azul; y las de Julia en fucsia. Imagina hacer esto con identificadores, y más aun en conversaciones mucho más largas. Caeríamos en un proceso tedioso: darle un nombre direfente a cada párrafo de la conversación.

Con las clases es mucho más fácil, tan solo agrupamos los párrafos por los de Juan y por los de Julia. Así tan solo tenemos dos clases de párrafos: los de Julia y los de Juan. Lo que dice Juan lo etiquetamos como "juan" y lo que dice Julia lo etiquetamos como "julia". Veamos el código que implementa lo que muestra la figura 13:

Código html:

<p class="juan">
Hola, Julia.</p>

<p class="julia">
¿Qué tal?, Juan.</p>

<p class="juan">
Bien, estoy bien.</p>

<p class="julia">
¡Fantástico, me alegro!</p>
Código css:

p.juan {
  color:blue;
 }
 
p.julia {
  color:fuchsia;
 }

Para implementar clases, existen algunas diferencias respecto a la implementación de identificadores. En primer lugar se utiliza, en el código html, el atributo class para identificar un elemento. En el selector del código css, para pasar el valor del atributo class, ponemos un punto en vez de una almohadilla.


Ir a:


Aprende Gratis 2017 © Mario Raja | página web responsive.