CSS

SELECTORES CSS

Introducción a CSS

2.1. Selectores básicos

2.1.1. 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 (por
ahora no es importante fijarse en la parte de la declaración de la regla
CSS):

*{
margin: 0;
padding: 0;
}
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, como se verá más adelante.

2.1.2. 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:

p{
...
}
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.

El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos

de una página HTML:

h1 {
color: red;
}

h2 {
color: blue;
}

p{
color: black;
}
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:
h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
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:

h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
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:

h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
2.1.3. 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>:

p span { color: red; }

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

<p>
...
<span>texto1</span>
 ...
<a href="">...<span>texto2</span></a>
...
</p>
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>:

p span { color: red; }

h1 span { color: blue; }
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:
selector1 selector2 selector3 ... selectorN
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:

p a span em { text-decoration: underline; }

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:

/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */

p, a, span, em { text-decoration: underline; }

/* El estilo se aplica solo a los elementos "em" que se

encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }
Se puede restringir el alcance del selector descendente combinándolo con
el selector universal. El siguiente ejemplo, muestra los dos enlaces de color
rojo:
p a { color: red; }

<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
Sin embargo, en el siguiente ejemplo solamente el segundo enlace se
muestra de color rojo:

p * a { color: red; }

<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
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.

2.1.4. Selector de clase

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

<body>
<p>Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
¿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:

<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
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:

.destacado { color: red; }

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:

<body>
 <p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a>
accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em>
litora...</p>
</body>
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:

.aviso {
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda;
}

.error {
color: #930;
font-weight: bold;
}
<span class="error">...</span>

<div class="aviso">...</div>
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:

<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a>
accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em>
litora...</p>
</body>
¿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:

p.destacado { color: red }

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:

/* Todos los elementos de tipo "p" con atributo class="aviso" */

p.aviso { ... }

/* Todos los elementos con atributo class="aviso" que estén dentro

de cualquier elemento de tipo "p" */
p .aviso { ... }

/* Todos los elementos "p" de la página y todos los elementos con

atributo class="aviso" de la página */
p, .aviso { ... }
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:

<p class="especial destacado error">Párrafo de texto...</p>

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:

.error { color: red; }

.destacado { font-size: 15px; }
.especial { font-weight: bold; }

<p class="especial destacado error">Párrafo de texto...</p>

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

.error { color: red; }

.error.destacado { color: blue; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }

<p class="especial destacado error">Párrafo de texto...</p>

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".

2.1.5. Selectores de ID
En ocasiones, es necesario aplicar estilos CSS a un único elemento de la
página. Aunque puede utilizarse un selector de clase para aplicar estilos a
un único elemento, existe otro selector más eficiente en este caso.

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:

#destacado { color: red; }

<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>
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 y no con CSS. 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 para su
atributo 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:

p#aviso { color: blue; }

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:

/* Todos los elementos de tipo "p" con atributo id="aviso" */
p#aviso { ... }

/* Todos los elementos con atributo id="aviso" que estén dentro

de cualquier elemento de tipo "p" */
p #aviso { ... }

/* Todos los elementos "p" de la página y todos los elementos con

atributo id="aviso" de la página */
p, #aviso { ... }
2.1.6. 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. A continuación se muestran algunos
ejemplos habituales de combinación de selectores.

.aviso .especial { ... }

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:

div.aviso span.especial { ... }

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:

ul#menuPrincipal li.destacado a#inicio { ... }

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.
SEUDO SELECTORES :

Los selectores de pseudoclases son una parte importante

de CSS y se utilizan para aplicar un estilo a un elemento
en función de su estado o relación con otros elementos.
Aquí hay una descripción de algunos selectores de
pseudoclases comunes:

1. :hover: este selector se aplica a un elemento cuando el

cursor del mouse se coloca sobre él. Es comúnmente
utilizado para cambiar el color o el fondo de un enlace
cuando el usuario pasa el cursor sobre él.

2. :active: este selector se aplica a un elemento mientras

