-
Hasta ahora hemos visto cómo
-
podemos usar CSS para estilizar un texto,
-
pero también podemos usar CSS para cambiar
-
completamente el diseño de nuestra página.
-
Esto significa que podemos mover las cosas,
-
cambiar el tamaño,
-
e incluso poner unas cosas arriba de otras.
-
Pero ¿cuáles son las cosas
-
que queremos mover?
-
Algunas veces son elementos
-
que hemos hecho con anterioridad,
-
como un cierto párrafo,
-
o un encabezado.
-
Pero muchas veces,
-
estas cosas son un grupo de elementos que hemos hecho,
-
como una selección de texto,
-
o un encabezado con algunos párrafos.
-
Para moverlos todos juntos como una unidad,
-
necesitamos introducir dos nuevas etiquetas HTML
-
a las que llamamos elementos de agrupación.
-
No hablamos de ellas antes de CSS,
-
porque sólo se pueden usar
-
cuando las combinamos con CSS.
-
No tienen significado semántico para el navegador.
-
La primera es la etiqueta "",
-
y la usamos para agrupar una selección de texto.
-
Digamos que queremos que esta
-
palabra "Love" sea roja.
-
Y sólo queremos cambiar el color de la palabra,
-
no de todo el encabezado.
-
Ponemos el cursor al principio de la palabra "Love",
-
escribimos la etiqueta "".
-
Nos pasamos al final de la palabra, y tecleamos el cierre de la etiqueta, ok.
-
Ahora queremos estilizar
-
esta selección ("") de caracteres.
-
Podemos hacer una regla para colorear todas las selecciones ("s") en la página,
-
pero probablemente no queramos que todas las selecciones sean rojas.
-
Vamos a definir una clase para este "" digamos "lovey-dovey",
-
y vamos a añadir una regla para los elementos que
-
tienen la clase "lovey-dovey".
-
Así que escribimos ".lovey-dovey", "color: red".
-
¡Mira que dulce es el texto ahora!
-
Entonces "" sirve para agrupar
-
selecciones de texto.
-
¿Cómo agrupamos varios elementos?
-
Aquí es donde usamos la etiqueta "".
-
Digamos que queremos agrupar
-
esta sección de abajo.
-
El encabezado "Official Info" y
-
los párrafos y la fotografía que están debajo.
-
Para hacer eso,
-
voy a colocar el cursor antes del encabezado "h3"
-
y escribo la etiqueta "".
-
Y luego me voy al final del último párrafo,
-
y escribo la etiqueta de cierre de "".
-
Ya tenemos definido "", ahora necesitamos estilizarlo.
-
Para estilizar "",
-
voy a definir un id: "official info".
-
Y luego voy a añadir una regla aquí arriba.
-
Entonces escribo: "#official-info", "background",
-
y vamos a definir un gris bonito.
-
Lo seleccionamos, éste está bien.
-
Ahora vemos que "" se volvió un cuadro gris
-
que contiene todos los elementos dentro.
-
Y es diferente que si hubieramos
-
definido un fondo gris para cada elemento.
-
Si hubiéramos hecho eso, entre cada elemento
-
tendríamos un espacio que no sería gris.
-
Tenemos que usar "",
-
si queremos un cuadro alrededor de todo lo que seleccionemos.
-
Podemos pensar en ""
-
para agrupar texto.
-
Y pensamos en "",
-
para agrupar elementos.
-
Pero hay otra manera para distinguirlos.
-
Verás, hay dos tipos de
-
elementos en el mundo de CSS.
-
En línea y en bloque.
-
Un elemento en línea no tiene una nueva línea después de él.
-
Si hiciéramos muchos de ellos todos estarían en la misma línea.
-
Hemos hablado de algunos de ellos,
-
como una imagen.
-
Y lo puedes ver con esta imagen,
-
la forma en que el texto continúa después de ella.
-
No hay una línea después de ella.
-
Un elemento de bloque, sí tiene una línea después,
-
así es como se crean las etiquetas en HTML.
-
Mira los ejemplos en esta página.
-
Los encabezados, los párrafos, las listas.
-
El navegador pone líneas nuevas después de cada uno de ellos,
-
sin que tú tengas que escribir una etiqueta "
".
-
¿Qué tiene que ver eso con "" y con ""?
-
Bueno, la etiqueta "" crea elementos en línea,
-
y "" crea elementos de bloque.
-
Eso significa que si agregas una etiqueta "",
-
y no agregas algún otro estilo,
-
el navegador va a considerar como un solo bloque
-
esa parte de la página.
-
Como esta pequeña parte de texto que encerré en una etiqueta "",
-
ahora tiene nuevas líneas antes y después.
-
Y tal vez eso es lo que quieres,
-
así que recuerda estas diferencias.
-
Y sigue adelante porque hay mucho más
-
que podemos hacer con esas etiquetas.
-
Especialmente con esta poderosa etiqueta "".
