Home  >  Article  >  Web Front-end  >  What categories are css attributes classified into?

What categories are css attributes classified into?

青灯夜游
青灯夜游Original
2021-06-08 14:21:432816browse

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?

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn