CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 63
Visitas el mes pasado: 98
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
Los selectores pueden agruparse para formar nuevos tipos de selectores. De esta manera podemos seleccionar varios tipos de etiquetas al mismo tiempo o hacer una selección más específica de algunas etiquetas.
Cuando se quiere apicar el mismo estilo a varias etiquetas distintas, no es necesario escribir una regla CSS para cada etiqueta, sino que podemos combinar los selectores para que la misma declaración pueda aplicarse a varios selectores al mismo tiempo, para ello basta con escribir los selectores separados por comas: Ejemplo:
h1, h2, h3 { text-align: center; color: navy; }
En este ejemplo estamos aplicando el estilo tanto a las etiquetas h1, como a las etiquetas h2, como a las etiquetas h3, con lo cual en una sóla regla estamos aplicando el estilo a tres tipos de etiquetas diferentes.
Podemos combinar todo tipo de selectores, siempre que vayan separados por comas; ejemplo:
#seccion1, .tipo1, h4 { font-style: italic; }
En este ejemplo se mostrarán en cursiva todas las etiquetas que
tengan el atributo id="seccion1"
; todas las etiquetas con el
atributo class="tipo1"
y todas las etiquetas h4
Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre de dicho elemento, es decir cuando está dentro del otro elemento. El selector descendente selecciona los elementos descendentes que se encuentran dentro de otras etiquetas. ejemplo:
p em { text-decoration: underline; }
En este ejemplo se seleccionan todas las etiquetas em
que
estén contenidas dentro de las etiquetas p
, pero no afectará
a las etiquetas em
que no estén contenidas en una etiqueta
p
En el selector descendente se escriben todos los elementos seguidos, separados unicamente por espacios. El elemento afectado sólamente es el último, y los demás indican dentro de qué etiquetas está el elemento afectado. Podemos combinar más de dos selectores para formar un selector descendente, pero el elemento afectado sólo será el último. ejemplo:
#sección1 .tipo2 p span { color: red; }
En este ejemplo sólo se verán afectados los elementos con la etiqueta span, que estén contenidos en una etiqueta p, y a su vez estén contenidos en la etiqueta con la clase tipo2 y a su vez dentro de la etiqueta con ld sección1.
Una caracteréstica es que no hace falta ser descendiente directo para que el elemento esté seleccionado, así por ejemplo el selector
p span { font-family: verdana; }
afectará por igual a las etiquetas span de las dos líneas siguientes:
<p>texto en<span>letra verdana</span></p>
<p><em>texto en<span>letra verdana</span></em></p>
El selector descendente es uno de los más usados, ya que permiten mejorar la precisión de los otros selectores. Así, utilizando el selector descendente es posible aplicar diferentes estilos a elementos del mismo tipo.
Este selector es un selector de etiqueta, que ademas restringe su aplicación a la condicion de llevar el atributo de clase o de id que se le indica. Ejemplo:
p.tipo1 { border: 1px solid blue; }
El selector selecciona únicamente a las etiquetas p
que lleven el atributo
class="tipo1"
: <p class=tipo1">...<p>
Obsérvese que no es lo mismo el selector p.tipo1
que el selector
p .tipo1
(con un espacio entre medio), ya que el segundo es un
selector descendente, que indicaría que se seleccionan las etiquetas incluidas
dentro de <p>
, que lleven el atributo class="tipo1"
;
pero no a la propia etiqueta <p>
, aunque lleve el atributo.
De idéntica manera este selector se puede aplicar con el atributo id
:
ejemplo:
p#sección1 { font-family: arial; }
En este caso el selector afectaría a la etiqueta
<p id="sección1"> ...</p>
La siguiente página de ejemplo ha utilizado código CSS ya conocido, incluyendo algunos de los selectores vistos anteriormente:
Si quieres ver el código de la página del enlace anterior, bien sea por echarle un vistazo, o por copiarte la página, pulsa en el siguiente enlace:
En la siguiente página veremos otros selectores que aunque su uso no es muy corriente, a veces hay que tenerlos en cuenta.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com