3.4 Selectores
Selectores básicos
Selector universal
Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS):
* { margin: 0; padding: 0; }
El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.
La especificación CSS aporta varios tipos de selectores:
Selector universal
Selector de tipo o etiqueta
Selector descendente
Selector de clase
Selector de ID
Selector de hijos
Selector de atributos
Pseudo elementos
Selector universal
Es muy útil para inicializar las propiedades de todas las marcas HTML. Utilizamos el carácter asterisco para hacer referencia a este selector.
* { color:#00; font-family:'Cuprum',arial,serif; font-size: 18px; margin:0px; padding:0px; }
Selector de tipo o etiqueta.
Se usa para aplicar estilos en las etiquetas HTML. Es muy útil para establecer un patrón común de comportamiento, es habitual tener un estilo base para etiquetas como los p (párrafos), div (cajas), h1 (titular nivel1), h2 etc. que luego se ven sobrescritos por otros estilos en casos concretos (como por ejemplo un estilo para los h2 de un artículo y otro para los h2 de los bloques).
a { color: #0000cc; text-decoration: none; } abbr, acronym { border-bottom: .1em dotted; color: purple; cursor: help; text-decoration: underline; } }
Selector descendente.
Permite establecer un estilo para una etiqueta que se encuentre dentro de otra. Nos permite tener diferentes estilos para las mismas etiquetas HTML según su jerarquía dentro del documento
table thead, tfoot { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-weight: bold; text-align: center; font-size:18px; } ol li { margin: 0 0 5px 0; font-size: 95%; text-align:justify; line-height: 150%; } ul li { margin: 0 0 5px 0; font-size: 95%; line-height: 150%; text-align:justify; }
Selector de clase Si se considera el siguiente código HTML de ejemplo:
<body> <p>Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body>
¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector universal (*) no
se puede utilizar porque selecciona todos los elementos de la página. El selector de tipo
o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos. Por
último, el selector descendente (body p) tampoco se puede utilizar porque todos los
párrafos se encuentran en el mismo sitio. Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página
consiste en utilizar el atributo class de HTML sobre ese elemento para indicar
directamente la regla CSS que se le debe aplicar:
<body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body>
A continuación, se crea en el archivo CSS una nueva regla llamada destacado con todos
los estilos que se van a aplicar al elemento. Para que el navegador no confunda este
selector con los otros tipos de selectores, se prefija el valor del atributo class con un
punto (.) tal y como muestra el siguiente ejemplo:
.destacado { color: red; }
El selector .destacado se interpreta como "cualquier elemento de la página cuyo atributo
class sea igual a destacado", por lo que solamente el primer párrafo cumple esa condición. Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con
los selectores de ID que se verán a continuación. La principal característica de este
selector es que en una misma página HTML varios elementos diferentes pueden utilizar
el mismo valor en el atributo class:
<body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a>
accumsan...</p> <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p> </body>
Los selectores de clase son imprescindibles para diseñar páginas web complejas, ya que
permiten disponer de una precisión total al seleccionar los elementos. Además, estos
selectores permiten reutilizar los mismos estilos para varios elementos diferentes. A continuación se muestra otro ejemplo de selectores de clase:
.aviso { padding: 0.5em; border: 1px solid #98be10; background: #f6feda; } .error { color: #930; font-weight: bold; } <span class="error">...</span> <div class="aviso">...</div>
El elemento <span> tiene un atributo class="error", por lo que se le aplican las reglas
CSS indicadas por el selector.error. Por su parte, el elemento <div> 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:
<body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a>
accumsan...</p> <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p> </body>
¿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 <p> 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 class="especial destacado error">Párrafo de texto...</p>
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 class="especial destacado error">Párrafo de texto...</p>
Si un elemento dispone de un atributo class con más de un valor, es posible utilizar
un selector más avanzado:
.error { color: red; } .error.destacado { color: blue; } .destacado { font-size: 15px; } .especial { font-weight: bold; } <p class="especial destacado error">Párrafo de texto...</p>
En el ejemplo anterior, el color de la letra del texto es azul y no rojo. El motivo es
que se ha utilizado un selector de clase múltiple .error.destacado, que se interpreta
como "aquellos elementos de la página que dispongan de un atributo class con al
menos los valores error y destacado".
Pagina:http://librosweb.es/libro/css/capitulo_2/selectores_basicos.html
video:https://www.youtube.com/watch?v=Dq4Zk2_xqBA
No hay comentarios.:
Publicar un comentario