Martes, 21 Octubre 2014 00:00

CSS: Selectores Básicos

Valora este artículo
(8 votos)

Selectores CSS - Cabezal del artículo

Material de apoyo para los cursos introductores de diseño web en HTML y CSS.

Hojas de estilo CSS

Selectores Básicos

El Selector universal (*)

Aplica las propiedades en él definidas a todos los elementos definidos en la página web a la que se asocie este estilo.

Ejemplo:

* {margin: 0;
padding: 0; }

asignará márgenes y rellenos con valor cero para todas aquellos elementos html a los que no se les asocie otro estilo.

Selectores de etiqueta

Es posible definir estilos a una etiqueta HTML de la siguiente manera:

h1 {margin: 0 0 0.5em; 
font-size: 1.8em;
line-height: 1.2;
}

con lo que habremos definido valores de márgenes de 0 para los lados superior, derecho e inferior, respectivamente, y de 5em para el márgen lateral izquierdo; tamaño de fuente igual a 1.8em (valor relativo respecto al tamaño heredado) y un interlineado de 120% para las etiquetas h1 que aparezcan en las páginas html a las que se le asocie este estilo.

Nota: Las definiciones de estilos realizadas sobre etiquetas tienen un "peso específico" = 1.

También es posible definir estilos a más de una etiqueta HTML simultáneamente de la siguiente forma:

h1, h2 {margin: 0 0 0.5em; 
font-size: 1.8em;
line-height: 1.2;
}
h2 {margin: 0 0 0.5em; 
font-size: 1.6em;
}

Así habremos definido valores de márgenes de 0 para los lados superior, derecho e inferior, respectivamente, y de 5em para el márgen lateral izquierdo; tamaño de fuente igual a 1.8em (valor relativo respecto al tamaño heredado) y un interlineado de 120% para las etiquetas h1 y h2 que aparezcan en las páginas html a las que se le asocie este estilo. Mediante la siguiente definición de estilos, alteramos el tamaño de fuente para h2 a 1.6em usando la regla de resolución de conflictos de estilos que dice que, a definiciones de igual "peso específico" primarán los valores que se definan en última instancia.

Selector descendente

Las definiciones mediante selectores descendentes permiten definir estilos mediante el posicionamiento relativo que un elemento tenga respecto a otro en el html. En este caso, a los elementos que se encuentran dentro de otros elementos en el html.

Ejemplo:

p span { font-weight: bold; }

mostrará en negrita cualquier texto escrito dentro de la etiqueta span colocada dentro de la etiqueta p, del siguiente modo en el html:

<p>En este párrafo de texto <span>este se verá en negritas</span> una vez que codifiquemos correctamente nuestros códigos html y css y éstos sean renderizados por un agente de usuario que soporte estos códigos correctamente.</p>

Nota (i): Es posible trabajar con más de dos elementos para definir estilos mediante selectores descendentes. Así:

div p span {text-decoration: underline; } 

mostrará en negrita cualquier texto escrito dentro de la etiqueta span colocada dentro de la etiqueta p, siempre y cuando este párrafo esté contenido dentro de algún div en el html:

<div><p>En este párrafo de texto <span>este se verá en negritas</span> una vez que codifiquemos correctamente nuestros códigos html y css y éstos sean renderizados por un agente de usuario que soporte estos códigos correctamente.</p></div>
<p>Sin embargo, en este párrafo de texto, según la definición CSS anterior, ningún texto se vería en negrita, <span>ni siquiera éste</span> ya que este párrafo no está contenido dentro de una etiqueta div en este ejemplo.</p>

Nota (ii): También es posible realizar definiciones mediante descendencias utilizando el selector universal como reemplazo de cualquier etiqueta. Los siguientes ejemplos permiten visualizar mejor esta situación:

p a {color: red;}

La definición anterior haría que, una vez renderizado el siguiente código html, ambos enlaces se mostraran en rojo:

<p>Visitar el sitio de <a href="http://www.formaciongrafica.net">Formación Gráfica</a>.</p>
<p>Visitar <em>el sitio de <a href="http://www.formaciongrafica.net">Formación Gráfica</a></em>.</p>

 Sin embargo, si hubiésemos definido un estilo del tipo:

p * a {color: red;}

hubiese asignado el color rojo únicamente al segundo enlace que es, en el ejemplo, el único de los dos que se encuentra dentro de un elemento cualquiera (en este caso un em) que a su vez está dentro de un p. En el caso del primer enlace está directamente dentro de la etiqueta p, faltando otra etiqueta cualquiera que tome el lugar del selector universal en la definición CSS.

Nota: Por cada etiqueta utilizada en una definición mediante selectores descendentes, el peso específico de dicha definición aumenta en 1.

Selectores de clase

Mediante selectores de clase se pueden definir estilos genéricos, que luego pueden ser aplicados a una o más de una etiqueta cualquiera dentro del html, cuyo atributo class coincida con el selector.

Ejemplo:

.especial {border: 1px solid red; }

permite asignar valores de 1px de espesor, estilo sólido y color rojo para los cuatro lados de la etiqueta de bloque a la que le asignemos esta clase. A modo de ejemplo, de las siguientes cuatro líneas de una supuesta página html, sólo el párrafor definido en la segunda y la lista de más abajo tendrán dicho aspecto en sus bordes:

