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

PropiedadFunción
colorOtorga 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.
opacityDetermina el grado de transparencia de un elemento, determinará qué tan visible será el contenido detrás de él.

Introducción al Background

PropiedadFunción
backgroundNos 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-colorbackground-imagebackground-origin,  background-positionbackground-repeatbackground-size y  background-attachment.
background-attachmentEspecifica 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-modeDescribe cómo las imágenes de fondo deben combinarse entre sí y con el color de fondo seleccionado para el elemento.
background-clipEspecifica cómo el fondo del elemento descansará sobre los bordes del elemento, si el fondo es un color <color> o una imagen <image>.
background-colorEstablece el color de fondo de un elemento y el color de fondo es un valor de color <color>.
background-imageEstablece una o más imágenes como fondo del elemento.
background-originEspecifica el principio de la imagen de fondo especificado por la propiedad  background-image.
background-positionEstablece la posición inicial de cada imagen de fondo, en relación con el principio definido en la propiedad  background-origin.
background-repeatDefine 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-sizeEspecifica 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-shadowDescribe el efecto de las sombras en un objeto y se pueden agregar una o más sombras usando esta propiedad.

Introducción al Border

PropiedadFunción
borderUna 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-bottomUna 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-colorEspecifica 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-styleEspecifica la forma de la línea del marco inferior del elemento.
border-bottom-widthEstablece el ancho del marco inferior del elemento.
border-colorEspecifica 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-imagePermite 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-outsetEspecifica cuánto se extenderá la imagen del marco más allá del borde exterior del marco.
border-image-repeatDefine 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-sliceLa imagen seleccionada por la propiedad se divide  border-image-source en 9 áreas: 4 esquinas, 4 bordes y el centro.
border-image-sourceDefine 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-widthDefine 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-leftUna 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-colorEspecifica 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-styleEspecifica la forma de la línea del marco izquierdo del elemento.
border-left-widthEstablece el ancho del marco izquierdo del elemento.
border-rightUna 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-colorEspecifica 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-styleEspecifica la forma de la línea del marco derecho del elemento.
border-right-widthEstablece el ancho del marco derecho del elemento.
border-styleEspecifica la forma de la fuente del marco del elemento para todas sus caras (derecha, izquierda, superior e inferior).
border-topUna propiedad  border-top en CSS es una propiedad abreviada que establece los valores de los atributos  border-top-colorborder-top-style y border-top-width. Estos atributos describen cómo se muestra el marco border superior del elemento.
border-top-colorEspecifica 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-styleEspecifica la forma de la línea superior del marco del elemento.
border-top-widthEstablece el ancho del marco superior del elemento.
border-widthLa 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-radiusEstablece la rotación de la esquina inferior izquierda del elemento.
border-bottom-right-radiusEstablece la rotación de la esquina inferior derecha del elemento.
border-radiusPermite 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-radiusEstablece la rotación de la esquina superior izquierda del elemento.
border-top-right-radiusEstablece la rotación de la esquina superior derecha del elemento.

Introducción a la Posición de los Elementos

PropiedadFunción
bottomUna 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.
clearEspecifica 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.
displayEspecifica 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.
floatEspecifica 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]).
leftUna 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.
positionDescribe cómo el elemento debe estar colocado en el documento, y las propiedades  toprightbottom y left especifica la ubicación final de esos elementos.
rightUna 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.
topUna 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-indexDetermina 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

PropiedadFunción
box-sizingSe 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.
heightEspecifica 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-heightEstablece 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-widthEstablece 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-heightEstablece 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-widthEstablece 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.
visibilityPermite 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>.
widthEspecifica 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

PropiedadFunción
marginEstablece 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-rightmargin-bottom y  margin-left.
margin-bottomEstablece el margen en el extremo inferior del elemento, los valores positivos alejan el elemento y los valores negativos lo acercarán.
margin-leftEstablece el margen en el extremo izquierdo del elemento, los valores positivos alejan el elemento y los valores negativos lo acercarán.
margin-rightEstablece el margen en el extremo derecho del elemento, los valores positivos alejan el elemento y los valores negativos lo acercarán.
margin-topEstablece 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
paddingEstablecerá el relleno en los cuatro extremos de un elemento, y esta propiedad puede ser utilizada en lugar de establecer los acolchados individuales con padding-toppadding-rightpadding-bottom  y padding-left.
padding-bottomEstablece 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-leftEstablece 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-rightEstablece 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-topEstablece 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

