CSS reference manual

CSS @rules

CSS attributes大全

CSS @Rule (At)-rules)CSS z-index Attribute

Comprehensive Manual of CSS Properties (By Function)

CSS attributes can be searched in alphabetical order, this part includes the latest CSS3A complete list of standard attribute specifications. All attributes are divided into animation attributes, background attributes, border attributes, color attributes, height and width dimensions, Flex flexible box, font attributes, list item attributes, margin attributes, outline attributes, text font attributes, visual attributes, and so on.

Animation attribute (Animation)

Attribute	Description
`animation`	Specify animation based on keyframes.
`animation-delay`	Specify when the animation should start.
`animation-direction`	Specify whether the animation should play in reverse in alternating cycles.
`animation-duration`	Specify the number of seconds or milliseconds the animation should take to complete one cycle.
`animation-fill-mode`	Specify how to apply styles to the target of the CSS animation before and after execution.
`animation-iteration-count`	Specify the number of times the animation should play before stopping.
`animation-name`	Specify`@keyframes`The name of the defined animation applied to the selected element.
`animation-play-state`	Specify whether the animation should run or pause.
`animation-timing-function`	Specify how CSS animation should proceed within each cycle.

Background attribute (Background)

Attribute	Description
`background`	Define various background properties in one statement.
`background-attachment`	Specify whether the background image is fixed in the viewport or scrolls.
`background-clip`	Specify the drawing area of the background.
`background-color`	Define the background color of the element.
`background-image`	Define the background image of the element.
`background-origin`	Specify the positioning area of the background image.
`background-position`	Define the origin of the background image.
`background-repeat`	Specify whether/How to tile the background image.
`background-size`	Specify the size of the background image.

Border attribute (Border)

Attribute	Description
`border`	Set the width, style, and color of the border on all four sides of the element.
`border-bottom`	Set the width, style, and color of the bottom border of the element.
`border-bottom-color`	Set the color of the bottom border of the element.
`border-bottom-left-radius`	Define the shape of the lower left corner of the element.
`border-bottom-right-radius`	Define the shape of the lower right boundary of the element.
`border-bottom-style`	Set the style of the bottom border of the element.
`border-bottom-width`	Set the width of the bottom border of the element.
`border-color`	Set the color of the border on all four sides of the element.
`border-image`	Specify how to use an image instead of a border style.
`border-image-outset`	Specify the number of times the image border area extends beyond the border area.
`border-image-repeat`	Specify whether the image border should repeat, round, or stretch.
`border-image-slice`	Specify the inward offset of the image border.
`border-image-source`	Specify the position of the image to be used as a border.
`border-image-width`	Specify the width of the image border.
`border-left`	Set the width, style, and color of the left border of the element.
`border-left-color`	Set the color of the left border of the element.
`border-left-style`	Set the style of the left border of the element.
`border-left-width`	Set the width of the left border of the element.
`border-radius`	Define the shape of the boundary corners of the element.
`border-right`	Set the width, style, and color of the right border of the element.
`border-right-color`	Set the color of the right border of the element.
`border-right-style`	Set the style of the right border of the element.
`border-right-width`	Set the width of the right border of the element.
`border-style`	Set the style of the border on all four sides of the element.
`border-top`	Set the width, style, and color of the top border of the element.
`border-top-color`	Set the color of the top border of the element.
`border-top-left-radius`	Define the shape of the upper left corner of the element.
`border-top-right-radius`	Define the shape of the upper right corner of the element.
`border-top-style`	Set the style of the top border of the element.
`border-top-width`	Set the width of the top border of the element.
`border-width`	Set the border width of all four sides of the element.

Color attribute (Color)

Attribute	Description
`color`	Specify the color of the element text.
`opacity`	Specify the opacity of the element.

Size attribute (Size)

Attribute	Description
`height`	Specify the height of the element.
`max-height`	Specify the maximum height of the element.
`max-width`	Specify the maximum width of the element.
`min-height`	Specify the minimum height of the element.
`min-width`	Specify the minimum width of the element.
`width`	Specify the width of the element.

Content attribute (Content)

Attribute	Description
`content`	Insert generated content.
`quotes`	Specify the quotes used for embedded quotes.
`counter-reset`	Create or reset one or more counters.
`counter-increment`	Increment one or more counter values.

Flexible Flex Box Layout (Flex)

Attribute	Description
`align-content`	Specify the alignment method of the flexible container items within the flexible container.
`align-items`	Specify the default alignment method for items in the flex container.
`align-self`	Specify the alignment method of the selected item in the flexible container.
`flex`	Specify the component of the flexible length.
`flex-basis`	Specify the initial main size of the flexible item.
`flex-direction`	Specify the direction of the flexible item.
`flex-flow`	`flex-direction`and`flex-wrap`Abbreviated properties of the attribute.
`flex-grow`	Specify how flexible items grow relative to other items within the flex container.
`flex-shrink`	Specify how flexible items shrink relative to other items within the flex container.
`flex-wrap`	Specify whether flexible items should be wrapped.
`justify-content`	Specify how flexible items align along the main axis of the flexible container after any flexible length and automatic page margin have been resolved.
`order`	Specify the display and layout order of flexible items in the flexible container.

Font attribute (Fonts)

Attribute	Description
`font`	Define various font properties in one declaration.
`font-family`	Define the font list of the element.
`font-size`	Define the font size of the text.
`font-size-adjust`	Maintain the readability of the text when font fallback occurs.
`font-stretch`	Choose a normal, condensed, or expanded font from the font.
`font-style`	Define the font style of the text.
`font-variant`	Specify the font variant.
`font-weight`	Specify the font weight of the text.

