Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 185

Visitas el mes pasado: 417

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




3. Selectores (II)

3.2 Agrupación de selectores.

html

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.


Combinación de selectores

Cuando se quiere apicar los mismos estilos a varias etiquetas distintas, no es necesario escribir una regla 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


Selector descendente

Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre de dicho 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án los elementos afectados. 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.


Selector de etiqueta de clase

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:

Página de ejemplo


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:

Código de página de ejemplo






En la siguiente página veremos otros selectores que aunque su uso no es muy corriente, a veces hay que tenerlos en cuenta.

Selectores avanzados.







manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com