What categories are css attributes classified into?

Classification of css properties: animation properties, conversion properties, transition properties, Box properties, Marquee properties, size properties, margin properties, padding properties, border properties, positioning properties, multi-column properties, scalable Box properties, list properties, Grid properties, table properties, text properties, font properties, Color properties, background properties, etc.

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

CSS attribute classification

##Animation attribute classificationCSS3 animation attribute ( Animation)2D/3D Transformation Property(Transform)Transition Property(Transition)Box PropertyMarquee PropertySize/position--CSS size attribute (Dimension)CSS margin attribute (Margin)CSS padding attribute (Padding)CSS border properties (Border and Outline)CSS positioning properties (Positioning)--List/TableMultiple columns Property (Multi-column)Flexible Box property (Flexible Box)CSS list property (List)Grid propertyCSS table property ( Table) Text font colorCSS text property (Text)CSS font property (Font)Color propertyCSS Background Property (Background)Use attributes sparinglyHyperlink attributesGenerated Content Content for Paged Media propertiesUser-interface properties (User-interface)Paged Media propertiesCSS printing properties ( Print)

---

##CSS3 animation properties (Animation)

Attribute##@keyframes Specifies animation. 3animationShorthand property for all animation properties, except animation-play-state property. 3animation-nameSpecifies the name of @keyframes animation. 3animation-durationSpecifies the seconds or milliseconds it takes for the animation to complete one cycle. 3animation-timing-functionSpecifies the speed curve of animation. 3animation-delaySpecifies when the animation starts. 3animation-iteration-countSpecifies the number of times the animation is played. 3animation-directionSpecifies whether the animation plays in reverse in the next cycle. 3animation-play-stateSpecifies whether the animation is running or paused. 3animation-fill-modeSpecifies the state of the object outside of the animation time. 3

CSS Background property (Background)

Description	CSS

Property	Description	CSS
background	Set all background properties in one statement.	1
background-attachment	Sets whether the background image is fixed or scrolls with the rest of the page.	1
background-color	Set the background color of the element.	1
background-image	Set the background image of the element.	1
background-position	Set the starting position of the background image.	1
background-repeat	Set whether and how to repeat the background image.	1
background-clip	Specifies the drawing area of ​​the background.	3
background-origin	Specifies the positioning area of ​​the background image.	3
background-size	Specifies the size of the background image.	3

CSS border properties (Border and Outline)

##box -shadowAdds one or more shadows to the box. 3

Box Properties

Property	Description	CSS
border	Set all border properties in one statement.	1
border-bottom	Set all bottom border properties in one statement.	1
border-bottom-color	Set the color of the bottom border.	2
border-bottom-style	Set the style of the bottom border.	2
border-bottom-width	Set the width of the bottom border.	1
border-color	Set the color of the four borders.	1
border-left	Set all left border properties in one statement.	1
border-left-color	Set the color of the left border.	2
border-left-style	Set the style of the left border.	2
border-left-width	Set the width of the left border.	1
border-right	Set all right border properties in one statement.	1
border-right-color	Set the color of the right border.	2
border-right-style	Set the style of the right border.	2
border-right-width	Set the width of the right border.	1
border-style	Set the style of the four borders.	1
border-top	Set all top border properties in one statement.	1
border-top-color	Set the color of the top border.	2
border-top-style	Set the style of the top border.	2
border-top-width	Set the width of the top border.	1
border-width	Set the width of the four borders.	1
outline	Set all outline properties in one statement.	2
outline-color	Set the color of the outline.	2
outline-style	Set the style of the outline.	2
outline-width	Set the width of the outline.	2
border-bottom-left-radius	Define the shape of the lower left corner of the border.	3
border-bottom-right-radius	Define the shape of the lower right corner of the border.	3
border-image	Shorthand property, sets all border-image-* properties.	3
border-image-outset	Specifies the amount by which the border image area exceeds the border.	3
border-image-repeat	Whether the image border should be repeated, rounded or stretched ).	3
border-image-slice	Specifies the inward offset of the image border.	3
border-image-source	Specifies the image used as the border.	3
border-image-width	Specifies the width of the image border.	3
border-radius	Shorthand property, sets all four border-*-radius properties.	3
border-top-left-radius	Define the shape of the upper left corner of the border.	3
border-top-right-radius	Define the shape of the lower right corner of the border.	3
box-decoration-break		3

Properties	Description	CSS
overflow-x	If the content overflows the element content area, whether to crop the left/right edge of the content.	3
overflow-y	If the content overflows the element content area, whether to crop the top/bottom edge of the content.	3
overflow-style	Specifies the preferred scrolling method for overflow elements.	3
rotation	Rotates an element around a point defined by the rotation-point property.	3
rotation-point	Define the offset point from the upper left border edge.	3

##Color attribute

AttributeDescriptionCSScolor-profileAllows the use of source color profiles other than the default specification. 3opacitySpecifies the opacity level of the element. 3rendering-intentAllows the use of color profiles for rendering intent specifications other than the default. 3

Content for Paged Media Properties

