Shulou(Shulou.com)05/31 Report--

This article mainly talks about "what are the attribute categories in css". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "what are the attribute categories in css"?

Classification of css attributes: animation properties, transformation properties, transition properties, Box properties, Marquee properties, size properties, outer margins properties, inner margin 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, and so on.

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

Attribute classification of css

Animation attribute classification CSS3 animation attribute (Animation) 2D/3D conversion attribute (Transform) transition attribute (Transition) Box attribute Marquee attribute size / position-CSS size attribute (Dimension) CSS outer margin attribute (Margin) CSS inner margin attribute (Padding) CSS border attribute (Border and Outline) CSS positioning attribute (Positioning)-list / table multi-column attribute (Multi-column) expandable box attribute (Flexible Box) CSS list attribute ( List) Grid Properties CSS Table Properties (Table) text Font Color CSS text Properties (Text) CSS Font Properties (Font) Color Properties CSS background Properties (Background)

Use less attribute Hyperlink attribute content generation (Generated Content) Content for Paged Media attribute user interface attribute (User-interface) Paged Media attribute

CSS print Properties (Print)

The CSS3 Animation attribute (Animation) property describes the animation specified by CSS@keyframes. The abbreviated property of all animation properties of 3animation, except the animation-play-state property. 3animation-name specifies the name of the @ keyframes animation. 3animation-duration specifies the seconds or milliseconds it takes for an animation to complete a cycle. 3animation-timing-function specifies the speed curve of the animation. 3animation-delay dictates when the animation starts. 3animation-iteration-count specifies the number of times the animation is played. 3animation-direction specifies whether the animation is played backwards in the next cycle. 3animation-play-state specifies whether the animation is running or paused. 3animation-fill-mode specifies the state outside the animation time of the object. The 3CSS background property (Background) property describes that CSSbackground sets all background properties in a declaration. 1background-attachment sets whether the background image is fixed or scrolled along with the rest of the page. 1background-color sets the background color of the element. 1background-image sets the background image of the element. 1background-position sets the start position of the background image. 1background-repeat sets whether and how to repeat the background image. 1background-clip specifies the drawing area of the background. 3background-origin specifies the location area of the background image. 3background-size specifies the size of the background picture. The 3CSS border properties (Border and Outline) describe how CSSborder sets all border properties in a declaration. 1border-bottom sets all the following border properties in a declaration. 1border-bottom-color sets the color of the lower border. 2border-bottom-style sets the style of the bottom border. 2border-bottom-width sets the width of the lower border. 1border-color sets the color of the four borders. 1border-left sets all left box properties in a declaration. 1border-left-color sets the color of the left border. 2border-left-style sets the style of the left border. 2border-left-width sets the width of the left border. 1border-right sets all the right-hand box properties in a declaration. 1border-right-color sets the color of the right border. 2border-right-style sets the style of the right border. 2border-right-width sets the width of the right border. 1border-style sets the style of the four borders. 1border-top sets all the top border properties in a declaration. 1border-top-color sets the color of the top border. 2border-top-style sets the style of the top border. 2border-top-width sets the width of the top border. 1border-width sets the width of the four borders. 1outline sets all the profile properties in a declaration. 2outline-color sets the color of the outline. 2outline-style sets the style of the outline. 2outline-width sets the width of the outline. 2border-bottom-left-radius defines the shape of the lower-left corner of the border. 3border-bottom-right-radius defines the shape of the lower-right corner of the border. 3border-image shorthand property to set all border-image-* properties. 3border-image-outset specifies the amount by which the border image area exceeds the frame. Whether the 3border-image-repeat image frame should be repeated, rounded, or stretched. 3border-image-slice specifies the inward offset of the image frame. 3border-image-source specifies the picture to be used as a frame. 3border-image-width specifies the width of the picture frame. 3border-radius shorthand property, setting all four border-*-radius properties. 3border-top-left-radius defines the shape of the upper-left corner of the border. 3border-top-right-radius defines the shape of the lower-right corner of the border. 3box-decoration-break

