7th days: Getting started with CSS

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", and the 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

Color values can be written in RGB values, for example:

Color: rgb (255, 0, 0)
And can also be written in hexadecimal format, as in the above example.

Color: # FF0000
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 with simplified Chinese characters. If none of the fonts listed 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. For example, we first define a layer

<Div id = "menubar"> </div>