WEB standards design website, the main method is to use XHTML+CSS, CSS style sheet is essential. To create a website that complies with web standards, you cannot design beautiful pages without knowing CSS.
In fact, all aspects of presentation need to be implemented with CSS. We used to use tables for positioning and layout, but now we have to use DIV for positioning and layout. This is a change in the way of thinking. It is a bit uncomfortable at first. In order to enjoy the "benefits" brought by standards, it is worth giving up some old traditional practices.
Calling style sheets externally
In the past, we usually used style sheets in two ways:
Page inline method: The style sheet is written directly in the head area of the page code. something like this
The following is the quoted content: <style type="text/css"> <!-- body { background : white ; color : black ; } --> </style> |
External calling method: Write the style sheet in a separate .css file, and then call it with code similar to the following in the head area of the page.
The following is the quoted content: <link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /> |
In the design that complies with web standards, we use the external calling method. The benefits are self-evident. You can change the style of the page without modifying the page and only modify the .css file. If all pages call the same style sheet file, then changing one style sheet file can change the styles of all files.
Double table method calling style sheet
Looking at the original code of some standards-compliant sites, you may see the following two sentences where the style sheet is called:
The following is the quoted content: <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 it twice?
In fact, under normal circumstances, it is enough to use the external link method (that is, the first sentence). The double-table call I use here is just an example. The "@import" command is used to enter the style sheet. The "@import" command is invalid in Netscape 4.0 browsers. In other words, when you want certain effects to be hidden in the Netscape 4.0 browser and displayed in 4.0 or above or other browsers, you can use the "@import" command method to call the style sheet.