CSS introductory tutorial_Basic tutorial

CSS is the abbreviation of Cascading Style Sheets. It is a simple mechanism for adding styles to web documents and belongs to the layout language of the presentation layer.
　1. Basic syntax specification
Analysis of a typical CSS statement:
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
Where "p" we call "selectors" (selectors) , indicating that we want to define a style for "p";
The style declaration is written in a pair of curly brackets "{}";
COLOR and BACKGROUND are called "properties", and semicolons are used between different properties ";" separated;
"#FF0000" and "#FFFFFF" are the values ​​of the attributes.
　2. Color values ​​
Color values ​​can be written in RGB values, for example: color : rgb(255,0,0), or in hexadecimal, just like the example above color:#FF0000. If the hexadecimal values ​​are repeated in pairs they can be abbreviated with the same effect. For example: #FF0000 can be written as #F00. However, it cannot be abbreviated if it does not repeat. For example, #FC1A1B must be filled with six digits.
3. Define fonts
Web standards recommend the following font definition method:
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif; }
Fonts are selected in the order listed. If the user's computer contains the Lucida Grande font, the document will be designated Lucida Grande. If not, it is designated as Verdana font, if there is no Verdana, it is designated as Lucida font, and so on;
Lucida Grande font is suitable for Mac OS X;
Verdana font is suitable for all Windows systems;
Lucida is suitable for UNIX users
"Song Ti" is suitable for simplified Chinese users;
If none of the listed fonts are available, the default sans-serif font can be guaranteed to be called;
　4. Group selector
When several elements have the same style attributes, a statement can be called together, and the elements are separated by commas: p, td, li { font-size: 12px; }
5. The derived selector
can be used The derived selector defines a style for the child elements in an element, for example:
li strong { font-style : italic; font-weight : normal;}
It is to define an italic style for the child element strong under li. Bold style.
　6.id selector
CSS layout is mainly implemented using the layer "div", and the style of the div is defined through the "id selector". For example, we first define a layer

Then define it like this in the style sheet:
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
Where "menubar" is the id name you defined yourself. Note the "#" sign in front.
The id selector also supports derivation, for example:
#menubar p { text-align : right; margin-top : 10px; }
This method is mainly used to define layers and those that are more complex and have multiple derived elements.
6. Category selector
Use a dot in CSS to indicate the category selector definition, for example:
.14px {color : #f60 ;font-size:14px ;}
In the page , use the method of class="category name" to call:
14px size font
This method is relatively simple and flexible, and can be created and deleted at any time according to the needs of the page.
7. Define the link style
Four pseudo-classes are used in CSS to define the link style, namely: a:link, a:visited, a:hover and a:active, for example:
a :link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a :hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
Above The statements respectively define the styles of "links, visited links, when the mouse is over, and when the mouse is clicked". Note that you must write in the above order, otherwise the display may be different from what you expected. Remember they are in order "LVHA".