PropertiesDescriptionCSSbookmark-labelSpecifies the label of the bookmark. 3bookmark-levelSpecifies the level of the bookmark. 3bookmark-targetSpecifies the target of the bookmark link. 3float-offset Places the element in the opposite direction from where the float attribute would normally be placed. 3hyphenate-afterSpecifies the minimum number of characters after the hyphen in a hyphenated word. 3hyphenate-beforeSpecifies the minimum number of characters before a hyphen in a hyphenated word. 3hyphenate-characterSpecifies the string displayed when hyphenation occurs. 3hyphenate-linesIndicates the maximum number of consecutive hyphenate lines in an element. 3hyphenate-resourceSpecifies external resources (comma-separated list) that help the browser determine hyphenation points. 3hyphensSet how words are split to improve paragraph layout. 3image-resolutionSpecifies the correct resolution of the image. 3marksAdd crop marks or cross marks to your document. 3string-set3

CSS size attribute (Dimension)

PropertyDescriptionCSSheightSet the element height. 1max-heightSet the maximum height of the element. 2max-width Set the maximum width of the element. 2min-heightSet the minimum height of the element. 2min-width Set the minimum width of the element. 2widthSet the width of the element. 1

Flexible Box Properties

PropertyDescriptionCSSbox-alignSpecifies how to align the child elements of the box. 3box-directionSpecifies the display direction of the child elements of the box. 3box-flexSpecifies whether the child elements of the box are scalable. 3box-flex-groupAssign scalable elements to flex groups. 3box-linesSpecifies whether to wrap the display when the space of the parent element box is exceeded. 3box-ordinal-groupSpecifies the display order of the child elements of the box. 3box-orientSpecifies whether the box's child elements should be aligned horizontally or vertically. 3box-packSpecifies the horizontal position in a horizontal box or the vertical position in a vertical box. 3

CSS Font Properties (Font)

Properties	Description	CSS
font	Set all font properties in one statement.	1
font-family	Specifies the font family of the text.	1
font-size	Specifies the font size of the text.	1
font-size-adjust	Specifies the aspect value for the element.	2
font-stretch	Shrink or stretch the current font family.	2
font-style	Specifies the font style of the text.	1
font-variant	Specifies whether to display text in small caps font.	1
font-weight	Specifies the thickness of the font.	1

Generated Content

Properties	Description	CSS
content	Used with :before and :after pseudo-elements to insert generated content.	2
counter-increment	Increments or decrements one or more counters.	2
counter-reset	Create or reset one or more counters.	2
quotes	Set the quote type for nested quotes.	2
crop	Allows the replaced element to be only a rectangular area of ​​the object, not the entire object.	3
move-to	Removes an element from the stream and reinserts it at a later point in the document.	3
page-policy	Determines whether the element should be applied to a counter or a string value based on the occurrence of the page.	3

##Grid Properties

PropertiesDescriptionCSSgrid-columnsSpecifies the width of each column in the grid. 3grid-rowsSpecifies the height of each column in the grid. 3

Hyperlink Properties

Properties DescriptionCSStargetAbbreviation attribute, set target-name, target-new and target-position attributes. 3target-nameSpecifies where to open the link (the target of the link). 3target-newSpecifies whether the target link should be opened in a new window or in a new tab of an existing window. 3target-positionSpecifies where to place the new target link. 3

CSS list property (List)

property DescriptionCSSlist-styleSets all list properties in one statement. 1list-style-image Set the image as the list item marker. 1list-style-positionSet the placement position of the list item mark. 1list-style-typeSet the type of list item tag. 1marker-offset2

CSS margin attribute (Margin)

PropertyDescriptionCSSmarginSet all margin properties in one declaration. 1margin-bottom Set the bottom margin of the element. 1margin-left Set the left margin of the element. 1margin-right Set the right margin of the element. 1margin-topSet the top margin of the element. 1

Marquee Properties

PropertiesDescriptionCSSmarquee-directionSets the direction of moving content. 3marquee-play-countSet how many times the content is moved. 3marquee-speedSet how fast the content scrolls. 3marquee-styleSet the style of mobile content. 3

Multi-column

Attribute	Description	CSS
column-count	Specifies the number of columns by which elements should be separated.	3
column-fill	Specifies how to fill the column.	3
column-gap	Specifies the gap between columns.	3
column-rule	Set the shorthand property for all column-rule-* properties.	3
column-rule-color	Specifies the color of rules between columns.	3
column-rule-style	Specifies the style of rules between columns.	3
column-rule-width	Specifies the width of the rule between columns.	3
column-span	Specifies the number of columns the element should span.	3
column-width	Specifies the width of the column.	3
columns	Specifies the shorthand properties for setting column-width and column-count.	3

CSS padding property (Padding)

Property	Description	CSS
padding	Sets all padding properties in a single statement.	1
padding-bottom	Set the bottom padding of the element.	1
padding-left	Set the left padding of the element.	1
padding-right	Set the right padding of the element.	1
padding-top	Set the top padding of the element.	1

Paged Media Properties

