MATERIA: PROGRAMACION WEB

UNIDAD: 2

NOMBRE DEL PRODUCTO DE APRENDIZAJE: PRINCIPALES ELEMENTOS

CSS

NOMBRE DEL ALUMNO: HUMBERTO VAZQUEZ LUCAS

NUMERO DE CONTROL: A16700452

SEMESTRE: SEXTO

GRUPO: A

DOCENTE: ING. GERARDO EUGENIO GOMEZ VELASCO

FECHA: 27 DE ENERO DEL 2023

COMITÁN DE DOMÍNGUEZ, CHIAPAS, A 27 DE ENERO DEL 2023

Índice
1. Introducción ............................................................................................................................. 1
2. Principales elementos CSS ....................................................................................................... 2
3. Selectores CSS ......................................................................................................................... 2
4. Pseudo-clases. ........................................................................................................................ 20
5. Pseudo-elementos. .................................................................................................................. 37
6. Principales funciones (mínimo 10). ....................................................................................... 46
7. Media Queries. ....................................................................................................................... 63
8. Flexbox ................................................................................................................................... 68
9. Grid Layout ............................................................................................................................ 72
10. Conclusión .............................................................................................................................. 76
11. Bibliografía............................................................................................................................. 77
1. Introducción
En esta actividad se dará a conocer los principales elementos del lenguaje de cascada mejor
conocido como CSS, de la cual dentro de css se desglosan varios elementos que van desde
pseudoclases, pseudoelementos, flexbox, grid layout etc. A continuación, se verá cada uno
de estos y se describirá sus funciones de cada una de ellas y también cuales son las mas
utilizadas para lograr un mejor diseño de una página o aplicación web.
Cabe destacar que existe varios elementos que son parecidos pero en realidad sus
funciones son diferentes y utilizadas para diferentes acciones.

1
2. Principales elementos CSS

2.1 Selectores CSS

Los selectores definen sobre qué elementos se aplicará un conjunto de reglas CSS.
Selectores Básicos
Selector Universal
Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el
margen y el relleno de todos los elementos HTML. El selector universal se indica mediante
un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un
mismo estilo se pueda aplicar a todos los elementos de una página.

No obstante, sí que se suele combinar con otros selectores y además, forma parte de
algunos hacks muy utilizados.
Selector de tipo o Etiqueta
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del
selector.
El siguiente ejemplo selecciona todos los párrafos de la página:

Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML
(sin los caracteres < y >) correspondiente a los elementos que se quieren seleccionar.

2
El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página
HTML:

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los
selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos
estilos:

3
En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un
selector múltiple. Para ello, se incluyen todos los selectores separados por una coma (,) y
el resultado es que la siguiente regla CSS es equivalente a las tres reglas anteriores:

En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios
elementos en una única regla CSS y posteriormente definir las propiedades específicas de
esos mismos elementos. El siguiente ejemplo establece en primer lugar las propiedades
comunes de los títulos de sección (color y tipo de letra) y a continuación, establece el tamaño
de letra de cada uno de ellos:

4
Selector Descendente
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es
descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del
otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que
se encuentren dentro de un elemento <p>:

Si el código HTML de la página es el siguiente:

El selector p span selecciona tanto texto1 como texto2. El motivo es que, en el selector
descendente, un elemento no tiene que ser descendiente directo del otro. La única condición
es que un elemento debe estar dentro de otro elemento, sin importar el nivel de profundidad
en el que se encuentre.
Al resto de elementos <span> de la página que no están dentro de un elemento <p>, no se
les aplica la regla CSS anterior.
Los selectores descendentes permiten aumentar la precisión del selector de tipo o etiqueta.
Así, utilizando el selector descendente es posible aplicar diferentes estilos a los elementos
del mismo tipo. El siguiente ejemplo amplía el anterior y muestra de color azul todo el texto
de los <span> contenidos dentro de un <h1>:

5
Con las reglas CSS anteriores:
• Los elementos <span> que se encuentran dentro de un elemento <p> se muestran
de color rojo.
• Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran
de color azul.
• El resto de elementos <span> de la página, se muestran con el color por defecto
aplicado por el navegador.
La sintaxis formal del selector descendente se muestra a continuación:

Los selectores descendentes siempre están formados por dos o más selectores separados
entre sí por espacios en blanco. El último selector indica el elemento sobre el que se aplican
los estilos y todos los selectores anteriores indican el lugar en el que se debe encontrar ese
elemento.
En el siguiente ejemplo, el selector descendente se compone de cuatro selectores:

Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren
dentro de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de
tipo <a> que se encuentren dentro de elementos de tipo <p>.
No debe confundirse el selector descendente con la combinación de selectores:

6
Se puede restringir el alcance del selector descendente combinándolo con el selector
universal. El siguiente ejemplo, muestra los dos enlaces de color rojo:

Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color rojo:

La razón es que el selector p * a se interpreta como todos los elementos de tipo <a> que se
encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento
de tipo <p>. Como el primer elemento <a> se encuentra directamente bajo un
elemento <p>, no se cumple la condición del selector p * a.

7
Selector de Clase
Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página
consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente
la regla CSS que se le debe aplicar, este tipo de selectores se llaman selectores de clase y
son los más utilizados junto con los selectores de ID que se verán a continuación. La
principal característica de este selector es que en una misma página HTML varios elementos
diferentes pueden utilizar el mismo valor en el atributo class. Los selectores de clase son
imprescindibles para diseñar páginas web complejas, ya que permiten disponer de una
precisión total al seleccionar los elementos. Además, estos selectores permiten reutilizar los
mismos estilos para varios elementos diferentes.

8
Si se considera el siguiente código HTML de ejemplo:

¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector universal (*) no se
puede utilizar porque selecciona todos los elementos de la página. El selector de tipo o
etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos. Por último,
el selector descendente (body p) tampoco se puede utilizar porque todos los párrafos se
encuentran en el mismo sitio.
Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página
consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente
la regla CSS que se le debe aplicar:

A continuación, se crea en el archivo CSS una nueva regla llamada destacado con todos
los estilos que se van a aplicar al elemento. Para que el navegador no confunda este selector
con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y
como muestra el siguiente ejemplo:

9
El selector destacado se interpreta como "cualquier elemento de la página cuyo
atributo class sea igual a destacado", por lo que solamente el primer párrafo cumple esa
condición.
Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con los
selectores de ID que se verán a continuación. La principal característica de este selector es
que en una misma página HTML varios elementos diferentes pueden utilizar el mismo valor
en el atributo class:

Los selectores de clase son imprescindibles para diseñar páginas web complejas, ya que
permiten disponer de una precisión total al seleccionar los elementos. Además, estos
selectores permiten reutilizar los mismos estilos para varios elementos diferentes.
A continuación, se muestra otro ejemplo de selectores de clase:

