HTML y CSS Avanzado

Aplicar la declaración display: flex a un elemento lo convierte en una caja
flexible, o contenedor flexible, que nos permite controlar la alineación y

distribución de sus elementos hijos. Esto puede no parecer muy significativo
al principio, porque todo lo que se ha hecho en este caso es organizar los
elementos hijos en una fila en lugar de en una columna. Sin embargo, como
verás a medida que avancemos en este capítulo, cuando lo combinamos con
otras declaraciones podemos conseguir una gran variedad de disposiciones.
La declaración display: flex es la que proporciona la base para ello.
Si necesitas refrescar tu memoria sobre la propiedad display, puedes volver a
la unidad haciendo clic en este enlace. Comprender bien esta propiedad te
dará más confianza en el futuro. Trabajarás mucho con ella en el futuro, así
que será mejor que sepas exactamente lo que estás haciendo.
Para ponerlo en terminología flexbox, la propiedad display: flex convierte
elementos en contenedores flexibles y a sus hijos en elementos flexibles. La
relación entre un contenedor y sus elementos es muy parecida a la de un
entrenador de fútbol y su equipo. El entrenador pone a los jugadores en una
determinada alineación, indicándole al equipo en conjunto cómo reaccionar
en diferentes situaciones. Los jugadores (elementos flexibles), a cambio,
tienen características personales (propiedades) que determinan exactamente
cómo cumplen las órdenes del entrenador.
Comencemos de forma simple. Tenemos un contenedor flexible con un
elemento hijo. El elemento hijo, también conocido como elemento flexible, es
la casilla verde a continuación. En este momento, no tiene ninguna
declaración aplicada. Mira lo que sucede si aplicamos margin: auto haciendo clic
en la casilla de verificación de la siguiente figura:
Contenedores flexibles con múltiples
elementos
Cuando hay varios elementos en un contenedor flexible, aparecen todos por
defecto en la misma línea, independientemente de su tipo. En este sentido,
se comportan de manera similar a cuando el valor de la propiedad display se
establece en inline-block. Sin embargo, establecer el valor en flex nos
proporciona muchas más posibilidades. Esa es la razón por la que se usa
mucho más que inline-block.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://code.s3.yandex.net/web-code/normalize.css">
<link rel="stylesheet" href="style.css">
<title>Tu portfolio</title>
</head>
<body>
<div class="header" >
<a href="#" class="header-link">Practicum</a>
</div>
<div class="flex-row">
<div class="project project_beginner"> </div>
<div class="project project_beginner"> </div>
</div>
div{
border: 1px solid red;

}
.header{
display:flex;
height:95px;
.header-link{
margin:auto;
.project{
background-position:center;
background-size:cover;
.project_beginner {
width:636px;
height:430px;
}
Terminología de Flexbox
Hay dos términos principales que debes conocer cuando tratamos con
flexbox:
 Contenedores flexibles (elementos padre): estos elementos

contenedores son espacios flexibles en los que los elementos se
organizan de acuerdo con las reglas del contenedor.
 Elementos flexibles (elementos hijos): estos son los elementos que se
encuentran dentro del contenedor flexible. Se ajustan a las reglas del
contenedor, así como a las reglas que se les aplican específicamente.
Los desarrolladores a menudo crean clases que se pueden aplicar

universalmente. Si quieren que todos los contenedores flexibles compartan
una determinada característica, crearán una clase con una sola declaración y
la asignarán a cada elemento que la requiera.
Creaste una de esas clases universales en la unidad anterior: flex-row. Esto
representa una fila en la que los elementos se comportan como elementos
flexibles. Así que, cada vez que queramos crear un contenedor flexible,
simplemente tendremos que asignar la clase flex-row al elemento en cuestión.
div{
border: 1px solid red;
.header{
display:flex;
height:95px;
.header-link{
margin:auto;
.project{
background-position:center;
background-size:cover;
.project_beginner {
width:636px;
height:430px;
.project_music-album{
background-image:url(https://code.s3.yandex.net/web-code/album.png);
}
.project_design-principles{
background-image:url(https://code.s3.yandex.net/web-code/design.png);
.flex-row{
display:flex;
.flex-column{
width:636px;
height:557px;
.project_procrastinate{
width:636px;
height:557px;
}
Contenedores Flexibles Anidados
Los elementos flexibles se pueden convertir ellos mismos en contenedores
flexibles para controlar los elementos anidados en ellos. La autoridad de un
contenedor flexible solo se extiende hacia sus hijos directos. En otras
palabras, los elementos hijos escuchan a sus padres, pero no a sus abuelos.
Si bien cualquier cosa dentro de un contenedor flexible debe ser un elemento
flexible, un elemento hijo de un elemento flexible no lo será a menos que se
le aplique la declaración display: flex específicamente.
Dirección dentro de los contenedores
flexibles
De forma predeterminada, los elementos flexibles se muestran en una fila de
izquierda a derecha en el orden en que aparecen en el código HTML. Sin
embargo, flexbox nos permite cambiar las filas por columnas e invertir el
orden de los elementos para que vayan contracorriente. Para ello,
necesitamos aplicar la propiedad flex-direction al contenedor. Esta propiedad
puede tener los siguientes valores:
 flex-direction: row: Fila estándar, donde los elementos fluyen de izquierda a

derecha. Este es el valor predeterminado, por lo que si así es como
quieres que quede, no es necesario que lo escribas.
 flex-direction: row-reverse: El orden de los elementos de la fila se invierte. En
lugar de colocarse de izquierda a derecha, los elementos se colocarán
de derecha a izquierda, comenzando por el primer elemento que
escribas en HTML que se ubicará en la esquina superior derecha del
contenedor flexible.
 flex-direction: column: Los elementos se organizan en una columna
estándar. Esto suele resultar útil a la hora de adaptar tu contenido a
dispositivos móviles.
 flex-direction: column-reverse: El orden de las columnas se invierte, lo que
significa que el primer elemento del código HTML aparece en la parte
inferior del contenedor flexible.
Como suele pasar con los conceptos en programación, es mejor

experimentar con diferentes valores de esta propiedad para comprender
perfectamente cómo funcionan:
Justificar elementos flexibles en
contenedores
En la última unidad, aprendimos a organizar elementos flexibles. Ahora
aprenderemos a alinearlos. En todos las disposiciones que has visto hasta
ahora, los elementos flexibles estaban amontonados en un extremo del
contenedor sin espacio entre ellos.
Podemos regular el espacio a lo largo del eje en el que se distribuyen los
elementos (ya estén organizados en filas o columnas), así como a lo largo del
eje perpendicular a él. El eje a lo largo del cual se distribuyen los elementos
se denomina eje principal, mientras que el eje perpendicular se denomina eje
transversal. Si tus elementos flexibles están dispuestos en una fila, tu eje
principal es horizontal, mientras que si están organizados en una columna, el
eje principal es vertical.
Esta unidad se centrará en cómo se distribuyen los elementos a lo largo del
eje principal, que se regula mediante la propiedad justify-content. El nombre de
esta propiedad proviene de los medios de prensa, donde "justificar" un texto
significa ajustar el espacio entre palabras de cada línea, de tal manera que
los extremos izquierdo y derecho queden alineados a lo largo de los
márgenes. A menudo verás este tipo de espaciado en los periódicos.
La propiedad justify-content puede tener los siguientes valores:
 flex-start:
Los elementos flexibles se alinean al principio del contenedor
sin ningún espacio entre ellos. Si el valor de flex-direction es row, los
elementos flexibles se agruparán hacia el borde izquierdo del
contenedor, el espacio restante quedará a la derecha. Si el valor de la
propiedad flex-direction es column, los elementos se ordenarán de arriba a
abajo empezando por la parte superior del contenedor, dejando el
espacio vacío en la parte inferior.
 flex-end: El espacio vacío viene primero y los elementos se alinean en el
otro extremo del contenedor. Con la declaración flex-direction: row, los
elementos aparecen a la derecha y el espacio vacío a la izquierda. Con
la declaración flex-direction: row-reverse, al revés.
 center: los elementos flexibles se colocan en el medio del contenedor,
con la misma cantidad de espacio vacío a cada lado.
 space-between: El primer elemento aparece en un extremo del contenedor y
el último y en el opuesto, los demás elementos se distribuyen
uniformemente entre ambos. Puede ser de utilidad para una barra de
menú que recorra el ancho de la página.
 space-around: el espacio vacío se divide en intervalos iguales. Cada
elemento flexible tiene un margen en todas las direcciones que es igual
a este intervalo. Así pues, la distancia entre cada par de elementos
adyacentes es igual a dos espacios de margen, mientras que la
distancia entre los bordes derecho e izquierdo del contenedor y el
primer y último elemento respectivamente es igual a un espacio de
margen.
 space-evenly: Todos los espacios vacíos tienen el mismo tamaño, tanto
entre elementos adyacentes como entre los bordes del contenedor y el
primer y último elemento.
Tanta explicación de golpe puede ser demasiado para asimilar, así que utiliza
el siguiente widget para ver estas propiedades en acción:
Alinear elementos flexibles en
contenedores
Hasta ahora, hemos aprendido a regular el orden en el que los elementos

flexibles se organizan, así como su distribución espacial a lo largo del eje
principal. En esta unidad, veremos cómo podemos organizar los elementos
flexibles a lo largo del eje transversal. Este concepto se conoce como
alineación.
Puedes alinear verticalmente los elementos flexibles de una fila, incluso si
tienen alturas distintas. De manera similar, si tienes elementos flexibles en
una columna con diferentes anchos, puedes alinearlos horizontalmente. La
propiedad utilizada para controlar esto se llama align-items. Se utiliza para
distribuir elementos a lo largo de una línea que corre paralela al eje principal.
Por ejemplo, si la propiedad flex-direction tiene un valor de row, podemos alinear
nuestros elementos a lo largo del borde superior, el borde inferior, el medio o
lo que llamamos la línea de base del contenedor, que se utiliza para alinear
los elementos de texto contenidos dentro de los elementos flexibles.
Posibles valores para align-items:
 stretch: El valor predeterminado. Cada elemento se estira de un extremo

del contenedor al otro. Los elementos colocados en una fila se estiran
de arriba a abajo, mientras que los elementos de una columna se
estiran de izquierda a derecha. Este valor es extremadamente útil en el
diseño de flexbox ya que nos permite hacer que todos los elementos
tengan el mismo tamaño sin tener que establecer el ancho o alto de
cada elemento individualmente.
 flex-start: Todos los elementos se alinean a lo largo del borde superior del
contenedor (en una fila) o en el borde izquierdo (en una columna).
 flex-end: En una fila, todos los elementos están alineados a lo largo del
borde inferior del contenedor, mientras que en una columna están
alineados a lo largo del borde derecho.
 center: cada elemento flexible se centra a lo largo del eje transversal. Por
ejemplo, si los elementos están colocados en fila, cada uno se centrará
verticalmente para que sea equidistante a los bordes superior e inferior
del contenedor.
 baseline: la línea de base de cada elemento flexible se alinea en relación
a la línea de base del primer elemento de la secuencia.
De nuevo, la mejor manera de comprender cómo funciona esta propiedad es
verlo por ti mismo:
Ajuste de línea
De forma predeterminada, los contenedores flexibles mantienen los
elementos flexibles en una sola fila o columna. Esto significa que si haces la
ventana del navegador más pequeña, los elementos flexibles ajustarán
automáticamente sus dimensiones que quepan todos en el contenedor.
Podemos cambiar este comportamiento para que, en lugar de que cambien
las dimensiones predeterminadas de tus elementos, todo lo que no quepa
dentro de la pantalla se mueva a una nueva fila o columna.
Para ello, necesitamos aplicar la propiedad flex-wrap con un valor de wrap a un
contenedor flexible. Esto garantiza que los últimos elementos se ajusten a
una nueva fila o columna si no hay suficiente espacio para ellos con sus
dimensiones predeterminadas.
El valor de wrap-reverse hace lo mismo que wrap, excepto que los elementos
aparecen en orden inverso.
La propiedad flex-wrap se aplica automáticamente a todos los contenedores
flexibles, pero se les asigna el valor nowrap por defecto.
El orden para ajustar los elementos depende del valor de la propiedad flex-
direction. Si el valor es flex-direction: row, el elemento más a la derecha será el
primero en moverse a una nueva línea. Si, por el contrario, el valor es flex-
direction: row-reverse, el elemento más a la izquierda se moverá primero.
Prueba varias combinaciones de declaraciones diferentes y compruébelo tu
mismo:
Propiedades del Elemento Flexible:

Orden
Ya hemos visto la configuración básica de los contenedores flexibles.
Sabemos cómo organizar el orden de los elementos, el espaciado alrededor
de ellos y las reglas para realizar el ajuste de línea. Volviendo a nuestra
analogía del fútbol, ya tenemos las herramientas para definir cómo debería
jugar el equipo en conjunto en diferentes situaciones.
Ahora toca explorar lo que cada jugador puede aportar individualmente, lo
haremos observando las propiedades de los elementos flexibles.
En primer lugar, los jugadores pueden cambiar de posición y cumplir
diferentes roles sin interferir en la táctica del entrenador. Por ejemplo, un
centrocampista temporalmente puede atrasar su posición para proporcionar
cobertura en defensa si su compañero de equipo está fuera de posición.
De manera similar, podemos realizar cambios en elementos flexibles
individuales sin cambiar el código HTML o la regla CSS para todo el
contenedor. Por ejemplo, podemos cambiar el orden de los elementos
utilizando la propiedad order.
Un elemento con la declaración order: 1 aparecerá delante de un elemento con
la declaración order: 2. Se puede usar cualquier número entero para ordenar
los elementos siempre y cuando tengan valores diferentes.
Un elemento con un valor order negativo (order: -1) se colocará primero en el
contenedor si los otros elementos tienen valores más altos o no tienen ningún
valor asignado.
Por el contrario, si solo se le asigna a un elemento un valor order positivo, ese
elemento irá último. El valor inicial de la propiedad order es 0.
Propiedades de los elementos flexibles -
Alineación de los elementos
individuales
Cuando aplicamos la propiedad align-items a un contenedor flexible, afecta a
todos los elementos del contenedor. Sin embargo, a veces necesitamos que
un elemento en particular sea excluido de la regla. Aquí es donde entra en
juego la propiedad align-self. Funciona de la misma manera que align-items,
excepto que solo se aplica a elementos flexibles individuales en vez de a
todos los elementos del contenedor. Incluso toma los mismos valores:
 flex-start
 flex-end
 center
 baseline
 stretch
Esto es similar a la forma en que un jugador de fútbol puede alejarse de su

posición y asumir un papel adicional, como lo haría cuando el equipo juega
con desventaja numérica. Estas instrucciones no son para todo el equipo,
sino para ese jugador en particular.
Propiedades del elemento flexible:

Ancho del elemento base
A veces necesitamos que uno de nuestros elementos flexibles tenga un
tamaño fijo, al menos hasta que las propiedades del contenedor flexible se
hagan cargo cuando el tamaño de la pantalla cambie. Para ello, podemos
utilizar la propiedad flex-basis. Esto nos permite establecer la dimensión de un
elemento a lo largo del eje principal en píxeles.
Por consiguiente, si los elementos flexibles están organizados en una fila, el
valor de esta propiedad afectará al ancho del elemento, mientras que si están
en una columna, afectará la altura. El elemento flexible conservará esta
dimensión siempre que haya suficiente espacio en el contenedor.
Dándole un buen aspecto
Hemos trabajado con las propiedades más utilizadas para contenedores y
elementos flexibles. Todas las herramientas esenciales que puedas necesitar
en tu trabajo están ahora a tu disposición. Al final de este capítulo puedes
encontrar información adicional sobre algunas de las propiedades menos
conocidas que aún no hemos visto.
Pero primero, utilizaremos lo que ya hemos aprendido para que nuestro
diseño se vea mejor que nunca. Con la ayuda de algunos elementos más y
de las reglas CSS, convertirás esta página en un portfolio profesional y
moderno.
Un poco más sobre Flexbox
El diseño de Flexbox tiene una amplia gama de aplicaciones en potencia y
una gran cantidad de matices y sutilezas. Hemos visto la mayoría de
características esenciales con las que podrías encontrarte con regularidad,
pero aún hay algunos detalles importantes más que tratar. Aunque pueden
ser difíciles de entender para los principiantes, son esenciales para crear
diseños reactivos que se adapten al tamaño de la pantalla del dispositivo del
usuario.
Hemos tratado de proporcionarte de forma equilibrada la mayor cantidad de
información posible sin llegar a agobiarte. Por ahora, la prioridad es
comprender cómo funcionan las propiedades flexibles descritas en esta
unidad. Cuando realmente necesites usarlas, siempre podrás refrescar tu
memoria volviendo aquí o revisando la gran cantidad de recursos online
disponibles.
Una cosa más sobre los contenedores flexibles
Existe una propiedad llamada align-content, que define cómo se comportan los
elementos cuando se mueven a una fila o columna nueva si la propiedad flex-
wrap está activa. Si los elementos flexibles no caben todos en una fila, puedes
decidir cómo se organizarán en la segunda fila. Quieres que los elementos se
organicen desde el extremo opuesto del contenedor? O deberían estar en el
medio? Tal vez desees que los elementos aparezcan justo debajo de la fila
anterior. Puedes controlarlo todo con align-content.
La propiedad align-content es en cierto modo similar a justify-content. Sin
embargo, justify-content distribuye los elementos a lo largo del eje principal del
contenedor flexible, mientras que align-content organiza los elementos a lo largo
del eje transversal. Además, si no declaras flex-wrap: wrap, la propiedad align-
content no funcionará en absoluto.
Describir con palabras lo que hace cada valor de align-content sería una locura,
por lo que hemos incluido algunos gifs para ayudarnos. Echa un vistazo a
cada uno de ellos para ver la propiedad align-content en acción. En el primer
ejemplo, el eje principal del contenedor flexible es el horizontal y el eje
transversal es el vertical.
omo puedes ver, la declaración align-content: flex-start; hace que los elementos
(bloques) se alineen desde el inicio del eje transversal del contenedor flexible.
Esto significa que los primeros elementos ocupan la fila superior del
contenedor flexible, es decir, en la parte superior del eje y. Cuando no queda
más espacio en esa fila, los elementos restantes se mueven a la siguiente
fila, permaneciendo lo más cerca posible de la parte superior del contenedor.
Si se usa align-content: flex-end;, los bloques se comportan de manera similar, pero

comienzan a alinearse desde el extremo más alejado del eje transversal del
contenedor flexible. En este caso, la fila inferior se llena primero. Cuando no
queda espacio, se llena la segunda línea desde la parte inferior, y así
sucesivamente.
La declaración align-content: center; alineará los elementos hacia el centro del
contenedor a lo largo del eje transversal.
distribuye uniformemente los elementos dentro del
align-content: space-around;
contenedor a lo largo del eje transversal. El espacio entre los elementos
flexibles y los bordes del contenedor es uniforme a lo largo de ambos ejes.
De manera similar, align-content: space-between; distribuye uniformemente los
elementos dentro del contenedor a lo largo del eje transversal. El espacio
entre los elementos flexibles es uniforme, pero no hay espacio entre los
elementos y los bordes del contenedor.
Y el último valor de align-content es stretch. Estira los elementos a lo largo del eje
transversal para llenar todo el espacio disponible.
Observa que en todos los ejemplos que hemos utilizado, el eje principal era el
horizontal y el eje transversal era el vertical. Es mucho más sencillo explicarlo
de esta manera, ya que este tipo de distribución generalmente nos resulta
más familiar; pero recuerda que el comportamiento real de los elementos
flexibles dependerá del eje principal del contenedor flexible.
Más sobre elementos flexibles
Un par de propiedades interesantes que podemos aplicar a los elementos
flexibles son flex-grow y flex-shrink. Estos te permiten controlar cuánto espacio
ocuparán los elementos en relación con el contenedor. Si hay más espacio en
el contenedor del que requieren nuestros elementos, podemos utilizar flex-
grow para expandirlos y llenar el espacio vacío, mientras que si lo que
necesitamos es hacerlos más pequeños para que quepan en el contenedor,
utilizaríamos flex-shrink.
Comencemos con flex-grow, para lo cual necesitarás recordar un poco las
matemáticas del cole. Obviamente, cuando los elementos no ocupan todo el
contenedor, significa que queda algo de espacio vacío. Podemos distribuir
este espacio restante entre nuestros elementos en varias proporciones
utilizando esta propiedad.Por ejemplo, puede repartir 5/10 del espacio
restante al primer elemento, 3/10 al segundo y 2/10 al tercero. En este caso,
los valores de la propiedad flex-grow deben ser iguales a los numeradores de
cada fracción, es decir, 5, 3 y 2.
Además, ten en cuenta que es el espacio restante el que se distribuye
proporcionalmente, no el espacio de todo el contenedor.
La propiedad flex-shrink hace lo contrario. Si hay demasiados elementos y no
caben en el contenedor, el navegador calculará cuánto más pequeño debe
ser cada elemento en función de su tamaño actual y la cantidad de espacio
que falta.
Propiedades abreviadas de CSS

En CSS, muchas propiedades tienen nombres abreviados, incluido flex.
Por ejemplo:
 La propiedad flex-flow se puede utilizar para controlar tanto flex-

direction como flex-wrap.
 Con la propiedad flex, puedes establecer valores para flex-grow, flex-
shrink y flex-basis simultáneamente.
El lenguaje de la página web y sus
elementos
Al crear un sitio web, es conveniente dejar claro el idioma en el que estará su
contenido. Esto mejora la posibilidad de aparecer más arriba en los
resultados de las búsquedas y permite a los navegadores modernos sugerir
la traducción automática de la página si no está en el idioma nativo del
usuario.
El idioma del documento HTML se especifica en el atributo lang del
elemento <html>. Su valor es siempre un código de idioma que consta de dos
letras. Por ejemplo, en es el valor utilizado para el inglés:
Copiar códigoHTML
<html lang="en">
La mayoría de los idiomas tienen su propio código, que está estandarizado
por la Autoridad para la asignación de números de Internet (IANA).
El atributo lang se puede aplicar a cualquier elemento, por lo que puedes
establecer el idioma para cada elemento por separado. Solo debes hacer
esto para un elemento individual en el caso de que el idioma de su contenido
difiera del idioma del resto de la página. Si este es el caso, debes especificar
el idioma en la etiqueta de apertura del elemento:
Copiar códigoHTML
<a href="#" lang="en">Hello, world!</a>
<a href="#" lang="de">Hallo Welt!</a>
<a href="#" lang="fr">Bonjour le Monde!</a>
Los motores de búsqueda aprecian este nivel de atención al detalle y lo
recompensan con mejores resultados de búsqueda.
Descripción del sitio web para los

navegadores
Todas las reglas que rigen la interacción de tu página web con el navegador
están escritas dentro del elemento <head>. En el curso de introducción,
aprendimos tres de estas reglas:
1. El elemento <title> establece el título de la página que aparecerá en la
barra de herramientas del navegador.
2. <link rel="shortcut icon" href="favicon.ico"> añade un icono de acceso directo,
también conocido como icono de página o favicono, en la barra de
herramientas del navegador.
3. <meta charset="utf-8"> especifica la codificación de caracteres de la página.
Veremos los dos primeros con más detalle un poco más adelante, pero por
ahora, llenemos nuestro <head> con más información y veamos más de cerca
cómo funcionan las etiquetas <meta>.
Estructura de las metaetiquetas
En primer lugar, veamos cuál es la estructura básica de una etiqueta <meta>:
Estructura de las metaetiquetas.
 El nombre del elemento le indica al navegador el significado de la

etiqueta
 El atributo name define el tipo de metaetiqueta
 El atributo content contiene una instrucción, es decir, un valor asociado
al atributo name.
La metaetiqueta de la ventana gráfica

Los sitios web pueden abrirse en diferentes dispositivos, como ordenadores,
tabletas y teléfonos inteligentes. Todos tienen diferentes tamaños de pantalla
y distintas resoluciones. Por lo tanto, es importante examinar cómo se
comporta tu sitio web en diferentes dispositivos. Para ello, necesitamos
añadir la metaetiqueta <meta name="viewport" content=""> a nuestro código para
controlar el comportamiento de la página en relación con el tamaño de la
pantalla.
Con el valor viewport, podemos indicarle al navegador cómo debe mostrar los
elementos en relación con la ventana gráfica, lo que significa que se tendrán
en cuenta todas las resoluciones. Sin este valor, no hay garantía de que tu
sitio web se vea como tú quieras en diferentes dispositivos.
Para que esto funcione, tenemos que añadir algunas instrucciones al
atributo content:
Copiar códigoHTML
<meta name="viewport" content="width=device-width, initial-scale=1">

Hemos escrito dos instrucciones:
 width=device-width establece el ancho de la página para que coincida con

el ancho de la pantalla del dispositivo del usuario.
 initial-scale=1 establece que el nivel inicial del zoom al cargar la página
será 1, lo que significa que la página comienza con el nivel de zoom
predeterminado.
La metaetiqueta de la ventana gráfica es un ejemplo de cómo podemos

interactuar con el navegador. En la próxima lección, veremos las
metaetiquetas para los motores de búsqueda. Pero antes, vamos a practicar
lo que acabamos de aprender.
Descripción del sitio web para los

motores de búsqueda
Las metaetiquetas también pueden utilizarse para proporcionar información a
los motores de búsqueda, como Google. Los algoritmos de búsqueda
comprueban los valores de ciertas metaetiquetas. Saber escribir estas
metaetiquetas hará que tu sitio web aparezca en los resultados de búsqueda
de los usuarios interesados en tu contenido.
Existen tres tipos de metadatos que puedes utilizar para la optimización de
los motores de búsqueda (SEO): description, author y keywords:
1. Utiliza description para describir tu página. Solo debe ser un párrafo corto
que detalle el propósito de tu sitio o página web.
2. Los autores se indican en las etiquetas author. Debes saber que se
puede poner solo un autor dentro de una etiqueta <meta name="author">.
3. Por último, pero no menos importante, tenemos la etiqueta keywords, que
facilita que las personas encuentren tu sitio web cuando introduzcan
estas palabras clave en la barra de búsqueda.
Podemos utilizar metaetiquetas para añadir metadatos a nuestros

documentos HTML. En cada metaetiqueta, podemos utilizar el
atributo content para especificar el valor asociado al atributo name. Puedes
insertar cualquier valor para description, author y keywords. En el caso de description,
es conveniente que no utilices más de una o dos frases sencillas:
Copiar códigoHTML
<meta name="description" content="Otra excelente lección de desarrollo web presentada por Practicum">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Elise Bouer">
Sin embargo, no todas las metaetiquetas te permiten introducir cualquier
valor. Por ejemplo, puedes comparar los casos anteriores con la metaetiqueta
de la ventana gráfica, cuyo atributo content debe tener un formato específico:
Copiar códigoHTML
<meta name="viewport" content="width=device-width, initial-scale=1">
Hemos visto las metaetiquetas más importantes, pero hay muchas más que
puedes utilizar. Por ejemplo, hay etiquetas especiales que puedes utilizar
para controlar la forma en que aparece el enlace de la página en las redes
sociales, mientras que hay otras que te permiten cambiar la configuración de
los sistemas de análisis. Sin embargo, lo que hemos aprendido hasta ahora
es suficiente para que empieces a recorrer este camino.
Etiquetas semánticas
Hasta ahora, hemos organizado la estructura de nuestras páginas con <div>,

el elemento en bloque más tradicional y popular. Sin embargo, esa no es la
única manera de hacer las cosas.
HTML5, la última versión de HTML, proporcionó a los desarrolladores un
abanico de nuevos contenedores. ¡Saluda a las etiquetas semánticas! Se
parecen mucho a los elementos <div>, pero tienen varias ventajas sobre ellos:
 Facilitan que los motores de búsqueda encuentren la información más

significativa de una página de forma más eficiente
 Hacen que las páginas sean más accesibles para las personas con
discapacidades visuales
 Hacen que tu código sea más simple de leer para otros desarrolladores
Los elementos semánticos aportan claridad a la estructura del documento

porque describen su contenido. Al leerlos, los navegadores pueden
diferenciar entre contenidos habituales, cabeceras, pies de página y
navegación.
A continuación, enumeramos algunos de los elementos semánticos más
comunes. Como puedes ver, sus significados se explican por sí mismos:
 <header></header>: el encabezado del sitio web

 <footer></footer>: el pie de página
 <nav></nav>:la navegación, o el bloque de menús
 <main></main>: el contenido principal de la página
 <section></section>: se utiliza para agrupar elementos según su tema o
función.
Hablando en lenguaje HTML

En la lección anterior, vimos las etiquetas semánticas que se usan para
describir diferentes secciones de una página web. En esta lección, vamos a
ver las etiquetas semánticas que describen elementos individuales, que
también son muy útiles para ayudar a que los diferentes programas y
algoritmos entiendan tu sitio web.
Existe una inmensa cantidad de elementos semánticos. Cuanto más leas y
escribas código, más rico será tu vocabulario.En esta lección, vamos a ver
algunas de las etiquetas más conocidas. Se trata de algo más que escribir un
código que funcione correctamente; queremos escribir un código que te
hable.
Listas
HTML tiene dos tipos de listas: ordenadas y desordenadas.
Las listas desordenadas se utilizan cuando el orden en que aparecen los
elementos no es importante. Por ejemplo, podría ser una lista de tareas o una
lista de control. El marcador por defecto para este tipo de listas es una viñeta
(•).
Por ejemplo, este tipo de lista es perfecta para una lista de compras:
 Huevos
 Leche
 Pan
Para hacer una lista desordenada, utiliza las etiquetas <ul></ul>.

Usaremos <li></li> («list item» o elemento de la lista) para cada elemento
colocado dentro de este contenedor.
Copiar códigoHTML
Lista de la compra:
<ul>
<li>Huevos</li>
<li>Leche</li>
<li>Pan</li>
</ul>
Las listas ordenadas se utilizan cuando el orden de los elementos es
importante. Suelen utilizarse en las instrucciones o para describir algún tipo
de proceso. Estas listas están marcadas con números, letras o una
combinación de ambos.
Por ejemplo, podría ser una lista con las instrucciones para participar en un
concurso:
1. Síguenos
2. Dale Me Gusta a esta publicación
3. Etiqueta a un amigo en los comentarios
Estas listas se hacen con el contenedor <ol> y con etiquetas <li></li> rodeando a
cada elemento, como en las listas desordenadas:
Copiar códigoHTML
Cómo participar en el sorteo:
<ol>
<li>Síguenos.</li>
<li>Dale Me Gusta a esta publicación.</li>
<li>Etiqueta a un amigo en los comentarios.</li>
</ol>
Aunque los marcadores de los objetos de la lista suelen ser viñetas o
números, podemos cambiarlos con CSS utilizando la propiedad list-style. Se
pueden asignar numerosos valores, desde cuadrados hasta letras del
alfabeto armenio, pasando por cualquier otro elemento intermedio. Incluso
puedes establecer una imagen como tu marcador. Puedes encontrar la lista
completa en la Especificación CSS.
A veces, desearás ocultar el marcador por completo, lo que se puede realizar
de la siguiente manera:
Copiar códigoCSS
ul {
list-style: none;
}
Artículos
Con la cantidad de blogs y sitios de noticias que existen, el texto constituye
una gran parte de los contenidos de Internet. Los cuerpos de texto que
aparecen en este tipo de sitios suelen estar contenidos dentro del
elemento <article>.
Como ya habrás podido deducir, marcar tus artículos con estas etiquetas
garantizará que los motores de búsqueda reconozcan el contenido de tu
página por lo que es.
Copiar códigoHTML
<article>
<h2>Título del artículo</h2>
<p>El cuerpo principal del artículo</p>
</article>
Citas
Las citas pueden colocarse entre las etiquetas <blockquote></blockquote>. Este
elemento tiene el atributo cite, que aunque no es obligatorio, puede ser muy
útil, ya que te permite especificar de quién es la cita.
Copiar códigoHTML
<blockquote cite="https://practicum.yandex.com/">
Cuando las cosas se ponen complicadas, los fuertes siguen adelante.
Te ayudaremos a arrancar y a superar cualquier dificultad.
</blockquote>
Las citas están indentadas de forma predeterminada:
Tablas
A veces es necesario hacer una tabla, aquí es donde entra el elemento <table>.
El elemento <table> contiene un número de elementos anidados que denota

todas las filas y las celdas de la tabla. Cada fila está marcada con un conjunto
de etiquetas <tr></tr> («table row» o fila de la tabla). Cada celda de la fila está
marcada con un conjunto de etiquetas <td></td> («table data» o datos de la
tabla). En la fila superior de la tabla, las celdas están marcadas con
etiquetas <th></th> («table header» o encabezado de tabla).
Copiar códigoHTML
<table>
<tr> 
<th>Fila 1 celda 1: encabezado de la primera columna</th>
<th>Fila 1 celda 2: encabezado de la segunda columna</th>
<th>Fila 1 celda 3: encabezado de la tercera columna</th>
</tr>
<tr> 
<td>Fila 2 celda 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Los contenidos como el texto y las imágenes solo pueden ir dentro de los
elementos <td> y <th>. Las otras etiquetas (<table> y <tr>) se usan solo con fines
de marcado.
En una situación habitual, el número de celdas de cada fila es igual. Sin
embargo, puedes hacer que una celda abarque varios espacios o incluso
toda la fila:
Podemos combinar celdas utilizando los atributos rowspan y colspan. Si

añades colspan="3" a la etiqueta de apertura <td>, la celda se extenderá a lo largo
de tres columnas. Como resultado, esta fila contendrá dos celdas menos que
las demás.
Copiar códigoHTML
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td colspan="3">Celda de tabla</td> 
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
El elemento <table> solo debe utilizarse para marcar tablas reales. Con esto
queremos decir que un objeto como una agenda semanal pertenece
definitivamente a una tabla. Por otro lado, si simplemente quieres organizar
algunos elementos en filas y columnas para que se vean más bonitos, te
conviene usar flexbox.
Nos gustaría insistir en el hecho de que el verdadero potencial del HTML
semántico solo se puede descubrir plenamente mediante ensayo y error. A
medida que continúes trabajando con HTML, piensa en el propósito de tus
elementos en el contexto del sitio o la aplicación. Piensa si existen etiquetas
semánticas adecuadas para tu elemento. Si no lo tienes claro, busca en
Internet, la mayoría de las veces verás que sí las tienen.
Identificadores
Ahora que hemos aprendido algunas de las cosas que se pueden hacer con
HTML, es el momento de ver algunas de las formas más avanzadas de
mejorar nuestros sitios web a través de CSS. Empezaremos hablando de los
identificadores. Para entender qué son y para qué sirven los identificadores,
veamos un ejemplo.
Los artículos de Wikipedia comienzan con un índice. Se trata de una tabla
formada por enlaces. Pero cuando haces clic en uno de ellos, en lugar de
dirigirte a otra página web, te lleva a otra sección de la página actual.
Esos hipervínculos se llaman enlaces de anclaje. Estos enlaces hacen
referencia a un objeto específico, que puede estar situado en otra página o en
la página actual. Al establecer un enlace de anclaje, especificaremos un
elemento HTML como nuestro destino. Por ejemplo, en un artículo de
Wikipedia, al hacer clic en un título del índice, el usuario accede al
encabezado correspondiente a esa sección del artículo.
¿Cómo especificamos el elemento que queremos usar? No tiene sentido
utilizar nombres de etiquetas o clases porque éstas suelen aplicarse a varios
elementos del mismo documento. Necesitamos una forma de referirnos a un
elemento específico. Para ello, podemos utilizar algo llamado identificador,
que nos permite asignar una etiqueta única a un elemento.
Para asignar un identificador a un elemento utilizamos el atributo id. El valor
de este atributo debe ser único.
Por ejemplo, el elemento <h1> del siguiente ejemplo tiene un identificador
llamado lesson-13:
Copiar códigoHTML
<h1 id="lesson-13">Unidad 13: Identificadores</h1>
Una vez que hemos asignado un identificador a un elemento, podemos
referirnos a él en cualquier parte de nuestro código.Por ejemplo, podemos
enlazar con nuestro elemento identificado colocando un enlace de anclaje en
el atributo href. Si tanto el enlace de anclaje como el elemento de destino se
encuentran en la misma página, podemos crear el enlace utilizando el
símbolo de la almohadilla (#) seguido del nombre del identificador sin
espacios:
Copiar códigoHTML
<a href="#lesson-13">Cómo hacer un enlace de anclaje a una sección de la misma página.</a>
Para hacer referencia al elemento desde otra página, debes especificar la
dirección completa de la página donde se encuentra el objeto, seguida de una
almohadilla y del identificador del elemento:
Copiar códigoHTML
<a href="https://my-site.com/article#lesson-13">Cómo hacer un enlace de anclaje a una sección de otra
página</a>
Si haces clic en este enlace para ver la descripción oficial de los enlaces de
anclaje en w3.org, (artículo en inglés) verás que se abre automáticamente en
la sección correspondiente de la página. Se trata de un enlace de anclaje que
lleva al elemento con un id de h-12.2.3, que se encuentra aproximadamente en
la mitad de la página. La dirección del enlace se ve
así: https://www.w3.org/TR/html401/struct/links.html#h-12.2.3.
Aunque no recomendamos utilizar identificadores como selectores de reglas
CSS, lo cierto es que se puede hacer. Para ello, escribe una almohadilla
antes del nombre del identificador cuando crees tu selector:
Copiar códigoCSS
#lesson-13 {
color: #ff0000;
}
Cuando selecciones un nombre para tu identificador, sigue estas tres reglas
para asegurarte de que tanto las personas como los navegadores puedan
entenderlo:
 No empieces el nombre de tu identificador con números o caracteres

especiales.
 Si contiene varias palabras, sepáralas con guiones o guiones bajos en
lugar de espacios.
 Utiliza palabras sencillas en inglés.
Sigue estas reglas para que tu código sea fácil de entender.

Pseudoclases
Hasta el momento, los estilos que hemos aplicado a los elementos eran
estáticos. Aplicamos estilos a nuestros elementos HTML para definir su
apariencia cuando se carga la página. Los estilos de esos elementos nunca
cambian. Sin embargo, a veces queremos que los elementos adquieran
diferentes estilos en función de la situación.
Por ejemplo, quizás queramos que un enlace cambie de color cuando
pasemos el ratón por encima de él. Para hacer esto, necesitamos algo que
sea capaz de ver un elemento y decir «el ratón está pasando por encima,
tenemos que cambiar su color» o «el ratón no está pasando por encima del
enlace, no tenemos que cambiar su color»." Necesitamos algo que pueda
juzgar la situación y decidir qué hacer con el enlace.
Afortunadamente, CSS tiene una funcionalidad que nos permite añadir y
manipular estas características interactivas básicas. Para aplicarlas, usamos
algo llamado pseudoclases y que podemos adjuntar a las clases, los
elementos y los selectores de Id.
Los navegadores implementan pseudoclases en función de algunos factores:
1. El código HTML en sí, es decir, los tipos de elementos, el orden en que

están dispuestos, cómo están anidados, etc.
2. Acciones de los usuarios: hacer clic en enlaces, completar formularios,
pasar el ratón por encima de los elementos, etc.
Aplicar estilos en función de las acciones del usuario

Los estilos pueden aplicarse a los elementos en respuesta a las acciones del
usuario. Puedes establecer la apariencia de un elemento en las siguientes
situaciones (observa que los selectores de pseudoclases CSS se escriben
con dos puntos antes de ellos):
 El usuario aún no ha visitado un enlace — :link

 El usuario ya ha visitado un enlace — :visited
 El ratón pasa por encima de un elemento — :hover
 El usuario ha hecho clic en un elemento — :active
Copiar códigoCSS
/* todos los enlaces no tocados por el usuario serán azules */
a:link {
color: #00f;
}
/* los enlaces visitados por el usuario aparecerán en gris claro */
a:visited {
color: #808080;
}
/* al pasar el ratón por encima, el enlace se volverá verde */
a:hover {
color: #0f0;
}
/* los enlaces en los que el usuario haga clic se volverán rojos */
a:active {
color: #f00;
}
Puedes usar este acrónimo para recordar estas cuatro
pseudoclases: All Hail Lord Voldemort.
A — :active — elementos activados (en los que se acaba de hacer clic).
H — :hover — elementos sobre los que se pasa el ratón («hover»);
L — :link — enlaces no visitados;
V — :visited — enlaces visitados;
Aplicar estilos según el marcado
El navegador es capaz de analizar el marcado HTML de una página. Por
ejemplo, entiende cuántos elementos anidados tiene un bloque y puede
calcular cuántos bloques del mismo tipo hay en una página.
Veamos cómo funciona en la práctica. Los sitios de compras en línea suelen
mostrar los artículos en una especie de cuadrícula.
Los márgenes se muestran en verde.
Cada objeto tiene un margen a la derecha para asegurar que haya un
espacio entre elementos, pero el último de cada fila no debe tener ese
margen. De lo contrario, no podrías colocar tres artículos en cada fila y se
pasarían en la siguiente.
Para encajar tres en una fila, debes eliminar ese margen cada tres
elementos. Para lograrlo, podemos utilizar la pseudoclase .nth-of-type(), es
decir, el elemento nth de este tipo. Con esta pseudoclase, podemos aplicar
estilos a cada segundo, tercer o décimo elemento.
Para redactar el selector de esta pseudoclase, debes escribir primero su
nombre, seguido del número que se necesitas y de la letra n entre paréntesis.
Por ejemplo, si escribes 3n significa que los estilos de esta regla deben
aplicarse a cada tercer elemento.
Copiar códigoCSS
/* cada tercer elemento con la clase «card» tendrá un margen derecho de 0 */
.card:nth-of-type(3n) {
margin-right: 0;
}
A veces, solo tendrás que asignar estilos al primero o al último elemento de
un selector. Para ello, podemos utilizar las pseudoclases :first-of-type() y :last-of-
type() respectivamente.
Pseudoclases funcionales
Las pseudoclases funcionales te permiten asignar estilos a los elementos
mirando el código HTML o el historial de acciones del usuario. Por ejemplo, la
pseudoclase :has() se utiliza para aplicar estilos a elementos que contienen
ciertos elementos anidados. Para hacer esto, escribimos los nombres de los
elementos dentro de paréntesis:
Copiar códigoCSS
/* los estilos se aplicarán solo a las secciones que contengan un elemento <h2> */
section:has(h2) {
/* estilos */
}
Otra pseudoclase funcional útil es :not(). Independientemente de lo que
pongas entre paréntesis, el selector aplicará el conjunto de estilos adjunto a
todo lo que no se encuentre en ese estado:
Copiar códigoCSS
/* seleccionará todos los enlaces no visitados */
a:not(:visited) {
/* estilos */
}
Hemos cubierto los conceptos básicos; puedes encontrar detalles sobre todas
las pseudoclases disponibles en la documentación oficial.(documentación en
inglés)
Pseudoelementos y selectores de
atributo
Los navegadores son capaces de añadir algo antes o después de un
elemento.
Para hacer esto, tenemos los pseudoelementos ::before y ::after.
Tradicionalmente, se escriben con dos puntos después del selector:
Copiar códigoCSS
.selector::before {
/* estilos para el pseudoelemento «antes» */
}
.selector::after {
/* estilos para el pseudoelemento «después» */
}
Como los nombres sugieren, el navegador inserta el
pseudoelemento ::before antes del contenido del elemento especificado,
mientras que el pseudoelemento ::after viene después.
Los pseudoelementos ::before y ::after siempre tienen la propiedad content. Esto
determina con qué contenidos se llenarán los pseudoelementos.
Esta hechicería CSS será más fácil de asimilar con un ejemplo.
HTML code:
Copiar códigoHTML
<h1 class="title">for</h1>
Código CSS:
Copiar códigoCSS
.title::before {
content: "Lust ";
}
.title::after {
content: " Life";
}
Este código mostrará el siguiente título en la página: "Lust for Life".(artículo
en inglés) Las palabras «Lust» y «Life» no forman parte del elemento <h1>;
son pseudoelementos anidados dentro de <h1>. Podemos pensar que estos
elementos solo existen a medias.
La apariencia de los pseudoelementos se controla mediante CSS de la
misma manera que cualquier otra cosa. Podemos establecer el fondo, la
fuente, el tamaño o cualquier otro estilo en nuestro código CSS.
Selectores de atributos
Otra forma interesante y útil de trabajar con CSS es utilizar selectores
vinculados a atributos. Estos selectores se utilizan para seleccionar
elementos con valores de atributos específicos. Para hacerlo, debes escribir
el nombre del atributo seguido de un signo de igual y del valor deseado entre
comillas, todo ello entre corchetes.
Copiar códigoCSS
img[src="logo.png"] {
border: 1px solid #0000ff;
}
El selector img[src="logo.png"] seleccionará solo la imagen con su dirección
en logo.png, y le aplicará un borde azul. Cualquier otra imagen será ignorada.
Este tipo de selectores se utilizan para resolver tareas específicas, algunas
de las cuales son rutinarias para los desarrolladores web, por lo que esta
herramienta seguramente te resultará útil en algún momento.
Introducción a la metodología BEM

Al pensar en cómo organizar nuestro código, las bibliotecas pueden ser una
fuente de inspiración. ¿Por qué? Bueno, porque las bibliotecas, posiblemente,
estén entre los espacios más organizados del mundo. Es difícil no
maravillarse al revisar el índice de una biblioteca y comprobar lo fácil y rápido
que es encontrar un libro entre miles. Como desarrolladores, debemos aspirar
a alcanzar ese nivel de organización y la necesidad de hacerlo se te hará
cada día más evidente a medida que trabajes en proyectos más grandes.
El problema principal es la legibilidad. Los proyectos de envergadura
requieren que escribamos muchas líneas de código, y una de las cosas más
importantes para los desarrolladores que trabajan en esos proyectos es ser
capaces de leer el código y de entender con facilidad la función de cada
parte. Si las funciones de cada parte de tu código no son inmediatamente
evidentes, quienes lo lean (incluso tú) deberán perder tiempo tratando de
descifrarlo.
Otro problema es que los proyectos suelen contener varias partes
prácticamente idénticas. Por ejemplo, las barras de búsqueda de Google o
Yandex aparecen en varios lugares de estos servicios, pero en cada caso, el
código que debes escribir para ellas es básicamente el mismo. Si no
organizas la forma en la que estructuras tu proyecto, podrías terminar
escribiendo el mismo código repetidas veces, lo que sería una enorme
pérdida de tiempo y de recursos.
Afortunadamente, todos esos problemas se pueden evitar adoptando una
metodología simple al escribir nuestro código.
¿Qué es una metodología?
Una metodología es un sistema de reglas y principios, y los métodos para
implementarlos. Contar con una buena metodología al escribir tu código hará
que sea autodocumentado. De este modo, tus colegas desarrolladores
podrán entender la función de cada parte de tu código con sólo mirarlo.
También resuelve el problema de tener que repetir partes similares, ya que
puedes simplemente duplicar algunos componentes en varios proyectos.
Si bien no existe un estándar universal para crear estructuras y nombrar
clases, hay varias metodologías ampliamente utilizadas, como Atomic CSS,
OOCSS y BEM.
En nuestro programa, usaremos BEM. Esta metodología fue desarrollada
originalmente por Yandex y es ampliamente utilizada en la comunidad
internacional de desarrolladores.
¿Qué es BEM?
Es una metodología simple basada en dos reglas. Una para nombrar las
clases y otra para estructurar los archivos.
En primer lugar, al incorporar una convención para la nomenclatura de
nuestras clases, hacemos que nuestro código sea autodocumentado. La
forma en la que nombramos nuestras clases hace que la función y las
características de cada bloque de código sea evidente de inmediato.
Las reglas de BEM para la estructura de los archivos nos indican cómo
debemos dividir nuestro código en archivos separados y la estructura que
deben tener esos archivos. Esto nos permite reutilizar partes del código
cuando las necesitemos, sin que tengamos que volver a escribirlas.
BEM significa «Bloque, Elemento, Modificador», estas son las tres entidades
clave con las que trabaja la metodología. También nos indica cómo
deberemos escribir nuestras clases de CSS de ahora en adelante. Es muy
importante que tengas en cuenta que los conceptos de bloques, elementos y
modificadores son más bien lógicos que técnicos. Es decir, que el
comportamiento de nuestro código HTML y CSS no cambiará cuando usemos
clases del estilo BEM. Principalmente, la sintaxis proporciona claridad
organizativa para nosotros y nuestros colegas desarrolladores, y también
mejora la reutilización.
Bloque: La especificación oficial de BEM(artículo en inglés) define el bloque
como "un componente de página independiente a nivel lógico y funcional".
Pueden ser elementos como encabezados, logotipos o barras de búsqueda.
Como son totalmente independientes, los bloques se pueden mover
libremente sin que cambie su apariencia ni su comportamiento. Esto significa
que podemos colocarlos en otra página de nuestro sitio web, o incluso
moverlos a otro proyecto, sin perder ningún contexto. Por ejemplo, una barra
de búsqueda seguirá siendo una barra de búsqueda, sin importar en qué
lugar aparezca. Los bloques también se pueden anidar dentro de otros
bloques.
Elemento: Un elemento es una parte esencial de un bloque y no tiene
aplicación fuera de su bloque padre. Por ejemplo, el botón "Buscar" de la
barra de búsqueda no tiene sentido por sí mismo y no puede usarse fuera del
contexto de la barra de búsqueda. Es importante repetir que en BEM, un
elemento es un concepto lógico. No estamos hablando de elementos HTML.
Los bloques y los elementos de la metodología BEM tienen elementos
correspondientes en HTML a los que se aplican sus estilos.
Modificador: Un modificador es una propiedad aplicada a un bloque o a un
elemento. Por ejemplo, tenemos un bloque logo que usamos dos veces: en el
encabezado y en el pie de página web. La apariencia y el comportamiento de
ambos son los mismos, excepto que el logotipo es de color negro en el
encabezado y blanco en el pie de página. Aquí es cuando resulta útil utilizar
un modificador para cambiar el color del logotipo.
¿Por qué BEM?
Estudiar la metodología BEM requiere tiempo y esfuerzo, al igual que
construir un sitio siguiendo estos principios, pero es una inversión que te dará
grandes recompensas.
Imagina una empresa en la que los desarrolladores no usen BEM ni ninguna
otra metodología. Sus hojas de estilo tendrían más o menos esta apariencia:
Copiar códigoCSS
/* estilo para la 3ª etiqueta <a>, anidada en el primer nivel de <div>,
usar si <a> tiene un atributo href que termina en '.pdf': */
div > a[href$='.pdf']:nth-of-type(3) {
/* aquí hay estilos */
}
Cuando un nuevo desarrollador se incorpora a la empresa, pasará más
tiempo intentando descifrar ese código que trabajando en él. Es más, incluso
la persona que haya escrito el código seguramente estará igual de
confundida cuando vuelva a verlo para aplicar algún cambio.
Sin embargo, si creas tu sitio web de acuerdo con los principios BEM, tu
código será mucho más sencillo de entender para los recién llegados. Cada
selector de tu código CSS consiste simplemente en el nombre de una clase,
por lo que es muy sencillo encontrar a qué elementos se aplica y saber
exactamente qué partes se verán afectadas si realizas algún cambio.
Puedes ver la documentación oficial de BEM
aquí: https://en.bem.info (artículo en inglés).
 Booleano: block__element_modifier o block_modifier
 Clave-valor: block__element_key_value o block_key_value

HTML y CSS Avanzado

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML y CSS Avanzado

Cargado por

Copyright:

Formatos disponibles

Aplicar la declaración display: flex a un elemento lo convierte en una caja

flexible, o contenedor flexible, que nos permite controlar la alineación y

<link rel="stylesheet" href="https://code.s3.yandex.net/web-code/normalize.css">

<link rel="stylesheet" href="style.css">

<div class="header" >

<a href="#" class="header-link">Practicum</a>

<div class="project project_beginner"> </div>

<div class="project project_beginner"> </div>

border: 1px solid red;

 Contenedores flexibles (elementos padre): estos elementos

Los desarrolladores a menudo crean clases que se pueden aplicar

border: 1px solid red;

 flex-direction: row: Fila estándar, donde los elementos fluyen de izquierda a

Como suele pasar con los conceptos en programación, es mejor

Hasta ahora, hemos aprendido a regular el orden en el que los elementos

 stretch: El valor predeterminado. Cada elemento se estira de un extremo

Propiedades del Elemento Flexible:

Esto es similar a la forma en que un jugador de fútbol puede alejarse de su

Propiedades del elemento flexible:

Si se usa align-content: flex-end;, los bloques se comportan de manera similar, pero

Propiedades abreviadas de CSS

 La propiedad flex-flow se puede utilizar para controlar tanto flex-

Descripción del sitio web para los

Estructura de las metaetiquetas.

 El nombre del elemento le indica al navegador el significado de la

La metaetiqueta de la ventana gráfica

 width=device-width establece el ancho de la página para que coincida con

La metaetiqueta de la ventana gráfica es un ejemplo de cómo podemos

Descripción del sitio web para los

Podemos utilizar metaetiquetas para añadir metadatos a nuestros

Hasta ahora, hemos organizado la estructura de nuestras páginas con <div>,

 Facilitan que los motores de búsqueda encuentren la información más

Los elementos semánticos aportan claridad a la estructura del documento

 <header></header>: el encabezado del sitio web

Hablando en lenguaje HTML

Para hacer una lista desordenada, utiliza las etiquetas <ul></ul>.

El elemento <table> contiene un número de elementos anidados que denota

Podemos combinar celdas utilizando los atributos rowspan y colspan. Si

 No empieces el nombre de tu identificador con números o caracteres

Sigue estas reglas para que tu código sea fácil de entender.

1. El código HTML en sí, es decir, los tipos de elementos, el orden en que

Aplicar estilos en función de las acciones del usuario

 El usuario aún no ha visitado un enlace — :link

Introducción a la metodología BEM

También podría gustarte