Loading...

Introducción a CSS El elemento tiene un atributo


Introducción a CSS
El elemento tiene un atributo class="error", por lo que se le aplican las reglas CSS indicadas por el selector .error. Por su parte, el elemento
tiene un atributo
class="aviso", por lo que su estilo es el que definen las reglas CSS del selector .aviso.
En ocasiones, es necesario restringir el alcance del selector de clase. Si se considera de nuevo el ejemplo anterior:
Lorem ipsum dolor sit amet...

Nunc sed lacus et est adipiscing accumsan...

Class aptent taciti sociosqu ad litora...

¿Cómo es posible aplicar estilos solamente al párrafo cuyo atributo class sea igual a destacado?
Combinando el selector de tipo y el selector de clase, se obtiene un selector mucho más
específico: p.destacado { color: red }
El selector p.destacado se interpreta como "aquellos elementos de tipo
que dispongan de un atributo class con valor destacado". De la misma forma, el selector a.destacado solamente selecciona los enlaces cuyo atributo class sea igual a destacado.
De lo anterior se deduce que el atributo .destacado es equivalente a *.destacado, por lo que todos los diseñadores obvian el símbolo * al escribir un selector de clase normal.
No debe confundirse el selector de clase con los selectores anteriores:
/* Todos los elementos de tipo "p" con atributo class="aviso" */
p.aviso { ... }
/* Todos los elementos con atributo class="aviso" que estén dentro
de cualquier elemento de tipo "p" */
p .aviso { ... }
/* Todos los elementos "p" de la página y todos los elementos con
atributo class="aviso" de la página */
p, .aviso { ... }
Por último, es posible aplicar los estilos de varias clases CSS sobre un mismo elemento. La sintaxis es similar, pero los diferentes valores del atributo class se separan con espacios en blanco. En el siguiente ejemplo:
Párrafo de texto...

Al párrafo anterior se le aplican los estilos definidos en las reglas .especial, .destacado y
.error, por lo que en el siguiente ejemplo, el texto del párrafo se vería de color rojo, en negrita y con un tamaño de letra de 15 píxel:
.error { color: red; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }
Párrafo de texto...

Fuente:  www.librosweb.es
Introducción a CSS
Javier Eguíluz Pérez