10
El elemento <span> tiene un atributo class="error", por lo que se le aplican las reglas CSS
indicadas por el selector .error. Por su parte, el elemento <div> tiene un
atributo class="aviso", por lo que su estilo es el que definen las reglas CSS del
selector .aviso.
En ocasiones, es necesario restringir el alcance del selector de clase. Si se considera de
nuevo el ejemplo anterior:

¿Cómo es posible aplicar estilos solamente al párrafo cuyo atributo class sea igual
a destacado? Combinando el selector de tipo y el selector de clase, se obtiene un selector
mucho más específico:

El selector p.destacado se interpreta como "aquellos elementos de tipo <p> que dispongan
de un atributo class con valor destacado". De la misma forma, el
selector a.destacado solamente selecciona los enlaces cuyo atributo class sea igual
a destacado.
De lo anterior se deduce que el atributo .destacado es equivalente a *.destacado, por lo que
todos los diseñadores obvian el símbolo * al escribir un selector de clase normal.
No debe confundirse el selector de clase con los selectores anteriores:

11
Por último, es posible aplicar los estilos de varias clases CSS sobre un mismo elemento. La
sintaxis es similar, pero los diferentes valores del atributo class se separan con espacios en
blanco. En el siguiente ejemplo:

Al párrafo anterior se le aplican los estilos definidos en las

reglas .especial, .destacado y .error, por lo que, en el siguiente ejemplo, el texto del párrafo
se vería de color rojo, en negrita y con un tamaño de letra de 15 píxel:

12
Si un elemento dispone de un atributo class con más de un valor, es posible utilizar un
selector más avanzado:

En el ejemplo anterior, el color de la letra del texto es azul y no rojo. El motivo es que se ha
utilizado un selector de clase múltiple .error.destacado, que se interpreta como "aquellos
elementos de la página que dispongan de un atributo class con al menos los
valores error y destacado".

Selectores ID
El selector de ID permite seleccionar un elemento de la página a través del valor de su
atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor
del atributo id no se puede repetir en dos elementos diferentes de una misma página. La
sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que
se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la
regla CSS.

13
En el ejemplo anterior, el selector #destacado solamente selecciona el segundo párrafo
(cuyo atributo id es igual a destacado).
La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con
HTML. Como se sabe, en una misma página, el valor del atributo id debe ser único, de forma
que dos elementos diferentes no pueden tener el mismo valor de id, sin embargo, el atributo
class no es obligatorio que sea único, de forma que muchos elementos HTML diferentes
pueden compartir el mismo valor class.
De esta forma, la recomendación general es la de utilizar el selector de ID cuando se quiere
aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase
cuando se quiere aplicar un estilo a varios elementos diferentes de la página HTML.
Al igual que los selectores de clase, en este caso también se puede restringir el alcance del
selector mediante la combinación con otros selectores. El siguiente ejemplo aplica la regla
CSS solamente al elemento de tipo <p> que tenga un atributo id igual al indicado:

A primera vista, restringir el alcance de un selector de ID puede parecer absurdo. En

realidad, un selector de tipo p#aviso sólo tiene sentido cuando el archivo CSS se aplica
sobre muchas páginas HTML diferentes.
En este caso, algunas páginas pueden disponer de elementos con un atributo id igual
a aviso y que no sean párrafos, por lo que la regla anterior no se aplica sobre esos
elementos.
No debe confundirse el selector de ID con los selectores anteriores:

14
Combinación de selectores Básicos
CSS permite la combinación de uno o más tipos de selectores para restringir el alcance de
las reglas CSS. Estas combinaciones de selectores pueden llegar a ser todo lo compleja
que sean necesarias.
A continuación, se muestran algunos ejemplos habituales de combinación de selectores.

El anterior selector solamente selecciona aquellos elementos con un class="especial" que

se encuentren dentro de cualquier elemento con un class="aviso".
Si se modifica el anterior selector:

Ahora, el selector solamente selecciona aquellos elementos de tipo <span> con un

atributo class="especial" que estén dentro de cualquier elemento de tipo <div> que tenga
un atributo class="aviso".
La combinación de selectores puede llegar a ser todo lo compleja que sea necesario:

15
El anterior selector hace referencia al enlace con un atributo id igual a inicio que se
encuentra dentro de un elemento de tipo <li> con un atributo class igual a destacado, que
forma parte de una lista <ul> con un atributo id igual a menuPrincipal.
Selectores avanzados

Selector de hijos

Se trata de un selector similar al selector descendente, pero muy diferente en su

funcionamiento. Se utiliza para seleccionar un elemento que es hijo directo de otro elemento
y se indica mediante el "signo de mayor que" (>):

En el ejemplo anterior, el selector p > span se interpreta como "cualquier

elemento <span> que sea hijo directo de un elemento <p>", por lo que el primer
elemento <span> cumple la condición del selector. Sin embargo, el segundo
elemento <span> no la cumple porque es descendiente pero no es hijo directo de un
elemento <p>.
El siguiente ejemplo muestra las diferencias entre el selector descendente y el selector de
hijos:

16
El primer selector es de tipo descendente y por tanto se aplica a todos los
elementos <a> que se encuentran dentro de elementos <p>. En este caso, los estilos de
este selector se aplican a los dos enlaces.
Por otra parte, el selector de hijos obliga a que el elemento <a> sea hijo directo de un
elemento <p>. Por lo tanto, los estilos del selector p > a no se aplican al segundo enlace del
ejemplo anterior.
Selector adyacente
El selector adyacente se emplea para seleccionar elementos que en el código HTML de la
página se encuentran justo a continuación de otros elementos. Su sintaxis emplea el
signo + para separar los dos elementos:

Si se considera el siguiente código HTML:

La página anterior dispone de dos elementos <h2>, pero sólo uno de ellos se encuentra
inmediatamente después del elemento <h1>. Si se quiere aplicar diferentes colores en
función de esta circunstancia, el selector adyacente es el más adecuado:

17
Las reglas CSS anteriores hacen que todos los <h2> de la página se vean de color verde,
salvo aquellos <h2> que se encuentran inmediatamente después de cualquier
elemento <h1> y que se muestran de color rojo.
Técnicamente, los elementos que forman el selector adyacente deben cumplir las dos
siguientes condiciones:
• elemento1 y elemento2 deben ser elementos hermanos, por lo que su elemento
padre debe ser el mismo.
• elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML
de la página.
El siguiente ejemplo es muy útil para los textos que se muestran como libros:

En muchos libros, suele ser habitual que la primera línea de todos los párrafos esté
indentada, salvo la primera línea del primer párrafo. Con el selector p + p, se seleccionan
todos los párrafos de la página que estén precedidos por otro párrafo, por lo que no se aplica
al primer párrafo de la página.

