Tổng hợp các thuộc tính CSS mới nhất 2022

Defines how each line is aligned within a flexbox/grid container. It only applies if flex-wrap: wrap is present, and if there are multiple lines of flexbox/grid items.

Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.

Works like align-items, but applies only to a single flexbox item, instead of all of them.

Defines how long the animation has to wait before starting. The animation will only be delayed on its first iteration.

Defines in which direction the animation is played.

Defines how long the animation lasts.

Defines what happens before an animation starts and after it ends. The fill mode allows to tell the browser if the animation’s styles should also be applied outside of the animation.

Defines how many times the animation is played.

Defines which animation keyframes to use.

Defines if an animation is playing or not.

Defines how the values between the start and the end of the animation are calculated.

Shorthand property for animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-mode and animation-play-state.

Only animation-duration and animation-name are required.

Defines how the background image will behave when scrolling the page.

Defines how far the background should extend within the element.

Defines the color of the element's background.

Defines an image as the background of the element.

Defines the origin of the background image.

Defines the position of the background image.

Defines how the background image repeats itself across the element's background, starting from the background position.

Defines the size of the background image.

Shorthand property for background-imagebackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachment and background-color.

Like border-color, but for the bottom border only.

Defines the radius of the bottom left corner.

Defines the radius of the bottom right corner.

Like border-style, but for the bottom border only.

Like border-width, but for the bottom border only.

Shorthand property for border-bottom-widthborder-bottom-style and border-bottom-color.

Defines whether table borders should be separated or collapsed.

Defines the color of the element's borders.

Like border-color, but for the left border only.

Like border-style, but for the left border only.

Like border-width, but for the left border only.

Shorthand property for border-left-widthborder-left-style and border-left-color.

Defines the radius of the element's corners.

Like border-color, but for the right border only.

Like border-style, but for the right border only.

Like border-width, but for the right border only.

Shorthand property for border-right-widthborder-right-style and border-right-color.

Defines the style of the element's borders.

Like border-color, but for the top border only.

Defines the radius of the top left corner.

Defines the radius of the top right corner.

Like border-style, but for the top border only.

Like border-width, but for the top border only.

Shorthand property for border-top-widthborder-top-style and border-top-color.

Defines the width of the element's borders.

Shorthand property for border-widthborder-style and border-color.

Defines the position of the element according to its bottom edge.

Defines the shadow of the element.

Defines how the width and height of the element are calculated: whether they include the padding and borders or not.

Moves the element after all the preceding floating elements.

Defines the color of the text.

Defines the number of columns of the element.

Defines the gap between the columns of the element.

Defines the number of columns of the element.

Defines the text content of the :before and :after pseudo-elements.

Sets the mouse cursor when hovering the element.

Sets the display behavior of the element.

Defines the initial size of a flexbox item.

Defines how flexbox items are ordered within a flexbox container.

Shorthand property for flex-direction and flex-wrap.

Defines how much a flexbox item should grow if there's space available.

Defines how much a flexbox item should shrink if there's not enough space available.

Defines if flexbox items appear on a single line or on multiple lines within a flexbox container.

Pushes the element to either the left or right side. The following siblings will wrap around the floating element

Defines the size of the text.

Defines how much the text is slanted.

Defines which glyph to use for each letter.

Defines the weight of the text.

Shorthand property for font-stylefont-variantfont-weightfont-sizeline-height and font-family.

Shorthand property for grid-row-startgrid-column-startgrid-row-end and grid-column-end.

Defines the size of grid columns that were created implicitly: it means that grid-auto-columns targets the columns that were not defined with grid-template-columns or grid-template-areas.

Defines the position of auto-generated grid items.

Defines the size of grid rows that were created implicitly: it means that grid-auto-rows targets the rows that were not defined with grid-template-rows or grid-template-areas.

Defines the column end position of a grid item.

Defines the gutter between the columns of a grid container.

Defines the column start position of a grid item.

Shorthand property for grid-column-start and grid-column-end.

Shorthand property for grid-row-gap and grid-column-gap.

Defines the row end position of a grid item.

Defines the gutter between the rows of a grid container.

Defines the row start position of a grid item.

Shorthand property for grid-row-start and grid-row-end.

Defines areas within a grid container. These areas can then be referenced when placing a grid item.

Defines the columns of a grid container. You can specify the width of a column by using a keyword (like auto) or a length (like 10px). The number of columns is determined by the number of values defined in the space-separated list.

Defines the rows of a grid container. You can specify the width of a row by using a keyword (like auto) or a length (like 10px). The number of rows is determined by the number of values defined in the space-separated list.

Shorthand property for grid-template-rowsgrid-template-columns and grid-template-area.

Shorthand property for grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columns and grid-auto-flow.

Defines the height of the element.

Defines how flexbox/grid items are aligned according to the main axis, within a flexbox/grid container.

Defines the position of the element according to its left edge.

Defines the spacing between the characters of a block of text.

Defines the height of a single line of text.

Defines the image to be used as an list item's bullet point.

Defines the position of a list's bullet points.

Defines the type of a list item's bullet point.

Shorthand property for list-style-typelist-style-image and list-style-position.

Defines the space outside the element, on the bottom side.

Defines the space outside the element, on the left side.

Defines the space outside the element, on the right side.

Defines the space outside the element, on the top side.

Shorthand property for margin-topmargin-rightmargin-bottom and margin-left.

Defines the maximum height the element can be.

Defines the maximum width the element can be.

Defines the minimum height of the element.

Defines the minimum width of the element.

Defines how the element should blend with the background.

Defines how opaque the element is.

Defines the order of a flexbox item.

Defines the color of the element's outlines.

Defines the style of the element's outlines.

Defines the width of the element's outlines.

Shorthand property for outline-widthoutline-style and outline-color.

Defines if words should break when reaching the end of a line.

Defines how overflowing content on the horizontal axis is displayed.

Defines how overflowing content on the vertical axis is displayed.

Defines how overflowing content on both horizontal and vertical axis is displayed.

Defines the space inside the element, on the bottom side.

Defines the space inside the element, on the left side.

Defines the space inside the element, on the right side.

Defines the space inside the element, on the top side.

Shorthand property for padding-toppadding-rightpadding-bottom and padding-left.

Defines if the element reacts to pointer events or not.

Defines the position behavior of the element.

Defines if the textarea is resizable or not.

Defines the position of the element according to its right edge.

Defines how the text content of the element is horizontally aligned.

Defines how the text content of the element is decorated.

Defines the indentation of the element's first line of text.

Defines how the hidden text content behaves if it's overflowing.

Defines the shadow of the text content.

Defines how the text content should be transformed.

Defines the position of the element according to its top edge.

Defines the origin for transformations defined by the transform property.

Defines how the element is transformed.

Defines how long the transition has to wait before starting.

Defines how long the transition lasts.

Defines which properties will transition.

Defines how the values between the start and the end of the transition are calculated.

Shorthand property for transition-propertytransition-durationtransition-timing-function and transition-delay.

Only transition-duration is required.

Defines how an inline or table-cell element aligns vertically.

Defines how the element's white space is handled.

Defines the width of the element.

Defines which properties are expected to change in the future (either through CSS or JavaScript).

Defines how words should break when reaching the end of a line.

Defines the spacing between words of a block of text.

Defines the order of the elements on the z-axis. It only works on positioned elements (anything apart from static).