CSS Reference manual


Note Programming tutorial CSS The reference manual has been tested in all mainstream browsers .


CSS attribute

CSS Attribute group :

"CSS" The column indicates where the attribute is CSS Defined in version (CSS1, CSS2, Or CSS3).

Animation properties

attribute Describe CSS
@keyframes Define an animation ,@keyframes The defined animation name is used to animation-name Used . 3
animation Composite properties . Retrieves or sets the animation effects applied to the object . 3
animation-name Retrieves or sets the name of the animation applied to the object , Must be consistent with the rules @keyframes Use with , Because the name of the animation is @keyframes definition 3
animation-duration Retrieve or animate the duration of the object 3
animation-timing-function Retrieve or animate the transition type of the object 3
animation-delay The delay time for retrieving or animating an object 3
animation-iteration-count Number of cycles to retrieve or animate the object 3
animation-direction Retrieves or sets whether an object is animated in reverse motion in a loop 3
animation-play-state Retrieve or animate the state of an object 3

Background properties

attribute Describe CSS
background Composite properties . Set the background properties of the object . 1
background-attachment Sets or retrieves whether the background image scrolls or is fixed with the object content . You must specify background-image attribute . 1
background-color Sets or retrieves the background color of the object . 1
background-image Set or retrieve the background image of the object . 1
background-position Set or retrieve the background image position of the object . You must specify background-image attribute . 1
background-repeat Sets or retrieves how the background image of the object is laid out and filled . You must specify background-image attribute . 1
background-clip Specifies the area where the background image of the object is cropped outward . 3
background-origin S Sets or retrieves the background image of the object background-position Reference origin at ( Location ). 3
background-size Retrieves or sets the size of the background image of the object . 3

frame (Border) and outline (Outline) attribute

attribute Describe CSS
border Composite properties . Set the properties of the object border . 1
border-bottom Composite properties . Set the properties of the bottom border of the object . 1
border-bottom-color Sets or retrieves the bottom border color of the object .
border-bottom-style Sets or retrieves the bottom border style of an object . 1
border-bottom-width Sets or retrieves the bottom border width of the object . 1
border-color Sets or retrieves the border color of the object . 1
border-left Composite properties . Set the properties of the left border of the object . 1
border-left-color Sets or retrieves the left border color of the object . 1
border-left-style Sets or retrieves the left border style of the object . 1
border-left-width Sets or retrieves the left border width of the object . 1
border-right Composite properties . Sets the properties of the right border of an object . 1
border-right-color Sets or retrieves the right border color of the object . 1
border-right-style Sets or retrieves the right border style of the object . 1
border-right-width Sets or retrieves the right border width of the object . 1
border-style Sets or retrieves the border style of an object . 1
border-top Composite properties . Set the properties of the top border of the object . 1
border-top-color Sets or retrieves the top border color of an object 1
border-top-style Sets or retrieves the top border style of an object . 1
border-top-width Sets or retrieves the top border width of the object . 1
border-width Sets or retrieves the border width of the object . 1
outline Composite properties . Sets or retrieves the outline of the line outside the object . 2
outline-color Sets or retrieves the color of the line outline outside the object . 2
outline-style Sets or retrieves the style of the line outline outside the object . 2
outline-width Sets or retrieves the width of the line outline outside the object . 2
border-bottom-left-radius Sets or retrieves the bottom left corner rounded border of the object . Provide 2 Two parameters ,2 The parameters are separated by spaces , Each parameter allows setting 1 Parameter values , The second is 1 Two parameters represent the horizontal radius , The second is 2 Two parameters represent the vertical radius , As in Chapter 2 Two parameters are omitted , Is equal to the... By default 1 Two parameters 3
border-bottom-right-radius Sets or retrieves the rounded border at the lower right corner of the object . 3
border-image Sets or retrieves the border style of an object and fills it with an image . 3
border-image-outset Specifies how much the border image exceeds the border . 3
border-image-repeat Specifies whether the image border should be repeated (repeated)、 stretching (stretched) Or covered (rounded). 3
border-image-slice Specifies the inward offset of the image border . 3
border-image-source Specify the image to use , replace border-style Property . 3
border-image-width Specifies the width of the image border . 3
border-radius Sets or retrieves objects using rounded borders . 3
border-top-left-radius Define the shape of the upper left border . 3
border-top-right-radius Define the shape of the upper right border . 3
box-decoration-break Specifies that the elements in the line are broken into lines 3
box-shadow Add one or more shadows to the box . 3

Box (Box) attribute