PropiedadFunción
overflowEspecifica 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-xEspecifica 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-yEspecifica 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

PropiedadFunción
align-contentDefine 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-itemsDefine 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-selfEstablece 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  autopropiedad, se ignora align-self.
flexEspecifica 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-basisEspecifica 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-directionDefine cuál es el eje principal en el contenedor flexible y su orientación (normal o inversa).
flex-flowSe utiliza para establecer el valor de las dos propiedades  flex-direction y  flex-wrap.
flex-growEspecifica 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-shrinkEspecifica 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-wrapEspecifica 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-contentDefine una forma para que el navegador distribuya el espacio entre y alrededor de los elementos a lo largo del eje principal del contenedor flexible.
orderEspecifica 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

PropiedadFunción
fontPropiedad  font en la propiedad CSS es un atajo que conduce a ajustar los valores de las propiedades,  font-stylefont-variantfont-weightfont-sizeline-height y font-family, con el fin de determinar la fuente utilizada en el artículo.
font-familyEspecifica una lista que contiene uno o más tipos de fuentes públicas o privadas, que se aplicarán al elemento.
font-kerningControla el uso de la información de kerning almacenada en la fuente utilizada.
font-sizeAjuste 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-adjustLa 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-stretchLa propiedad  font-stretch CSS selecciona una versión estrecha (condensada), normal o extendida (expandida) de la fuente.
font-styleEspecifica 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-weightEspecifica 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-heightEstablece 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

PropiedadFunción
directionEstablece 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-spacingEspecifica el espacio entre caracteres de texto.
line-breakEspecifica el comportamiento del navegador al moverse a una nueva línea cuando se trabaja con signos de puntuación y símbolos.
overflow-wrapEspecifica 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-sizeSe utiliza para especificar el ancho del carácter de tabulación que tiene el símbolo  U+0009 Unicode.
text-alignDescribe 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-lastDescribe cómo se alinea la última línea de texto.
text-decorationEspecifica 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-colorEspecifica 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-lineEspecifica 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-styleEspecifica 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-emphasisEspecifica 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-colorEspecifica 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-positionEspecifica 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-styleEspecifica 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-indentEspecifica 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-justifyDefine cómo se analiza el texto si la propiedad se text-align establece en un valor justify.
text-shadowAgrega 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-transformEspecifica 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-spaceLa 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-breakEspecifica 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-spacingEspecifica cómo se espacian las palabras y las etiquetas.

Introducción a Menu en CSS

PropiedadFunción
counter-incrementAumente 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-resetRestablece el valor de un contador CSS a un valor específico, y el valor del contador puede aumentarse o disminuirse utilizando  counter-increment.
list-styleUna propiedad  list-style en CSS es una propiedad abreviada que establece los valores de list-style-typelist-style-image y list-style-position.
list-style-imageEspecifica 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-positionEspecifica dónde se hace referencia a los elementos del menú. Por lo general, se recomienda utilizar la función corta list-style.
list-style-typeEspecifica cómo se hace referencia a los elementos de la lista.

Introducción a Tables en CSS

PropiedadFunción
border-collapseEspecifica 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-spacingEspecifica 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-sideEspecifica la posición de la bandera de la tabla definida en el elemento <caption>.
empty-cellsEspecifica 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-layoutEspecifica el algoritmo que se utiliza para ajustar el diseño de celdas, líneas y columnas de tablas <table>.
vertical-alignEspecifica la alineación vertical de elementos de línea o celdas de tabla.

Introducción a las Animations en CSS

