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.
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.
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.
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.
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.
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.
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.
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.
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 autopropiedad, 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.
Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles. Puedes acceder y revisar nuestras políticas de privacidad en la página de privacidad y cookies.
Cookies estrictamente necesarias
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Estas cookies son:
Sesión de usuario.
Comentarios.
Seguridad.
Aceptación de cookies.
Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.
Cookies de terceros
Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.
Dejar esta cookie activa nos permite mejorar nuestra web.
¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!
