Introducción al Lenguaje de Programación CSS

El lenguaje de programación CSS es el lenguaje de coordinación que se utiliza para otorgar y describir todos los elementos por medio de la representación visual de un documento escrito en una estructura de código. Estas son nombradas como hojas de estilo en cascada (es decir, son páginas de patrones de flujo), y se puede utilizar con HTML y cualquier documento XML, incluido archivos de una gran variedad de formatos, como del tipo SVG.

En la actualidad si navegamos por internet, la gran mayoría de los sitios web que vemos utilizan lenguaje de programación CSS para crear páginas web atractivas e interfaces fáciles de usar para aplicaciones web. Vale aclarar que también normalmente se utilizan otros lenguajes como HTML y JavaScript. El propósito primordial del lenguaje de programación CSS es permitir la separación del contenido visual de la página web, incluidos el diseño, los colores, fuentes y estilos.

El objetivo y ventajas que logramos con esta separación es que; ayuda a mejorar la accesibilidad y proporciona una flexibilidad para controlar las propiedades de la pantalla y cómo se formatean según el dispositivo que se utilice. Con el código CSS también nos ayuda a facilitar la edición y ahorro del tiempo, ya que gracias a un solo archivo CSS podemos modificar y editar el aspecto visual en docenas de páginas en un sitio web.

Estructuración y Características del código CSS

Lo primero es saber que el lenguaje de programación CSS consta de un conjunto de reglas (reglas), que a su vez constan de un selector y luego una lista de los atributos y valores que se les asignan. Por ejemplo, si queremos seleccionar todos los párrafos (el elemento <p>) en el documento HTML y cambiar su color a verde (a través de la propiedad color), escribiremos el siguiente código:

p  { 
  color : green; 
}

Tenga en cuenta que el código CSS debe «aplicarse» al documento HTML para que surta efecto, y esto se puede hacer de dos formas:

Coloque el código CSS dentro del elemento <style> en el documento HTML.

< style  type = "text / css" > 
p  { 
  color :  red ; 
} 
</ style>

Coloque el código CSS en un archivo, luego intente incluirlo a través de <link>.

< link  href = "style.css"  rel = "stylesheet"  type = "text / css" >

A continuación daremos paso a una lista de propiedades y funciones del lenguaje de programación CSS, organizadas por funciones para que le resulte más fácil obtener lo que desea.

Introducción al Color

*Propiedad*	*Función*
*color*	Otorga valor del color en primer plano para el contenido de texto del elemento y para las decoraciones de texto, también establecerá el valor de la palabra reservada `currentcolor`, que se puede usar como un valor indirecto en otros atributos que no toman su color de la propiedad `color` directamente como vemos en la propiedad `border-color`.
*opacity*	Determina el grado de transparencia de un elemento, determinará qué tan visible será el contenido detrás de él.

Introducción al Background

