objeto de estilo
El objeto Style representa una declaración de estilo individual.
Acceder a un objeto de estilo
El objeto Style se puede acceder desde la sección de cabeza del documento, o de HTML específica element(s) .
Acceso a estilo object(s) de la sección de la cabeza del documento:
Acceso a objeto de estilo de un elemento especificado:
Crear un objeto de estilo
Se puede crear un <style> elemento mediante el document. createElement() document. createElement() método:
También puede establecer las propiedades de estilo de un elemento existente:
Propiedades de estilo de objeto
El "CSS" columna indica en qué versión CSS la propiedad se define (CSS1, CSS2, or CSS3) .
| Propiedad | Descripción | CSS |
|---|---|---|
| alignContent | Establece o devuelve la alineación entre las líneas dentro de un contenedor flexible cuando los artículos no utilizan todo el espacio disponible | 3 |
| alignItems | Establece o devuelve la alineación de elementos dentro de un recipiente flexible | 3 |
| alignSelf | Establece o devuelve la alineación de los elementos seleccionados dentro de un recipiente flexible | 3 |
| animation | Una propiedad abreviada para todas las propiedades de animación abajo, excepto la propiedad animationPlayState | 3 |
| animationDelay | Establece o devuelve cuando la animación se iniciará | 3 |
| animationDirection | Establece o devuelve si la animación se reproduzca a la inversa en ciclos alternos | 3 |
| animationDuration | Establece o devuelve el número de segundos o milisegundos una animación tarda en completar un ciclo | 3 |
| animationFillMode | Establece o devuelve los valores que son aplicadas por la animación fuera del tiempo que se está ejecutando | 3 |
| animationIterationCount | Establece o devuelve el número de veces que una animación se debe jugar | 3 |
| animationName | Establece o devuelve un nombre para la animación @keyframes | 3 |
| animationTimingFunction | Establece o devuelve la curva de velocidad de la animación | 3 |
| animationPlayState | Establece o devuelve si la animación se está ejecutando o en pausa | 3 |
| background | Establece o devuelve todas las propiedades de fondo en una declaración | 1 |
| backgroundAttachment | Establece o devuelve si una imagen de fondo se fija o se desplaza con la página | 1 |
| backgroundColor | Establece o devuelve el color de fondo de un elemento | 1 |
| backgroundImage | Establece o devuelve la imagen de fondo de un elemento | 1 |
| backgroundPosition | Establece o devuelve la posición de partida de una imagen de fondo | 1 |
| backgroundRepeat | Establece o devuelve como repetir (tile) una imagen de fondo | 1 |
| backgroundClip | Establece o devuelve el área de la pintura del fondo | 3 |
| backgroundOrigin | Establece o devuelve el área de posicionamiento de las imágenes de fondo | 3 |
| backgroundSize | Establece o devuelve el tamaño de la imagen de fondo | 3 |
| backfaceVisibility | Establece o devuelve si o no un elemento debe ser visible sin estar frente a la pantalla | 3 |
| border | Establece o devuelve borderWidth, borderStyle y borderColor en una declaración | 1 |
| borderBottom | Establece o devuelve todos los BorderBottom * propiedades en una declaración | 1 |
| borderBottomColor | Establece o devuelve el color del borde inferior | 1 |
| borderBottomLeftRadius | Establece o devuelve la forma del borde de la esquina inferior izquierda | 3 |
| borderBottomRightRadius | Establece o devuelve la forma del borde de la esquina inferior derecha | 3 |
| borderBottomStyle | Establece o devuelve el estilo del borde inferior | 1 |
| borderBottomWidth | Establece o devuelve el ancho del borde inferior | 1 |
| borderCollapse | Establece o devuelve si el borde de la tabla deben ser colapsados en un solo borde, o no | 2 |
| borderColor | Establece o devuelve el color del borde de un elemento (puede tener hasta cuatro valores) | 1 |
| borderImage | Una propiedad abreviada para establecer o devolver todas las propiedades borderImage * | 3 |
| borderImageOutset | Establece o devuelve la cantidad por la cual el área de la imagen frontera se extiende más allá del borde de cuadro | 3 |
| borderImageRepeat | Establece o devuelve si la imagen de la frontera se debe repetir, redondeado o estirado | 3 |
| borderImageSlice | Establece o devuelve los desplazamientos hacia el interior de la imagen de las fronteras | 3 |
| borderImageSource | Establece o devuelve la imagen para ser utilizado como una frontera | 3 |
| borderImageWidth | Establece o devuelve el ancho de la imagen de las fronteras | 3 |
| borderLeft | Establece o devuelve todo el borderLeft * propiedades en una declaración | 1 |
| borderLeftColor | Establece o devuelve el color del borde izquierdo | 1 |
| borderLeftStyle | Establece o devuelve el estilo del borde izquierdo | 1 |
| borderLeftWidth | Establece o devuelve el ancho del borde izquierdo | 1 |
| borderRadius | Una propiedad abreviada para establecer o devolver toda la frontera de cuatro propiedades * Radius | 3 |
| borderRight | Establece o devuelve todos los BorderRight * propiedades en una declaración | 1 |
| borderRightColor | Establece o devuelve el color del borde derecho | 1 |
| borderRightStyle | Establece o devuelve el estilo del borde derecho | 1 |
| borderRightWidth | Establece o devuelve el ancho del borde derecho | 1 |
| borderSpacing | Establece o devuelve el espacio entre celdas de una tabla | 2 |
| borderStyle | Establece o devuelve el estilo del borde de un elemento (puede tener hasta cuatro valores) | 1 |
| borderTop | Establece o devuelve todos los BorderTop * propiedades en una declaración | 1 |
| borderTopColor | Establece o devuelve el color del borde superior | 1 |
| borderTopLeftRadius | Establece o devuelve la forma del borde de la esquina superior izquierda | 3 |
| borderTopRightRadius | Establece o devuelve la forma del borde de la esquina superior derecha | 3 |
| borderTopStyle | Establece o devuelve el estilo del borde superior | 1 |
| borderTopWidth | Establece o devuelve el ancho del borde superior | 1 |
| borderWidth | Establece o devuelve la anchura de borde de un elemento (puede tener hasta cuatro valores) | 1 |
| bottom | Establece o devuelve la posición inferior de un elemento de posicionado | 2 |
| boxDecorationBreak | Establece o devuelve el comportamiento del fondo y el borde de un elemento en la página a la ruptura, o, para los elementos en línea, en el salto de línea. | 3 |
| boxShadow | Se conecta uno o más abandono sombras a la caja | 3 |
| boxSizing | Permite definir ciertos elementos para adaptarse a un área de una manera determinada | 3 |
| captionSide | Establece o devuelve la posición de la leyenda de la tabla | 2 |
| clear | Establece o devuelve la posición del elemento en relación a los objetos flotantes | 1 |
| clip | Establece o devuelve que parte de un elemento posicionado es visible | 2 |
| color | Establece o devuelve el color del texto | 1 |
| columnCount | Establece o devuelve el número de columnas de un elemento se debe dividir en | 3 |
| columnFill | Establece o devuelve cómo llenar columnas | 3 |
| columnGap | Establece o devuelve el espacio entre las columnas | 3 |
| columnRule | Una propiedad abreviada para establecer o devolver todas las propiedades columnRule * | 3 |
| columnRuleColor | Establece o devuelve el color de la regla entre columnas | 3 |
| columnRuleStyle | Establece o devuelve el estilo de la regla entre columnas | 3 |
| columnRuleWidth | Establece o devuelve el ancho de la regla entre columnas | 3 |
| columns | Una propiedad abreviada para establecer o devolver columnWidth y columnCount | 3 |
| columnSpan | Establece o devuelve el número de columnas de un elemento debe extenderse a lo largo | 3 |
| columnWidth | Establece o devuelve el ancho de las columnas | 3 |
| content | Se utiliza con el: antes y: después de pseudo-elementos, para insertar contenido generado | 2 |
| counterIncrement | Incrementos de uno o más contadores | 2 |
| counterReset | Crea o restablece uno o más contadores | 2 |
| cursor | Establece o devuelve el tipo de cursor que se mostrará para el puntero del ratón | 2 |
| direction | Establece o devuelve la dirección del texto | 2 |
| display | Establece o devuelve el tipo de visualización de un elemento | 1 |
| emptyCells | Establece o devuelve si desea mostrar el borde y el fondo de las celdas vacías, o no | 2 |
| filter | Establece o devuelve filtros de imagen (visual effects, like blur and saturation) | 3 |
| flex | Establece o devuelve la longitud del artículo, en relación con el resto | 3 |
| flexBasis | Establece o devuelve la longitud inicial de un elemento flexible de | 3 |
| flexDirection | Establece o devuelve la dirección de los elementos flexibles | 3 |
| flexFlow | Una propiedad abreviada para el flexDirection y las propiedades FlexWrap | 3 |
| flexGrow | Establece o devuelve la cantidad del artículo será crecer en relación al resto | 3 |
| flexShrink | Establece o devuelve la partida que se encogen con respecto al resto | 3 |
| flexWrap | Establece o devuelve si los elementos flexibles debe envolver o no | 3 |
| cssFloat | Establece o devuelve la alineación horizontal de un elemento | 1 |
| font | Establece o devuelve fontStyle, fontVariant, fontWeight, fontSize, lineHeight y fontFamily en una declaración | 1 |
| fontFamily | Establece o devuelve la familia de fuentes para el texto | 1 |
| fontSize | Establece o devuelve el tamaño de fuente del texto | 1 |
| fontStyle | Establece o devuelve si el estilo de la fuente es normal, cursiva u oblicua | 1 |
| fontVariant | Establece o devuelve si la fuente se deben mostrar en mayúsculas pequeñas | 1 |
| fontWeight | Establece o devuelve la constancia de la fuente | 1 |
| fontSizeAdjust | Preserva la legibilidad del texto cuando se produce la fuente de reserva | 3 |
| fontStretch | Selecciona un condensado, o cara normal, expandido de una familia de fuentes | 3 |
| hangingPunctuation | Especifica si un carácter puntuacion puede ser colocado fuera de la caja de línea | 3 |
| height | Establece o devuelve la altura de un elemento | 1 |
| hyphens | Establece cómo dividir palabras para mejorar el diseño de los párrafos | 3 |
| icon | Proporciona el autor la capacidad de estilo de un elemento con un equivalente icónica | 3 |
| imageOrientation | Especifica una rotación en la dirección derecha o hacia la derecha que un agente de usuario se aplica a una imagen | 3 |
| justifyContent | Establece o devuelve la alineación entre los elementos dentro de un recipiente flexible cuando los artículos no utilizan todo el espacio disponible. | 3 |
| left | Establece o devuelve la posición izquierda de un elemento de posicionado | 2 |
| letterSpacing | Establece o devuelve el espacio entre caracteres en un texto | 1 |
| lineHeight | Establece o devuelve la distancia entre líneas en un texto | 1 |
| listStyle | Establece o devuelve listStyleImage, listStylePosition y listStyleType en una declaración | 1 |
| listStyleImage | Establece o devuelve una imagen como el marcador de ítems de lista | 1 |
| listStylePosition | Establece o devuelve la posición del marcador de ítems de lista | 1 |
| listStyleType | Establece o devuelve el tipo de marcador de ítems de lista | 1 |
| margin | Establece o devuelve los márgenes de un elemento (can have up to four values) | 1 |
| marginBottom | Establece o devuelve el margen inferior de un elemento | 1 |
| marginLeft | Establece o devuelve el margen izquierdo de un elemento | 1 |
| marginRight | Establece o devuelve el margen derecho de un elemento | 1 |
| marginTop | Establece o devuelve el margen superior de un elemento | 1 |
| maxHeight | Establece o devuelve la altura máxima de un elemento | 2 |
| maxWidth | Establece o devuelve la anchura máxima de un elemento | 2 |
| minHeight | Establece o devuelve la altura mínima de un elemento | 2 |
| minWidth | Establece o devuelve el ancho mínimo de un elemento | 2 |
| navDown | Establece o devuelve dónde navegan al usar la tecla de navegación flecha hacia abajo | 3 |
| navIndex | Establece o devuelve el orden de tabulación para un elemento | 3 |
| navLeft | Establece o devuelve dónde navegan al usar la tecla de navegación flecha hacia la izquierda | 3 |
| navRight | Establece o devuelve dónde navegan al usar la tecla de navegación de flecha derecha | 3 |
| navUp | Establece o devuelve dónde navegan al usar la tecla de navegación flecha hacia arriba | 3 |
| opacity | Establece o devuelve el nivel de opacidad para un elemento | 3 |
| order | Establece o devuelve el orden del elemento flexible con respecto al resto | 3 |
| orphans | Establece o devuelve el número mínimo de líneas de un elemento que debe ser dejado en la parte inferior de una página cuando un salto de página se produce dentro de un elemento | 2 |
| outline | Establece o devuelve todas las propiedades del contorno en una declaración | 2 |
| outlineColor | Establece o devuelve el color del contorno alrededor de un elemento | 2 |
| outlineOffset | Compensa un esquema, y se basa más allá del límite del borde | 3 |
| outlineStyle | Establece o devuelve el estilo del contorno alrededor de un elemento | 2 |
| outlineWidth | Establece o devuelve el ancho del contorno alrededor de un elemento | 2 |
| overflow | Establece o devuelve lo que se puede hacer con el contenido que presta fuera de la caja elemento | 2 |
| overflowX | Especifica qué hacer con los bordes izquierdo / derecho del contenido, si se desborda el área de contenido del elemento | 3 |
| overflowY | Especifica qué hacer con los bordes superior / inferior del contenido, si se desborda el área de contenido del elemento | 3 |
| padding | Establece o devuelve el relleno de un elemento (can have up to four values) | 1 |
| paddingBottom | Establece o devuelve el relleno inferior de un elemento | 1 |
| paddingLeft | Establece o devuelve el relleno a la izquierda de un elemento | 1 |
| paddingRight | Establece o devuelve el relleno derecho de un elemento | 1 |
| paddingTop | Establece o devuelve el acolchado superior de un elemento | 1 |
| pageBreakAfter | Establece o devuelve el comportamiento de salto de página después de un elemento | 2 |
| pageBreakBefore | Establece o devuelve el comportamiento de salto de página antes de un elemento | 2 |
| pageBreakInside | Establece o devuelve el comportamiento de salto de página dentro de un elemento | 2 |
| perspective | Establece o devuelve la perspectiva sobre cómo los elementos 3D son vistas | 3 |
| perspectiveOrigin | Establece o devuelve la posición inferior de elementos 3D | 3 |
| position | Establece o devuelve el tipo de método de posicionamiento utilizado para un elemento (static, relative, absolute or fixed) | 2 |
| quotes | Establece o devuelve el tipo de comillas para las citas incrustadas | 2 |
| resize | Establece o devuelve si o no un elemento es de tamaño variable por el usuario | 3 |
| right | Establece o devuelve la posición correcta de un elemento posicionado | 2 |
| tableLayout | Establece o devuelve el camino para disponer de celdas, filas y columnas | 2 |
| tabSize | Establece o devuelve la longitud de la pestaña caracteres | 3 |
| textAlign | Establece o devuelve la alineación horizontal del texto | 1 |
| textAlignLast | Establece o devuelve la forma en la última línea de un bloque o una línea derecha antes de un salto de línea forzado está alineado cuando text-align se "justify" | 3 |
| textDecoration | Establece o devuelve la decoración de un texto | 1 |
| textDecorationColor | Establece o devuelve el color del texto-decoración | 3 |
| textDecorationLine | Establece o devuelve el tipo de línea en un texto-decoración | 3 |
| textDecorationStyle | Establece o devuelve el estilo de la línea en una decoración de texto | 3 |
| textIndent | Establece o devuelve la sangría de la primera línea de texto | 1 |
| textJustify | Establece o devuelve el método de justificación utilizan cuando text-align se "justify" | 3 |
| textOverflow | Establece o devuelve lo que debe suceder cuando se desborda el texto que contiene el elemento | 3 |
| textShadow | Establece o devuelve el efecto de sombra de un texto | 3 |
| textTransform | Establece o devuelve la capitalización de un texto | 1 |
| top | Establece o devuelve la posición de la parte superior de un elemento posicionado | 2 |
| transform | Se aplica una transformación 2D o 3D a un elemento | 3 |
| transformOrigin | Establece o devuelve la posición de elementos transformados | 3 |
| transformStyle | Establece o devuelve cómo los elementos anidados se prestan en el espacio 3D | 3 |
| transition | Una propiedad abreviada para establecer o devolver las cuatro propiedades de transición | 3 |
| transitionProperty | Establece o devuelve la propiedad CSS que el efecto de transición es para | 3 |
| transitionDuration | Establece o devuelve el número de segundos o milisegundos un efecto de transición necesario para completar | 3 |
| transitionTimingFunction | Establece o devuelve la curva de velocidad del efecto de transición | 3 |
| transitionDelay | Establece o devuelve cuando el efecto de transición comenzará | 3 |
| unicodeBidi | Establece o devuelve si el texto debe ser anulado para soportar múltiples idiomas en el mismo documento | 2 |
| verticalAlign | Establece o devuelve la alineación vertical del contenido de un elemento | 1 |
| visibility | Establece o devuelve si un elemento debe ser visible | 2 |
| whiteSpace | Establece o devuelve cómo manejar las pestañas, saltos de línea y espacios en blanco en un texto | 1 |
| width | Establece o devuelve el ancho de un elemento | 1 |
| wordBreak | Establece o saltos de línea romper las reglas para alfabetos no CJC | 3 |
| wordSpacing | Establece o devuelve el espacio entre las palabras de un texto | 1 |
| wordWrap | Permite largos, palabras irrompibles a ser roto y envolver a la línea siguiente | 3 |
| widows | Establece o devuelve el número mínimo de líneas de un elemento que debe ser visible en la parte superior de una página | 2 |
| zIndex | Establece o devuelve el orden de apilamiento de un elemento posicionado | 2 |
Páginas relacionadas
Tutorial de HTML: HTML CSS
CSS tutorial: Tutorial CSS
: Referencia HTML HTML <style> etiqueta
Referencia CSS: Propiedades de CSS