Curso fácil de HTML5 y CSS – 7º: Selectores básicos CSS

Curso fácil de HTML5 y CSS – 7º: Selectores básicos CSS

publicado en: Diseño web | 2

En esta ocasión nos toca conocer cuales son los selectores básicos que nos ayudarán a aplicar los estilos CSS.

Selectores básicos

Recordemos que los selectores sirven para referenciar el elemento al que vamos a aplicar el estilo o estilos CSS.

Existen tres tipos básicos:

– Selector de tipo de elemento

– Selector de id

– Selector de clase

Selector de tipo de elemento

Selecciona los elementos basándose en su tipo, es decir en su etiqueta. Si por ejemplo queremos aplicar unos estilos a todos los elementos h2 del documento, el selector sería «h2». Es el método que utilizamos en los ejemplos de los capítulos anteriores.

h2 {
    color: blue;
    font-size: 40px;
}

En el ejemplo de arriba estaríamos dándole color azul y un tamaño de 40px a todos los elementos <h2> del documento.

Selector de id

El selector id es ideal para seleccionar un solo elemento ya que utiliza el atributo «id». Y probablemente estarás pensando . .  ¿cual es el atributo id?, pues ahora vamos a verlo.

Si recordamos el capítulo 3, los atributos iban dentro de las etiquetas HTML, y añadían información a los elementos. Cuando utilizamos una etiqueta id en un elemento estamos dándole un nombre único que lo identifique. Por ejemplo, si queremos identificar un párrafo en concreto con el nombre «parrafo_1», lo haríamos con el atributo id.

<!DOCTYPE html>
<html>
       <head>
              <style>
                    ....
              </style>
       <head>
       <body>
              <p id="parrafo_1">Este es el párrafo uno</p>
              <p>Este es el párrafo dos</p>
              <p>Este es el párrafo tres</p>
       </body>
</html>

// 7.1.

De esta manera vamos a poder referirnos a ese párrafo y solo a ese, siempre que lo necesitemos.

NOTA:

Hay que tener cuidado de no utilizar el mismo valor id en más de un elemento.

Siguiendo con el ejemplo del párrafo con el id «parrafo_1», vamos a aplicarle un estilo utilizando como selector su id precedido por el carácter # (almohadilla o numeral).

#parrafo_1 {
       color: red;
}

Si probamos a añadir la regla CSS al ejemplo 7.1 a través de su etiqueta <style> podremos ver como el único párrafo afectado será el identificado como «parrafo_1».

Selector de clase

En este caso el selector funciona a la inversa, primero crearemos una regla con un nombre específico, por ejemplo «clase_1» y a continuación aplicaremos esta clase a cualquier elemento HTML a través del atributo «class». Vamos con ello.

.clase_1 {
       color: green;
}

Si nos fijamos en el ejemplo, a la hora de crear la regla, el nombre de la clase va precedido por un punto «.».

Vamos a aplicar ahora la clase a uno de los párrafos. Para ello añadiremos a la etiqueta <p> el atributo «class» con el valor «clase_1».

<!DOCTYPE html>
<html>
       <head>
              <style>
                    .clase_1 {
                           color: lightgreen;
                    }
              </style>           
       <head>
       <body>
              <p>Este es el párrafo uno</p>
              <p class="clase_1">Este es el párrafo dos</p>
              <p>Este es el párrafo tres</p>        
       </body>
</html>

// 7.2.

Como se puede ver en el código superior, a la hora de darle valor al atributo «class», el nombre de la clase no lleva punto.

NOTA:

La principal virtud de este método es que una misma clase puede ser aplicada a varios elementos al mismo tiempo.

Existen más tipos de selectores, pero los veremos más adelante. De momento nos quedamos con estos que son los básicos y que nos van a permitir aplicar estilos a cualquier elemento HTML.

En el próximo capítulo veremos cómo HTML clasifica los elementos en dos grupos, inline (en línea) y block (en bloque).


Ir a

 

Share on LinkedInShare on FacebookShare on Google+Tweet about this on Twitter

2 Respuestas

  1. Luis Guzman

    Muy buen curso.

    • Javier Pérez de Arrilucea

      Muchas gracias por tu comentario Luis, me alegro que te sea de ayuda.
      Saludos

Dejar una opinión