NBBN






INGENIERÍA EN SISTEMAS COMPUTACIONALES

PROFESOR: Héctor Jesús Cetina Cordero

ALUMNO: Jesús Ricardo Cobá Poot

MATERIA: Programación Web

GRUPO:
7 SF




ATRIBUTOS Y PROPIEDADES CSS

Selectores
Para crear diseños web profesionales, es imprescindible conocer y dominar los selectores de CSS. Como se vio en el capítuloanterior, una regla de CSS está formada por una parte llamada "selector" y otra parte llamada "declaración".
La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página.
A un mismo elemento HTML se le pueden aplicar varias reglas CSS y cada regla CSS puedeaplicarse a un número ilimitado de elementos. En otras palabras, una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas.
El estándar de CSS 2.1 incluye una docena de tipos diferentes de selectores, que permiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de una página web.
No obstante, la mayoría depáginas de los sitios web se pueden diseñar utilizando solamente los cinco 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 selectoruniversal 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.
No obstante, sí que se suele combinar con otros selectores y además, forma parte de algunos hacks muy utilizados, como se verá más adelante.
Selector de tipo o etiqueta
Selecciona todos los elementos de lapágina cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:
p {
...
}
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 deuna 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 lasiguiente 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 enprimer 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; }
Selector descendente
Selecciona los elementos que se...