se mantiene pulsado el botón del mouse sobre él. Por
ejemplo, puedes usar este selector para resaltar un botón
cuando el usuario lo presiona.

3. :focus: este selector se aplica a un elemento cuando

recibe el foco, como cuando un usuario hace clic en un
campo de formulario para ingresar información. Se utiliza
comúnmente para resaltar campos de formulario y otros
elementos interactivos.
4. :visited: este selector se aplica a un enlace una vez que
ha sido visitado por el usuario. Se utiliza para cambiar el
color de los enlaces ya visitados para indicar que han sido
seleccionados previamente.

5. :first-child: este selector se aplica al primer elemento

hijo de un elemento HTML. Por ejemplo, puedes usar este
selector para agregar un estilo especial al primer
elemento de una lista o de un menú.

6. :last-child: este selector se aplica al último elemento

hijo de un elemento HTML. Puedes usarlo para aplicar un
estilo especial al último elemento de una lista o de un
menú.

7. :nth-child(): este selector se utiliza para seleccionar

elementos específicos dentro de un elemento HTML.
Puedes especificar el número de elemento que deseas
seleccionar utilizando la función "nth-child". Por ejemplo,
puedes seleccionar el segundo elemento de una lista con
":nth-child(2)".

8. :not(): este selector se utiliza para seleccionar

elementos que no cumplen ciertas condiciones. Puedes
especificar los elementos que deseas excluir utilizando la
función "not". Por ejemplo, puedes seleccionar todos los
elementos <p> que no tienen la clase "destacado" con
":not(.destacado)".

Estos son solo algunos de los selectores de pseudoclases

más comunes. Hay muchos más disponibles en CSS que se
pueden usar para aplicar estilos en función de diferentes
estados y relaciones de los elementos.

Estas son todas pseudo-clases y pseudo-elementos de CSS

utilizados para seleccionar y estilizar elementos
específicos de una página web en función de su estado
actual o su relación con otros elementos de la página.

- :active se utiliza para seleccionar y estilizar un elemento

que actualmente se está haciendo clic o activando.
- :checked se utiliza para seleccionar y estilizar un
elemento de entrada marcado, como una casilla de
verificación o un botón de opción.
- :disabled se utiliza para seleccionar y estilizar un
elemento de entrada o botón deshabilitado.
- :empty se utiliza para seleccionar y estilizar un elemento
que no tiene hijos.
- :enabled se utiliza para seleccionar y estilizar un
elemento de entrada o botón habilitado.
- :first-child se utiliza para seleccionar y estilizar el primer
hijo de un elemento padre.
- :first-of-type se utiliza para seleccionar y estilizar el
primer elemento de un tipo específico dentro de un
elemento padre.
- :focus se utiliza para seleccionar y estilizar un elemento
que actualmente tiene el enfoque del usuario.
- :hover se utiliza para seleccionar y estilizar un elemento
cuando el usuario pasa el cursor sobre él.
- :in-range se utiliza para seleccionar y estilizar un
elemento de entrada cuyo valor está dentro de un rango
específico.
- :invalid se utiliza para seleccionar y estilizar un elemento
de entrada cuyo valor es inválido.
- :lang se utiliza para seleccionar y estilizar elementos que
tienen un atributo lang específico.
- :last-child se utiliza para seleccionar y estilizar el último
hijo de un elemento padre.
- :last-of-type se utiliza para seleccionar y estilizar el
último elemento de un tipo específico dentro de un
elemento padre.
- :link se utiliza para seleccionar y estilizar un enlace no
visitado.
- :not se utiliza para seleccionar y estilizar elementos que
no cumplen con un selector específico.
- :nth-child se utiliza para seleccionar y estilizar un hijo
específico de un elemento padre.
- :nth-last-child se utiliza para seleccionar y estilizar un
hijo específico de un elemento padre, contando desde el
final de la lista de hijos.
- :nth-last-of-type se utiliza para seleccionar y estilizar un
elemento de un tipo específico dentro de un elemento
padre, contando desde el final de la lista de elementos.
- :nth-of-type se utiliza para seleccionar y estilizar un
elemento de un tipo específico dentro de un elemento
padre.
- :only-child se utiliza para seleccionar y estilizar un
elemento que es el único hijo de su elemento padre.
- :only-of-type se utiliza para seleccionar y estilizar un
elemento que es el único elemento de su tipo dentro de
su elemento padre.
- :optional se utiliza para seleccionar y estilizar un
elemento de entrada opcional.
- :out-of-range se utiliza para seleccionar y estilizar un
elemento de entrada cuyo valor está fuera de un rango
específico.
- :read-only se utiliza para seleccionar y estilizar un
elemento de entrada de solo lectura.
- :read-write se utiliza para seleccionar y estilizar un
elemento de entrada de lectura y escritura.
- :required se utiliza para seleccionar y estilizar un
elemento de entrada requerido.
- :root se utiliza para seleccionar y estilizar el elemento
raíz del documento HTML.
- :target se utiliza para seleccionar y estilizar un elemento
que se ha vinculado desde otro lugar de la.
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------
-----------------------------------------------------------------------------

