1. Basic grammar specifications
Analyze a typical CSS statement:
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
Among them, "p" is called "selectors", indicating that we want to define the style for "p";
Style declarations are written in a pair of curly brackets "{}";
COLOR and BACKGROUND are called "properties", and different properties are separated by semicolons ";";
"#FF0000" and "#FFFFFF" are the values of the attributes.
2. Color value
Color values can be written in RGB values, for example: color : rgb(255,0,0), or in hexadecimal, as in the above example 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 the font
Web standards recommend the following font definition methods:
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,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 is 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. Derive selectors
You can use derived selectors to define styles for child elements within an element, for example:
li strong { font-style : italic; font-weight : normal; }
It is to define an italic but not bold style for the strong sub-element under li.
6.id selector
Layout with CSS 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
<div id="menubar"></div>
Then define it like this in the style sheet:
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
Where "menubar" is the id name you define. 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 elements 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 class="category name" method to call:
<span class="14px">14px size font</span>
This method is relatively simple and flexible, and can be created and deleted at any time according to page needs.
7. Define the style of the link
Four pseudo-classes are used in CSS to define link styles, 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 ;}
The above 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".
Haha, after reading so much, I feel a little dizzy. In fact, there are many more grammatical specifications for CSS. Here are just some commonly used ones. After all, we are taking it step by step and it is impossible to become fat in one bite:)