Sexual name |
Attribute functions and values |
Examples |
Color and background |
Color |
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 |
Set the background color in the same format as above. |
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 |
Set the background image, Url (/imageURL) |
Body {backround-image: url (/back.jpg );} |
Background-repeat |
Set whether the background images are arranged repeatedly: Repeat-x (repeated arrangement on the x axis ); Repeat-y (repeated y-axis arrangement ); No-repeat (No duplicates) |
BODY {background-repeat: repeat-x ;} BODY {background-repeat: No-repeat ;} |
Background-attachment |
Sets whether the background image is scroll. The default value is scroll. Scroll) Fixed (not rolling) |
BODY {background-attachment: fixed ;} |
Background-position |
Set the position where the background image or background color starts to be displayed. Value format: 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. No sequence is required. attribute values are separated by spaces. |
BODY {background: # ffcc00 url (/bg.jpg) fixed center} |
Font type |
Font-family |
Set the font attribute. The value can be any font name. The default value is the font defined in the browser. You can separate multiple font names with commas (,) and enclose them with single or double quotation marks. |
P {font-family:, "Time New Rom ";} |
Font-style |
Set the font style: Normal (Normal), italic, objlique (italic) |
P {font-style: italic ;} |
Font-variant |
Valid values: Normal (default) and small-caps (if it is a Chinese font, the font size will be reduced and displayed. If it is an English font, all the characters will be converted to smaller uppercase letters) |
H3 {font-variant: small-caps ;} |
Font-weight |
Set the font width. values include: Normal (default), bold, lighter, border, 100,200... 900 Because the browser supports different degrees, generally only the normal and bold attributes are used. |
P {font-weight: bold ;} |
Font-size |
Set the font size; Absolute size: xx-small, x-small, small, mediumlarge, x-large, xx-large; Relative size: larger, smaller; Number indicates the available unit: lbs (pt), pixels (px), inches (in), centimeters (cm ); It can also be expressed as a percentage. |
H2 {font-size: 36pt ;} P {font-size: 200% ;} |
Font |
Set the overall attributes of the font in the following sequence: {Font-style font-variant font-weight font-size/line-height font-family ;} |
P {bold 12pt/14pt impact, Arial ;} |
Text |
Letter-spacing |
Set text spacing. |
P {letter-spacing: 5pt ;} |
Text-decoration |
Set the effect of adding underscores (_) and strikethrough to text: None (none) Underline (underline) Overline) Line-through (strikethrough) |
|
Vertical-align |
Set the vertical alignment of text or image: Baseline: Default Value sub: subscript super: superscript top: vertical up alignment middle: vertical center bottom: vertical down alignment. |
|
Text-transform |
Uppercase/lowercase English letters: None: Default Value: capitalize: Upper letter uppercase: all English letters upper letter lowercase: all English letters lower case. |
|
Text-align |
Set the horizontal alignment of text: Left: left alignment right: right alignment center: horizontal center justify: left alignment. |
|
Text-indent |
Set the indent of the first line of the text in the markup element or use the margin-left attribute to set the convex line of the first line. |
|
Line-height |
Set the row height. The declaration methods include standard Row Height, fixed value notation, percent Row Height, and font size. |
|
List class |
List-style-type |
The numbering method of the ordered list (for <OL> marking ): None: No. decimal: Arabic number lower-roman: lower case Rome number upper-roman: upper case Rome number lower-alpha: lower case English letter upper-alpha: upper case English letter. |
|
List-style-type |
Unordered list symbol styles (for <UL> Use ): None: Unsigned disc: solid circle symbol circle: hollow circle symbol square: solid square symbol. |
|
List-style-image |
Unordered list custom symbol styles: Format: url (image name) |
UL {list-style-imag: url (/dd.gif );} |
List-style-position |
Set the character contraction attribute of the List list: Outside: convex inside: Contraction |
UL {list-style-imag: url (/dd.gif); list-style-position: outside ;} |
List-style |
Comprehensive settings of list items. properties are separated by spaces. |
UL {list-style-imag: url (/dd.gif) inside ;} |
Boundaries and their related classes |
Margin |
The overall setting of the Tag Element Boundary Value. (For the rules, see the example on the right) 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 |
Set the overall settings of the white between the TAG content and the tag border (see the example of the margin attribute for rules ). |
You can also set padding-top, padding-right, padding-bottom, and padding-left values separately. |
Border-width |
Comprehensive setting of the Border width of the Tag Element (The rule is similar to the margin attribute ). |
You can also set values of border-top-width, border-right-width, border-bottom-width, and border-left-width separately. |
Border-color |
Comprehensive settings of the border color of the marked 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 |
Set the border style of the Tag Element (The rule is similar to the margin attribute ). Border styles include 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. |
Border |
You can specify the Border width, border style, and border color. |
DIV {border: 5pt solid # ff0000 ;} |
Width |
Set the width of the Tag Element. |
|
Height |
Set the height of the Tag Element. |
|
Float |
Sets the relative position between the markup element and the text (Text winding mode ). Valid value: None: displayed by default; Left: indicates that the element is left-aligned, and the text is arranged around the right side; Right: indicates the right of the element, and the text is arranged on the left; |
|
Clear |
Set the relative position between the tag element and the text (unlike float, the tag element is not arranged on both sides ). Valid value: 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; |
|
Other classes |
Z-index |
Set the stack level of the tag element. The value can be an integer or a negative number. The value is larger than the upper layer. |
|
Visibility |
Sets whether the Tag Element is visible. The values are as follows: Inherit: Take the default value visible: visible den: invisible (hidden) |