/////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////

MEDIDAS RELATIVAS CSS

Las unidades de medida relativas son aquellas que se

calculan en función de algún otro valor en la página web.
Algunas de las unidades de medida relativas más
comunes son:
- em: esta unidad de medida se basa en el tamaño de la
fuente del elemento padre. Un em es igual al tamaño de
la fuente del elemento padre. Por ejemplo, si el tamaño
de fuente del elemento padre es de 16 píxeles, entonces
1em será igual a 16 píxeles. Si el tamaño de fuente del
elemento padre cambia, el tamaño de fuente de los
elementos hijo también cambia.

- rem: esta unidad de medida también se basa en el

tamaño de la fuente, pero a diferencia de em, se refiere al
tamaño de la fuente del elemento raíz (root) del
documento HTML. Si el tamaño de fuente del elemento
raíz es de 16 píxeles, entonces 1rem será igual a 16
píxeles. La ventaja de rem es que el tamaño de fuente de
los elementos hijo no cambia si el tamaño de fuente de
los elementos padre cambia.

- ex: esta unidad de medida se basa en el tamaño de la

letra "x" en la fuente del elemento padre.

- ch: esta unidad de medida se basa en el ancho de la letra

"0" en la fuente del elemento padre.

- vw: esta unidad de medida se refiere al ancho de la

ventana del navegador y representa el porcentaje del
ancho total de la ventana. Por ejemplo, si el ancho total
de la ventana es de 1000 píxeles y se establece el ancho
de un elemento en 50vw, el elemento tendrá un ancho de
500 píxeles.

- vh: esta unidad de medida se refiere a la altura de la

ventana del navegador y representa el porcentaje de la
altura total de la ventana.

- vmin: esta unidad de medida se refiere al valor mínimo

entre el ancho y la altura de la ventana del navegador.

- vmax: esta unidad de medida se refiere al valor máximo

entre el ancho y la altura de la ventana del navegador.

- %: se utiliza para establecer un porcentaje del tamaño

de un elemento padre.

- calc(): esta función permite realizar cálculos

matemáticos para definir el valor de una propiedad CSS.
Por ejemplo, se puede utilizar calc(50% - 20px) para
establecer el ancho de un elemento en el 50% del ancho
de su elemento padre menos 20 píxeles.
ººººººººººººººººººººººººººººººººººººººººººººººººººººººº
ººººººººººººººººººººººººººººººººººººººººººººººººººººººº
ººººººººººººººººººººººººººººººººººººººººººººººººººººººº
ºººººººººººººººººººººººººººººººººººººººººººººººººººººº

align-content: Es una propiedad de CSS que se utiliza para

alinear y distribuir el contenido verticalmente en un
contenedor de varias líneas.

align-items: Es una propiedad de CSS que se utiliza para

