En este post veremos otro de los fundamentos del Css, los selectores. Los selectores nos permiten asignar estilos para cada sección y elemento de nuestra web; sería muy conveniente que antes de aplicarle estilos a nuestro sitio web, lo tuviéramos todo bien planificado porque como ya comenté en el primer post de esta serie, a veces los estilos Css pueden dar resultados imprevistos, así que repito: es muy conveniente que tengamos la estructura de nuestro sitio bien planificada de antemano (por el bien de vuestra salud mental hehehe).
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:
* {
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 sea aplicable 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 Css muy utilizados.
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 {
atributo 1;
atributo 2;
etc;
}
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, a si que se 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 ( , ) de la siguiente manera:
h1, h2, h3 {
atributo1;
atributo2;
atribtuo3;
etc;
}
Para una de estilo compleja, es posible agrupar las propiedades comunes de varios elementos en una única regla Css y posteriormente definir las propiedades específicas de esos mismos elementos. Por ejemplo:
h1, h2, h3 {
atributo1;
atributo2;
atributo3;
}
h1 { atributo4 }
h2 { atribto5 }
Padres, hijos y hermanos.
Cuando un elemento está contenido entre las etiquetas de otro se dice que su hijo; a su vez este puede tener otros elementos hijos haciendo una estructura de árbol.Todos los hijos directos de un elemento son hermanos. Esto nos permite poder hacer selecciones de elementos en grupo para aplicarles estilo.
Si imaginamos que la etiqueta <html>es el tronco del árbol, sus ramas principales <head>y <body> son sus hijos. Ambas etiquetas son hijos directos de <html>; <head> y <body> son hermanos. Y asimismo dentro de <head> y sobre todo de <body> irán otros elementos hijos y estos a su vez, podrían tener otros elementos hijos según la complejidad de la web. Este pequeño galimatías y las propiedades de herencia de Css se pueden combinar si usan sabiamente y se puede liar parda si no se usan tan sabiamente; pero eso lo veremos mas en profundidad en próximos post.
Selector descendente.
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es
descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del
otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que
se encuentren dentro de un elemento <p> :
p span { color: red; }
Si el código Html de la página es el siguiente:
<p>
...
<span>texto1</span>
...
<a href="www.ejemplo.com">...<span>texto2</span></a>
...
</p>
No importa en que punto esté el elemento <span> se le aplicará el color rojo.
Los selectores descendentes son similares a selectores hijos, pero no requieren que la relación entre los elementos coincidentes sea estrictamente entre padres e hijos o dicho de otro modo, no tienen que ser "hijo directo" de otro. La única condición es que un elemento debe estar dentro de otro elemento, sin importar lo profundo que se encuentre.
Selector de clase.
Estos selectores y los de ID son los mas utilizados. 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 aplica.
Si tenemos el siguiente código:
<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>
Y el Css correspondiente:
.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.
Selectores de ID.
El selector de ID permite seleccionar un elemento de la página a través del valor de su
atributo Html id. La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla ( # ) en vez del punto ( . ) como prefijo del
nombre de la regla CSS por ejemplo:
#destacado { color: red; }
La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con
Html y no con CSS. Como se sabe, en una misma página, el valor del atributo id debe
ser único, de forma que dos elementos diferentes no pueden tener el mismo valor de id .
Sin embargo, con el atributo class muchos elementos Html diferentes pueden compartir el mismo valor para su atributo class .
De esta forma, la recomendación general es la de utilizar el selector de ID cuando se
quiere aplicar un estilo a un solo elemento específico de la página y utilizar el selector de
clase cuando se quiere aplicar un estilo a varios elementos diferentes de la página
Html.
Combinando selectores básicos.
Por lo general usareis estos selectores básico a la hora de programar vuestras webs, sobre todos los dos últimos, y en vez de enrollarme demasiado os pongo un ejemplo práctico.
En la plantilla que use en el post anterior de esta serie tenemos este párrafo en su hoja de estilos CSS (os recuerdo que podéis descargarla en este enlace y ver su hoja CSS en este otro):
/* Content */
#content {
float: left;
width: 532px;
}
.post {
padding: 0 0 20px 0;
}
.title {
margin: 0;
border-bottom: 2px solid #4A3903;
}
.byline {
margin: 0;
}
.meta {
border-top: 1px solid #4A3903;
text-align: right;
color: #646464;
}
.meta a {
padding-left: 15px;
background: url(images/img06.gif) no-repeat left center;
font-weight: bold;
}
Y bueno con esto y lo que vimos en el artículo anterior ya podéis probar a crear vuestras hojas Css sencillas para vuestra web o si no, probar a editar alguna hoja de estilos gratuita que descarguéis de internet.
No hay comentarios:
Publicar un comentario