PropiedadFunción
‎@keyframesEl @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.
animationPropiedad  animation en CSS es una característica breve ajusta los valores de los diversos atributos de CSS, con movimientos relacionados como: animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction, animation-fill-mode y animation-play-state.
animation-delaySe 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-directionEspecifica si el movimiento debe ejecutarse hacia adelante o hacia atrás, y también cambiar entre ellos.
animation-durationEspecifica el tiempo necesario para completar un ciclo completo de movimiento.
animation-fill-modeEspecifica 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-countEspecifica 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-nameSe 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-stateEspecifica 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-functionSe 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
transitionUna corta propiedad que establece los valores de la transition-propertytransition-durationtransition-timing-function y transition-delay.
transition-delayEspecifica el tiempo de espera entre la ocurrencia del evento que activará el efecto de transición y el inicio del efecto.
transition-durationEspecifica 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-propertySe utiliza para especificar los nombres de las propiedades CSS que se verán afectadas por la transición.
transition-timing-functionSe 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

PropiedadFunción
backface-visibilityEspecifica 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.
perspectiveSe 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-originEspecifica 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.
transformNos 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-originPermite 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-styleEspecifica 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

PropiedadFunción
caret-colorEspecifica 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.
cursorEspecifica qué forma del puntero del mouse se mostrará cuando el mouse se desplace sobre el elemento.
outlineUna propiedad  outline en CSS es una propiedad abreviada que se utiliza para un juego o más atributos outline-styleoutline-width y outline-color al mismo tiempo.
outline-colorEstablece 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-offsetEstablece 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-styleEstablece 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-widthEstablece 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.
resizeEspecifica si se cambia el tamaño del objeto y en qué dirección.
text-overflowEspecifica 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

PropiedadFunción
column-countEspecífica en cuántas columnas se dividirá el elemento.
column-fillEspecifica 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-gapEstablece el espacio entre columnas para elementos de varias columnas.
column-ruleLa 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-widthcolumn-rule-style y column-rule-color en un solo atributo.
column-rule-colorEspecifica el color de la línea vertical que se dibujará entre columnas en elementos de varias columnas.
column-rule-styleEspecifica la forma de la línea vertical que se dibujará entre columnas en elementos de varias columnas.
column-rule-widthEspecifica el ancho o el grosor de la línea vertical que se dibujará entre columnas en elementos de varias columnas.
column-spanPermite que un elemento abarque todas las columnas cuando se le asigna un valor all.
column-widthEspecifica 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.
columnsBreve propiedad nos permite ajustar el valor de las propiedades column-width y column-count al mismo tiempo.
orphansEspecifica 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.
widowsEspecifica 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

PropiedadFunción
contentSe utiliza con pseudoelementos  ::before y ::after para generar contenido dentro del elemento.
quotesIndica cómo el navegador debe mostrar las comillas.

Introducción al Filter en CSS

PropiedadFunción
filterLa 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