alinear y distribuir el contenido verticalmente dentro de
un elemento, en relación con el eje horizontal.

align-self: Es una propiedad de CSS que se utiliza para

alinear y distribuir el contenido verticalmente dentro de
un elemento en particular, en relación con el eje
horizontal.

all: Es una propiedad de CSS que se utiliza para aplicar

todas las propiedades CSS en un solo elemento, a la vez.

animation: Es una propiedad de CSS que se utiliza para

crear animaciones en un elemento.

animation-delay: Es una propiedad de CSS que se utiliza

para establecer el tiempo de retraso antes de que
comience una animación.
animation-direction: Es una propiedad de CSS que se
utiliza para establecer la dirección de una animación.

animation-duration: Es una propiedad de CSS que se

utiliza para establecer la duración de una animación.

animation-fill-mode: Es una propiedad de CSS que se

utiliza para establecer cómo un elemento debe ser
estilizado antes y después de una animación.

animation-iteration-count: Es una propiedad de CSS que

se utiliza para establecer el número de veces que se debe
repetir una animación.

animation-name: Es una propiedad de CSS que se utiliza

para establecer el nombre de una animación.

animation-play-state: Es una propiedad de CSS que se

utiliza para establecer si una animación se debe
reproducir o pausar.

animation-timing-function: Es una propiedad de CSS que

se utiliza para establecer la velocidad de una animación.
backface-visibility: Es una propiedad de CSS que se utiliza
para establecer si la cara posterior de un elemento debe
ser visible cuando se gira.

background: Es una propiedad de CSS que se utiliza para

establecer el fondo de un elemento.

background-attachment: Es una propiedad de CSS que se

utiliza para establecer si la imagen de fondo de un
elemento se mueve con el contenido del elemento o se
mantiene fija en su posición.

background-blend-mode: Es una propiedad de CSS que se

utiliza para mezclar el color de fondo de un elemento con
una imagen de fondo.

background-clip: Es una propiedad de CSS que se utiliza

para establecer la región donde se mostrará el fondo de
un elemento.

background-color: Es una propiedad de CSS que se utiliza

para establecer el color de fondo de un elemento.
background-image: Es una propiedad de CSS que se utiliza
para establecer una imagen como fondo de un elemento.

background-origin: Es una propiedad de CSS que se utiliza

para establecer el origen de la imagen de fondo de un
elemento.

background-position: Es una propiedad de CSS que se

utiliza para establecer la posición de la imagen de fondo
de un elemento.

background-repeat: Es una propiedad de CSS que se

utiliza para establecer si la imagen de fondo de un
elemento se repite o no.

background-size: Es una propiedad de CSS que se utiliza

para establecer el tamaño de la imagen de fondo de un
elemento.

border: Es una propiedad de CSS que se utiliza para

establecer el borde de un elemento.

border-bottom: Es una propiedad de CSS que se utiliza

para establecer el borde inferior de un elemento.
border-bottom-color: Es una propiedad de CSS que se
utiliza para establecer el color del borde inferior de un
elemento.

border-bottom-left-radius: Es una propiedad de CSS que

se utiliza para establecer el radio de la esquina inferior
izquierda del borde de un elemento.

border-bottom-right-radius: Es una propiedad de CSS que

se utiliza para establecer el radio de la esquina.

