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