attribute Describe CSS
overflow-x If the content overflows the element content area , Whether to the left of the content / Crop the right edge . 3
overflow-y If the content overflows the element content area , Whether or not to the content / Crop the lower edge . 3
overflow-style Specifies the preferred scrolling method for overflow elements . 3
rotation Surrounded by rotation-point Property to rotate the element . 3
rotation-point Defines the offset point from the edge of the upper left border . 3

Color (Color) attribute

attribute Describe CSS
color-profile Allow the use of specifications other than the default of the source's color profile 3
opacity Set the transparency level of an element 3
rendering-intent Allow other specifications that exceed the rendering intent of the default color profile 3

padding (Padding) attribute

attribute explain CSS
padding Set all padding properties in a declaration 1
padding-bottom Set the bottom fill of the element 1
padding-left Sets the left padding of the element 1
padding-right Sets the right padding of the element 1
padding-top Set the top fill of the element 1

Media page content properties

attribute explain CSS
bookmark-label Specifies the label of the bookmark 3
bookmark-level Bookmark level specified 3
bookmark-target Specifies the target of the bookmark link 3
float-offset Push the floating element in the opposite direction , They always have a floating 3
hyphenate-after Specifies the minimum number of characters after a hyphenated word hyphenation character 3
hyphenate-before Specifies the minimum number of characters before the hyphenation character of a hyphenated word 3
hyphenate-character Specifies when a hyphenation occurs , String to display 3
hyphenate-lines Represents the maximum number of consecutive hyphenated lines in the element 3
hyphenate-resource Specify a comma separated list of external resources , It can help determine the hyphenation point of the browser 3
hyphens Set how to split words to improve the layout of the paragraph 3
image-resolution The correct image resolution is specified 3
marks Will crop and/or cross Flag added to document 3
string-set   3

size (Dimension) attribute

attribute Describe CSS
height Sets the height of the element 1
max-height Sets 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

Elastic box model (Flexible Box) attribute ( New )

attribute explain CSS
flex Composite properties . Sets or retrieves how the child elements of the elastic box model object allocate space . 3
flex-grow Sets or retrieves the expansion ratio of the elastic box . 3
flex-shrink Sets or retrieves the shrinkage ratio of the elastic box . 3
flex-basis Set or retrieve the elastic box expansion reference value . 3
flex-flow Composite properties . Sets or retrieves the arrangement of child elements of the elastic box model object . 3
flex-direction This attribute is defined by flex The direction of the principal axis of the container felx The child is in flex Position in container . 3
flex-wrap This attribute controls flex Containers are single or multiple lines , At the same time, the direction of the horizontal axis determines the stacking direction of new rows . 3
align-content Align the items in the elastic container when they do not occupy all the available space on the cross axis ( Vertical ). 3
align-items definition flex The child is in flex The side axis of the current row of the container ( Longitudinal axis ) Alignment in direction . 3
align-self definition flex Subitems are individually on the side axis ( Longitudinal axis ) Alignment in direction . 3
justify-content Sets or retrieves the elastic box element in the spindle ( Horizontal axis ) Alignment in direction . 3
order Sets or retrieves the order in which the child elements of the elastic box model object appear . 3

Elastic box model (Flexible Box) attribute ( used )

attribute explain CSS
box-align Specifies how to align the child elements of a box 3
box-direction Specify in which direction , Displays the child elements of a box 3
box-flex Specifies whether the child elements of a box are flexible or fixed size 3
box-flex-group Assign flexible elements to Flex group 3
box-lines Whenever it runs in the space of the parent box , Whether to specify that a new row and column will be added 3
box-ordinal-group Specifies the display order of the child elements of a box 3
box-orient Specifies whether the sub elements of a box should be laid horizontally or vertically 3
box-pack Specifies the horizontal and vertical positions of the horizontal box in the vertical box 3

typeface (Font) attribute

attribute explain CSS
font Set all font properties in a declaration 1
font-family Specifies the font family of the text 1
font-size Specifies the font size of the text 1
font-style Specifies the font style of the text 1
font-variant Specifies the font style of the text 1
font-weight Specify the font thickness 1
@font-face A rule , Allow websites to download and use other resources "Web- safe" The font of the font 3
font-size-adjust Specify... For elements aspect Worth 3
font-stretch Shrink or stretch the current font family 3

Content generation properties (Generated Content Properties)