Attribute	Description	CSS
fit	Indicates how to scale the replaced element whose width and height attributes are not auto .	3
fit-position	Define the alignment of objects within the box.	3
image-orientation	Specifies the clockwise rotation that the user agent should apply to the image.	3
page	Specifies the specific type of page on which the element should be displayed.	3
size	Specifies the size and direction of the page content containing box.	3

CSS Positioning Property (Positioning)

Property	Description	CSS
bottom	Sets the offset between the bottom margin boundary of a positioned element and the bottom boundary of its containing block .	2
clear	Specifies which side of the element does not allow other floating elements.	1
clip	Clip absolutely positioned elements.	2
cursor	Specifies the type (shape) of the cursor to be displayed.	2
display	Specifies the type of box that the element should generate.	1
float	Specifies whether the box should float.	1
left	Set the offset between the left margin boundary of the positioned element and the left boundary of its containing block.	2
overflow	Specifies what happens when content overflows the element box.	2
position	Specifies the positioning type of the element.	2
right	Set the offset between the right margin boundary of the positioned element and the right boundary of its containing block.	2
top	Sets the offset between the top margin boundary of a positioned element and the top boundary of its containing block.	2
vertical-align	Set the vertical alignment of the element.	1
visibility	Specifies whether the element is visible.	2
z-index	Set the stacking order of elements.	2

CSS Printing Properties (Print)

Properties	Description	CSS
orphans	Sets the minimum number of lines that must remain at the bottom of the page when pagination occurs inside the element.	2
page-break-after	Set the paging behavior after the element.	2
page-break-before	Set the paging behavior before the element.	2
page-break-inside	Set the paging behavior inside the element.	2
widows	Set the minimum number of lines that must remain at the top of the page when pagination occurs inside the element.	2

CSS table properties (Table)

Properties	Description	CSS
border-collapse	Specifies whether to merge table borders.	2
border-spacing	Specifies the distance between adjacent cell borders.	2
caption-side	Specifies the position of the table title.	2
empty-cells	Specifies whether to display the borders and backgrounds on empty cells in the table.	2
table-layout	Sets the layout algorithm used for tables.	2

CSS text attribute (Text)

attribute	Description	CSS
color	Sets the color of the text.	1
direction	Specifies the direction/writing direction of the text.	2
letter-spacing	Set the character spacing.	1
line-height	Set the line height.	1
text-align	Specifies the horizontal alignment of text.	1
text-decoration	Specifies the decorative effect to be added to the text.	1
text-indent	Specifies the indentation of the first line of the text block.	1
text-shadow	Specifies the shadow effect to be added to text.	2
text-transform	Control the case of text.	1
unicode-bidi	Set the text direction.	2
white-space	Specifies how to handle white space in elements.	1
word-spacing	Set word spacing.	1
hanging-punctuation	Specifies whether punctuation characters are outside the wireframe.	3
punctuation-trim	Specifies whether to trim punctuation characters.	3
text-align-last	Set how to align the last line or the line immediately before a forced newline.	3
text-emphasis	Applies an emphasis mark and the emphasis mark's foreground color to the element's text.	3
text-justify	Specifies the alignment method used when text-align is set to "justify".	3
text-outline	Specifies the outline of the text.	3
text-overflow	Specifies what happens when text overflows the containing element.	3
text-shadow	Adds a shadow to text.	3
text-wrap	Specifies the line wrapping rules for text.	3
word-break	Specifies the line breaking rules for non-Chinese, Japanese and Korean text.	3
word-wrap	Allows long indivisible words to be split and wrapped to the next line.	3

2D/3D Transformation Properties (Transform)

Property	Description	CSS
transform	Applies a 2D or 3D transform to the element.	3
transform-origin	Allows you to change the position of the element being transformed.	3
transform-style	Specifies how nested elements are displayed in 3D space.	3
perspective	Specifies the perspective effect of 3D elements.	3
perspective-origin	Specifies the bottom position of the 3D element.	3
backface-visibility	Defines whether the element is visible when not facing the screen.	3

Transition attribute

Attribute	Description	CSS
transition	Abbreviation property, used to set four transition properties in one property.	3
transition-property	Specifies the name of the CSS property that applies the transition.	3
transition-duration	Define how long the transition effect takes.	3
transition-timing-function	Specifies the time curve of the transition effect.	3
transition-delay	Specifies when the transition effect starts.	3

User-interface properties

Properties	Description	CSS
appearance	Allows you to set the appearance of elements to standard user interface elements	3
box-sizing	Allows you to define exactly what will fit into a zone.	3
icon	Provides creators with the ability to style elements using their iconified equivalents.	3
nav-down	Specifies where to navigate when using the arrow-down navigation key.	3
nav-index	Set the tab key control order of elements.	3
nav-left	Specifies where to navigate when using the arrow-left navigation key.	3
nav-right	Specifies where to navigate when using the arrow-right navigation key.	3
nav-up	Specifies where to navigate when using the arrow-up navigation key.	3
outline-offset	Offset the outline and draw the outline beyond the edge of the border.	3
resize	Specifies whether the size of the element can be adjusted by the user.	3

(Learning video sharing: css video tutorial)

The above is the detailed content of What categories are css attributes classified into?. For more information, please follow other related articles on the PHP Chinese website!