<p>Este párrafo no tendrá bordes visibles, según la definición anterior.</p>
<p class="especial">Este segundo párrafo sí tomará los valores de la definición CSS anterior.</p>
<ul class="especial">
<li>En este caso, por tratarse de una etiqueta de bloque al que se le asoció la clase "especial" también tomará los valores definidos más arriba.</li> </ul>

Nota (i): En un estilo definido mediante selectores de clase el "peso específico" = 10.

Nota (ii): Es posible combinar los selectores de etiqueta conjuntamente con selectores de clase para generar definiciones más acotadas en su alcance (y más específicas). Así:

p.aviso {
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda;
}

definirá un estilo válido únicamente para párrafos a los que se le haya asignado la clase "aviso". En el siguiente ejemplo:

<h1 class="aviso">Título de la página</h1>
<p class="aviso">Solo este párrafo tendrá un relleno igual a 0.5em en sus cuatro lados, con los valores de borde y color de fondo arriba asignados por el estilo generado.</p>
<p>Este párrafo no recibe dichos valores por no tener asignada la clase "aviso", así como tampoco lo hace el h1 que inicia este ejemplo, por no tratarse de un párrafo.</p>

 únicamente el primer párrafo anterior será afectado por el estilo definido.

 Nota (iii): En este tipo de definiciones combinadas el peso específico aumenta en 1 y en 10 por cada etiqueta usada y por cada clase, respectivamente, que se haya utilizado. El ejemplo anterior tiene un peso específico de 11.

Selectores de ID

La sintaxis utilizada es la misma que para los selectores de clase, con las siguientes salvedades:

  • Se utiliza el símbolo numeral (#) en lugar del punto (.) para referenciarlos.
  • Sólo se pueden asignar una vez dentro de cada código html.
  • Su peso específico, en lugar de valer 10, vale 100. Se trata de definiciones de estilos muy fuertes.

Ejemplo: Según el siguiente código CSS y HTML:

#especial {color: red;}
<h1>Título de la página</h1>
<p id="especial">Este párrafo se visualizará con tipografía en color rojo.</p>
<p>Este segundo párrafo no tiene asignado el color de texto en rojo según la definición CSS realizada al inicio de este ejemplo.</p>

Nota: Al igual que los selectores de clase, también se puede restringir el alcance de las definiciones mediante la combinación con otros selectores, tanto de etiqueta como de clase o de ID.

En el siguiente ejemplo sólo se aplicará la regla CSS a los párrafos que tengan un atributo id igual al indicado:

p#aviso {
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda;
}
<p>Este párrafo no recibirá las propiedades del estilo arriba definido.</p>
<p id="aviso">En cambio éste párrafo sí.</>

Como se explica en el propio ejemplo, únicamente el segundo párrafo recibe las propiedades de relleno, bordes y color de fondo indicados en el estilo definido como p#aviso. El peso específico de esta definición es igual a 101 (100 por el ID "aviso" y 1 por la inclusión de la etiqueta p).

Algunos ejemplos adicionales:

Ejemplo 1: Definición de estilos para elementos que tienen asignada la clase "especial" y se encuentran dentro de otro cuya clase es "aviso":

.aviso .especial {...}

Peso específico del estilo definido: 20.

Ejemplo 2: Estilo para un enlace cuyo id sea ”inicio”, que a su vez se se encuentre dentro de un ítem de lista al que se le haya asignado la clase ”destacado” y que forme parte de una <ul> cuyo id sea ”menuPrincipal”:

ul#menuPrincipal li.destacado a#inicio {... }

Peso específico de esta definición: 213 (100 por cada ID, 10 por la clase, y 1 por cada etiqueta html que forman parte del estilo).

Nota Importante: No confundir las siguientes notaciones:

  1. p, .aviso {...} -> Son definiciones de estilos definidas simultáneamente para parrafos y la clase "aviso".
    Peso específico de ambas definiciones: 1 y 10, respectivamente.
  2. div.aviso {...} -> Aplica a todas las etiquetas div con atributo class="aviso"
    Peso específico de la definición: 11
  3. div .aviso {...} -> Aplica a cualquier elemento con la clase "aviso" asignada, que a su vez se encuentren dentro de un div.
    La diferencia entre las definiciones 1 y 2 radica en el espacio presente entre los elementos usados en la segunda definición.
    Peso específico de la definición: 11
  4. div#especial -> Aplica a cada div con id="especial" (uno por cada html)
    Peso específico de la definición: 101
  5. div #especial -> Aplica a cada elemento con id="especial" que esté definido dentro de un div en el html (uno por cada html)
    Peso específico de la definición: 101

En una próxima entrada veremos algunos ejemplos avanzados para la definición y uso de selectores CSS.

Puede utilizar el formulario de comentarios que se encuentra al pie de esta entrada para dejar sus consultas y observaciones sobre este tema.

Gracias y saludos para todos!
Plácido Luna

Referencias:

 

Visto 2744 veces Modificado por última vez en Martes, 21 Octubre 2014 22:01