3.283 cursos gratis
6.262.191 alumnos
Publica tu curso gratis
Busca cursos gratis:
Estás aquí: mailxmail > Cursos de Informática > Programación > CSS práctico > Agrupación de selectores y declaraciones

CSS práctico

Autor: Ricardo Borillo
Curso:  4,36/5 4,36/5 (109 opiniones) |8259 alumnos|Fecha publicación: 10/09/2004

Capítulo 7:

 Agrupación de selectores y declaraciones

Normalmente, se da el caso en que dos elementos del documento HTML comparten la definición de la misma propiedad CSS. Estos elementos podemos declararlos de una forma extendida:

H1 {color: purple;}
H2 {color: purple;}
H3 {color: purple;}
H4 {color: purple;}
H5 {color: purple;}
H6 {color: purple;}

O utilizar la agrupación para conseguir una declaración más compacta (el resultado es el mismo en ambos casos):

H1, H2, H3, H4, H5, H6 {color: purple;}

Otros ejemplos de estructuras de agrupación que son equivalentes:

H1 {color: purple; background: white;}
H2 {color: purple; background: green;}
H3 {color: white; background: green;}
H4 {color: purple; background: white;}
B {color: red; background: white;}

H1, H2, H4 {color: purple;}
H2, H3 {background: green;}
H1, H4, B {background: white;}
H3 {color: white;}
B {color: red;}

H1, H4 {color: purple; background: white;}
H2 {color: purple;}
H3 {color: white;}
H2, H3 {background: green;}
B {color: red; background: white;}

Agrupación de declaraciones.- Podemos agrupar declaraciones cuando tenemos diferentes reglas que definen propiedades de un mismo elemento. Por ejemplo:

H1 {font: 18pt Helvetica;}
H1 {color: purple;}
H1 {background: aqua;}

Podemos redefirnirlo como:

H1 {font: 18pt Helvetica; color: purple; background: aqua;}

Los espacios en blanco serán ignorados, así que el navegador se fiará de la correcta estructura sintáctica de las reglas. Es por eso, que para una más sencilla visualización, podemos escribir las reglas CSS de esta forma:

H1 {
   font: 18pt Helvetica;
   color: purple;
   background: aqua;
}

Es una buena práctica terminar las declaraciones siempre con punto y coma (aunque no es obligatorio). Motivos:

-Te permite habituarte a terminar las declaraciones correctamente, que es uno de los errores más comunes.
-Si decides añadir una nueva declaración a la regla, no tiens porque preocuparte de cómo termina la anterior.
-Algumos navegadores antiguos pueden confundirse cuando las reglas no se terminan adecuadamente.

Combinaciones de agrupación de selectores y declaraciones.-

BODY {background: white; color: gray;}
H1, H2, H3, H4, H5, H6 {font-family: Helvetica, sans-serif;
color: white; background: black;}
H1, H2, H3 {border: 2px solid gray; font-weight: bold;}
H4, H5, H6 {border: 1px solid gray;}
P, TABLE {color: gray; font-family: Times, serif;}
PRE {margin: 1em; color: maroon;}

Capítulo siguiente - El atributo CLASS
Capítulo anterior - Reglas básicas
Recibe nuestras novedades
Al presionar "Recibir" estás dándote de alta y aceptas las condiciones legales de mailxmail

Hay 109 opiniones. Opina sobre este curso.


Cursos similares a CSS práctico


Cursos Valoración Alumnos Vídeo
PHP y MySQL. Aplicaciones Web: programación PHP I (quinta parte)
Programación de aplicaciones Web con PHP y MySQL. Ahora estudiaremos el Lenguaje de programación PHP. Aprende ahora las formas de escribir las etiquetas ... [02/12/08]
 3,50/5 1.076  
Bases de Datos en C#
El curso incluye el código necesario para acceder a las bases de datos y realizar consultas de selección y de acción.... [05/04/07]
 3,33/5 4.826  
La cultura infotecnológica
El curso trata sobre los elementos básicos de la Cultura Infotecnológica. Recoge todo un compendio conceptual que caracteriza las TIC como principal herramienta en el pro... [27/12/05]
 4,50/5 1.429  


Publicar en   del.icio.us    digg    meneame

¿Qué es mailxmail.com?|ISSN: 1699-4914|Recomiéndanos|Ayuda
Condiciones legales de mailxmail