CSS template Tutorials fully customize templates Prerequisites css attribute knowledge

Core hints:CSS template tutorial, custom templates required CSS attribute knowledge.

This table lists only the commonly used CSS properties, and briefly describes its main features, to understand all the properties and specific usage, please refer to the relevant books

Property name	Property function and its value	Usage instructions and examples
Color and Background class
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	Sets the background color, in the same format.	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 picture, URL (/imageurl)	Body{backround-image:url (/back.jpg);}
Background-repeat	Set whether background pictures are repeated: Repeat-x (x-axis repeat arrangement); Repeat-y (repeat arrangement of y-axes); No-repeat (no repeat arrangement)	Body{background-repeat:repeat-x;} Body{background-repeat:no-repeat;}
Background-attachment	Sets whether the background picture is scrolled, and the default is scrolling. Scroll (scrolling) Fixed (not scrolling)	body{background-attachment:fixed;}
Background-position	Set the position where the background picture or background color begins to appear, in value format: Top,buttom,left,right,center (with keywords) 70px 10px (with length value) 50% 30% (in percent)	Body{background-position:right top;} body{background-position:50px 10px;} body{background-position:20% 50%;}
Background	Define background composite properties, do not require order, and each attribute value is separated by a space.	Body{background: #ffcc00 URL (/bg.jpg) fixed Center}
Font type
Font-family	Set the Font property, the value can be any font name, the default is the browser, you can set a number of comma (,) separated, there are spaces in the English fonts can be enclosed in single or double quotes.	p{font-family: XXFarEastFont-Arial, italics, boldface, "Time New Rom";}
Font-style	Set font style: Normal (OK), Italic, Objlique (italic)	P{font-style:italic;}
Font-variant	Value: Normal (Default), Small-caps (if the font is Chinese, the font will be reduced to display, if it is English then all to a smaller capitalization)	H3{font-variant:small-caps;}
Font-weight	To set the font weight, take the following values: Normal (default), bold,lighter,border,100,200...900 The normal and bold two properties are generally used only for browsers with varying degrees of support.	P{font-weight:bold;}
Font-size	Set the size of the font; Absolute size: xx-small,x-small,small,mediumlarge,x-large,xx-large; Relative size: Larger,smaller; Numbers indicate the available units: lb (PT), Pixel (px), inch (in), CM (cm); Can also be expressed as a percentage.	h2{font-size:36pt;} p{font-size:200%;}
Font	Set the composite properties of the font, in the following order: {font-style font-variant font-weight font-size/line-height font-family;}	P{bold 12pt/14pt impact,arial;}
Text class
Letter-spacing	Sets text spacing.	p{letter-spacing:5pt;}
Text-decoration	Set text with underline, strikethrough and other effects: None (None) Underline (underline) Overline (underlined) Line-through (Strikethrough)
Vertical-align	To set the vertical alignment of text or pictures: Baseline: Default value sub: Subscript Super: Superscript top: Vertically aligned middle: vertically centered bottom: vertical alignment.
Text-transform	Convert English letter case: None: Default value capitalize: Initial capital uppercase: All uppercase lowercase: all english letters lowercase.
Text-align	To set the horizontal alignment of text: Left: Align Right: right-aligned Center: Horizontally centered justify: right and left aligned.
Text-indent	Sets the first line indent of the text within the markup element or with the Margin-left property to set the first row of the header.
Line-height	Set row height, the declaration method has a standard row height, fixed value notation, percent row height, font size proportional line higher.
List class
List-style-type	Number of sequential tables (for <OL> tag use): None: No numbering decimal: Arabic numeral lower-roman: lowercase roman numeral Upper-roman: uppercase Roman numeral Lower-alpha: lowercase English letter upper-alpha: uppercase English alphabet.
List-style-type	Symbol style for unordered lists (for <UL> use): None: Unsigned disc: solid round symbol circle: white round symbol Square: solid square symbol.
List-style-image	Custom symbol style for unordered lists: Format: url (picture name)	Ul{list-style-imag:url (/dd.gif);}
List-style-position	Set list symbol indent attributes: Outside: Convex row inside: Indented line	Ul{list-style-imag:url (/dd.gif); list-style-position:outside;}
List-style	Comprehensive settings for list items, separated by spaces between attributes.	Ul{list-style-imag:url (/dd.gif) inside;}
Boundaries and their related classes
Margin	The comprehensive setting of the boundary value of the marked element. (see right-hand example for its rules) You can also use Margin-top, Margin-right, Margin-bottom, margin-left to set the boundaries of each side separately.	Declares 4 values in the order of the top, right, bottom, and left edges, such as: div{margin:12pt 15pt 20pt 16pt; Declares 3 values in the order of the top, right, and left edges of the missing edges (right), such as: div{margin:12pt 15pt 16pt; Declares 2 values in the order of the top, right, and missing lower and left edges, such as: div{margin:12pt 15pt; Declares 1 values, then 4 boundaries with the same value, such as: div{margin:15pt;}
Padding	Set the overall setting for the white between the markup and the tag border (see the example of the margin attribute for the rule).	You can also set Padding-top, Padding-right, Padding-bottom, padding-left values separately.
Border-width	The overall setting of the markup element border width (the rule is similar to the margin property).	You can also set Border-top-width, Border-right-width, border-bottom-width, border-left-width values separately.
Border-color	The overall setting of the markup element border color (the rule is similar to the margin property). The color value is shown in the Colors property.	You can also set Border-top-color, Border-right-color, Border-bottom-color, border-left-color values separately.
Border-style	A composite setting of the markup element border style (the rule is similar to the margin property). Border Style has solid,double,goove,ridge,inset,outset and so on.	You can also set Border-top-style, Border-right-style, Border-bottom-style, border-left-style values separately.
Border	A comprehensive set of 4 border markers that declare the border width, border style, and border color, respectively.	Div{border:5pt solid #ff0000;}
Width	Sets the width of the markup element.
Height	Sets the height of the markup element.
Float	Sets the relative position between the markup element and the text (the way the text is wrapped). Take value: None: Display in default mode; Left: The mark element leans to the left-hand side, the text is wrapping on the right; Right: The marker element is on the right-hand side and the text is wrapped around the left;
Clear	Sets the relative position between the markup element and the text (unlike float, which does not wrap around the tag element). Take value: None: Display in default mode; Left: The marker element leans to the left-hand side, the right does not have the text to wrap; Right: The marker element is right-aligned, and the left side has no text wrapping;
Other classes
Z-index	Sets the stack level of the markup element, which is either an integer or a negative number, and the value is larger on the top.
Visibility	Sets whether the markup element is visible, and the values are: Inherit: Default value visible: Visible Hidden: invisible (hidden)