Loading...

Introducción a CSS 2.1.2. Selector de tipo o etiqueta




Introducción a CSS
2.1.2. Selector de tipo o etiqueta
Selecciona todos los elementos de la página cuya etiqueta HTML
coincide con el valor del selector. El siguiente ejemplo selecciona
 todos los párrafos de la página:
p { ... }
Introducción a CSS Capítulo 2. Selectores
Para utilizar este selector, solamente es necesario indicar el nombre
de una etiqueta HTML (sin los caracteres < y >) correspondiente a los
 elementos que se quieren seleccionar.
El siguiente ejemplo aplica diferentes estilos a los titulares y a los
 párrafos de una página HTML:
h1 {color: red; }
h2 { color: blue; } p { color: black;}
Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se
 pueden encadenar los selectores. En el siguiente ejemplo, los títulos
 de sección h1, h2 y h3 comparten los mismos estilos: h1 {color: #8A8E27;
font-weight: normal; font-family: Arial, Helvetica, sans-serif; }h2 {
color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica,
sans-serif; } h3 {color: #8A8E27; font-weight: normal;
font-family: Arial, Helvetica, sans-serif;}
En este caso, CSS permite agrupar todas las reglas individuales en una
 sola regla con un selector múltiple. Para ello, se incluyen todos los
 selectores separados por una coma (,) y el resultado es
que la siguiente regla CSS es equivalente a las tres reglas anteriores:
h1, h2, h3 {color: #8A8E27; font-weight: normal;font-family: Arial,
Helvetica, sans-serif;}
En las hojas de estilo complejas, es habitual agrupar las propiedades
comunes de varios elementos en una única regla CSS y posteriormente
 definir las propiedades específicas de esos mismos elementos. El
 siguiente ejemplo establece en primer lugar las propiedades comunes de
los títulos de sección (color y tipo de letra) y a continuación, establece
el tamaño de letra de cada uno de ellos: h1, h2, h3 {color: #8A8E27;
font-weight: normal; font-family: Arial, Helvetica, sans-serif;}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
Fuente: Introducción a CSS
Javier Eguíluz Pérez