attribute explain CSS
content And :before And :after Pseudo elements are used in conjunction with , To insert the generated content 2
counter-increment Increment or decrement one or more counters 2
counter-reset Create or reset one or more counters 2
quotes Set the quotation mark type of nested references 2
crop Allow replaced Element is just an object instead of the rectangular area of the whole object 3
move-to Delete element from stream , Then re insert... At a later point in the document . 3
page-policy Determines the string value applicable to the counter based on the given element of the page 3

Grid (Grid) attribute

attribute explain 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

Hyperlinks (Hyperlink) attribute

attribute explain CSS
target Short attribute settings target-name, target-new, and target-position attribute 3
target-name Specify where to open the link ( Target location ) 3
target-new Specify whether a new target link opens a new window or opens a new label in an existing window 3
target-position Specify where the new target link should be placed 3

Wireframe (Linebox) attribute

attribute explain CSS
alignment-adjust Allow more precise alignment of elements 3
alignment-baseline How the inline level elements specified by their parent are aligned 3
baseline-shift Allows repositioning relative to dominant-baseline of dominant-baseline 3
dominant-baseline appoint scaled-baseline-table 3
drop-initial-after-adjust Set the initial alignment point of the main connection point of the drop-down 3
drop-initial-after-align The setting of the initial line in the calibration line is that the box with the initial letter uses the primary connection point 3
drop-initial-before-adjust Set the initial alignment point of the drop-down auxiliary connection point 3
drop-initial-before-align The setting of the initial line in the calibration line is that the box with the initial letter uses the auxiliary connection point 3
drop-initial-size Controls the sinking of local initials 3
drop-initial-value Activate a drop-down initial effect
inline-box-align Sets the alignment of the previous and subsequent inline elements for rows within a multiline inline block 3
line-stacking A shorthand attribute setting line-stacking-strategy, line-stacking-ruby, and line-stacking-shift attribute 3
line-stacking-ruby Settings include Ruby The row of the annotation element is the stacking method for the block element 3
line-stacking-shift set up base-shift The block element in the row contains the stacking method of the element 3
line-stacking-strategy Sets the stacking method of stacked wireframes containing block elements inside 3
text-height The text content locale of the inline box block-progression Dimension 3

list (List) attribute

attribute explain CSS
list-style Set all list properties in a declaration 1
list-style-image Set the image as a list item tag 1
list-style-position Set the placement position of the list item tag 1
list-style-type Set the type of list item tag 1

Margin (Margin) attribute

attribute explain CSS
margin Set all outer margins properties in a declaration 1
margin-bottom Set the bottom outer margin of the element 1
margin-left Set the left outer margin of the element 1
margin-right Set the right outer margin of the element 1
margin-top Set the upper and outer margins of the element 1

subtitle (Marquee) attribute

attribute explain CSS
marquee-direction Set the direction of content movement 3
marquee-play-count Set how many times the content is moved 3
marquee-speed Set how fast content scrolls 3
marquee-style Set the style of content movement 3

Multi column (Multi-column) attribute

attribute explain CSS
column-count Specify the number of columns the element should be divided into 3
column-fill Specify how to populate the columns 3
column-gap Specify the gap between columns 3
column-rule For all settings column-rule-* Short for property 3
column-rule-color Specify color rules between columns 3
column-rule-style Specify style rules between columns 3
column-rule-width Specify the width rule between columns 3
column-span Specify how many columns the element should span 3
column-width Specifies the width of the column 3
columns The abbreviation property sets the column width and number of columns 3

Page media (Paged Media) attribute

attribute explain CSS
fit If its width and height attributes are not auto Give a hint , How to replace elements on a large scale 3
fit-position Determine the alignment of objects in the box 3
image-orientation Specifies that the user agent applies to right or clockwise rotation in the image 3
page Specifies the specific type of page that an element should display 3
size Specify that there is BOX The size and orientation of the page content 3

location (Positioning) attribute

attribute explain CSS
bottom Sets the offset between the outer margin boundary under the positioning element and the lower boundary of its containing block 2
clear Specifies which side of the element does not allow other floating elements 1
clip Clipping absolute positioning elements 2
cursor Specifies the type of cursor to display ( Shape ) 2
display Specifies the type of box that the element should generate 1
float Specifies whether the box should float 1
left Sets the offset between the left outer margin boundary of the positioning element and the left boundary of its containing block 2
overflow
Specifies what happens when content overflows the element box 2
position Specifies the location type of the element 2
right Sets the offset between the right outer margin boundary of the positioning element and the right boundary of its containing block 2
top Sets the offset between the upper outer margin boundary of the positioning element and the upper boundary of its containing block 2
visibility Specifies whether the element is visible 2
z-index Set the stacking order of elements 2

