After understanding the XHTML code specifications, we need to perform CSS layout. First, we will introduce some introduction to CSS.
Skip this section if you are familiar with it.
CSS is short for Cascading Style Sheet.
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
Analyze a typical CSS statement:
P {COLOR: # FF0000; BACKGROUND: # FFFFFF}
· "P" is called "selectors", indicating that we want to define a style for "p;
· Style declaration is written in a pair of braces;
· COLOR and BACKGROUND are called "properties". Different properties are separated by semicolons;
· "# FF0000" and "# FFFFFF" are attribute values ).
2. Color value
The color value can be written in RGB format, for example, color: rgb (, 0, 0) or hexadecimal format, just like color: # FF0000 in the preceding example. If the hexadecimal value is repeated in pairs, the effect is the same. For example, # FF0000 can be written as # F00. However, it cannot be abbreviated if it is not repeated. For example, # FC1A1B must be filled with six characters.
3. Define the font
The following font definition method is recommended for web standards:
Body {font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica,, sans-serif ;}
The font is selected in the listed order. If your computer contains the Lucida Grande font, the document will be specified as Lucida Grande. If no, it is specified as the Verdana font. If no Verdana is available, it is specified as the Lucida font, and so on ,;
· Lucida Grande font is suitable for Mac OS X;
· Verdana fonts are suitable for all Windows systems;
· Lucida is suitable for UNIX users
· "" Is suitable for simplified Chinese users;
If none of the listed fonts are available, the default sans-serif font can be called;
4. Group selector
When the style attributes of several elements are the same, you can call a declaration. Elements are separated by commas ,:
P, td, li {font-size: 12px ;}
5. Derivative selector
You can use the derived selector to define a style for the child element in an element. For example:
Li strong {font-style: italic; font-weight: normal ;}
The child element strong under li defines a italic style that is not bold.
6. id selector
The CSS layout is mainly implemented by the "div" layer, and the div style is defined by the "id selector.