PropiedadFunción
gridLa propiedad  grid abreviada de CSS establece todas las características que definen explícitamente las propiedades de la cuadrícula como (grid-template-rowsgrid-template-columns y grid-template-areas); todas las propiedades que definen implícitamente las propiedades de la red como (grid-auto-rowsgrid-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-areaLa propiedad  grid-area en CSS es una propiedad abreviada que establece el valor de los grid-row-startgrid-column-startgrid-row-end y grid-column-end.  Propiedades especificando las dimensiones y la posición de un elemento de rejilla.
grid-auto-columnsEstablece las dimensiones de las rutas de columna generadas implícitamente.
grid-auto-flowEstablece cómo funcionará el algoritmo de posicionamiento automático del elemento de la cuadrícula.
grid-auto-rowsEstablece las dimensiones de los trazados de línea generados implícitamente.
grid-columnLa 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-endSe 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-gapEspecifica el espacio entre columnas en el contenedor de ceñido.
grid-column-startSe 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-gapLa  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-rowLa 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-endSe 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-gapEspecifica el espacio entre líneas en el contenedor de ceñido.
grid-row-startSe 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-templateUna grid-template propiedad CSS es una propiedad abreviada que se utiliza para establecer los valores de grid-template-rowsgrid-template-columns y grid-template-areas.
grid-template-areasEstablece nombres de áreas de ceñido, es decir áreas de cuadrícula.
grid-template-columnsEstablece los nombres y las dimensiones de las rutas de las columnas en el diseño de cuadrícula.
grid-template-rowsEstablece 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

PropiedadFunción
Type SelectorsEl 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 SelectorsEl class selectors en CSS hace coincidir elementos de acuerdo con el valor de su propiedad de clase.
ID SelectorsEl id selectors de CSS hace coincidir los elementos de acuerdo con su valor de propiedad de ID.
Universal SelectorEl universal selector en CSS coincide con todos los elementos.
Attribute SelectorsEl attribute selectors en CSS coincide con elementos si hay una propiedad en ellos o esa propiedad tiene un cierto valor.
Adjacent Sibling SelectorsEl 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 SelectorsEl 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 SelectorsElementos 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 SelectorsUn 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

ElementoFunción
:activeElementos 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.
‎:checkedElija 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.
:defaultCualquier 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.
:disabledCualquier 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.
:emptyCualquier 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.
:enabledCualquier elemento está habilitado, es decir se puede seleccionar, hacer clic, escribir o enfocar.
‎:firstSe utiliza con la base @page y representa la primera página del documento cuando se imprime.
:first-childEl primero de un grupo de elementos hermanos.
:first-of-typeEl primer elemento de su género en un grupo de elementos fraternos.
:fullscreenElementos que se muestran cuando el navegador está en modo de pantalla completa.
‎:focusElementos 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.
:hoverObjetos 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.
:indeterminateCualquier modelo cuyo estado sea desconocido o indeterminado.
:in-rangeCualquier elemento <input> cuyo valor esté dentro del rango permitido especificado por min y max.
‎:invalidCualquier elemento <input><form> que no valide su contenido.
:lang()‎Elementos en función del idioma de esos elementos.
:last-childEl último elemento de un grupo de elementos hermanos.
:last-of-typeEl último artículo de este tipo en un grupo de artículos fraternales.
:leftSe utiliza con la base @page y representa las páginas del lado izquierdo del documento cuando se imprime.
:linkEl 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-childUn 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-typeUn elemento que no tiene hermanos del mismo tipo.
‎:optionalCualquier artículo <input> o <select> o <textarea> que han no se establece la propiedad  de ellos required.
:out-of-rangeCualquier elemento <input> cuyo valor no esté dentro del rango permitido especificado por min y max.
:read-onlyCualquier elemento con contenido textual que el usuario no pueda modificar.
:read-writeCualquier elemento con contenido textual que el usuario pueda modificar.
‎:requiredCualquier artículo <input> o <select> o <textarea> efectos intervenidos en requiered de ellos.
:rightSe utiliza con la base @page y representa las páginas del lado derecho del documento cuando se imprime.
‎:rootEl 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.
‎:targetUn elemento único cuyo identificador coincide con id una sección de la URL.
:validCualquier elemento  <input><form> cuyo contenido el navegador haya validado con éxito.
‎:visitedUn 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

ElementoFunció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.
‎: :backdropEs un cuadro que se muestra directamente debajo de cualquier elemento que se muestre en modo de pantalla completa.
: :beforeEs 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-letterAplica 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-lineAplique 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>.
‎: :selectionRepresenta texto en el documento seleccionado por el usuario por ejemplo, cuando usamos el cursor.

Tipos de datos

Tipo de datosFunción
angleEl 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-modeEl 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 valueEl tipo <color> de datos  en CSS se utiliza para representar un color en la gama de colores sRGB.
custom-identEl 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.
gradientEl 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
imageEl 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>.
integerEl 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.
lengthEl 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 widthmarginpaddingfont-sizeborder-width y text-shadow.
numberEl tipo de datos  <number> en CSS representa valores numéricos, ya sean enteros o decimales.
percentageEl 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.
resolutionEl 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.
stringEl 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.
timeEl tipo de datos  <time> representa un valor de tiempo en segundos o milisegundos, utilizado en  animation y  transition otros atributos.
timing-functionEl 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.
urlEl 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-imagecursor y  list-style.

Reglas @

Propiedad Función
‎@charsetLa 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-facePermite 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.
‎@importPermite 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.
‎@keyframesLos 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.
‎@mediaSe 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.
‎@pageSe 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.
‎@supportsNos 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>.
inheritLa 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.
initialLa 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.
unsetLa 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-changeLa 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 realEl 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 calculadoEl valor calculado de una propiedad CSS se calcula a partir del valor dado.
valor específicoEl 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 usadoEl valor usado de una propiedad CSS es el valor final de esa propiedad después de hacer todos los cálculos necesarios.
Valor inicialEl 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.