4th days of website construction using web standards: Calling Style Sheets

To design websites with web standards, the transition method is mainly to use XHTML + CSS, and CSS style sheets are essential. This requires all web designers to be familiar with CSS. If you are not familiar with CSS before, start learning it now. To make a website that complies with the web standards, CSS cannot be designed with beautiful pages.

In fact, CSS is used to implement all the performance. We used to use table to locate and layout. Now we need to use Div to locate and layout. This is a change in the way of thinking. Haha, any change will have resistance. To enjoy the "benefits" brought by standards, it is worthwhile to give up some old traditional practices.

External call style sheet

In the past, we used two methods to use a style sheet:

Embedded PAGE method: You can directly write the style sheet on the page.Code. Similar to this:

<Style type = "text/CSS"> <! -- Body {Background: white; color: black;} --> </style>

External call method: Write the sample table in an independent .css file, and then use the code similar to the following in the page head area.

<LINK rel = "stylesheet" REV = "stylesheet" href = "CSS/style.css" type = "text/CSS" Media = "all"/>

In the web-compliant design, we use the external calling method. You can change the page style by modifying the. CSS file without modifying the page. If all pages call the same style sheet file, you can change the style of all files by changing the style sheet file.

Two-table method call style sheet

Check the original code of some compliant sites. You may see the following two sentences in the style sheet:

<LINK rel = "stylesheet" REV = "stylesheet" href = "CSS/style.css" type = "text/CSS" Media = "all"/> <style type = "text/ CSS "Media =" all "> @ import URL (CSS/style01.css ); </style>

Why write twice?

In fact, it is enough to use the external method to call (that is, the first sentence. I use a double table call here as an example. The "@ import" command is used to input a style sheet. The "@ import" command is invalid in the Netscape 4.0 browser. That is to say, when you want to hide some effects in the Netscape 4.0 browser and display them in more than 4.0 or other browsers, you can use the "@ import" command to call the style sheet.

Other settings in the head area

These skills mainly focus on meta tag settings. In fact, they have little to do with compliance with web standards. You only need to add "/" at the end to close the tag, but since it is an introductory tutorial, let's write it in detail.

Favorites icons

If you add this site to favorites, you can see that the IE icon before the favorites site becomes a Special icon on this site. To achieve this effect, you must first create a 16x16 icon named favicon. ICO and put it in the root directory. Then, embed the following code into the head area:

<LINK rel = "icon" href = "/favicon. ICO" type = "image/X-icon"/>

<LINK rel = "shortcut icon" href = "/favicon. ICO" type = "image/X-icon"/>

Content for search engines

The Code is as follows:

Allows you to search all links in a robot search site. If you want some pages not to be searched, the robots.txt method is recommended.

<Meta content = "all" name = "Robots"/>

Set site author information

<Meta name = "author" content = "ajie@netease.com, "/>

Set site copyright information

<Meta name = "Copyright" content = "www.w3cn.org"/>

Brief Introduction to the site (recommended)

<Meta name = "Description" content = "New web designer. The Web Standard tutorial site promotes the application of Web standards in China "/>

Site keywords (recommended)

<Meta content = "Designing, with, web, standards, XHTML, CSS, graphic, design, layout, usability, ccessibility, W3C, W3, w3cn, ajie "name =" keywords "/>

So much. I have spent five sections on the head area code. The actual page content is not mentioned yet. Don't worry. In fact, the head area is very important, check the head code of a page to see if the designer is professional enough.

Http://tech.163.com/school 16:30:39 Source: Netease Institute