Css template Tutorials: css attributes required for custom templates

This table only lists common CSS attributes and briefly introduces their main functions. For details about all attributes and specific usage, see related books.

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)