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.
![What categories are css attributes classified into?](https://img.php.cn/upload/article/000/000/024/60bf0c403829f999.jpg)
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
Description |
CSS |
| ##@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
|
|
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
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 |
##box -shadow
| Adds one or more shadows to the box.
| 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 |
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!