Paging (Print) attribute

attribute explain CSS
orphans Set the minimum number of lines that must be reserved at the bottom of the page when paging 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 be reserved at the top of the page when paging occurs inside the element 2

Ruby attribute

attribute explain CSS
ruby-align control Ruby Text and Ruby The text alignment of the base content relative to each other 3
ruby-overhang When Ruby Text exceeds Ruby The foundation is wide , determine ruby Whether the text allows local suspension of any adjacent text , In addition to their own foundation 3
ruby-position its base control Ruby The position of the text 3
ruby-span control annotation The spanning behavior of elements 3

voice (Speech) attribute

attribute explain CSS
mark Abbreviation property settings mark-before and mark-after attribute 3
mark-after Allow named tags to connect to audio streams 3
mark-before Allow named tags to connect to audio streams 3
phonemes Specifies a phonetic sound in the corresponding element containing the text 3
rest An abbreviation property setting rest-before and rest-after attribute 3
rest-after After the content of an element is finished , Specify that you want to take a break or follow the rhythmic boundaries 3
rest-before Before the content of an element is finished , Specify that you want to take a break or follow the rhythmic boundaries 3
voice-balance Left... Is specified , Balance between right channels 3
voice-duration Specifies the length that should be taken to render the content of the selected element 3
voice-pitch Specifies the pitch of the average speaking voice ( frequency ) 3
voice-pitch-range Specifies the change in the average spacing 3
voice-rate Control your speed 3
voice-stress Instructions focus on 3
voice-volume Speech synthesis refers to waveform output amplitude 3

form (Table) attribute

attribute explain CSS
border-collapse Specifies whether to merge table borders 2
border-spacing Specify the distance between adjacent cell borders 2
caption-side Specify the location of the table title 2
empty-cells Specifies whether to display borders and backgrounds on empty cells in the table 2
table-layout Set the layout algorithm for the table 2

text (Text) attribute

attribute explain CSS
color Set the color of the text 1
direction Specify the direction of the text / Writing direction 2
letter-spacing Set character spacing 1
line-height Set row height 1
text-align Specifies the horizontal alignment of the text 1
text-decoration Specifies the decorative effect added to the text 1
text-indent Specifies the indentation of the first line of the text block 1
text-transform Controls the case of text 1
unicode-bidi   2
vertical-align Set the vertical alignment of elements 1
white-space Set how to leave an element control blank 1
word-spacing Set word spacing 1
text-emphasis Apply the accent tag and the foreground color of the accent tag to the text of the element . 1
hanging-punctuation Specifies whether a punctuation mark may exceed the line box 3
punctuation-trim Specifies whether a punctuation mark should be removed 3
text-align-last When text-align Set to justify Time , Alignment of the last line . 3
text-justify When text-align Set to justify Specify how to spread the alignment . 3
text-outline Set the outline of the text . 3
text-overflow Specifies when the text overflows the contained element , What should happen 3
text-shadow Add shadow to text 3
text-wrap Specify text wrapping rules 3
word-break Specify non CJK Line breaking rules for text 3
word-wrap Set whether the browser wraps long words . 3

2D/3D Conversion properties

attribute explain CSS
transform Apply to 2D Or 3D Converted elements 3
transform-origin Allows you to change the position of the conversion element 3
transform-style 3D Specify how to nest elements in space 3
perspective appoint 3D How elements view the perspective 3
perspective-origin appoint 3D At the bottom of the element 3
backface-visibility Defines whether an element should be visible , When not facing the screen 3

transition (Transition) attribute

attribute explain CSS
transition This property is transition-property、transition-duration、transition-timing-function、transition-delay Short form of . 3
transition-property Set the... Used for the transition CSS attribute . 3
transition-duration Set the duration of the transition . 3
transition-timing-function Set the timing function for the transition . 3
transition-delay Specify the time at which the transition begins . 3

User appearance (User-interface) attribute

attribute explain CSS
appearance Define the appearance style of the element 3
box-sizing Allows you to define certain elements in some way to fit the region 3
icon Specify the icon for the element 3
nav-down Specifies where the user navigates down when the down key is pressed 3
nav-index Specify navigation (tab) order . 3
nav-left Specifies the position of the left navigation when the user presses the left key 3
nav-right Specifies where the user navigates to the right when pressing the right key 3
nav-up Specifies the location of the up navigation when the user presses the up key a 3
outline-offset Set the outline frame in border The offset outside the edge 3
resize Defines whether an element can be resized 3