Selector de atributos
El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten
seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.
Los cuatro tipos de selectores de atributos son:
• [nombre_atributo], selecciona los elementos que tienen establecido el atributo
llamado nombre_atributo, independientemente de su valor.
• [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo
llamado nombre_atributo con un valor igual a valor.

18
 • [nombre_atributo~=valor], selecciona los elementos que tienen establecido un
atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor.
• [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo
llamado nombre_atributo y cuyo valor es una serie de palabras separadas con
guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los
atributos de tipo lang que indican el idioma del contenido del elemento.

A continuación, se muestran algunos ejemplos de estos tipos de selectores:

19
2.2 Pseudo-clases.

Una pseudoclase es un selector que marca los elementos que están en un estado
específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el
cursor les pasa por encima. Tienden a actuar como si hubieras aplicado una clase en una
parte determinada del documento y, a menudo, ayudan a reducir el exceso de clases y
proporcionan un marcado más flexible y fácil de mantener.
Las pseudoclases permiten la selección de elementos, basada en información de estado
que no está contenida en el árbol de documentos.
Ejemplo: La regla a: visited se aplicará a todos los elementos <a> que hayan sido visitados
por el usuario.
Pseudoclase: activo
La pseudo-clase (en-US) :activede CSS representa un elemento (como un botón) que el
usuario está activando. Cuando se usa un mouse, la "activación" generalmente comienza
cuando el usuario presiona el botón primario del mouse y termina cuando se suelta. La
pseudo-clase :activese usa comúnmente en los elementos <a>y <button>, pero también se
puede usar en otros elementos.

20
Los estilos definidos por la pseudoclase :activeserán anulados por cualquier pseudoclase
posterior relacionada con el enlace ( :link, :hovero :visited) que tenga al menos la misma
especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla: activedespués
de todas las demás reglas relacionadas con el enlace, tal como lo define el orden
LVHA: :link— :visited— :hover— :active.

21
Pseudoclase: any-link
La pseudo-clase :any-link de CSS representa un elemento que actúa como el ancla origen
de un hipervínculo independientemente de si ha sido visitado, es decir, coincide con
cualquier elemento <a>, <area>o <link>con un atributo href. Por lo tanto, coinciden con
todos los elementos que coinciden con :linko :visited.

Ejemplo
HTML

22
 CSS

Resultado

Pseudoclase: -webkit-autofill
La pseudo-clase CSS :-webkit-autofill CSS selecciona un elemento <input> cuando su valor
es rellenado automáticamente por el navegador.
Pseudoclase: blank
La pseudo-clase CSS :blank selecciona elementos de entrada vaciós
(eg. <input> or <textarea>).
Pseudoclase: checked
La pseudo-clase :checked de CSS representa cualquier radio (<input type="radio"> (en-
US)), checkbox (<input type="checkbox">) u option (<option> en un elemento <select>) que
está marcado o conmutado a un estado on.

23
El usuario puede activar este estado marcando/seleccionando un elemento, o
desactivándolo desmarcando/deseleccionando el elemento.
Ejemplo básico:
HTML

24
 CSS

Resultado

25
Pseudoclase: current
El selector de pseudoclase CSS es una pseudoclase de dimensión temporal que representa
un elemento o el ancestro de un elemento que se está mostrando actualmente. Por ejemplo,
esta pseudoclase se puede usar para representar un video que WebVTT muestra con
subtítulos.: current

26
Pseudoclase: root
La pseudoclase: root hace referencia al elemento raíz del documento HTML, o lo que es lo
mismo, la etiqueta <html>. Sin embargo, en muchas ocasiones veremos que, en lugar de
utilizar directamente la etiqueta, se utiliza la pseudoclase :root. Al ser una pseudoclase, tiene
una especificidad CSS más alta (0,1,0) que el elemento html, el cual, al ser una etiqueta
HTML, tiene una especificidad más baja (0,0,1):

En ambos casos, estamos dando un color de fondo al elemento <html>, sin embargo, si
especificamos ambos, la pseudoclase :root sale vencedora, y sobre escribe el color de
fondo indicado en html.
Pseudoclase :first-child
Con la pseudoclase :first-child podemos seleccionar el primer elemento (o primeros
elementos) de un grupo de elementos al mismo nivel. De esta forma, si indicamos .container
:first-child buscará todos los primeros elementos que encuentre:

27
En este ejemplo, se seleccionarían 3 elementos:
• El primer <div> con clase .elements.
• El primer <div> con clase .element dentro del primer .elements.
• El primer <div> con clase .element dentro del segundo .elements.

Pseudoclase :last-child
De la misma forma, con la pseudoclase :last-child podemos seleccionar el último elemento
(o últimos elementos). Funciona exactamente igual que :first-child pero haciendo referencia
al último elemento en lugar del primero.

28
Veamos esto con un gráfico en forma de árbol que hará que el ejemplo sea más visual:

Observa que en este caso estamos seleccionando sólo los elementos <strong> porque así
se lo hemos dicho en el selector del código CSS, donde prefijamos con strong justo antes
de :first-child o :last-child. Por lo tanto, solo debe seleccionar el elemento y aplicarle los
estilos si además de ser el primero (o último) es un elemento <strong>.
Pseudoclase :nth-child()
La pseudoclase :nth-child(A) permite especificar el elemento hijo deseado, simplemente
estableciendo su número en el parámetro A. No obstante, hay que tener en cuenta que el
parámetro A no es sólo un número, sino que es posible escribir ciertas expresiones:

29
Pseudoclase :nth-last-child()
La pseudoclase funcional :nth-last-child(A) funciona de forma muy similar a la anterior,
permitiendo también indicarle un parámetro A donde específicar una expresión o número
para indicar el hijo concreto.
La diferencia respecto a la anterior, es que comenzamos a contar desde el final.
Veamos además un ejemplo gráfico:

Como se aprecia en el ejemplo, en el caso :nth-child(2) se puede ver como el segundo

elemento lo ocupa un elemento span, por lo que sólo se selecciona el elemento strong del
segundo caso, donde si existe.
Pseudoclase :first-of-type
Por ejemplo, la pseudoclase :first-of-type es la análoga a :first-child, sólo que tendrá en
cuenta sólo elementos de su mismo tipo. Observa el siguiente ejemplo donde no sólo
tenemos <div>, sino que también tenemos un <p>:

30
Pseudoclase :last-of-type
De la misma forma, la pseudoclase: last-of-type es la análoga a: last-child, que selecciona
el último elemento, pero igual que :first-of-type sólo teniendo en cuenta elementos del
mismo tipo.

31
Pseudoclase :nth-of-type()
La pseudoclase :nth-of-type(A) es la análoga a :nth-child(A). Se trata de una pseudoclase
funcional que admite pasar parámetros, donde le podemos indicar un número (o cierta
expresión) para ser mucho más específicos a la hora de seleccionar elementos del mismo
tipo.

Pseudoclase :nth-last-of-type()
La pseudoclase :nth-last-of-type(A) es la análoga a :nth-last-child(A). Veamos un nuevo
ejemplo sobre el ejercicio anterior, utilizando ahora estas últimas pseudoclases que hemos
visto:

32
En este gráfico, se puede ver como strong:nth-of-type(2) selecciona el segundo
elemento strong en ambos casos, a pesar de que en el primero ocupa la tercera posición.
En este caso se selecciona porque es el segundo elemento de su mismo tipo (<strong>).
Por otro lado, strong:nth-last-of-type(1) hace una selección de forma inversa, empezando
por el último elemento, por lo que elige el último elemento.

Pseudoclase :only-child
La propiedad :only-child nos proporciona una forma de seleccionar los elementos que sean
el único hijo de su elemento padre. Por lo tanto, si un contenedor tiene en su interior un sólo
elemento hijo, podremos seleccionar y aplicar estilos.

33
Pseudoclase: only-of-type
Además, como ha ocurrido anteriormente, también existe la pseudoclase :only-of-type que
es la análoga a la anterior, pero sólo para elementos del mismo tipo. En este caso,
podríamos tener un contenedor que contiene varios elementos, pero todos son únicos en
su tipo, por lo tanto, podrían ser seleccionados.

Pseudoclase :empty
Por último, la pseudoclase: empty permite seleccionar los elementos que estén vacíos.
Observa los siguientes ejemplos, que podríamos considerar que están vacíos, aunque con
ciertos matices:

34
Ojo con esto, ya que el navegador no considerará vacío el elemento que contiene espacios
en blanco (segundo ejemplo).
• El primer elemento, efectivamente está vacío.
• El segundo elemento .ghost, puede parecer vacío pero tiene espacios en blanco.
• El tercer elemento .comment, está vacío sólo que contiene un comentario HTML.

Pseudoclase: left
La pseudoclase CSS , utilizada con la regla arroba , representa todas las páginas de la
izquierda de un documento impreso.:left @page

Si una página dada está "a la izquierda" o "a la derecha" se determina por la dirección
principal de escritura del documento. Por ejemplo, si la primera página tiene una dirección
de escritura principal de izquierda a derecha, será una :right página; si tiene una dirección
de escritura principal de derecha a izquierda, será una :leftpágina.

35
Pseudoclase: visited
La pseudoclase CSS se aplica una vez que el enlace ha sido visitado por el usuario. Por
motivos de privacidad, los estilos que se pueden modificar mediante este selector son muy
limitados. La pseudoclase se aplica solo a los elementos que tienen
un atributo.:visited :visited<a><area>href

Pseudoclase:where()
La función de pseudoclase CSS toma una lista de selectores como argumento y selecciona
cualquier elemento que pueda ser seleccionado por uno de los selectores en esa
lista.:where()

36
2.3 Pseudo-elementos.

Los pseudoelementos son una característica de CSS que permite hacer referencias a
«comportamientos virtuales no tangibles», dicho de otra forma, seleccionar y dar estilo a
elementos que no existen en el HTML, o que no son un simple elemento en sí.
La sintaxis de los pseudoelementos está precedida de dos puntos dobles (: :) para
diferenciarlos de las pseudoclases, las cuales sólo tienen dos puntos (:). No obstante, este
cambio surgió posteriormente, por lo que aún hoy en día es frecuente ver fragmentos de
código con pseudoelementos con la sintaxis de pseudoclase con un solo par de puntos :.
Dentro de la categoría de los pseudoelementos CSS, como punto central, y quizás la más
conocida, se encuentra la propiedad content. Esta propiedad se utiliza en selectores que
incluyen los pseudoelementos: before o :: after (que explicaremos un poco más adelante),
y su objetivo es indicar que vamos a crear contenido antes o después del elemento indicado
en cuestión.

La propiedad content admite parámetros de diverso tipo, incluso concatenando información

mediante espacios. Podemos utilizar varios tipos de contenido:

37
Ten en cuenta que la propiedad content sólo funciona dentro de los
pseudoelementos ::before y ::after que explicaremos a continuación. No puede utilizarse en
otro lugar.
Pseudoelemento ::before
Los pseudoelementos ::before y ::after permiten hacer referencia a «justo antes del
elemento» y «justo después del elemento», respectivamente. Además de selectores básicos
como clase o id, combinadores, atributos o pseudoclases, puedes añadir un
pseudoelemento, precedido por doble :.
En el caso del pseudoelemento ::before, el navegador se encargará de añadir
contenido antes del inicio de la etiqueta de apertura del elemento que has seleccionado con
el resto del selector:

38
En este caso, estamos añadiendo el texto « justo antes de los elementos <q> que
aparezcan en nuestro documento, además de pintarlos de color gris. De esta forma,
podemos generar información (usualmente con fines decorativos) que no existe en el HTML,
pero que por circunstancias de diseño sería más apropiado colocar en el código CSS.

Pseudoelemento ::after
De la misma forma, tenemos el pseudoelemento ::after, que permitirá añadir contenido
después de la etiqueta de cierre en cuestión. El código correspondiente sería el siguiente:

Los ejemplos anteriores unidos, permitirían insertar el carácter «antes de las citas indicadas
con el elemento HTML <q> y el carácter» al finalizar la misma, ambas de color gris.
Pseudoelemento ::first-letter
El pseudoelemento ::first-letter, como su propio nombre indica, permite seleccionar y dar
estilo a la primera letra del texto indicado. Así podremos recrear el efecto clásico de cuentos
infantiles o algunas otras obras, donde la primera letra se establece mucho más grande que
el resto del texto y con una tipografía decorativa mucho más llamativa.

39
Un posible resultado de este fragmento de código sería el siguiente:

Pseudoelemento ::first-line
Por otro lado, el pseudoelemento ::first-line es muy útil para aplicar un estilo solamente a
la primera línea del texto indicado. Puede ser interesante si queremos cambiar algún detalle,
pero que afecte exclusivamente a la primera línea, independientemente del tamaño que
tenga (lo calcula el navegador).

40
Pseudoelemento ::selection
Cuando seleccionamos un fragmento de texto, el navegador suele aplicar un color de fondo
que depende del sistema operativo, del tema, o similar. Al igual que ocurre con la
propiedad accent-color, es posible que queramos aprovechar esto para definir un color que
tengan sentido con los colores corporativos de la marca o web, por lo que podríamos
cambiarlo haciendo uso del pseudoelemento ::selection:

Pseudoelemento ::target-text
En algunos casos, al crear un enlace a una página, tras el ancla de la URL definida con el
carácter #, se puede añadir el fragmento de texto :~:text= seguido del texto, palabra o frase
a buscar en la propia página. Al hacer esto, el navegador resaltará esa parte para que sea
más sencillo encontrarla.
Esta página suele estar destacada con color de fondo amarillo sobre letras negras, pero
podemos personalizarlo a través del pseudoelemento ::target-text:

41
Ahora, en una URL terminada en #:~:text=ManzDev, todos los textos ManzDev aparecerían
resaltados en el color seleccionado por ::target-text.

Pseudoelemento ::spelling-error
El pseudoelemento ::spelling-error nos permite modificar los estilos que se aplican a como
se muestra un error ortográfico en el navegador, que normalmente se visualiza con un
subrayado ondulado rojo en la palabra o texto afectado.

42
Pseudoelemento ::grammar-error
Por su parte, el pseudoelemento ::grammar-error es exactamente igual al anterior, sólo que
se encarga de señalar los errores gramaticales del texto, y no los ortográficos.

Pseudoelemento ::marker
El pseudoelemento ::marker sirve para hacer referencias a los signos o marcas de la listas
(<ol> o <ul>), en el caso de que queramos que tengan un estilo diferente al del texto de la
lista.
Se aplican a los elementos <li> de los ítems de una lista. Veamos un ejemplo:

Esto mostraría el texto de la lista <ul> con el color habitual que tenga (por ejemplo, negro),
pero los signos que preceden a cada ítem de la lista, apareciendo en color verde.
Pseudoelemento ::backdrop
El pseudoelemento ::backdrop nos permite aplicar estilos como oscurecer o desenfocar el
fondo detrás de un elemento para darle más protagonismo al elemento que está en primer
plano. Este elemento debe ser un diálogo o mensaje modal, que comunica información y
hay que prestarle atención y poner el foco en él.

43
En este caso, ::backdrop es un pseudoelemento que aplicará los estilos al fondo, sin que
afecte al elemento del primer plano. También se podría utilizar junto a la propiedad
CSS backdrop-filter con el valor blur(2px) (o algo similar), donde se desenfocará y se le
restará importancia al fondo y el usuario se centrará en el mensaje o la información de primer
plano.
Pseudoelemento ::placeholder
Mediante el pseudoelemento ::placeholder podemos dar estilos particulares a los
elementos <input> que tienen el atributo placeholder definido. El atributo placeholder sirve
para indicar una sugerencia o mensaje de ayuda o de información con la finalidad de ese
campo de texto, normalmente una ayuda de lo que deben escribir o similar.

44
Con ::placeholder podremos cambiar este color, por ejemplo, que suele ser un gris apagado
por defecto.
Pseudoelemento ::file-selector-button
El pseudoelemento ::file-selector-button hace referencia al <button> que se incluye dentro
de un elemento <input type="file">, o lo que es lo mismo, un botón para enviar ficheros a
través de un formulario. De esta forma, podemos personalizar la apariciencia del botón del
formulario.

45
2.4 Principales funciones (mínimo 10).

abs()
La función CSS devuelve el valor absoluto del argumento, como el mismo tipo que la
entrada.

Parámetros
La abs(x)función acepta solo un valor como su parámetro.
x
Un cálculo que se resuelve en un número.
Valor de retorno
El valor absoluto de x.
si x el valor numérico de es positivo o 0⁺, devuelve x.
De lo contrario, devuelve -1 * x.
sintaxis formal

46
Ejemplos:
Variables positivas
La abs()función se puede utilizar para garantizar que un valor sea siempre positivo. En el
siguiente ejemplo, se usa una propiedad personalizada de CSS --font-sizecomo el valor
de font-size. Envolver esta propiedad personalizada abs()convertirá un valor negativo en
uno positivo.

47
attr()
La función CSS se usa para recuperar el valor de un atributo del elemento seleccionado y
usarlo en la hoja de estilo. También se puede usar en pseudoelementos , en cuyo caso se
devuelve el valor del atributo en el elemento de origen del pseudoelemento.

48
calc()
La función CSS le permite realizar cálculos al especificar valores de propiedad CSS. Se
puede utilizar con los valores , , , , , o
.calc() <length><frequency><angle><time><percentage><number><integer>

La calc()función toma una sola expresión como su parámetro, y el resultado de la expresión

se usa como valor. La expresión puede ser cualquier expresión simple que combine los
siguientes operadores, utilizando las reglas estándar de precedencia de operadores :
+ Suma.
- Sustracción.
* Multiplicación. Al menos uno de los argumentos debe ser un <number>.
/División. El lado derecho debe ser un <number>.

49
Los operandos en la expresión pueden ser cualquier <length>valor de sintaxis. Puede usar
diferentes unidades para cada valor en su expresión, si lo desea. También puede usar
paréntesis para establecer el orden de cálculo cuando sea necesario.
var()
La función CSS se puede utilizar para insertar el valor de una propiedad personalizada (a
veces denominada "variable CSS") en lugar de cualquier parte del valor de otra propiedad.

La var() función no se puede usar en nombres de propiedad, selectores ni nada más que
valores de propiedad. (Hacerlo generalmente produce una sintaxis no válida o un valor cuyo
significado no tiene conexión con la variable).
Sintaxis
El primer argumento de la función es el nombre de la propiedad personalizada que se va a
sustituir. Un segundo argumento opcional para la función sirve como valor de reserva. Si la
propiedad personalizada a la que hace referencia el primer argumento no es válida, la
función utiliza el segundo valor.

50
URL()
La función CSS se utiliza para incluir un archivo. El parámetro es una URL absoluta, una
URL relativa, una URL de blob o una URL de datos. La función se puede pasar como un
parámetro de otras funciones CSS, como la función. Dependiendo de la propiedad para la
que sea un valor, el recurso buscado puede ser una imagen, una fuente o una hoja de
estilo. La notación funcional es el valor para el tipo de datos.url() url()attr()url()<url>

51
Las URL relativas, si se usan, son relativas a la URL de la hoja de estilo (no a la URL de la
página web).
La url()función se puede incluir como un valor para background, background-
image, border, border-image, border-image-source, content, cursor, filter, list-style, list-
style-image, mask, mask-image, src como parte de un offset-pathbloque @ font-face
y @counter-style/symbol.

symbols()
La symbols ()función CSS le permite definir estilos de contador en línea, directamente como
el valor de una propiedad como list-style. A diferencia @counter-stylede
, symbols()es anónimo (es decir, solo se puede usar una vez). Aunque menos poderoso, es
más corto y más fácil de escribir que @counter-style.

<symbols-type>puede ser uno de los siguientes:

• cyclic: El sistema recorre los valores dados en el orden de su definición y vuelve al
principio cuando llega al final.
• numeric: El sistema interpreta los valores dados como las unidades sucesivas de un
sistema de numeración de valor posicional.
• alphabetic: El sistema interpreta los valores dados como los dígitos de un sistema de
numeración alfabético, como un sistema de numeración de valor posicional pero
sin 0.
• symbolic: El sistema recorre los valores, imprimiéndolos una vez adicional en cada
ciclo (una vez para el primer ciclo, dos veces para el segundo, etc.).

52
• fixed: El sistema recorre los valores dados una vez y luego recurre a los números
arábigos.

53
sqrt()
La función CSS es una función exponencial que devuelve la raíz cuadrada de un
número.sqrt()
La función pow(x, 0.5)es equivalente a sqrt(x).

Parámetros
La sqrt(x)función acepta solo un valor como su parámetro.
x
Un cálculo que se resuelve en un <number>mayor o igual a 0.
Valor de retorno
Devuelve a <number>que es la raíz cuadrada de x.
• si xes +∞, el resultado es +∞.
• Si xes 0⁻, el resultado es 0⁻.
• Si xes menor que 0, el resultado es NaN.

54
repeat()
La función CSS representa un fragmento repetido de la lista de pistas , lo que permite
escribir una gran cantidad de columnas o filas que exhiben un patrón recurrente en una
forma más compacta.

55
Esta función se puede utilizar en las propiedades de CSS Grid grid-template-columnsy grid-
template-rows.
Sintaxis

56
57
máx()
La función CSS le permite establecer el valor más grande (más positivo) de una lista de
expresiones separadas por comas como el valor de un valor de propiedad CSS. La función
se puede usar en cualquier lugar donde se
permita , , , , , o .max() max()<length><frequency><angle><time><percentage><number><
integer>

En el primer ejemplo anterior, el ancho será de al menos 400 px, pero será más ancho si la
ventana gráfica tiene más de 2000 px de ancho (en cuyo caso, 1vw sería 20 px, por lo que
20vw sería 400 px). Piense en el max()valor como el valor mínimo que puede tener una
propiedad.
Sintaxis
La max() función toma una o más expresiones separadas por comas como su parámetro, y
el valor de expresión más grande (más positivo) se usa como el valor de la propiedad a la
que se asigna.

58
Las expresiones pueden ser expresiones matemáticas (usando operadores aritméticos),
valores literales u otras expresiones, como attr(), que se evalúan como un tipo de argumento
válido (como <length>), o anidadas min()y max()funciones.
Puede usar diferentes unidades para cada valor en su expresión. También puede usar
paréntesis para establecer el orden de cálculo cuando sea necesario.

Ejemplos
Establecer un tamaño mínimo para una fuente
Otro caso de uso para las funciones de CSS es permitir que crezca el tamaño de una fuente
y garantizar que tenga al menos un tamaño mínimo, lo que permite tamaños de fuente
receptivos y garantiza la legibilidad.

59
Veamos algo de CSS:

El tamaño de fuente será como mínimo de 2 rems, o el doble del tamaño de fuente
predeterminado para la página. Esto asegura que sea legible y garantice la accesibilidad.

min()
La función CSS le permite establecer el valor más pequeño (más negativo) de una lista de
expresiones separadas por comas como el valor de una propiedad CSS. La función se
puede usar en cualquier lugar donde se
permita , , , , , o .min() min()<length><frequency><angle><time><percentage><number><i
nteger>

60
En el primer ejemplo anterior, el ancho será como máximo de 200 px, pero será más
pequeño si la ventana gráfica tiene menos de 400 px de ancho (en cuyo caso, 1vw sería
4px, por lo que 50vw sería 200px). En otras palabras, el ancho máximo es de 200px. Piense
en el min()valor como el valor máximo que puede tener una propiedad.
log()
La función CSS es una función exponencial que devuelve el logaritmo de un número.
El logaritmo, o log , es el inverso deexponentiation ; es el número al que se tiene que elevar
una base fija para dar el número pasado como primer parámetro.
En CSS, cuando se pasa un solo parámetro, se usa el logaritmo natural e, o
aproximadamente 2.7182818, aunque la base se puede establecer en cualquier valor con
un segundo parámetro opcional.

61
element()
La función CSS define un valor generado a partir de un elemento HTML arbitrario. Esta
imagen está activa, lo que significa que si se cambia el elemento HTML, las propiedades
CSS que usan el valor resultante se actualizan automáticamente.
Un escenario particularmente útil para usar esto sería representar una imagen en
un <canvas>elemento HTML y luego usarla como fondo.
En los navegadores Gecko, puede usar el document.mozSetImageElement()método no
estándar para cambiar el elemento que se usa como fondo para un elemento de fondo CSS
determinado.

62
2.5 Media Queries.

En desarrollo web, las media queries son un módulo CSS3 que permite adaptar la
representación del contenido a características del dispositivo como la resolución de
pantalla (por ejemplo, un smartphone frente a pantallas de alta definición) o la presencia de
características de accesibilidad como el braille. Se convirtió en un estándar recomendado
por la W3C en junio de 2012. y es un principio básico de la tecnología de Diseño web
adaptativo.

63
Una media query consiste de un media type y una o más expresiones, que implican media
features, que se resuelve en true o false. El resultado de la consulta es verdadero si el media
type especificado en el media query coincide con el tipo de dispositivo sobre el que el
documento está siendo mostrado y todas las expresiones de la media query son verdaderas.
Cuando un media query es verdadero, se aplica la hoja de estilo correspondiente o las reglas
de estilo, siguiendo las reglas normales en cascada.
Esto es un simple ejemplo:

@media screen and (min-width:500px) { ... }

La media query se utilizan para:

• Aplicar estilos condicionales con las reglas-at @media e @import de CSS.
• Indicar medios específicos en los elementos <link>, <source> y otros
elementos HTML.
• Testear y monitorizar los estados de los medios usando los métodos de
javascript Window.matchMedia() y MediaQueryList.addListener().
Sintaxis
Los tipos de medios definen la amplia categoría de dispositivos para los que se aplica la
consulta de medios: all, print, screen. El tipo es opcional (se supone que es all) excepto
cuando se utilizan los operadores lógicos noto .only
Las funciones multimedia describen una característica específica del agente de usuario , el
dispositivo de salida o el entorno:
• any-hover
• any-pointer
• aspect-ratio
• color

64
• color-gamut
• color-index
• device-aspect-ratio Obsoleto
• device-height Obsoleto
• device-width Obsoleto
• display-mode
• dynamic-range
• forced-colors
• grid
• height
• hover
• inverted-colors
• monochrome
• orientation
• overflow-block
• overflow-inline
• pointer
• prefers-color-scheme
• prefers-contrast
• prefers-reduced-motion
• resolution
• scripting
• update
• video-dynamic-range
• width.

65
Por ejemplo, la hover función permite que una consulta pruebe si el dispositivo admite el
desplazamiento sobre los elementos. Las expresiones de funciones de medios comprueban
su presencia o valor y son completamente opcionales. Cada expresión de función de medios
debe estar entre paréntesis.
Los operadores lógicos se pueden utilizar para componer una consulta de medios
compleja: not, andy only. También puede combinar múltiples consultas de medios en una
sola regla separándolas con comas.
Una media query se calcula true cuando el tipo de medio (si se especifica) coincide con el
dispositivo en el que se muestra un documento y todas las expresiones de características
de medios se calculan como verdaderas. Las consultas que involucran tipos de medios
desconocidos siempre son falsas.

Orientación a tipos de medios

Los tipos de medios describen la categoría general de un dispositivo determinado. Aunque
los sitios web suelen diseñarse teniendo en cuenta las pantallas, es posible que desee crear
estilos destinados a dispositivos especiales, como impresoras o lectores de pantalla
basados en audio. Por ejemplo, este CSS apunta a las impresoras:

También puede apuntar a múltiples dispositivos. Por ejemplo, esta @mediaregla utiliza dos
consultas de medios para dirigirse tanto a dispositivos de pantalla como de impresión:

66
Creación de media query complejas
En ocasiones, es posible que desee crear una media query que dependa de varias
condiciones. Aquí es donde entran los operadores lógicos: not, andy only. Además, puede
combinar múltiples consultas de medios en una lista separada por comas ; esto le permite
aplicar los mismos estilos en diferentes situaciones.
En el ejemplo anterior, ya vimos el andoperador utilizado para agrupar un tipo de medio con
una característica de medios. El andoperador también puede combinar múltiples funciones
de medios en una sola consulta de medios. Mientras not tanto, el operador niega una
consulta de medios, básicamente invirtiendo su significado normal. El only operador evita
que los navegadores antiguos apliquen los estilos.

Mejoras de sintaxis en el nivel 4

La especificación Media Queries Level 4 incluye algunas mejoras de sintaxis para hacer que
las consultas de medios utilicen características que tienen un tipo de "rango", por ejemplo,
ancho o alto, menos detallado. El nivel 4 agrega un contexto de rango para escribir tales
consultas. Por ejemplo, usando la max-funcionalidad de ancho, podríamos escribir lo
siguiente:

En Media Queries Level 4 esto se puede escribir como:

67
2.6 Flexbox

El módulo de caja flexible, generalmente denominado flexbox, se diseñó como un modelo

de diseño unidimensional y como un método que podría ofrecer distribución de espacio entre
elementos en una interfaz y potentes capacidades de alineación. Este artículo ofrece un
resumen de las características principales de flexbox, que exploraremos con más detalle en
el resto de estas guías.
Cuando describimos a flexbox como unidimensional, estamos describiendo el hecho de que
flexbox se ocupa del diseño en una dimensión a la vez, ya sea como una fila o como una
columna. Esto se puede contrastar con el modelo bidimensional de CSS Grid Layout , que
controla columnas y filas juntas.
Los dos ejes de flexbox
Cuando trabaje con flexbox, debe pensar en términos de dos ejes: el eje principal y el eje
transversal. El eje principal está definido por la flex-direction propiedad y el eje transversal
corre perpendicular a él. Todo lo que hacemos con flexbox se refiere a estos ejes, por lo
que vale la pena entender cómo funcionan desde el principio.
el eje principal
El eje principal está definido por flex-direction, que tiene cuatro valores posibles:
• row
• row-reverse
• column
• column-reverse

Si elige row o row-reverse, su eje principal correrá a lo largo de la fila en la dirección en

línea.

68
Elija column o column-reversey su eje principal se extenderá desde la parte superior de la
página hasta la parte inferior, en la dirección del bloque.

el eje transversal
El eje transversal corre perpendicular al eje principal, por lo tanto, si su flex-direction(eje
principal) está configurado en row o row-reverseel eje transversal baja por las columnas.

Si su eje principal es column o column-reverse entonces el eje transversal corre a lo largo

de las filas.

69
Líneas de inicio y fin
Otra área vital de comprensión es cómo flexbox no hace suposiciones sobre el modo de
escritura del documento. En el pasado, CSS estaba fuertemente inclinado hacia los modos
de escritura horizontal y de izquierda a derecha. Los métodos de diseño modernos abarcan
la variedad de modos de escritura, por lo que ya no damos por sentado que una línea de
texto comenzará en la parte superior izquierda de un documento y se extenderá hacia el
lado derecho, con líneas nuevas que aparecerán una debajo de la otra.

Si flex-direction es row y estoy trabajando en inglés, entonces el borde inicial del eje
principal estará a la izquierda y el borde final a la derecha.

Si tuviera que trabajar en árabe, el borde inicial de mi eje principal estaría a la derecha y el
borde final a la izquierda.

El contenedor flexible
Un área de un documento diseñado con flexbox se denomina contenedor flexible. Para crear
un contenedor flexible, establecemos el valor de la display propiedad del contenedor del
área en flexo inline-flex.

70
Tan pronto como hagamos esto, los elementos secundarios directos de ese contenedor se
convertirán en elementos flexibles. Al igual que con todas las propiedades en CSS, se
definen algunos valores iniciales, por lo que, al crear un contenedor flexible, todos los
elementos flexibles contenidos se comportarán de la siguiente manera.
• Los elementos se muestran en una fila (el flex-directionvalor predeterminado de la
propiedad es row).
• Los elementos comienzan desde el borde de inicio del eje principal.
• Los artículos no se estiran en la dimensión principal, pero pueden encogerse.
• Los elementos se estirarán para llenar el tamaño del eje transversal.
• La flex-basispropiedad se establece en auto.
• La flex-wrappropiedad se establece en nowrap.
El resultado de esto es que todos sus artículos se alinearán en una fila, usando el tamaño
del contenido como su tamaño en el eje principal. Si hay más elementos de los que caben
en el contenedor, no se envolverán, sino que se desbordarán. Si algunos elementos son
más altos que otros, todos los elementos se estirarán a lo largo del eje transversal para
llenar su tamaño completo.
Puede ver en el ejemplo en vivo a continuación cómo se ve esto. Intente editar los elementos
o agregar elementos adicionales para probar el comportamiento inicial de flexbox.

71
2.7 Grid Layout

CSS grid layout o CSS grid es una técnica de las Hojas de Estilo en Cascada que permite
a los desarrolladores web crear diseños complejos y adaptables con mayor facilidad en
todos los navegadores. Ha habido otros métodos para controlar los métodos de diseño de
páginas web, como las tablas, el modelo de caja, y CSS flex. CSS grid no es actualmente
un estándar oficial (es una W3C Candidate Recommendation) aunque ha sido adoptada por
la mayoría de los principales navegadores.
CSS grid puede crear diseños más asimétricos como el layout anterior y opciones de diseño
como CSS floats. También permite un código más estandarizado que funciona en todos los
navegadores. Esto es en contraste con confiar en los atajos específicos de los navegadores
o en complicadas soluciones.
Un problema con la explotación de floats en CSS es que si el contenido se añade a una
parte de la página podría interrumpir el flujo de la página y romper el diseño. Esto se debe
a las diferentes alturas de los elementos de diseño. Aunque CSS flex soporta diseños
flexibles y proporciona la flexibilidad de crear diseños complejos, falla cuándo surge la
necesidad de crear diseños sensibles en un espacio bidimensional.
Soporte en navegadores
A partir de octubre de 2017, Chrome, Firefox, Safari y Edge soportan CSS grid sin prefijos.
45 IE 10 y 11 soportan CSS grid pero con una especificación obsoleta. En móviles, todos
los navegadores modernos soportan CSS grid excepto Opera Mini y UC Browser. Los
desarrolladores web orientados a navegadores más antiguos pueden
utilizar Modernizr 3.5.0 para detectar y degradar con gracia la página web según sea
necesario.

72
Ejemplo:

Aquí hay un ejemplo de una tabla de valores:

CSS Grid Layout introduce un sistema de cuadrícula bidimensional en CSS. Las cuadrículas
se pueden utilizar para diseñar áreas de página principales o elementos pequeños de la
interfaz de usuario.

73
Este artículo presenta el diseño de cuadrícula CSS y la nueva terminología que forma parte
de la especificación del nivel 1 del diseño de cuadrícula CSS. Las funciones que se
muestran en esta descripción general se explicarán con mayor detalle en el resto de esta
guía.
¿Qué es una cuadrícula?
Una cuadrícula es un conjunto de líneas horizontales y verticales que se cruzan y definen
columnas y filas. Los elementos se pueden colocar en la cuadrícula dentro de estas líneas
de columna y fila. El diseño de cuadrícula CSS tiene las siguientes características:
Tamaños de vía fijos y flexibles
Puede crear una cuadrícula con tamaños de pista fijos, por ejemplo, utilizando píxeles. Esto
establece la cuadrícula en el píxel especificado que se ajusta al diseño que desea. También
puedes crear una grilla usando tamaños flexibles con porcentajes o con la frunidad diseñada
para tal fin.
Colocación de elementos
Puede colocar elementos en una ubicación precisa en la cuadrícula utilizando números de
línea, nombres o apuntando a un área de la cuadrícula. Grid también contiene un algoritmo
para controlar la ubicación de los elementos que no tienen una posición explícita en la
cuadrícula.
Creación de pistas adicionales para albergar contenido
Puede definir una cuadrícula explícita con diseño de cuadrícula. La especificación de diseño
de cuadrícula es lo suficientemente flexible como para agregar filas y columnas adicionales
cuando sea necesario. Se incluyen funciones como agregar "tantas columnas que quepan
en un contenedor".
Control de alineación
La cuadrícula contiene funciones de alineación para que podamos controlar cómo se alinean
los elementos una vez colocados en un área de cuadrícula y cómo se alinea toda la
cuadrícula.

74
Control de contenido superpuesto
Se puede colocar más de un elemento en una celda o área de cuadrícula y se pueden
superponer parcialmente entre sí. Esta estratificación se puede controlar con la z-index
propiedad.
Grid es una especificación poderosa que, cuando se combina con otras partes de CSS
como flexbox , puede ayudarlo a crear diseños que antes eran imposibles de construir en
CSS. Todo comienza creando una cuadrícula en su contenedor de cuadrícula.
Alineación de cuadros en diseño de cuadrícula
CSS Grid Layout implementa la especificación Box Alignment Level 3 , que es el mismo
estándar que usa flexbox para alinear elementos en su contenedor flexible. Esta
especificación detalla cómo debe funcionar la alineación en todos los diferentes métodos de
diseño. Los métodos de diseño se ajustarán a la especificación siempre que sea posible e
implementarán el comportamiento individual en función de sus diferencias (características y
restricciones). Si bien la especificación actualmente especifica los detalles de alineación
para todos los métodos de diseño, los navegadores no han implementado completamente
toda la especificación; sin embargo, el método CSS Grid Layout ha sido ampliamente
adoptado.
Debido a que grid es bidimensional y flexbox unidimensional, existen algunas pequeñas
diferencias que debe tener en cuenta. Entonces, comenzaremos observando los dos ejes
con los que tratamos cuando alineamos las cosas en una cuadrícula.

75
3. Conclusión
Con esto se llegó a la conclusión abordando cada elemento que conforma el lenguaje de
cascada CSS es fundamental para llegar a lograr realizar un buen diseño de alguna página
o aplicación web que se desarrolle, por lo que es importante conocer a detalle cada una de
ellas para poder ocupar cuando se este desarrollando algo web, cabe señalar que cada
elemento tiene sus funciones que alteran el diseño, por lo que es importante saberlas usas
e implementar de la mejor manera.

76
4. Bibliografía

• Selectores. (2023). Dis.um.es.

http://dis.um.es/~lopezquesada/documentos/IES_1213/LMSGI/curso/css/css13/pagi
na_1.html
• uniwebsidad. (2023). Uniwebsidad.com; uniwebsidad.
https://uniwebsidad.com/libros/css/capitulo-2/selectores-basicos
• uniwebsidad. (2023). Uniwebsidad.com; uniwebsidad.
https://uniwebsidad.com/libros/css/capitulo-2/selectores-avanzados
• Selectores CSS - CSS | MDN. (2022, November 26). Mozilla.org.
https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors#selectores_b%C3%
A1sicos
• :active - CSS | MDN. (2022, November 26). Mozilla.org.
https://developer.mozilla.org/es/docs/Web/CSS/:active
• Pseudoclases y pseudoelementos - Aprende sobre desarrollo web | MDN. (2022,
November 30). Mozilla.org.
https://developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-
classes_and_pseudo-elements
• Pseudoclases de estructura - CSS en español. (2023). Lenguajecss.com.
https://lenguajecss.com/css/selectores/pseudoclases-estructura/
• Pseudoelementos CSS - CSS en español. (2023). Lenguajecss.com.
https://lenguajecss.com/css/selectores/pseudoelementos/
• Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN. (2022, September
28). Mozilla.org. https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

77
• de, C. (2020, May 13). CSS grid layout. Wikipedia.org; Wikimedia Foundation, Inc.
https://es.wikipedia.org/wiki/CSS_grid_layout
• Basic concepts of grid layout - CSS: Cascading Style Sheets | MDN. (2022, December
19). Mozilla.org. https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
• Box alignment in grid layout - CSS: Cascading Style Sheets | MDN. (2022,
September 28). Mozilla.org. https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

78