###############################################
###############################################
###############################################
###############################################
###############################################
Los estilos CSS que faltan por describir son los
siguientes:
- initial-letter: aplica un estilo al primer carácter de un
elemento.
- initial-letter-align: establece la alineación del primer
carácter de un elemento.
- inline-size: establece el ancho de un elemento en un
diseño horizontal.
- inset: establece el valor de las cuatro propiedades de
posicionamiento de borde en un solo atributo.
- inset-block: establece el valor de la propiedad de
posicionamiento superior e inferior en un solo atributo.
- inset-block-end: establece el valor de la propiedad de
posicionamiento inferior en un solo atributo.
- inset-block-start: establece el valor de la propiedad de
posicionamiento superior en un solo atributo.
- inset-inline: establece el valor de la propiedad de
posicionamiento izquierda y derecha en un solo atributo.
- inset-inline-end: establece el valor de la propiedad de
posicionamiento derecha en un solo atributo.
- inset-inline-start: establece el valor de la propiedad de
posicionamiento izquierda en un solo atributo.
- isolation: establece si un elemento se coloca en su
propio contexto de apilamiento.
- justify-content: alinea los elementos en el eje principal
de un contenedor.
- justify-items: alinea los elementos dentro de un
contenedor en el eje secundario.
- justify-self: alinea un elemento a lo largo del eje
secundario dentro de su propio contenedor.
- marks: establece las marcas de recorte y de corte para
una página impresa.
- mask: establece la máscara de recorte de un elemento.
- mask-clip: establece la forma de la máscara de recorte.
- mask-composite: establece cómo se mezcla la máscara
de recorte con el elemento.
- mask-image: establece la imagen utilizada como máscara
de recorte.
- mask-mode: establece si la máscara de recorte es
luminosa o transparente.
- mask-origin: establece el punto de inicio de la máscara
de recorte.
- mask-position: establece la posición de la máscara de
recorte.
- mask-repeat: establece cómo se repite la máscara de
recorte.
- mask-size: establece el tamaño de la máscara de recorte.
- mask-type: establece el tipo de máscara de recorte.
- max-block-size: establece la altura máxima de un
elemento.
- max-inline-size: establece la anchura máxima de un
elemento en un diseño horizontal.
- mix-blend-mode: establece el modo de mezcla para la
superposición de elementos.
- object-fit: establece cómo se ajusta un elemento en su
contenedor.
- object-position: establece la posición de un elemento
ajustado en su contenedor.
- orphans: establece el número mínimo de líneas de un
párrafo que se deben mostrar en la parte inferior de una
página.
- overflow-block: establece cómo manejar el
desbordamiento en el eje de bloque.
- overflow-inline: establece cómo manejar el
desbordamiento en el eje en línea.
- overflow-wrap: establece si se permiten saltos de línea
dentro de palabras largas.
- page-break-after: establece si se debe insertar un salto
de página después de un elemento.
- page-break-before: establece si se debe insertar un salto de
página antes de un elemento.
- page-break-inside: establece si se puede dividir un
elemento en varias páginas.
- perspective:

Estas son las descripciones de cada una de las funciones

mencionadas:

- attr(): Esta función se utiliza para recuperar el valor de

un atributo de un elemento HTML y utilizarlo en una
propiedad CSS. Por ejemplo, se puede utilizar para definir
el valor de un ancho de borde en función de un atributo
de datos en un elemento.

- calc(): Esta función se utiliza para realizar cálculos

matemáticos en valores CSS. Puede contener operadores
matemáticos como +, -, * y /, y se puede utilizar para
realizar operaciones con valores numéricos, unidades de
medida y variables CSS.

- clamp(): Esta función se utiliza para limitar un valor CSS

dentro de un rango específico. Toma tres argumentos: el
valor mínimo, el valor preferido y el valor máximo. El valor
preferido se utilizará si está dentro del rango entre el
mínimo y el máximo. Si es menor que el mínimo, se
utilizará el mínimo. Si es mayor que el máximo, se utilizará
el máximo.
- env(): Esta función se utiliza para recuperar el valor de
una variable de entorno definida en el sistema operativo
del usuario. Puede utilizarse para personalizar las hojas de
estilo en función de la configuración del sistema
operativo, como el tema actual, el tamaño de fuente
preferido, etc.

- hsl() y hsla(): Estas funciones se utilizan para definir

colores utilizando valores de matiz, saturación y
luminosidad. La función hsla() incluye un valor de
opacidad adicional.

- linear-gradient() y radial-gradient(): Estas funciones se

utilizan para crear gradientes de color lineales o radiales.
Se pueden especificar múltiples colores y posiciones para
crear gradientes complejos.

