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 classification CSS3 animation attribute ( Animation) 2D/3D Transformation Property(Transform) Transition Property(Transition) Box Property Marquee Property Size/position-- CSS size attribute (Dimension) CSS margin attribute (Margin) CSS padding attribute (Padding) CSS border properties (Border and Outline) CSS positioning properties (Positioning) --List/Table Multiple columns Property (Multi-column) Flexible Box property (Flexible Box) CSS list property (List) Grid property CSS table property ( Table) Text font color CSS text property (Text) CSS font property (Font) Color property CSS Background Property (Background) Use attributes sparingly Hyperlink attributes Generated Content Content for Paged Media properties User-interface properties (User-interface) Paged Media properties CSS printing properties ( Print)

---

##CSS3 animation properties (Animation)

CSS Background property (Background)

Attribute ##@keyframes Specifies animation. 3 animation Shorthand property for all animation properties, except animation-play-state property. 3 animation-name Specifies the name of @keyframes animation. 3 animation-duration Specifies the seconds or milliseconds it takes for the animation to complete one cycle. 3 animation-timing-function Specifies the speed curve of animation. 3 animation-delay Specifies when the animation starts. 3 animation-iteration-count Specifies the number of times the animation is played. 3 animation-direction Specifies whether the animation plays in reverse in the next cycle. 3 animation-play-state Specifies whether the animation is running or paused. 3 animation-fill-mode Specifies the state of the object outside of the animation time. 3

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 Properties

##box -shadow Adds one or more shadows to the box. 3

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

Attribute Description CSS color-profile Allows the use of source color profiles other than the default specification. 3 opacity Specifies the opacity level of the element. 3 rendering-intent Allows the use of color profiles for rendering intent specifications other than the default. 3

Content for Paged Media Properties

Properties Description CSS bookmark-label Specifies the label of the bookmark. 3 bookmark-level Specifies the level of the bookmark. 3 bookmark-target Specifies the target of the bookmark link. 3 float-offset Places the element in the opposite direction from where the float attribute would normally be placed. 3 hyphenate-after Specifies the minimum number of characters after the hyphen in a hyphenated word. 3 hyphenate-before Specifies the minimum number of characters before a hyphen in a hyphenated word. 3 hyphenate-character Specifies the string displayed when hyphenation occurs. 3 hyphenate-lines Indicates the maximum number of consecutive hyphenate lines in an element. 3 hyphenate-resource Specifies external resources (comma-separated list) that help the browser determine hyphenation points. 3 hyphens Set how words are split to improve paragraph layout. 3 image-resolution Specifies the correct resolution of the image. 3 marks Add crop marks or cross marks to your document. 3 string-set 3

CSS size attribute (Dimension)

Property Description CSS height Set the element height. 1 max-height Set the maximum height of the element. 2 max-width Set the maximum width of the element. 2 min-height Set the minimum height of the element. 2 min-width Set the minimum width of the element. 2 width Set the width of the element. 1

Flexible Box Properties

CSS Font Properties (Font)

Property Description CSS box-align Specifies how to align the child elements of the box. 3 box-direction Specifies the display direction of the child elements of the box. 3 box-flex Specifies whether the child elements of the box are scalable. 3 box-flex-group Assign scalable elements to flex groups. 3 box-lines Specifies whether to wrap the display when the space of the parent element box is exceeded. 3 box-ordinal-group Specifies the display order of the child elements of the box. 3 box-orient Specifies whether the box's child elements should be aligned horizontally or vertically. 3 box-pack Specifies the horizontal position in a horizontal box or the vertical position in a vertical box. 3

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

Properties Description CSS grid-columns Specifies the width of each column in the grid. 3 grid-rows Specifies the height of each column in the grid. 3

Hyperlink Properties

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

CSS list property (List)

property Description CSS list-style Sets all list properties in one statement. 1 list-style-image Set the image as the list item marker. 1 list-style-position Set the placement position of the list item mark. 1 list-style-type Set the type of list item tag. 1 marker-offset 2

CSS margin attribute (Margin)

Property Description CSS margin Set all margin properties in one declaration. 1 margin-bottom Set the bottom margin of the element. 1 margin-left Set the left margin of the element. 1 margin-right Set the right margin of the element. 1 margin-top Set the top margin of the element. 1

Marquee Properties

Multi-column

Properties Description CSS marquee-direction Sets the direction of moving content. 3 marquee-play-count Set how many times the content is moved. 3 marquee-speed Set how fast the content scrolls. 3 marquee-style Set the style of mobile content. 3

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!