Building a Website Using Web Standards Day 7: Getting Started with CSS

After understanding the XHTML code specifications, we have to carry out CSS layout. First, let’s introduce some introductory knowledge of CSS. If you are already familiar with it, you can skip this section and go directly to the next section

CSS is the abbreviation of Cascading Style Sheets. It is a simple mechanism for adding styles to web documents and belongs to the layout language of the presentation layer.

1. Basic syntax specifications

Analysis of a typical CSS statement:

p {COLOR: #FF0000; BACKGROUND: #FFFFFF}

where "p" is called "selector" ( selectors), indicating that we want to define a style for "p";

The style declaration is written in a pair of curly brackets "{}";

COLOR and BACKGROUND are called "properties" (PRoperty), and semicolons are used between different attributes ";" separated;

"#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 they can be written in hexadecimal, just like the example above

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 fonts

Web standards recommend the following font definition method:

Body { font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif; }

Choose fonts 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 UNIX users

"Song Ti" is suitable for simplified Chinese users;

If none of the listed fonts are available, the default sans-serif font can be guaranteed to be called;

4. Group selector

When several element style attributes When the same, you can call a statement together, and separate the elements with commas:

p, td, li { font-size : 12px; }

5. Derived selector

You can use derived selectors to The sub-element in an element defines the style, for example:

li strong { font-style : italic; font-weight : normal; }

That is to define an italic for the sub-element strong under li Bold style.

6.id selector

Using CSS layout 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

　 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 those that are more complex , has 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 ;}

On the page, use the class="category name" method to call:

14px size font

This method is relatively simple and flexible, and you can Create and delete pages as needed at any time.

7. Define the style of the link

　 Four pseudo-classes are used in CSS to define the style of the link, 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 are defined respectively Styles for "links, visited links, mouse over, and mouse click". 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 we cannot become fat in one bite:)

The above is about using the Web Day 7 of standard website building: Introduction to CSS. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!