- min() y max(): Estas funciones se utilizan para

seleccionar el valor mínimo o máximo de una lista de
valores. Pueden utilizarse para definir propiedades como
el ancho o la altura de un elemento basado en los
tamaños de múltiples elementos.

- repeat(): Esta función se utiliza para repetir un patrón de

imágenes o formas en una dirección específica. Se puede
utilizar para crear fondos de pantalla y patrones de
textura.

- rgb() y rgba(): Estas funciones se utilizan para definir

colores utilizando valores de rojo, verde y azul. La función
rgba() incluye un valor de opacidad adicional.

- var(): Esta función se utiliza para definir y utilizar

variables CSS. Las variables CSS pueden contener
cualquier valor CSS y se pueden utilizar en cualquier lugar
donde se espera un valor CSS, como en propiedades de
tamaño, color y posicionamiento.

Las unidades en CSS son las medidas que se utilizan para

definir la altura, ancho, tamaño y posición de los
elementos en una página web. Aquí hay una descripción
de las unidades mencionadas:

- % (porcentaje): se refiere a un porcentaje del tamaño del

elemento padre. Por ejemplo, si un elemento padre tiene
un ancho de 100px y su hijo tiene un ancho del 50%, el
ancho del hijo será de 50px.
- ch (ancho del carácter 0): se refiere al ancho del carácter
"0" en la fuente actual.
- cm (centímetros): se refiere a una medida en
centímetros.
- em (altura de la fuente): se refiere a la altura de la
fuente actual. Si la fuente es de 16px, 1em es igual a 16px.
- ex (altura de la letra "x"): se refiere a la altura de la letra
"x" en la fuente actual.
- fr (fracciones de la cuadrícula): se refiere a una fracción
del espacio disponible. Se utiliza principalmente en
diseños de cuadrícula.
- in (pulgadas): se refiere a una medida en pulgadas.
- mm (milímetros): se refiere a una medida en milímetros.
- pc (picas): se refiere a una medida en picas.
- pt (puntos): se refiere a una medida en puntos.
- px (píxeles): se refiere a una medida en píxeles.
- Q (cuartos): se refiere a una medida en cuartos.
- rem (altura de la fuente de la raíz): se refiere a la altura
de la fuente de la raíz del documento. Si la fuente de la
raíz es de 16px, 1rem es igual a 16px.
- vh (altura de la ventana): se refiere a un porcentaje del
tamaño de la altura de la ventana del navegador. Por
ejemplo, si la altura de la ventana es de 800px y un
elemento tiene una altura del 50vh, su altura será de
400px.
- vmax (mayor de vh y vw): se refiere al valor máximo
entre la altura de la ventana y el ancho de la ventana.
- vmin (menor de vh y vw): se refiere al valor mínimo
entre la altura de la ventana y el ancho de la ventana.
- vw (ancho de la ventana): se refiere a un porcentaje del
tamaño del ancho de la ventana del navegador. Por
ejemplo, si el ancho de la ventana es de 1200px y un
elemento tiene un ancho del 50vw, su ancho será de
600px.

…………………………………………………………………………………………

Los tipos de datos en CSS se refieren a los valores que se

pueden utilizar en propiedades CSS. Aquí hay una
descripción de cada uno de los tipos de datos
mencionados:

- <angle>: Un valor numérico que representa un ángulo,

como 45deg o 0.5turn.
- <color>: Un valor que representa un color. Se puede
especificar de diferentes maneras, como usando nombres
de color, valores hexadecimales o funciones de color
como rgb() o hsl().
- <image>: Un valor que representa una imagen. Se puede
especificar como una URL que apunta a la imagen.
- <length>: Un valor numérico que representa una
longitud, como 10px o 2em.
- <number>: Un valor numérico que puede ser entero o
decimal, como 42 o 3.14.
- <percentage>: Un valor numérico que representa un
porcentaje, como 50%.
- <resolution>: Un valor numérico que representa la
resolución de un dispositivo de salida, como 72dpi o
2dppx.
- <string>: Una cadena de texto entre comillas simples o
dobles, como 'Helvetica' o "Arial".
- <time>: Un valor numérico que representa una cantidad
de tiempo, como 5s o 200ms.
- <url>: Una cadena de texto que representa una URL,
como 'https://example.com/image.jpg'.
…………………………………………………………………………………………
…………………………………………………………………………………………

