CSS + Div common CSS labels and attributes

Length in CSS
Absolute unit: almost no webpage
In inch 1In = 2.54
Cm 2 1 CM = 0.394in
Pt lb 1In = 72pt
PC Pica 1In = 6 PC
Relative unit: relatively common
Em 1em = font-size value of the corresponding font
Ex 1ex = the height of the lowercase x letter in the corresponding font, which is difficult to obtain. Generally, 0.5em is used.
PX is the most commonly used
Element classification in CSS
Display sets the category of the element, which cannot be inherited.
None (set to not displayed on the screen)
Block (block level element, including P, H1-H6, list, Div, body)
Inline (Lianyuan, including a, em, span)
List-item (list element, such as Li)
Color and background
Set text color
# RGB # rrggbb RGB (255,255,255) RGB (100%, 100%, 100%)
H1 {color: Red}
H1 {color: # f00}
H1 {color: # ff0000}
H1 {color: RGB (255, 0, 0 )}
H1 {color: RGB (100%, 0%, 0% )}
Background-color: Specifies the background color. The format is the same as above. It cannot be inherited and can be used for all elements.
Body {background-color: Red}
Body {background-color: # f00}
Body {background-color: # ff0000}
Body {background-color: RGB (255, 0, 0 )}
Body {background-color: RGB (100%, 0%, 0% )}
Background-image: Specifies the background image. The default value is none. It cannot be inherited and can be used for all elements.
URL (imageurl) None
Body {backround-image: url(back.jpg );}
Background-repeat: Specifies whether the background image is arranged repeatedly. It cannot be inherited and is used for all elements.
Repeat (xy axes are repeated) Repeat-X (repeat on the X axis) Repeat-y (repeat on the Y axis) No-repeat (not repeated, default)
Body {background-repeat: Repeat-X ;}
Body {background-repeat: No-Repeat ;}
Background-Attachment: Specifies whether or not the background image is moved. It cannot be inherited and is used for all elements.
Scroll (with web page rolling, default value) fixed (not with web page rolling)
Body {background-Attachment: fixed ;}
Background-position: Specifies the position where the background image or background color starts to be displayed. It cannot be inherited and is used for block level and replaceable element.
Top, buttom, left, right, center (with keywords)
70px 10px (length value)
50% 30% (percentage)
Body {background-position: Right top ;}
Body {background-position: 50px 10px ;}
Body {background-position: 20% 50% ;}
Background defines the comprehensive attributes of the background, which are separated by spaces.
Body {Background: # ffcc00 url(bg.jpg) fixed center}
Font type
Font-family: Specifies the font attribute. The value can be any font name. The default value is the font of the browser. Multiple Font types can be separated by commas, an English font with spaces can be enclosed by single quotation marks or double quotation marks. Can be inherited for all elements
P {font-family:, "time New rom ";}
Font-style: Specifies the font style that can be inherited and used for all elements.
Normal (normal, default) italic (italic) objlique (italic)
P {font-style: italic ;}
Font-variant requires the combination of specific fonts and can be inherited for all elements
Normal (default) Small-caps (if it is a Chinese font, the font is reduced to display, if it is English, all are changed to smaller uppercase)
H3 {font-variant: Small-caps ;}
Font-weight: Specifies the font width, which can be inherited and used for all elements.
Normal (default) bold bolder lighter 100 200... 900
Because the browser supports different levels, generally only normal and bold attributes are used.
P {font-weight: bold ;}
Font-size: Specifies the font size, which can be inherited and used for all elements.
Absolute size: XX-small X-small medium (default) large X-large XX-large;
Relative size: larger smaller
Number indicates the available unit: lbs (PT), pixels (PX), inches (in), centimeters (CM );
Percent available
H2 {font-size: 36pt ;}
P {font-size: 200% ;}
Font: Specifies the overall font attribute, which must contain the font name and font size. The order is as follows:
{Font-style font-variant font-weight font-size/line-height font-family;} p {bold 12pt/14pt impact, Arial ;}
Text
Letter-Spacing: Set the text spacing. The default value is 0. It can be a negative value and can be inherited for all elements.
P {letter-Spacing: 5pt ;}
Text-Decoration: Specifies the effect of adding underscores (_) or strikethrough to text. It cannot be inherited and is used for all elements.
None (none, default) Underline (underline) overline (upper line) line-through (strikethrough)
Vertical-align: sets the vertical alignment of text or image
Baseline (default) sub (subscript) Super (superscript) Top (vertical upward alignment) middle (vertical center) Bottom (vertical downward alignment) percentage (relative to the row height, can be negative)
Converts text-transform to uppercase and lowercase English letters and can be inherited for all elements.
None (default) Capitalize (uppercase) uppercase (uppercase letters) lowercase (lowercase letters)
Text-align sets the horizontal alignment of text, which can be inherited and used for block-level elements.
Left (left alignment) Right (right alignment) Center (horizontal center) justify (left alignment)
Text-indent: Specifies the indent of the first line of the text in the marking element or uses the margin-left attribute to set the convex line of the first line. It can be a negative value and can be inherited for block-level elements.
Line-Height: Specifies the row height. The declaration methods include standard Row Height, fixed value notation, high percentage rows (relative to the font size), and high font size. It can be inherited and used for all elements.
White-space: Specifies the processing method of white space characters. It cannot be inherited and is used for block-level elements.
Pre (do not ignore blank characters in blocks) nowrap (text is not automatically wrapped in blocks) normal (ignore blank characters, default value)
List class
The serial number of the list-style-type ordered list (for tag use), which can be inherited.
None: No. Decimal: Arabic numerals lower-Roman: lowercase roman numerals upper-Roman: uppercase roman numerals lower-Alpha: lowercase English letters upper-Alpha: uppercase English letters
List-style-type unordered list symbol style (for use), can inherit
None: Unsigned disc: solid circle symbol circle: hollow circle symbol square: solid square symbol
List-style-custom symbol styles in the unordered list of images, which can be inherited
URL (image name) None (default)
Ul {list-style-imag: url(dd.gif );}
List-style-position: sets the character contraction attribute of the List list, which can be inherited.
Outside (convex, default) Inside (shrink)
Ul {list-style-imag: url(dd.gif); List-style-position: Outside ;}
Comprehensive settings of list-style list items, separated by Spaces
Ul {list-style-imag: url(dd.gif) inside ;}
Boundaries and their related classes
The overall setting of the Boundary Value of a margin flag element can be a negative value and cannot be inherited. It is used for all elements. When applied to block-level elements, the vertical adjacent boundary is compressed/overlapped. when applied to inline elements, the line height of the text is not affected.
You can also use margin-top, margin-right, margin-bottom, and margin-left to separate the border of each edge. Declare four values in the order of top, right, bottom, and left borders, for example, div {margin: 12pt 15pt 20pt 16pt ;}
Declare three values in the order of top, right, and bottom. The missing left boundary is its right side (right), for example, div {margin: 12pt 15pt 16pt ;}
Declare two values in the order of top and right. The lower and left borders that are missing are used to obtain the opposite edge, for example, div {margin: 12pt 15pt ;}
If one value is declared, the four boundaries have the same value, for example, div {margin: 15pt ;}
Padding sets the overall setting of white space between the TAG content and the tag border. It cannot be a negative value or be inherited for all elements. You can also set padding-top, padding-right, padding-bottom, and padding-left values separately.
Border-width indicates the comprehensive setting of the Border width of an element. You can also separately set the values of border-top-width, border-right-width, border-bottom-width, and border-left-width.
Border-color indicates the comprehensive settings of the border color of the element (rules are similar to the margin attribute ). For color values, see the color attribute. You can also set border-top-color, border-right-color, border-bottom-color, and border-left-color values separately.
Border-style indicates the comprehensive setting of the element border style (The rule is similar to the margin attribute ). Border styles include none (default), dotted, dashed, solid, double, goove, ridge, inset, and outset. You can also set border-top-style, border-right-style, border-bottom-style, and border-left-style values separately.
The comprehensive settings of the four borders of the border Tag Element. The Border width, border style, and border color can be declared respectively.
Div {border: 5pt solid # ff0000 ;}
Width: Set the width of the Tag Element.
Height: sets the height of the Tag Element.
Float is used to set the relative position between the marking element and the text (the text winding mode). It cannot be inherited and is used for all elements.
None: displayed by default
Left: Mark the element to the left, and move the text around the right
Right: the flag element is right, and the text is arranged around the left
Clear: sets the relative position between the marking element and the text (unlike float, the marking element is not arranged on both sides). It cannot be inherited and is used for all elements.
None: displayed by default;
Left: indicates that the element is left and no text is arranged on the right;
Right: indicates that the element is right-aligned and no text is arranged on the left;
Positioning
Z-index sets the stack level of the tag element. The value can be an integer or a negative number. The value is large on the upper layer and cannot be inherited. It is used to locate the element.
Visibility sets whether the Tag Element is visible and cannot be inherited for all elements
Inherit: Take the default value visible: visible den: invisible (hidden) collapse
Position: Specifies the positioning style, which cannot be inherited and used for all elements.
Static (default) Relative (relative positioning) absolute (absolute positioning) fixed inherit