3box-shadow adds one or more shadows to the box. The 3Box attribute describes whether the CSSoverflow-x will crop the left / right edge of the content if it overflows the content area of the element. 3overflow-y whether the upper / lower edges of the content are cropped if the content overflows the content area of the element. 3overflow-style specifies the preferred scrolling method for overflow elements. The 3rotation rotates the element around the point defined by the rotation-point attribute. 3rotation-point defines the offset point from the edge of the upper left border. The 3Color property describes that CSScolor-profile allows you to use specifications other than the default of the source's color profile. 3opacity specifies the level of opacity of the element. 3rendering-intent allows you to use specifications other than the default for rendering intentions in color profiles. The 3Content for Paged Media attribute describes the markup that the CSSbookmark-label specifies the bookmark. 3bookmark-level specifies the level of bookmarks. 3bookmark-target specifies the target of bookmark links. 3float-offset places the element in the opposite direction where the float attribute is usually placed. 3hyphenate-after specifies the minimum number of characters after a hyphen in a hyphenated word. 3hyphenate-before specifies the minimum number of characters before a hyphen in a hyphen word. 3hyphenate-character specifies the string to display when hyphenation occurs. 3hyphenate-lines indicates the maximum number of consecutive hyphenation lines in the element. 3hyphenate-resource specifies external resources (comma-separated lists) that help browsers determine hyphenation points. 3hyphens sets how words are split to improve the layout of paragraphs. 3image-resolution specifies the correct resolution of the image. 3marks adds a trim or cross mark to the document. 3string-set

The 3CSS size attribute (Dimension) property describes the height of the CSSheight setting element. 1max-height sets the maximum height of the element. 2max-width sets the maximum width of the element. 2min-height sets the minimum height of the element. 2min-width sets the minimum width of the element. 2width sets the width of the element. The 1 Flexible Box attribute describes how the CSSbox-align specifies how to align the child elements of the box. 3box-direction specifies the direction in which the child elements of the box are displayed. 3box-flex specifies whether the child elements of the box are scalable. 3box-flex-group assigns scalable elements to flexible groups. 3box-lines specifies whether to wrap when the space of the parent element box is exceeded. 3box-ordinal-group specifies the order in which the child elements of the box are displayed. 3box-orient specifies whether the child elements of the box should be arranged horizontally or vertically. 3box-pack specifies the horizontal position in the horizontal box or the vertical position in the vertical box. The 3CSS font property (Font) property describes that CSSfont sets all font properties in a declaration. 1font-family specifies the font family of the text. 1font-size specifies the font size of the text. 1font-size-adjust specifies the aspect value for the element. 2font-stretch shrinks or stretches the current font family. 2font-style specifies the font style of the text. 1font-variant specifies whether to display text in a small uppercase font. 1font-weight specifies the thickness of the font. The content generation (Generated Content) attribute describes that CSScontent is used with: before and: after pseudo elements to insert generated content. 2counter-increment increments or decrements one or more counters. 2counter-reset creates or resets one or more counters. 2quotes sets the quotation mark type of nested references. 2crop allows the element being replaced to be only a rectangular area of the object, not the entire object. 3move-to removes the element from the stream and reinserts it at later points in the document. 3page-policy determines whether the element is applied to a counter or a string value based on the occurrence of the page. The 3Grid property description CSSgrid-columns specifies the width of each column in the grid. 3grid-rows specifies the height of each column in the grid. The 3Hyperlink property describes the CSStarget shorthand property and sets the target-name, target-new, and target-position properties. 3target-name specifies where to open the link (the target of the link). 3target-new specifies whether the target link opens in a new window or in a new tab of an existing window. 3target-position specifies where to place the new target link. The 3CSS list property (List) property describes that CSSlist-style sets all list properties in a declaration. 1list-style-image sets the image to the list item tag. 1list-style-position sets the location of the list item tag. 1list-style-type sets the type of list item tag. 1marker-offset

