¿Cómo definir estilos para múltiples elementos para la programación html5 y css3

Video: Aprende HTML5 y CSS3 - El Modelo de Caja en CSS - Video 12

A veces, es posible que desee una serie de elementos en su página web basada en HTML 5 y CSS 3 para compartir estilos similares. Echar un vistazo a este ejemplo para ver esto en acción.

Los tres primeros títulos tienen estilos muy similares. La creación de tres estilos diferentes Sería tedioso, por lo CSS incluye un acceso directo:

multiStyle.html

encabezamiento E1

La partida H2

La partida H3

Un elemento de estilo (el que comienza h1, h2, h3) Proporciona toda la información para los tres tipos de partida. Si se incluye más de un elemento en un selector de estilo separados por comas, el estilo se aplica a todos los elementos de la lista. En este ejemplo, la fuente cursiva centrado con un fondo amarillo se aplica a la partida los niveles 1, 2 y 3 en el mismo estilo.

Si desea realizar modificaciones, puede hacerlo. Las reglas de estilo se aplican en orden, para que pueda empezar siempre con la regla general y luego modificar elementos específicos más adelante en el estilo si lo desea.

Si tiene varios elementos en una regla de selección, que hace una gran diferencia si utiliza comas. Si se separa elementos con espacios (pero no comas), CSS busca un elemento anidado dentro de otro elemento. Si incluye comas, CSS se aplica la regla a todos los elementos enumerados.

Video: Curso Twitter Bootstrap CSS - 6: Ocultar elementos segun dispositivo

Es posible conseguir aún más específico acerca de los selectores con puntuacion. Por ejemplo, el + Selector describe la relación entre hermanos. Por ejemplo, mira el siguiente regla:

h1 + p

Esta se dirige sólo el párrafo que sigue inmediatamente a un nivel uno titular. Se ignorarán todos los demás párrafos. Hay otros selectores también, pero los mencionados aquí serán suficientes para la mayoría de aplicaciones.

Usted podría preguntarse por qué los desarrolladores necesitan tantos tipos diferentes de selectores. Se puede utilizar el nombre de la etiqueta para la mayoría de los elementos, y sólo se aplica a una clase o identificación a cualquier elemento que requiere una atención especial. Eso es cierto, pero uno de los objetivos de la CSS es mantener el código HTML lo más limpio posible. Desea utilizar la estructura de la propia página para ayudarle a determinar el estilo.

Artículos Relacionados