Day 7: Author: Acha 2004-6-25 1:05:46
After understanding the XHTML code specification, we have to make a CSS layout. First introduce some Getting-start knowledge of CSS. If you are already familiar, you can skip this section and go directly into the next section.
CSS is an abbreviation for Cascading Style Sheets. It is a simple mechanism for adding styles to web documents, which belongs to the layout language of the performance layer.
1. Basic syntax specification
Analyze a typical CSS statement:
P {color: # ff0000; Background: #ffffff}
"P" we call "Selectors" indicating that we have to define the style to "P"; style declaration is written in a pair of braces "{}"; color and background are called "property" Different attributes are divided by semicolon ";" separated; "# ff0000" and "#ffffff" are values for attributes (Value).
2. Color value
The color value can be written with RGB value, for example: Color: RGB (255, 0, 0), can also be written with hexadecimal, just like the above example color: # ff0000. If the hexadecimal value is a repetitive, the effect is the same. For example: #f0000 can write to # f00. But if you don't repeat, you should not be short-written, for example # fc1a1b must write over six.
3. Define the font
The Web Standard recommends the following font definition method:
Body {Font-Family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song, SANS-Serif;
The font is selected in the order listed. If the user's computer contains the Lucida Grande font, the document will be specified as Lucida Grande. No, it is specified as a Verdana font. If there is no Verdana, it is specified as a Lucida font, and the Lucida Grande font is suitable for Mac OS X; Verdana font is suitable for all Windows systems; Lucida is suitable for UNIX users "Song" suitable Chinese Simplified users; if the fonts listed cannot be used, the default SANS-Serif font ensures call;
4. Group selector
When several element style properties, a statement can be called, and the elements are separated by commas,: p, td, li {font-size: 12px;}
5. Delivery selector
You can define a style using a derived selector to define a pattern in an element, for example:
Li Strong {font-style: italic; font-weight: Normal;
It is the subsidence of the subsidence from the child. Strong is defined for the subsidence of the LI.
6.id selector
The CSS layout mainly uses the layer "div" to achieve, and the pattern of DIV is defined by the "ID selector". For example, we first define a layer.
Then define this in the style sheet:
#menubar {margin: 0px; Background: #fefefe; color: # 666;}
Where "MenuBar" is the name of the ID you define your own. Pay attention to the "#" number 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
In the CSS, the category selector is defined in the beginning of the CSS, for example:
.14px {color: # f60; font-size: 14px;}
In the page, use the class = "category name" method to call:
14px size font
This method is relatively simple and flexible, and you can make new and delete according to the page at any time.
7. Define the style of the link
CSS use four pseudo classes to define the style of links, namely: A: Link, A: Visited, A: Hover, and A: Active, for example:
A: Link {font-weight: bold; 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 statement defines the style of "link, accessed link, when the mouse is above, point the mouse down". Note that you must write in the above order, otherwise it may be different from you to do. Remember their order is "lvha".
Oh, I have seen so much, I have a little dizziness, I actually have a lot of grammar norms in CSS, just some common use here, after all, we are gradual, it is impossible to eat fat :)