List item attribute (Lists)

Attribute	Description
`list-style`	Define the display style of lists and list elements.
`list-style-image`	Specify the image used as the list item marker.
`list-style-position`	Specify the position of the list item marker.
`list-style-type`	Specify the marker style of the list item.

Margin attribute (Margin)

Attribute	Description
`margin`	Set the margin on all four sides of the element.
`margin-bottom`	Set the bottom margin of the element.
`margin-left`	Set the left margin of the element.
`margin-right`	Set the right margin of the element.
`margin-top`	Set the top margin of the element.

Multi-column layout attribute (Column)

Attribute	Description
`column-count`	Specify the number of columns in multi-column elements.
`column-fill`	Specify how to fill the columns.
`column-gap`	Specify the spacing between columns of multi-column elements.
`column-rule`	Specify the line or 'rule' drawn between each column of multi-column elements.
`column-rule-color`	Specify the color of the rule drawn between columns in a multi-column layout.
`column-rule-style`	Specify the style of the rule drawn between columns in a multi-column layout.
`column-rule-width`	Specify the regular width drawn between columns in a multi-column layout.
`column-span`	Specify how many columns the element spans in a multi-column layout.
`column-width`	Specify the optimal width of columns in multi-column elements.
`columns`	Used to set`column-width`and`column-count`Abbreviated properties of the attribute.

Outline attributes (Outline)

Attribute	Description
`outline`	Set the width, style, and color of all four sides of the element outline.
`outline-color`	Set the color of the outline.
`outline-offset`	Set the space between the outline and the element border.
`outline-style`	Set the outline style.
`outline-width`	Set the width of the outline.

Padding attributes (Padding)

Attribute	Description
`padding`	Set padding on all four sides of the element.
`padding-bottom`	Set the padding to the bottom of the element.
`padding-left`	Set the padding to the left of the element.
`padding-right`	Set the padding to the right of the element.
`padding-top`	Set the padding to the top of the element.

Print attributes (Print)

Attribute	Description
`page-break-after`	Insert a page break after the element.
`page-break-before`	Insert a page break before the element.
`page-break-inside`	Insert a page break within the element.

Table attributes (Table)

Attribute	Description
`border-collapse`	Specify whether to connect or separate the table cell borders.
`border-spacing`	Set the spacing between the borders of adjacent table cells.
`caption-side`	Specify the position of the table caption.
`empty-cells`	Show or hide the border and background of empty table cells.
`table-layout`	Specify the table layout algorithm.

Text attributes (Text)

Attribute	Description
`direction`	Define the text direction/Writing direction.
`tab-size`	Specify the length of the tab.
`text-align`	Set the horizontal alignment of inline content.
`text-align-last`	Specify when`text-align`how to align the last line of the block or the line before the forced line break when`justify`
`text-decoration`	Specify the decoration to be added to the text.
`text-decoration-color`	specified color`text-decoration-line`
`text-decoration-line`	Specify which line decoration to add to the element.
`text-decoration-style`	Specify`text-decoration-line`The line style specified by the property
`text-indent`	Indent the first line of text.
`text-justify`	Specify when`text-align`The alignment method to be used when the property is set to`justify`
`text-overflow`	Specify how the text content will be displayed when it overflows the block container.
`text-shadow`	Apply one or more shadows to the text content of the element.
`text-transform`	Convert the case of the text.
`line-height`	Set the height between lines of text.
`vertical-align`	Set the vertical position of the element relative to the current text baseline.
`letter-spacing`	Set the additional spacing between letters.
`word-spacing`	Set the spacing between words.
`white-space`	Specify how to handle whitespace within an element.
`word-break`	Specify how to break lines within words.
`word-wrap`	Specify whether to break words when content exceeds the container boundary.

Transform Attribute (Transform)

Attribute	Description
`backface-visibility`	Specify whether the 'back' of the transformed element is visible when facing the user.
`perspective`	Define the perspective from which all child elements of the object are viewed.
`perspective-origin`	Define the origin of the perspective attribute (3D space's vanishing point).
`transform`	translate2D or3D transformation is applied to the element.
`transform-origin`	Define the origin of the transformation of an element.
`transform-style`	Specify how to3Render nested elements in D space.

Transition Attribute (Transition)

Attribute	Description
`transition`	Define the transition between two states of an element.
`transition-delay`	Specify when the transition effect should start.
`transition-duration`	Specify the number of seconds or milliseconds the transition effect should take.
`transition-property`	Specify the name of the CSS property to which the transition effect should be applied.
`transition-timing-function`	Specify the speed curve of the transition effect.

Visual Format Attribute

Attribute	Description
`display`	Specify how the element is displayed on the screen.
`position`	Specify how to position the element.
`top`	Specify the position of the top edge of the positioned element.
`right`	Specify the position of the right edge of the positioned element.
`bottom`	Specify the position of the bottom edge of the positioned element.
`left`	Specify the position of the left edge of the positioned element.
`float`	Specify whether a box should float.
`clear`	Specify the position of an element relative to the floating element.
`z-index`	Specify the stacking or layering order of the positioned element.
`overflow`	Specify how the content of the overflow element box is handled.
`overflow-x`	Specify how content overflow is managed when content exceeds the width of the element's content area.
`overflow-y`	Specify how content overflow is managed when content exceeds the height of the element's content area.
`resize`	Specify whether an element can be resized by the user.
`clip`	Define the clipping area.
`visibility`	Specify whether an element is visible.
`cursor`	Specify the type of cursor.
`box-shadow`	Apply one or more shadows to the box of an element.
`box-sizing`	Change the default CSS box model.

CSS @Rule (At)-rules)CSS z-index Attribute