Los estilos de fuentes son propiedades CSS que se utilizan

para definir el aspecto de la fuente utilizada en un
elemento. Algunas de las propiedades más comunes son:

- font: es una propiedad abreviada que permite establecer

varias propiedades de fuente en una sola declaración,
como font-size, font-family y font-weight.
- font-family: establece la fuente utilizada para el texto. Se
pueden especificar múltiples fuentes separadas por
comas, en caso de que la primera no esté disponible en el
sistema del usuario.

- font-size: establece el tamaño de la fuente utilizada en el

texto. Se puede especificar en píxeles, ems, porcentajes,
etc.

- font-size-adjust: ajusta el tamaño de la fuente

basándose en la altura de x.

- font-stretch: permite ajustar el ancho de la fuente.

Algunos valores posibles son "condensed", "normal" y
"expanded".

- font-style: establece el estilo de la fuente, como

"normal", "italic" o "oblique".

- font-variant: establece las variantes de la fuente, como

"normal" o "small-caps".

- font-weight: establece el grosor de la fuente, como

"normal" o "bold".
- font-display: controla cómo se muestra la fuente
mientras se está cargando. Algunos valores posibles son
"swap", "fallback" y "optional".

Flexbox es un modelo de diseño en CSS que permite

distribuir y alinear elementos en un contenedor de
manera flexible y eficiente en términos de espacio.
Algunas de las propiedades de Flexbox son:

- `align-content`: define el comportamiento de las filas o

columnas en el contenedor flex cuando hay espacio extra
disponible en el eje transversal.
- `align-items`: alinea los elementos dentro de su
contenedor flex en el eje transversal.
- `align-self`: alinea un elemento flex específico dentro de
su contenedor en el eje transversal.
- `flex`: establece el tamaño flexible de un elemento
dentro del contenedor flex.
- `flex-basis`: establece el tamaño base de un elemento
antes de que se aplique cualquier crecimiento o
encogimiento.
- `flex-direction`: define la dirección de los elementos flex
dentro del contenedor.
- `flex-flow`: establece tanto la dirección como si se
permite que los elementos se envuelvan o no en varias
líneas.
- `flex-grow`: establece cuánto un elemento flex puede
crecer en relación con los demás elementos flex.
- `flex-shrink`: establece cuánto un elemento flex puede
encogerse en relación con los demás elementos flex.
- `flex-wrap`: establece si los elementos flex se deben
envolver en varias líneas cuando no hay suficiente espacio
en la línea actual.
- `justify-content`: alinea los elementos dentro del
contenedor en el eje principal.
- `order`: establece el orden en que aparece un elemento
dentro del contenedor flex.

Correcto, estas son las propiedades relacionadas con CSS

Grid:

- align-content: define la alineación vertical de las filas en