*Propiedad*	*Función*
*background*	Nos permite modificar las opciones de formato que están todas de una vez, incluido el color o la imagen, el principio y el tamaño, el método de repetición y otras características. Propiedad se puede utilizar `background` para ajustar los valores de la propiedad o más de las siguientes propiedades: `background-clip`, `background-color`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size` y `background-attachment`.
*background-attachment*	Especifica si la posición de la imagen (especificada por la propiedad `background-image`) es fija dentro de la ventana gráfica o si se desplaza cuando el elemento (o la página) que contiene.
*background-blend-mode*	Describe cómo las imágenes de fondo deben combinarse entre sí y con el color de fondo seleccionado para el elemento.
*background-clip*	Especifica cómo el fondo del elemento descansará sobre los bordes del elemento, si el fondo es un color `<color>` o una imagen `<image>`.
*background-color*	Establece el color de fondo de un elemento y el color de fondo es un valor de color `<color>`.
*background-image*	Establece una o más imágenes como fondo del elemento.
*background-origin*	Especifica el principio de la imagen de fondo especificado por la propiedad `background-image`.
*background-position*	Establece la posición inicial de cada imagen de fondo, en relación con el principio definido en la propiedad `background-origin`.
*background-repeat*	Define cómo se repetirá la imagen de fondo. La imagen de fondo se puede repetir en el eje horizontal, en el eje vertical o en ambos ejes y es posible que nunca se repita.
*background-size*	Especifica las dimensiones de la imagen de fondo del elemento. Las dimensiones iniciales de la imagen se pueden dejar, cambiar a nuevas dimensiones o se puede llenar el espacio disponible manteniendo la relación de aspecto.
*box-shadow*	Describe el efecto de las sombras en un objeto y se pueden agregar una o más sombras usando esta propiedad.

Introducción al Border

*Propiedad*	*Función*
*border*	Una propiedad `border` en CSS es una propiedad abreviada que establece los valores de los atributos que controlan el marco del elemento al mismo tiempo, a saber: `border-color`, `border-style` y `border-width`. Como con todas las propiedades abreviadas, cualquier valor indefinido se restablecerá a su valor inicial. Además, la propiedad `border` no se puede utilizar para especificar un valor para la propiedad, `border-image` pero establecerá su valor en el valor inicial `none` .
*border-bottom*	Una propiedad `border-bottom` en CSS es una propiedad abreviada que establece los valores de los atributos `border-bottom-color`, `border-bottom-style` y `border-bottom-width`. Estos atributos describen cómo se muestra el marco `border` inferior del elemento.
*border-bottom-color*	Especifica el color del marco inferior del elemento. Tenga en cuenta que en la mayoría de los casos es preferible utilizar propiedades CSS cortas como `border-color` o `border-bottom`.
*border-bottom-style*	Especifica la forma de la línea del marco inferior del elemento.
*border-bottom-width*	Establece el ancho del marco inferior del elemento.
*border-color*	Especifica el color del marco del elemento en todas sus caras: superior ( `border-top-color`), derecha ( `border-right-color`), inferior ( `border-bottom-color`) e izquierda ( `border-left-color`).
*border-image*	Permite dibujar una imagen en el marco del elemento, y esto facilita la creación de elementos con una apariencia personalizada. La propiedad se utilizará en `border-image` lugar de las formas del marco que se pueden definir a través de la propiedad `border-style`.
*border-image-outset*	Especifica cuánto se extenderá la imagen del marco más allá del borde exterior del marco.
*border-image-repeat*	Define cómo mostrar la parte central de la imagen del marco para que coincida con las dimensiones del marco. Se puede usar un valor para esta propiedad para establecer el comportamiento de todos los bordes, o se pueden especificar dos valores para establecer el comportamiento de los bordes horizontales y verticales por separado.
*border-image-slice*	La imagen seleccionada por la propiedad se divide `border-image-source` en 9 áreas: 4 esquinas, 4 bordes y el centro.
*border-image-source*	Define una imagen `<image>` que se utilizará en lugar del marco y, si esta propiedad se establece en `none`, se utiliza la forma definida en la propiedad `border-style`.
*border-image-width*	Define el ancho de la imagen del marco especificando su distancia desde el borde exterior del marco, y si el valor de la propiedad es `border-image-width` mayor que el valor de la propiedad `border-width`, la imagen del marco se extiende más allá del relleno o del borde del contenido.
*border-left*	Una propiedad `border-left` en CSS es una propiedad abreviada que establece los valores de `border-left-color` y `border-left-style` y `border-left-width`, estas propiedades describen cómo mostrar el marco `border` izquierdo de un elemento.
*border-left-color*	Especifica el color del marco izquierdo del elemento. Tenga en cuenta que en la mayoría de los casos es preferible utilizar propiedades CSS cortas como `border-color` o `border-left`.
*border-left-style*	Especifica la forma de la línea del marco izquierdo del elemento.
*border-left-width*	Establece el ancho del marco izquierdo del elemento.
*border-right*	Una propiedad `border-right` en CSS es una propiedad abreviada que establece los valores de los atributos `border-right-color` y `border-right-style` y `border-right-width`. Estos atributos describen cómo mostrar el marco `border` derecho de un elemento.
*border-right-color*	Especifica el color del marco derecho del elemento. Tenga en cuenta que en la mayoría de los casos es preferible utilizar propiedades CSS cortas como `border-color` o `border-right`.
*border-right-style*	Especifica la forma de la línea del marco derecho del elemento.
*border-right-width*	Establece el ancho del marco derecho del elemento.
*border-style*	Especifica la forma de la fuente del marco del elemento para todas sus caras (derecha, izquierda, superior e inferior).
border-top	Una propiedad `border-top` en CSS es una propiedad abreviada que establece los valores de los atributos `border-top-color`, `border-top-style` y `border-top-width`. Estos atributos describen cómo se muestra el marco `border` superior del elemento.
*border-top-color*	Especifica el color del marco superior del elemento. Tenga en cuenta que en la mayoría de los casos es preferible utilizar propiedades CSS cortas como `border-color` o `border-top`.
*border-top-style*	Especifica la forma de la línea superior del marco del elemento.
*border-top-width*	Establece el ancho del marco superior del elemento.
*border-width*	La propiedad `border-width` abreviada de CSS establece el ancho del marco de un elemento en todas sus caras: superior ( `border-top-width`), derecha ( `border-right-width`), inferior ( `border-bottom-width`) e izquierda ( `border-left-width`).

*border-bottom-left-radius*	Establece la rotación de la esquina inferior izquierda del elemento.
*border-bottom-right-radius*	Establece la rotación de la esquina inferior derecha del elemento.
*border-radius*	Permite a los desarrolladores web definir cómo rotar las esquinas del marco y puede especificar un valor para redondear las esquinas, o dos valores para hacerlas elipse.
*border-top-left-radius*	Establece la rotación de la esquina superior izquierda del elemento.
*border-top-right-radius*	Establece la rotación de la esquina superior derecha del elemento.

Introducción a la Posición de los Elementos

*Propiedad*	*Función*
*bottom*	Una propiedad `bottom` en CSS que determina la posición vertical de un elemento posicionado. Esta propiedad no tiene ningún efecto sobre los elementos no posicionados.
*clear*	Especifica si un elemento puede estar al lado de los elementos flotantes al lado o debe moverse hacia abajo (este verbo se llama claro); Esta propiedad se puede aplicar a elementos flotantes y no flotantes.
*display*	Especifica qué tipo de vitrina se utilizará con el artículo. El valor de la propiedad `display` en HTML se toma de la especificación HTML o de la hoja de estilo predeterminada en el navegador o del usuario, y el valor predeterminado para ella en XML es `inline`.
*float*	Especifica que el elemento debe colocarse a la izquierda o a la derecha del contenedor al que pertenece, lo que permite que el texto y los elementos en línea se envuelvan alrededor del elemento. Este elemento se eliminará del flujo normal de la página, pero seguirá siendo parte de él (a diferencia de los elementos absolutos elementos posicionados [absolutos]).
*left*	Una propiedad `left` en CSS que determina la posición horizontal de un elemento posicionado. Esta propiedad no tiene ningún efecto sobre los elementos no posicionados.
*position*	Describe cómo el elemento debe estar colocado en el documento, y las propiedades `top`, `right`, `bottom` y `left` especifica la ubicación final de esos elementos.
*right*	Una propiedad `right` en CSS que determina la posición horizontal de un elemento posicionado. Esta propiedad no tiene ningún efecto sobre los elementos no posicionados.
*top*	Una propiedad `top` en CSS que determina la posición vertical de un elemento posicionado. Esta propiedad no tiene ningún efecto sobre los elementos no posicionados.
*z-index*	Determina el orden de los elementos que se pueden colocar en el eje Z. Cuando los elementos se superponen, el valor de esta propiedad determina qué elemento aparecerá en la parte superior del resto de los elementos, y el elemento con el mayor valor de índice z aparecen en la parte superior.

Introducción al Box Model

*Propiedad*	*Función*
*box-sizing*	Se utiliza para modificar el modelo de caja CSS predeterminado (es decir, el modelo de caja CSS) que se utiliza para calcular el ancho y la altura de los elementos.
*height*	Especifica la altura de un elemento. De forma predeterminada, esta propiedad se utiliza para establecer la altura del área de contenido, pero si la propiedad se `box-sizing` establece en, `border-box` establece la altura del elemento comenzando desde el borde exterior del marco.
*max-height*	Establece la altura máxima del elemento y evita que el valor usado de la propiedad `height` exceda el valor especificado en la propiedad `max-height`.
*max-width*	Establece el ancho máximo del elemento y evita que el valor usado de la propiedad `width` exceda el valor especificado en la propiedad `max-width`.
*min-height*	Establece la altura mínima del elemento y evita que el valor usado de la propiedad `height` sea menor que el valor especificado en la propiedad `min-height`.
*min-width*	Establece el ancho mínimo del elemento y evita que el valor usado de la propiedad `width` sea menor que el valor especificado en la propiedad `min-width`.
*visibility*	Permite mostrar u ocultar un elemento sin afectar la maquetación del documento, es decir, se reservará espacio para los elementos, sean visibles o no, y esta propiedad también se puede utilizar para ocultar o mostrar columnas en una tabla `<table>`.
*width*	Especifica el ancho de un elemento. De forma predeterminada, esta propiedad se usa para especificar el ancho del área de contenido, pero si la propiedad se `box-sizing` establece en, `border-box` especificará el ancho del elemento comenzando desde el borde exterior del marco.

Introducción al Margin

*Propiedad*	*Función*
*margin*	Establece los márgenes en los cuatro extremos del elemento, esta propiedad se puede utilizar en lugar de establecer los márgenes de forma individual con `margin-top`, `margin-right`, `margin-bottom` y `margin-left`.
*margin-bottom*	Establece el margen en el extremo inferior del elemento, los valores positivos alejan el elemento y los valores negativos lo acercarán.
*margin-left*	Establece el margen en el extremo izquierdo del elemento, los valores positivos alejan el elemento y los valores negativos lo acercarán.
*margin-right*	Establece el margen en el extremo derecho del elemento, los valores positivos alejan el elemento y los valores negativos lo acercarán.
*margin-top*	Establece el margen en el extremo superior del elemento, los valores positivos alejan el elemento y los valores negativos lo acercarán.

Introducción al Padding

Propiedad	Función
*padding*	Establecerá el relleno en los cuatro extremos de un elemento, y esta propiedad puede ser utilizada en lugar de establecer los acolchados individuales con `padding-top`, `padding-right`, `padding-bottom` y `padding-left`.
*padding-bottom*	Establece el relleno en el extremo inferior del elemento. A diferencia de las notas a pie de página `margin`, no se pueden utilizar valores negativos para las notas a pie de página. La propiedad corta se puede utilizar `padding` para establecer todas las notas al pie de los cuatro lados de un elemento en una sola regla.
*padding-left*	Establece el relleno en el extremo izquierdo del elemento. A diferencia de las notas `margin` a pie de página, no se puede utilizar el uso de valores negativos para las notas a pie de página. La propiedad corta se puede utilizar `padding` para establecer todas las notas al pie de los cuatro lados de un elemento en una sola regla.
*padding-right*	Establece el relleno en el extremo derecho del elemento. A diferencia de las notas `margin` a pie de página, no se puede utilizar el uso de valores negativos para las notas a pie de página. La propiedad corta se puede utilizar `padding` para establecer todas las notas al pie de los cuatro lados de un elemento en una sola regla.
*padding-top*	Establece el relleno en el extremo superior del elemento. A diferencia de las notas `margin` a pie de página , no se puede utilizar el uso de valores negativos para las notas a pie de página. La propiedad corta se puede utilizar `padding` para establecer todas las notas al pie de los cuatro lados de un elemento en una sola regla.

Introducción al Overflow

*Propiedad*	*Función*
*overflow*	Especifica si se recorta el contenido, se muestra una barra de desplazamiento o se muestra más contenido del elemento de bloque cuando supera las dimensiones del contenedor de bloque en el que se encuentra.
*overflow-x*	Especifica si recortar el contenido, mostrar una barra de desplazamiento o mostrar más contenido de elementos de bloque a la derecha o a la izquierda.
*overflow-y*	Especifica si se recorta el contenido, se muestra una barra de desplazamiento o se muestra más contenido del elemento de bloque por encima o por debajo.

Introducción al Flexbox

*Propiedad*	*Función*
*align-content*	Define una forma para que el navegador distribuya el espacio entre y alrededor de los elementos a lo largo del eje secundario del contenedor flexible.
*align-items*	Define una forma para que el navegador distribuya el espacio entre y alrededor de los elementos a lo largo del eje secundario del contenedor flexible. Funciona como la propiedad `justify-content` pero en sentido ortogonal.
*align-self*	Establece la alineación de los elementos flexibles en la línea actual anulando el valor de la propiedad `align-items`, si `margin` la nota al pie de un elemento en el eje ortogonal se establece en la `auto`propiedad, se ignora `align-self`.
*flex*	Especifica cómo se expandirá o contraerá un elemento flexible para llenar el espacio disponible en el contenedor flexible. Este acceso directo de propiedad establece los atributos `flex-grow` , `flex-shrink` y `flex-basis`.
*flex-basis*	Especifica el tamaño principal de uno de los elementos flexibles, y esta propiedad establece el tamaño del cuadro de contenido a menos que se especifique lo contrario mediante el `box-sizing`.
*flex-direction*	Define cuál es el eje principal en el contenedor flexible y su orientación (normal o inversa).
*flex-flow*	Se utiliza para establecer el valor de las dos propiedades `flex-direction` y `flex-wrap`.
*flex-grow*	Especifica el coeficiente de expansión de un elemento flexible y especifica la cantidad de espacio que debe ocupar el elemento dentro del contenedor flexible.
*flex-shrink*	Especifica el módulo de contracción de un elemento flexible y especifica cuánto espacio debe ocupar el elemento en un contenedor flexible en relación con el resto de los elementos, si el ancho predeterminado de los elementos flexibles es mayor que el contenedor.
*flex-wrap*	Especifica si los elementos flexibles deben estar en una sola línea o se pueden ajustar en varias líneas. Si se permite el ajuste, podemos usar esta propiedad para especificar el orden de apilamiento de las líneas.
*justify-content*	Define una forma para que el navegador distribuya el espacio entre y alrededor de los elementos a lo largo del eje principal del contenedor flexible.
*order*	Especifica el orden de los elementos flexibles en el contenedor, los elementos se ordenarán en orden ascendente según el valor de la propiedad de orden que se les asigne, y los elementos del mismo valor se ordenarán según su ocurrencia en el código fuente.

Introducción a las Fonts

*Propiedad*	*Función*
*font*	Propiedad `font` en la propiedad CSS es un atajo que conduce a ajustar los valores de las propiedades, `font-style`, `font-variant`, `font-weight`, `font-size`, `line-height` y `font-family`, con el fin de determinar la fuente utilizada en el artículo.
*font-family*	Especifica una lista que contiene uno o más tipos de fuentes públicas o privadas, que se aplicarán al elemento.
*font-kerning*	Controla el uso de la información de kerning almacenada en la fuente utilizada.
*font-size*	Ajuste el tamaño de la fuente, y el ajuste del tamaño de la fuente puede cambiar el tamaño de otros elementos, porque el tamaño de la fuente se utilizará para calcular el valor de las longitudes `<length>` de uno `em` y `ex`.
*font-size-adjust*	La propiedad `font-size-adjust` en CSS dice que el tamaño de fuente debe elegirse en función de la altura de las minúsculas en lugar de la altura de las letras mayúsculas. Esto es útil porque la legibilidad y la legibilidad de las fuentes, especialmente si son de tamaño pequeño, vendrán determinadas por el tamaño de las letras minúsculas, no mayúsculas.
*font-stretch*	La propiedad `font-stretch` CSS selecciona una versión estrecha (condensada), normal o extendida (expandida) de la fuente.
*font-style*	Especifica si la fuente debe ser normal, cursiva u oblicua. El navegador elegirá la versión más adecuada del tipo de fuente `font-family`.
*font-weight*	Especifica el «peso» de la línea. Pesos disponibles para usar en una fuente dependen del tipo de fuente utilizada `font-family`, ya que algunas fuentes solo ofrecen dos versiones: `normal` y `bold`.
*line-height*	Establece el espaciado utilizado para las líneas, como en el texto. En elementos de bloque, define la altura mínima de los cuadros de línea dentro del elemento.

Introducción al Text en CSS

*Propiedad*	*Función*
*direction*	Establece la dirección del texto, el valor `rtl` para indicar idiomas de derecha a izquierda como el árabe e `ltr` idiomas de izquierda a derecha como el inglés. Tenga en cuenta que la dirección del texto generalmente se define usando la propiedad `dir` en el elemento para `<html>` todo el documento, no usando el `direction`.
*letter-spacing*	Especifica el espacio entre caracteres de texto.
*line-break*	Especifica el comportamiento del navegador al moverse a una nueva línea cuando se trabaja con signos de puntuación y símbolos.
*overflow-wrap*	Especifica si el navegador debe moverse a una nueva línea dentro de las mismas palabras para evitar que el texto vaya más allá de los límites del cuadro de contenido del elemento contenedor. Por el contrario `word-break`, la propiedad se moverá `overflow-wrap` a una nueva línea si el navegador no puede colocar la palabra en una línea por sí solo sin ir más allá de los límites del cuadro de contenido.
*tab-size*	Se utiliza para especificar el ancho del carácter de tabulación que tiene el símbolo `U+0009` Unicode.
*text-align*	Describe cómo los objetos en línea como el texto, se alinean en contenedores de bloques. Tenga en cuenta que la propiedad `text-align` no controla la alineación de los elementos del bloque, sino la alineación del contenido en línea dentro de ellos.
*text-align-last*	Describe cómo se alinea la última línea de texto.
*text-decoration*	Especifica la forma de las líneas decorativas utilizadas en el texto. Es una propiedad de acceso directo para establecer el valor de más de una propiedad sobre líneas decorativas al mismo tiempo, e incluye `text-decoration-line` y `text-decoration-color` y `text-decoration-style`.
*text-decoration-color*	Especifica el color de las líneas decorativas utilizadas en el texto y establecido a través de la propiedad `text-decoration-line`. Esto incluye líneas arriba, abajo o que pasan a través de la línea, o líneas onduladas (por ejemplo, un error ortográfico). El color establecido a través de esta propiedad se aplicará a todas las líneas de decoración seleccionadas en el objeto.
*text-decoration-line*	Especifica el tipo de líneas decorativas utilizadas en el texto. Si va a establecer varias propiedades para definir la forma de las líneas de decoración, se recomienda utilizar la propiedad corta `text-decoration`.
*text-decoration-style*	Especifica la forma de las líneas decorativas utilizadas en el texto establecido mediante el atributo `text-decoration-line`. Si va a establecer varias propiedades para definir la forma de las líneas de decoración, se recomienda utilizar la propiedad corta `text-decoration`.
`text-emphasis`	Especifica la marca de énfasis que se usa en cada carácter de texto del elemento, excepto los espacios y los caracteres de control (como el carácter de nueva línea, el carácter de retorno). Es una propiedad abreviada para establecer el valor de más de una propiedad para establecer acentos juntos, e incluye `text-emphasis-style` y `text-emphasis-color`.
*text-emphasis-color*	Especifica el color utilizado para dibujar la marca de énfasis para cada carácter de texto en el elemento. El valor de esta propiedad se puede establecer mediante la propiedad de acceso directo `text-emphasis`.
*text-emphasis-position*	Especifica la posición de la marca de énfasis utilizada para cada carácter de texto en el elemento. Esta propiedad puede cambiar la altura de una línea si no se ajusta a la marca de acento.
*text-emphasis-style*	Especifica el tipo de marca de énfasis que se utiliza en cada carácter de texto del elemento, excepto en los espacios y los caracteres de control como el carácter de nueva línea o el carácter de retorno. El valor de esta propiedad se puede establecer mediante la propiedad de acceso directo *`text-emphasis`*.
*text-indent*	Especifica la cantidad de sangría que se colocará antes de las líneas de texto en un elemento de bloque. Esta propiedad controla la sangría de la primera línea de forma predeterminada, pero las palabras reservadas `hanging` y se pueden utilizar `each-line` para cambiar este comportamiento consulte la compatibilidad con el navegador.
*text-justify*	Define cómo se analiza el texto si la propiedad se `text-align` establece en un valor `justify`.
*text-shadow*	Agrega el efecto de sombras al texto, acepta la selección de más de un tono los valores están separados por una coma, la sombra se aplicará al texto y a las líneas decorativas `text-decoration` del elemento.
*text-transform*	Especifica en qué caso se mostrará el elemento. Esta propiedad se puede utilizar para convertir todas las letras en mayúsculas, minúsculas o la primera letra de cada palabra en mayúscula.
*white-space*	La propiedad `white-space` CSS define cómo se tratarán los espacios dentro del elemento. Si está buscando una forma de dividir palabras largas, mire `overflow-wrap` y `word-break`.
*word-break*	Especifica si el navegador debe moverse a una nueva línea dentro de las mismas palabras para evitar que el texto vaya más allá de los límites del cuadro de contenido del elemento contenedor. A diferencia de la propiedad `overflow-wrap`, la propiedad se moverá `word-break` a una nueva línea en el lugar donde el texto habría excedido los límites del cuadro de contenido. Incluso si al colocar la palabra en una línea por sí sola no excedería los límites del cuadro de contenido.
*word-spacing*	Especifica cómo se espacian las palabras y las etiquetas.

Introducción a Menu en CSS

*Propiedad*	*Función*
*counter-increment*	Aumente o disminuya el valor de un contador CSS en un valor específico, y el contador se puede restablecer a un número específico usando el `counter-reset`.
*counter-reset*	Restablece el valor de un contador CSS a un valor específico, y el valor del contador puede aumentarse o disminuirse utilizando `counter-increment`.
*list-style*	Una propiedad `list-style` en CSS es una propiedad abreviada que establece los valores de `list-style-type`, `list-style-image` y `list-style-position`.
*list-style-image*	Especifica una imagen que se utilizará para indicar elementos de menú. Por lo general, se recomienda utilizar la propiedad de acceso directo `list-style` para establecer el valor de esta propiedad.
*list-style-position*	Especifica dónde se hace referencia a los elementos del menú. Por lo general, se recomienda utilizar la función corta `list-style`.
*list-style-type*	Especifica cómo se hace referencia a los elementos de la lista.

Introducción a Tables en CSS

*Propiedad*	*Función*
*border-collapse*	Especifica si el marco de la tabla está separado del marco de las celdas, es decir que cada uno tiene su propio marco o combinado con el marco de las celdas. Las celdas adyacentes comparten el marco entre sí.
*border-spacing*	Especifica el espacio entre marcos de celdas de tabla adyacentes. Esta propiedad no tendrá ningún efecto a menos que el valor de la propiedad `border-collapse` sea `separate`.
*caption-side*	Especifica la posición de la bandera de la tabla definida en el elemento `<caption>`.
*empty-cells*	Especifica cómo el navegador debe mostrar el fondo y el marco de las celdas de la tabla `<table>` que no tienen contenido visible. Esta propiedad no tendrá ningún efecto a menos que se `border-collapse` establezca en `separate`.
*table-layout*	Especifica el algoritmo que se utiliza para ajustar el diseño de celdas, líneas y columnas de tablas `<table>`.
*vertical-align*	Especifica la alineación vertical de elementos de línea o celdas de tabla.

Introducción a las Animations en CSS

*Propiedad*	*Función*
*‎@keyframes*	El `@keyframes` en CSS controla las interfaces de pasos en una serie de movimientos a través de la definición de estilos CSS para fotogramas clave, lo que nos da un gran control sobre los patrones de elementos en comparación con la transferencia de `transition`.
*animation*	Propiedad `animation` en CSS es una característica breve ajusta los valores de los diversos atributos de CSS, con movimientos relacionados como: `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode` y `animation-play-state`.
*animation-delay*	Se especifica cuándo comenzará el movimiento y puede retrasar el inicio del movimiento por un período de tiempo, comenzar de inmediato o comenzar posterior, pero omitir parte del ciclo de movimiento.
*animation-direction*	Especifica si el movimiento debe ejecutarse hacia adelante o hacia atrás, y también cambiar entre ellos.
*animation-duration*	Especifica el tiempo necesario para completar un ciclo completo de movimiento.
*animation-fill-mode*	Especifica cómo las animaciones CSS deben aplicar valores de propiedad al elemento antes y después de que se ejecute la animación.
*animation-iteration-count*	Especifica el número de veces que se repite el ciclo de animación hasta que se detiene la animación. Si se especifica más de un valor, se usa el valor que sigue al valor que se aplicó anteriormente cuando se reinicia la animación, hasta que volvamos al primer valor después de usar el último valor.
*animation-name*	Se utiliza para determinar los movimientos de los nombres a aplicar al elemento. Cada nombre debe referirse a una base `@keyframes` que defina las características necesarias para el movimiento de valores.
*animation-play-state*	Especifica si la animación se está ejecutando o en pausa. El valor de esta propiedad se puede obtener a través de JavaScript para ver el estado de la animación. El JavaScript también se puede usar para establecer su valor para pausar o reanudar la animación.
*animation-timing-function*	Se utiliza para describir cómo los valores promedio de las propiedades CSS se verán afectados por la animación. Esto le permite determinar cuál es la curva de aceleración de la animación durante un ciclo.

Introducción a las Transitions en CSS

*Propiedad*	*Función*
*transition*	Una corta propiedad que establece los valores de la `transition-property`, `transition-duration`, `transition-timing-function` y `transition-delay`.
*transition-delay*	Especifica el tiempo de espera entre la ocurrencia del evento que activará el efecto de transición y el inicio del efecto.
*transition-duration*	Especifica cuánto tiempo tardará el efecto de transición en alcanzar el valor final de la propiedad, y el valor predeterminado `0s` nunca provocará un efecto de transición.
*transition-property*	Se utiliza para especificar los nombres de las propiedades CSS que se verán afectadas por la transición.
*transition-timing-function*	Se usa para describir cómo los valores promedio de las propiedades CSS se verán afectados por el efecto de transición. Le permite determinar cuál es la curva de aceleración del efecto de transición, por lo que la velocidad del efecto variará a lo largo de su duración.

Introducción a los Transform en CSS

*Propiedad*	*Función*
*backface-visibility*	Especifica si la cara posterior del elemento es visible para el usuario, la cara posterior del elemento tiene un fondo transparente y permite una imagen reflejada de la cara frontal del elemento.
*perspective*	Se utiliza para activar el espacio 3D en un elemento, de modo que podamos colocar elementos secundarios en ese espacio. Esta propiedad nos permite darle a un elemento una sensación de profundidad, al hacer que los elementos más cercanos al usuario parezcan más grandes y los elementos más alejados parezcan más pequeños .
*perspective-origin*	Especifica la posición desde la que el usuario mira el elemento y el valor de esta propiedad se utiliza como punto de fuga de la propiedad `perspective`.
*transform*	Nos permiten transformar la forma de los objetos en el espacio 2D o 3D, por lo que el objeto se puede mover, rotar, redimensionar o sesgar.
*transform-origin*	Permite especificar el principio de coordenadas para las transformaciones a realizar en el elemento. El principio de coordenadas por defecto del elemento cuando `rotate()‎` se aplica la función y será el centro del elemento.
*transform-style*	Especifica si los elementos secundarios del elemento actual están en el espacio 3D o se aplanan en el plano del elemento principal. Si es plano, entonces no existirá en un espacio tridimensional propio.

Introducción a la User Interface en CSS

*Propiedad*	*Función*
*caret-color*	Especifica el color del puntero de entrada de texto dentro de un elemento como `<input>` o cualquier otro elemento que tenga la propiedad `contenteditable`. La forma predeterminada del cursor de entrada es una línea vertical que parpadea para facilitar la visibilidad y su color predeterminado es el negro, pero se puede modificar con esta función.
*cursor*	Especifica qué forma del puntero del mouse se mostrará cuando el mouse se desplace sobre el elemento.
*outline*	Una propiedad `outline` en CSS es una propiedad abreviada que se utiliza para un juego o más atributos `outline-style`, `outline-width` y `outline-color` al mismo tiempo.
*outline-color*	Establece el color de los bordes `outline` del elemento, que son las líneas que se dibujan fuera del marco del elemento `border`. Se recomienda utilizar la propiedad de acceso directo `outline` al ajustar la apariencia del borde de un elemento, ya que establece varias propiedades a la vez.
*outline-offset*	Establece la distancia a la que el borde del `outline` elemento está lejos de su borde o marco `border`, los bordes son las líneas que se dibujan fuera del marco del elemento `border`. El espacio que se colocará entre el marco del elemento y su borde es un espacio con fondo transparente, en él se mostrará el fondo del elemento padre.
*outline-style*	Establece la forma de los bordes `outline` del elemento, que son las líneas que se dibujan fuera del marco del elemento `border`. Se recomienda utilizar la propiedad de acceso directo `outline` al ajustar la apariencia del borde de un elemento, ya que establece varias propiedades a la vez.
*outline-width*	Establece el ancho o el grosor de los bordes `outline` del elemento, que son las líneas que se dibujan fuera del marco del elemento `border`. Se recomienda utilizar la propiedad de acceso directo `outline` al ajustar la apariencia del borde de un elemento, ya que establece varias propiedades a la vez.
*resize*	Especifica si se cambia el tamaño del objeto y en qué dirección.
*text-overflow*	Especifica lo que sucederá cuando el contenido no se muestre más allá de su cuadro, el contenido se puede recortar, `U+2026` mostrar 3 puntos (carácter … símbolo ) o mostrar una cadena de texto especial.

Introducción a las Multiple Columns en CSS

*Propiedad*	*Función*
*column-count*	Específica en cuántas columnas se dividirá el elemento.
*column-fill*	Especifica cómo se debe dividir el contenido de las columnas, utilizando esta propiedad controlará si el contenido de las columnas debe estar equilibrado o no.
*column-gap*	Establece el espacio entre columnas para elementos de varias columnas.
*column-rule*	La propiedad `column-rule` abreviada de CSS especifica la forma de la línea vertical que se dibujará entre columnas en elementos de varias columnas. Esta propiedad será establecer el valor de los atributos `column-rule-width`, `column-rule-style` y `column-rule-color` en un solo atributo.
*column-rule-color*	Especifica el color de la línea vertical que se dibujará entre columnas en elementos de varias columnas.
*column-rule-style*	Especifica la forma de la línea vertical que se dibujará entre columnas en elementos de varias columnas.
*column-rule-width*	Especifica el ancho o el grosor de la línea vertical que se dibujará entre columnas en elementos de varias columnas.
*column-span*	Permite que un elemento abarque todas las columnas cuando se le asigna un valor `all`.
*column-width*	Especifica el ancho mínimo de las columnas en las que se dividirá el elemento, y este valor el navegador usará para encontrar el número total de columnas.
*columns*	Breve propiedad nos permite ajustar el valor de las propiedades `column-width` y `column-count` al mismo tiempo.
*orphans*	Especifica el número mínimo de líneas de texto en un contenedor de bloque que debe aparecer en la parte inferior de una página o columna. En formato tipográfico, los huérfanos son la primera línea de un párrafo que aparece solo en la parte inferior de una página o columna.
*widows*	Especifica el número mínimo de líneas de texto en un contenedor de bloque que debe aparecer en la parte superior de una página o columna. En formato tipográfico, las viudas son la última línea de un párrafo que aparece sola en la parte superior de una página o columna.

Introducción al Content en CSS

*Propiedad*	*Función*
*content*	Se utiliza con pseudoelementos `‎::before` y `‎::after` para generar contenido dentro del elemento.
*quotes*	Indica cómo el navegador debe mostrar las comillas.

Introducción al Filter en CSS

*Propiedad*	*Función*
*filter*	La propiedad `filter` en CSS nos permite aplicar efectos como cambio de color y desenfoque a un elemento. Los filtros se utilizan generalmente para modificar la forma en que se muestran las imágenes, los `<img>` fondos `background` y los marcos `border`.

Introducción a los Grids en CSS

*Propiedad*	*Función*
*grid*	La propiedad `grid` abreviada de CSS establece todas las características que definen explícitamente las propiedades de la cuadrícula como (`grid-template-rows`, `grid-template-columns` y `grid-template-areas`); todas las propiedades que definen implícitamente las propiedades de la red como (`grid-auto-rows`, `grid-auto-columns` y `grid-auto-flow`); los accesorios que establecen el espacio entre columnas y líneas como (`grid-column-gap` y `grid-row-gap`) todo dentro de una sola propiedad.
*grid-area*	La propiedad `grid-area` en CSS es una propiedad abreviada que establece el valor de los `grid-row-start`, `grid-column-start`, `grid-row-end` y `grid-column-end`. Propiedades especificando las dimensiones y la posición de un elemento de rejilla.
*grid-auto-columns*	Establece las dimensiones de las rutas de columna generadas implícitamente.
*grid-auto-flow*	Establece cómo funcionará el algoritmo de posicionamiento automático del elemento de la cuadrícula.
*grid-auto-rows*	Establece las dimensiones de los trazados de línea generados implícitamente.
*grid-column*	La propiedad `grid-column` en CSS es una propiedad de acceso directo que establece el valor de las propiedades `grid-column-start` y `grid-column-end` que determina las dimensiones de la cuadrícula del elemento y su lugar en la columna.
*grid-column-end*	Se utiliza para establecer la posición final de un elemento de la cuadrícula dentro de una columna de la cuadrícula especificando el número de columna o la extensión, o configurando la posición del elemento automáticamente.
*grid-column-gap*	Especifica el espacio entre columnas en el contenedor de ceñido.
*grid-column-start*	Se utiliza para establecer la posición inicial de un elemento de la cuadrícula dentro de una columna de la cuadrícula especificando el número de columna o la extensión; o configurando la posición del elemento automáticamente.
*grid-gap*	La `grid-gap` propiedad CSS es una abreviatura que establece el valor de `grid-row-gap` y `grid-column-gap`. Esta define el espacio entre líneas y columnas en el contenedor ceñidor.
*grid-row*	La propiedad `grid-row` en CSS es una propiedad de acceso directo que establece el valor de las propiedades `grid-row-start` y `grid-row-end` que determina las dimensiones de la cuadrícula del elemento y su lugar en la línea.
*grid-row-end*	Se utiliza para establecer la posición final de un elemento de cuadrícula dentro de una línea de cuadrícula especificando la línea, el tramo o estableciendo la posición del elemento automáticamente.
*grid-row-gap*	Especifica el espacio entre líneas en el contenedor de ceñido.
*grid-row-start*	Se utiliza para establecer la posición inicial de un elemento de cuadrícula dentro de una línea de cuadrícula especificando la línea, el tramo o configurando la posición del elemento automáticamente.
*grid-template*	Una `grid-template` propiedad CSS es una propiedad abreviada que se utiliza para establecer los valores de `grid-template-rows`, `grid-template-columns` y `grid-template-areas`.
*grid-template-areas*	Establece nombres de áreas de ceñido, es decir áreas de cuadrícula.
*grid-template-columns*	Establece los nombres y las dimensiones de las rutas de las columnas en el diseño de cuadrícula.
*grid-template-rows*	Establece los nombres y las dimensiones de los trazados de línea en el diseño de cuadrícula.
*repeat()*`‎`	La función `repeat()‎` en CSS itera parte de la lista de pistas, lo que permite definir fácilmente una gran cantidad de columnas y líneas que tienen un patrón repetido determinado.

Introducción a los Selectors en CSS

*Propiedad*	*Función*
*Type Selectors*	El type selectors en CSS hace coincidir los elementos por nombre de nodo, es decir, selecciona todos los elementos de un determinado tipo en el documento.
*Class Selectors*	El class selectors en CSS hace coincidir elementos de acuerdo con el valor de su propiedad de clase.
*ID Selectors*	El id selectors de CSS hace coincidir los elementos de acuerdo con su valor de propiedad de ID.
*Universal Selector*	El universal selector en CSS coincide con todos los elementos.
*Attribute Selectors*	El attribute selectors en CSS coincide con elementos si hay una propiedad en ellos o esa propiedad tiene un cierto valor.
*Adjacent Sibling Selectors*	El adjacent sibling selectors en CSS `+`separa dos selectores y coincide con el segundo elemento si viene inmediatamente después del primer elemento y ambos elementos son hijos de un elemento padre común.
*General Sibling Selectors*	El general sibling selectors en CSS `~`separa dos selectores, hace coincidir el segundo elemento si viene después del primer elemento (no necesariamente inmediatamente después de él) y ambos elementos son hijos de un elemento padre común.
*Child Selectors*	Elementos child selectors (combinador de child) en el carácter CSS separa específicos y corresponde al segundo elemento si es el hijo del primer elemento.
*Descendant Selectors*	Un descendant selectors de CSS que suele estar representado por un único espacio que separa dos selectores y que coincide con el segundo elemento si es hijo del primero.

Introducción a las Pseudo-Classes en CSS

*Elemento*	*Función*
`‎`*:active*	Elementos como botones activados por el usuario. Cuando se usa el mouse, el elemento comenzará a “activarse” cuando el usuario presione el botón principal para él y finalizará cuando se suelte este botón.
*‎:checked*	Elija botones o casilla de verificación u opciones `<option>` en un `<select>` identificado o seleccionado. El usuario puede activar este estado activando o seleccionando el elemento.
`‎`*:default*	Cualquier elemento seleccionado por defecto entre un conjunto de elementos relacionados con él. Esto se puede usar en una clase falsa en cualquier botón `<button>` o selección normal de botones o señalando en casillas de verificación u opciones `<option>` en un `<select>` identificado o seleccionado.
`‎`*:disabled*	Cualquier elemento deshabilitado, el elemento deshabilitado no se puede seleccionar. Al hacer clic o sobrescribir no acepta el foco y el elemento se puede habilitar, es decir se puede seleccionar, hacer clic o escribir.
`‎`*:empty*	Cualquier elemento no tiene hijos, y los hijos pueden ser nodos de elementos o nodos de texto, incluidos espacios. Los comentarios no afectarán si el elemento está vacío o no.
`‎`*:enabled*	Cualquier elemento está habilitado, es decir se puede seleccionar, hacer clic, escribir o enfocar.
*‎:first*	Se utiliza con la base `@page` y representa la primera página del documento cuando se imprime.
`‎`*:first-child*	El primero de un grupo de elementos hermanos.
`‎`*:first-of-type*	El primer elemento de su género en un grupo de elementos fraternos.
`‎`*:fullscreen*	Elementos que se muestran cuando el navegador está en modo de pantalla completa.
*‎:focus*	Elementos como del tipo formulario que reciben el foco, este se activa si el usuario presiona, toca o accede a un elemento a través de la tecla de tabulación del teclado.
`‎`*:hover*	Objetos con los que el usuario interactúa pero que no necesariamente activa con un dispositivo señalador. Esta pseudo clase generalmente se activa cuando el usuario coloca el dispositivo señalador a menudo un mouse sobre el objeto.
`‎`*:indeterminate*	Cualquier modelo cuyo estado sea desconocido o indeterminado.
`‎`*:in-range*	Cualquier elemento `<input>` cuyo valor esté dentro del rango permitido especificado por `min` y `max`.
*‎:invalid*	Cualquier elemento `<input>` o `<form>` que no valide su contenido.
`‎`*:lang()‎*	Elementos en función del idioma de esos elementos.
`‎`*:last-child*	El último elemento de un grupo de elementos hermanos.
`‎`*:last-of-type*	El último artículo de este tipo en un grupo de artículos fraternales.
`‎`*:left*	Se utiliza con la base `@page` y representa las páginas del lado izquierdo del documento cuando se imprime.
`‎`*:link*	El elemento no ha sido visitado, y coincide con todos los elementos `<a>`, `<area>` y `<link>` esa propiedad aún `href` no se ha visitado.
`‎`*:not()‎*	Elementos que no coinciden con uno o más determinantes, esta clase también se denomina pseudo clase de negación.
`‎`*:nth-child()*`‎`	Uno o más elementos según su posición dentro de un grupo de hermanos.
`‎`*:nth-last-child()*`‎`	Uno o más elementos según su posición dentro de un grupo de hermanos, comenzando al final del grupo.
`‎`*:nth-last-of-type()‎*	Uno o más elementos de cierto tipo según su posición dentro de un grupo de hermanos. Desde el final hasta el principio.
‎:only-child	Un elemento que no tiene hermanos, y este determinante es el mismo`‎`:`first-child:last-child` o `‎‎nth-‎child(1):nth-last-child(1)‎‎‎` menos específico.
`‎`*:only-of-type*	Un elemento que no tiene hermanos del mismo tipo.
*‎:optional*	Cualquier artículo `<input>` o `<select>` o `<textarea>` que han no se establece la propiedad de ellos `required`.
`‎`*:out-of-range*	Cualquier elemento `<input>` cuyo valor no esté dentro del rango permitido especificado por `min` y `max`.
`‎`*:read-only*	Cualquier elemento con contenido textual que el usuario no pueda modificar.
`‎`*:read-write*	Cualquier elemento con contenido textual que el usuario pueda modificar.
*‎:required*	Cualquier artículo `<input>` o `<select>` o `<textarea>` efectos intervenidos en `requiered` de ellos.
`‎`*:right*	Se utiliza con la base `@page` y representa las páginas del lado derecho del documento cuando se imprime.
*‎:root*	El elemento raíz en el árbol del documento, coincide con el elemento `<html>` en los documentos HTML. Es equivalente a un selector, en `html` excepto que tiene una mayor selectividad.
*‎:target*	Un elemento único cuyo identificador coincide con `id` una sección de la URL.
`‎`*:valid*	Cualquier elemento `<input>` o `<form>` cuyo contenido el navegador haya validado con éxito.
*‎:visited*	Un artículo que ha sido visitado anteriormente, y por razones de privacidad, el número de propiedades cuyo valor se puede cambiar usando este selector es muy reducido.

Introducción a los Pseudo-Elements en CSS

*Elemento*	*Función*
`‎`*: :after‎*	Es el último elemento hijo del elemento delimitado. Generalmente se usa para agregar contenido decorativo al elemento usando la propiedad `content`, que es un elemento en línea por defecto.
*‎: :backdrop*	Es un cuadro que se muestra directamente debajo de cualquier elemento que se muestre en modo de pantalla completa.
`‎`*: :before*	Es el primer elemento hijo del elemento delimitado. Generalmente se usa para agregar contenido decorativo al elemento usando la propiedad `content`, que es un elemento en línea por defecto.
`‎`*: :first-letter*	Aplica estilos al primer carácter de los elementos a nivel de bloque, siempre que no estén precedidos por otro contenido como imágenes o tablas de líneas.
`‎`*: :first-line*	Aplique estilos a la primera línea de elementos a nivel de bloque. Tenga en cuenta que la longitud de la primera línea varía según muchos factores, incluido el ancho del elemento, el ancho del documento y el tamaño de la fuente.
`‎`*::placeholder*	Representa el texto alternativo en un elemento de formulario `<form>`.
*‎: :selection*	Representa texto en el documento seleccionado por el usuario por ejemplo, cuando usamos el cursor.

Tipos de datos

Tipo de datos	Función
*angle*	El tipo de datos `<angle>` en CSS se usa para representar valores angulares en grados (grados), grados, radianes o giros, y este tipo se puede usar en gradientes `<gradient>` y algunas funciones `transform`.
*blend-mode*	El tipo `<blend-mode>` de datos en CSS se utiliza para describir cómo deben combinarse los colores cuando las capas de fondo se anidan juntas. Para cada píxel de la capa a la que se ha aplicado el patrón de fusión, el color se tomará del fondo y el primer plano, y se realizará un cálculo sobre él, y se devolverá un nuevo color para usar donde las capas se superponen.
*color value*	El tipo `<color>` de datos en CSS se utiliza para representar un color en la gama de colores sRGB.
*custom-ident*	El tipo de datos `<custom-ident>` en CSS se utiliza para representar identificadores creados por el usuario. Este tipo distingue entre mayúsculas y minúsculas y algunos valores no están permitidos en determinadas posiciones para evitar confusiones.
*gradient*	El tipo de datos `<gradient>` en CSS es un tipo especial de imágenes que `<image>` representan el color : degradado entre dos o más colores. Subtipos de datos: `linear-gradient radial-gradient repeating-linear-gradient repeating-radial-gradient`
*image*	El tipo de datos `<image>` en CSS se utiliza para representar una imagen bidimensional; Hay dos tipos de imágenes: imágenes tradicionales, generalmente referidas mediante una URL, e imágenes generadas dinámicamente, como degradados `<gradient>`.
*integer*	El tipo de datos `<integer>` en CSS es un tipo especial `<number>` que representa números enteros, ya sean positivos o negativos; Los números enteros se utilizan en muchas propiedades CSS, tales como `column-count`, `grid-column`, `grid-row` y `z-index`.
*length*	El tipo de datos `<length>` en CSS se utiliza para representar los valores longitudinales, se aceptan una gran cantidad de características de CSS con valores de tipo `<length>`, cómo `width`, `margin`, `padding`, `font-size`, `border-width` y `text-shadow`.
number	El tipo de datos `<number>` en CSS representa valores numéricos, ya sean enteros o decimales.
*percentage*	El tipo de datos `<percentage>` en CSS se utiliza para representar porcentajes. Un gran número de propiedades de CSS aceptan valores como porcentajes y, por lo general, se utilizan para definir una dimensión relativa a las dimensiones del elemento principal. Ejemplos de propiedades que aceptan un tipo de datos `<percentage>`: el `width`, `margin`, `padding` y `font-size`.
*resolution*	El tipo `<resolution>` de datos en CSS se utiliza para describir la resolución de pantalla en consultas de medios, y la resolución de pantalla significa la densidad de píxeles de la pantalla.
*string*	El tipo de datos `<string>` en CSS es una cadena de caracteres y las cadenas se pueden utilizar en muchas propiedades de CSS, como `content`, `font-family` y `quotes`.
*time*	El tipo de datos `<time>` representa un valor de tiempo en segundos o milisegundos, utilizado en `animation` y `transition` otros atributos.
*timing-function*	El tipo de datos se `<timing-function>` refiere a funciones matemáticas que describen el poder de cambiar valores unidimensionales en los movimientos, lo que permite que la velocidad de los movimientos cambie durante el curso del movimiento.
*url*	El tipo de datos `<url>` en CSS apunta a un recurso, como imágenes o fuentes, y los enlaces URL se utilizan en muchos atributos, como `background-image`, `cursor` y `list-style`.

Reglas @

Propiedad	Función
*‎@charset*	La codificación de caracteres el usuario especifica los estilos de página, debe ser la primera instrucción en el archivo no está precedida por ningún carácter, y si especifica más de una base `@charset` en el propio archivo , pero la primera regla no se tomará, y no se puede se utilizará para esta regla en la propiedad `style` de los elementos HTML o dentro del elemento `<style>`.
`‎`*@font-face*	Permite a los desarrolladores seleccionar líneas especiales para mostrar el texto en las páginas web, lo que permite a los desarrolladores definir sus propias líneas, y al – Qaeda `@font-face` abrió el camino para que los desarrolladores usen cualquier línea que deseen en lugar de limitarse a algunas fuentes instaladas en el visitantes de la computadora.
*‎@import*	Permite a los desarrolladores importar reglas de formato de otras hojas de estilo, y este tipo de reglas debe preceder a todas las demás reglas CSS, excepto las reglas `@charset`.
*‎@keyframes*	Los pasos intermedios controlan la cadena de animación CSS mediante la definición de fotogramas clave, lo que nos da un mayor control sobre los estilos de los elementos en los pasos intermedios en comparación con las transiciones `transition`.
*‎@media*	Se pueden usar para aplicar estilos basados en ciertas condiciones (llamadas consultas de medios), que prueban el tipo de dispositivo, sus propiedades y el entorno operativo.
*‎@page*	Se utiliza para modificar algunas propiedades CSS cuando el usuario imprime, es decir, no puede cambiar todas las propiedades CSS con esta regla, puede cambiar márgenes, `margin` huérfanos y `orphans` viudas `widows`, y se ignorará cualquier intento de cambiar otras propiedades CSS.
*‎@supports*	Nos permite definir reglas basadas en la compatibilidad del navegador para funciones CSS específicas.

Diversos Elementos

Elemento	Función
‎**–‎***	Los nombres de propiedad precedidos por dos guiones `--`, por ejemplo `‎--example-name`, representan propiedades personalizadas a las que se les asigna un valor que se puede reutilizar en el documento a través de la función `var()‎`.
*attr()‎*	La función `attr()‎` CSS se usa para obtener el valor de la propiedad de un elemento dado y usarlo en estilos CSS.También se puede usar en pseudoelementos, en cuyo caso se usará el valor de la propiedad del elemento padre.
*calc()‎*	La función `calc()‎` en CSS permite cálculos al determinar las características de los valores de CSS, y se puede usar en cualquier posición que permita el uso de tipos de datos , `<length>` y , `<percentage>` y , `<angle>` y , `<time>` y , `<number>` y `<integer>`.
*inherit*	La palabra clave `inherit` CSS hace que el elemento tome el valor calculado de esta propiedad del elemento principal, y este valor se puede aplicar a todas las propiedades CSS, incluida la propiedad `all` abreviada.
*initial*	La palabra clave `initial` CSS aplica el valor inicial de una propiedad a un elemento y se puede utilizar en todas las propiedades CSS, incluida la propiedad `all` abreviada.
*unset*	La palabra clave `unset` CSS restablece el valor de la propiedad a su valor heredado si hereda el valor del elemento principal, o a su valor inicial si no lo hace. En otras palabras, esta palabra clave se comportará `inherit` en el primer caso, se comportará en el `initial` segundo y se puede utilizar en todas las propiedades CSS, incluida la propiedad `all` abreviada.
*var()‎*	La función `var()‎` en CSS se usa para incluir el valor de una propiedad personalizada en lugar del valor de una de las otras propiedades.
*will-change*	La propiedad `will-change` en CSS permite a los desarrolladores decirle a los navegadores qué cambios se espera que se realicen en el elemento, de modo que el navegador pueda ajustar las mejoras de rendimiento antes de que ocurra el cambio, y estas mejoras aumentarán la capacidad de respuesta de la página al realizar los cálculos necesarios antes de que se produzca el cambio.

Valores en CSS

Propiedad	Función
*El valor real*	El valor real de una propiedad CSS es el valor utilizado para esa propiedad después de cualquier redondeo necesario. Por ejemplo, es posible que el navegador no muestre marcos a `border` menos que su grosor sea un número entero de un píxel, por lo que puede redondear ese grosor al número entero más cercano antes de aplicarlo.
*Valor calculado*	El valor calculado de una propiedad CSS se calcula a partir del valor dado.
*valor específico*	El valor específico de una propiedad CSS es el valor establecido de esa propiedad, ya sea directamente desde la hoja de estilo o desde su elemento padre.
*valor usado*	El valor usado de una propiedad CSS es el valor final de esa propiedad después de hacer todos los cálculos necesarios.
*Valor inicial*	El valor inicial que ponemos en las páginas de todas las propiedades CSS tiene diferentes significados para qué propiedades pueden heredar valores y cuáles no.