Saltar la navegación

Métodos de Referencias

En la Anatomía de un estilo CSS indicamos que el selector es una parte de la regla de CSS que representa al elemento o elementos del documento HTML al cual queremos afectar con la regla de estilo.  Existen tres métodos para referenciar el selector, es decir, seleccionar cuáles elementos HTML serán afectados por las reglas CSS:

Métodos:

Por Clave

  • Afecta a todos los elementos del documento que tienen la clave. 

mis_estilos.css


p { font-size: 20px }

mi_pagina.html

....
<body>
     <p>Mi texto</p>
</body>
....

Por Atributo id

  • Es más específico que el método anterior. Se puede referenciar una etiqueta específica.
  • Importante!: El id es único por elemento.
  • La regla debe ser declarada con el símbolo #.
  • Ejemplo
mis_estilos.css 
....
#texto1 { font-size: 20px } para el código
....
mi_pagina.html 
....
<body>
     <p id=”texto1”>Mi texto</p>
</body>
....

Por Atributo class

  • El atributo class debe ser declarado en el elemento que queremos asignar el estilo.
  • Es un método más flexible que los anteriores ya que se puede replicar el estilo con solo asignar la misma clase a varios elementos.

Ejemplo:

mis_estilos.css 
....
.miclase { font-size: 20px }
....
mi_pagina.html 
....
<body>
     <p class=”miclase”>Mi texto</p>
     <span class=”miclase”>Otro texto</span>
</body>
....

Actividad de Consulta

Consulta sobre los métodos de referencia de CSS3:

  • Selector de atributo
  • pseudo clases