el contenedor grid.
- align-items: define la alineación vertical de los
elementos dentro de una celda.
- align-self: define la alineación vertical de un elemento
dentro de su celda.
- column-gap: define el tamaño del espacio entre las
columnas en el contenedor grid.
- display: grid: establece el contenedor como una
cuadrícula grid.
- gap: define el tamaño del espacio entre filas y columnas
en el contenedor grid.
- grid: es una propiedad abreviada que define todas las
propiedades grid de una sola vez.
- grid-area: define una celda de la cuadrícula utilizando el
nombre del área definido en grid-template-areas o los
valores grid-row y grid-column.
- grid-auto-columns: define el tamaño de las columnas
que no están explícitamente definidas en grid-template-
columns.
- grid-auto-flow: define el flujo automático de los
elementos de cuadrícula (fila o columna) cuando se
agrega contenido nuevo a la cuadrícula.
- grid-auto-rows: define el tamaño de las filas que no
están explícitamente definidas en grid-template-rows.
- grid-column: especifica las líneas de la cuadrícula que
una celda debe ocupar utilizando números enteros o el
nombre de una línea definida en grid-template-columns.
- grid-column-end: especifica la línea final de una celda a
lo largo del eje de las columnas.
- grid-column-gap: define el tamaño del espacio entre las
columnas de la cuadrícula.
- grid-column-start: especifica la línea inicial de una celda
a lo largo del eje de las columnas.
- grid-gap: es una propiedad abreviada que define el
tamaño del espacio entre filas y columnas en la
cuadrícula.
- grid-row: especifica las líneas de la cuadrícula que una
celda debe ocupar utilizando números enteros o el
nombre de una línea definida en grid-template-rows.
- grid-row-end: especifica la línea final de una celda a lo
largo del eje de las filas.
- grid-row-gap: define el tamaño del espacio entre las filas
de la cuadrícula.
- grid-row-start: especifica la línea inicial de una celda a lo
largo del eje de las filas.
- grid-template: define tanto las filas como las columnas
de la cuadrícula en una sola propiedad.
- grid-template-areas: define los nombres de las áreas de
la cuadrícula que se pueden usar para colocar elementos
utilizando grid-area.
- grid-template-columns: define el tamaño y la cantidad
de columnas en la cuadrícula.
- grid-template-rows: define el tamaño y la cantidad de
filas en la cuadrícula.
- justify-content: define la alineación horizontal de los
elementos dentro del contenedor grid.
- justify-items: define la alineación horizontal de los
elementos dentro de las celdas.
- justify-self: define la alineación horizontal de un
elemento dentro de su celda.
- place-content: es una propiedad abreviada que define
tanto la alineación vertical como la horizontal de los
elementos dentro del contenedor grid.
- place-items: es una propiedad abreviada que define
tanto la alineación vertical como la horizontal de los
elementos dentro de las celdas.
- place-self: es una propiedad abreviada que define tanto
la alineación vertical como la.

Las animaciones y transiciones son características de CSS

que permiten animar elementos en una página web, lo
que ayuda a mejorar la experiencia de usuario y a llamar
la atención sobre ciertos elementos de la página. Aquí hay
una breve descripción de las propiedades relacionadas
con las animaciones y transiciones:

- animation: define una animación y todas sus

propiedades en un solo lugar. Esta propiedad incluye las
propiedades de animation-name, animation-duration,
animation-timing-function, animation-delay, animation-
iteration-count y animation-direction.
- animation-delay: establece un retraso antes de que
comience una animación.
- animation-direction: establece la dirección en la que se
reproducirá la animación (hacia adelante, hacia atrás o de
forma alterna).
- animation-duration: establece la duración de la
animación.
- animation-fill-mode: establece cómo se deben aplicar las
propiedades de estilo antes y después de que se ejecute
la animación.
- animation-iteration-count: establece el número de veces
que se debe repetir la animación.
- animation-name: establece el nombre de la animación
que se usará.
- animation-play-state: establece si una animación está en
pausa o en reproducción.
- animation-timing-function: establece cómo debe
progresar una animación a lo largo del tiempo.

Las transiciones, por otro lado, permiten suavizar el

cambio entre dos estados diferentes de un elemento. Al
igual que con las animaciones, hay varias propiedades
que se pueden usar para controlar el comportamiento de
una transición, incluyendo:
- transition: define una transición y todas sus propiedades
en un solo lugar. Esta propiedad incluye las propiedades
de transition-property, transition-duration, transition-
timing-function y transition-delay.
- transition-delay: establece un retraso antes de que
comience una transición.
- transition-duration: establece la duración de la
transición.
- transition-property: establece el nombre de la propiedad
CSS que se está transitando.
- transition-timing-function: establece cómo debe
progresar una transición a lo largo del tiempo.