6th days of website construction using web standards: CSS getting started

After understanding the XHTML code specifications, we need to perform CSS layout. First, we will introduce some introduction to CSS. If you are familiar with it, you can skip this section and go directly to the next section.

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 "selector", 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 fonts are 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;} defines a non-bold italic style for the child element strong under Li.

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>

Then define in the style sheet as follows:

# Menubar {margin: 0px; Background: # fefefefe; color: #666 ;}

Here, "menubar" is your own defined ID name. Add "#" to the 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 complicated and have multiple derived elements.

6. Category Selector

In CSS, a class selector definition starts with a vertex, for example:

. 14px {color: # f60; font-size: 14px ;}

On the page, use the class = "Class Name" method to call:

<SPAN class = "14px"> 14 PX font </span>

This method is simple and flexible, and can be created and deleted at any time according to the page requirements.

7. Define the link Style

In CSS, four pseudo classes are used to define the link styles: 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 preceding statements define the style of "link, accessed link, mouse over, and mouse over. Note: The data must be written in the above sequence; otherwise, the display may be different from what you expected. Remember that their order is "lvha ".

Haha, after reading so much, I feel a little dizzy. In fact, there are still many CSS syntax specifications. Here we only list some common ones. After all, we are step-by-step, and it is impossible to become a fat man at a Glance :)