The 2CSS margin attribute (Margin) property describes that CSSmargin sets all the margin properties in a declaration. 1margin-bottom sets the bottom margin of the element. 1margin-left sets the left margin of the element. 1margin-right sets the right margin of the element. 1margin-top sets the top and outer margins of the element. The 1Marquee property describes the direction in which the CSSmarquee-direction sets the content to move. 3marquee-play-count sets how many times the content has been moved. 3marquee-speed sets how fast the content scrolls. 3marquee-style sets the style of moving content. The multi-column attribute (Multi-column) attribute describes the number of columns that the CSScolumn-count specifies that the element should be separated. 3column-fill specifies how to populate the column. 3column-gap specifies the spacing between columns. 3column-rule sets the abbreviated properties of all column-rule-* properties. 3column-rule-color specifies the color of the rules between columns. 3column-rule-style specifies the style of rules between columns. 3column-rule-width specifies the width of the rules between columns. 3column-span specifies the number of columns that the element should span. 3column-width specifies the width of the column. 3columns specifies that the abbreviated properties of column-width and column-count are set. The 3CSS inside margins attribute (Padding) property describes that CSSpadding sets all the inside margins properties in a declaration. 1padding-bottom sets the bottom inner margin of the element. 1padding-left sets the left inner margin of the element. 1padding-right sets the right inner margin of the element. 1padding-top sets the upper inner margin of the element. The 1Paged Media (paging media) attribute describes how the CSSfit indicates how to scale the replaced element where neither the width nor the height attribute is auto. 3fit-position defines the alignment of objects in the box. 3image-orientation specifies that the user agent is applied to the clockwise rotation of the image. 3page specifies the specific type of page that elements should be displayed. 3size specifies the size and orientation of the content of the page that contains the box. The 3CSS Positioning attribute (Positioning) attribute describes how the CSSbottom sets the offset between the outer margin boundary of the positioning element and the lower boundary of its containing block. 2clear specifies which side of the element does not allow other floating elements. 1clip clips absolute positioning elements. 2cursor specifies the type (shape) of the cursor to display. 2display specifies the type of box that the element should generate. 1float specifies whether the box should float. 1left sets the offset between the left margin boundary of the positioning element and the left boundary of its containing block. 2overflow specifies what happens when the content overflows the element box. 2position specifies the positioning type of the element. 2right sets the offset between the right outer margin boundary of the positioning element and the right boundary of its containing block. 2top sets the offset between the upper outer margin boundary of the positioning element and the upper boundary of its containing block. 2vertical-align sets the vertical alignment of elements. 1visibility specifies whether the element is visible. 2z-index sets the stacking order of elements. The 2CSS print property (Print) property describes the CSSorphans setting for the minimum number of lines that must be retained at the bottom of the page when paging occurs within the element. 2page-break-after sets the paging behavior after the element. 2page-break-before sets the paging behavior before the element. 2page-break-inside sets the paging behavior within the element. 2widows sets the minimum number of rows that must be retained at the top of the page when paging occurs within the element. The 2CSS table attribute (Table) property describes whether the CSSborder-collapse specifies whether to merge table borders. 2border-spacing specifies the distance between the borders of adjacent cells. 2caption-side specifies the location of the table title. 2empty-cells specifies whether to display borders and backgrounds on empty cells in the table. 2table-layout sets the layout algorithm used for the table. The 2CSS text property (Text) property describes the color of the text set by CSScolor. 1direction specifies the direction of the text / direction of writing. 2letter-spacing sets character spacing. 1line-height sets the row height. 1text-align specifies the horizontal alignment of the text. 1text-decoration specifies the decorative effect that is added to the text. 1text-indent specifies the indentation of the first line of the text block. 1text-shadow specifies the shadow effect that is added to the text. 2text-transform controls the case of text. 1unicode-bidi sets the text orientation. 2white-space specifies how to handle whitespace in an element. 1word-spacing sets word spacing. 1hanging-punctuation specifies whether the punctuation character is outside the wireframe. 3punctuation-trim specifies whether punctuation characters are trimmed. 3text-align-last sets how to align the last line or the line immediately before the forced newline character. 3text-emphasis applies the accent tag and the foreground color of the accent tag to the element's text. 3text-justify specifies the alignment method to be used when text-align is set to "justify". 3text-outline specifies the outline of the text. 3text-overflow specifies what happens when a text overflow contains an element. 3text-shadow adds shadows to the text. 3text-wrap specifies the rule of wrapping the text. 3word-break stipulates the rule of line wrapping for non-Chinese, Japanese and Korean texts. 3word-wrap allows you to split long, indivisible words and wrap them to the next line. The 32D/3D transform attribute (Transform) attribute describes how CSStransform applies a 2D or 3D transformation to an element. 3transform-origin allows you to change the position of the transformed element. 3transform-style dictates how nested elements are displayed in 3D space. 3perspective specifies the perspective of 3D elements. The 3perspective-origin specifies the bottom position of the 3D element. 3backface-visibility defines whether the element is visible when not facing the screen. 3 the Transition property describes the CSStransition shorthand property, which is used to set four transition properties in one property. 3transition-property specifies the name of the CSS attribute to which the transition is applied. 3transition-duration defines how long it takes to transition the effect. 3transition-timing-function specifies the time curve of the transition effect. The 3transition-delay specifies when the transition effect begins. 3 user interface attributes (User-interface) attribute description CSSappearance allows you to set elements to the appearance of standard user interface elements 3box-sizing allows you to define specific content that fits an area in an exact way. 3icon provides creators with the ability to style elements using iconic equivalents. 3nav-down specifies where to navigate when using the arrow-down navigation key. 3nav-index sets the tab key of the element to control the order. 3nav-left specifies where to navigate when using the arrow-left navigation key. 3nav-right specifies where to navigate when using the arrow-right navigation key. 3nav-up specifies where to navigate when using the arrow-up navigation key. 3outline-offset offsets the profile and draws it beyond the edge of the border. 3resize specifies whether the size of the element can be resized by the user. 3 at this point, I believe you have a deeper understanding of "what are the attribute categories in css?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.