Basic tutorials for using CSS in Web standards

Css|web|web Standard | Basic Course

CSS used to be used to define the properties of a font, and now you can use it to control the layout of the entire document. However, in order to effectively use CSS to control the layout, you need to do some different processing, this difference is with the table layout compared.

Structured, semantic XHTML is essential for CSS to efficiently control the layout.

Support for Browsers

Over the past few years, browsers have improved the level of CSS support. Unfortunately, browser developers seem to be not interested in implementing open standards, so different browsers support the degree of CSS. Even the most supported browsers still have bugs in the software that make browsers run in the wrong way.

Now browsers with better CSS support are Mozilla (and gecko for the kernel: Firefox, Camino, Netscape 6+), Opera and Safari (and the WebCore: omniweb 4.5 and later). Internet Explorer 6/win does not have such a good degree of CSS support, but it will allow you to do a lot of basic work for it. Internet Explorer 5/mac 's support for CSS 1 is excellent, but CSS 2 is not supported. IE 5.* for Windows is also very supportive, but there are still some issues that you should pay attention to. Earlier versions of IE and Netscape 6 had no need to mention it.

Because most people now use Ie/win, so you'll have to make it a special molecule. This is not to say that you cannot or should not use browsers that have a better ability to support CSS to improve their design capabilities.

Now in the browser, not all browsers have a good CSS support capabilities, so that it can explain the CSS layout of the excellent graphical site capabilities. Fortunately, for most websites, only a small percentage of visitors are using old browsers that can't explain CSS.

It is noteworthy that these people are not excluded. In the 90 's, browser test scripts were a popular way to tell users who used the "wrong" browser a new URL that told them to upgrade their browsers to reconnect to that site.

Now, you can deal with browsers that are not supported in a better way. One of the biggest benefits of using logic and semantics is that it makes documents available and accessible when there is no CSS. The performance (what the document looks like) will be different in a supportive browser, but its content will never change, and in most cases, the content is actually more important to the person visiting the site than the way it behaves. That's why it's better to send a page without a style to a poorly supported browser than to exclude them from the outside.

There are several ways to solve this problem: one of the most common methods is @import to use to link the corresponding CSS file. Netscape 4 and older browsers do not support this, @import so CSS files will not be imported. There are many ways to hide CSS from browsers. Most of the ways to hide CSS are to exploit the vulnerabilities that browsers use to interpret CSS. This means there is always the risk that browsers will fix vulnerabilities by upgrading. So the less dependent CSS hacks (CSS vulnerabilities) the better.

Obviously, you can use server-side technology to do a browser detection, and then for different browsers, send different CSS files. If you do, you have to make sure that the detection scripts are generic to avoid sending the wrong CSS file because of a browser upgrade or a new browser release.

applying CSS in a different way

There are several ways to apply CSS to elements in an HTML document.

external Chain Type

There are many advantages to writing all the CSS rules in one or several separate files. HTML documents can become very small, CSS files are in the browser's cache, only need to download once, and you only need to modify a file to change the style of the entire site. A foreign-chained CSS file, see below:

h1 {Font-weight:bold;}

Note: There is no label in the CSS outside the chain <style> .

You can use <link> tags to link a CSS to an HTML document:

<link rel= "stylesheet" type= "Text/css" href= "Styles.css"/>

or <style> use a label in @import :

<style type= "text/css" > @import url ("Styles.css"); </style> Direct Reference

By using style attributes, you can apply CSS directly in HTML:

This situation should be avoided as far as possible, because he mixed up the structure and performance.

Inline Type

Inline CSS is written in the <style> label and is written in the document :

<style type= "Text/css" > H1 {font-weight:bold;} </style>

This should be avoided as well, preferably by storing HTML and CSS in separate files.

syntax for CSS

A CSS rule is made up of a selector and one or more declarations. The selector determines which or what elements of the document the CSS rule can be used for. A property and a value form a declaration that you want to enclose with braces ({}), and each declaration ends with a semicolon (;).

A simple CSS rule is as follows:

p {color: #0f0; font-weight:bold;}

In this case, the p selector, which means that the rule will be used for all the enclosed content in the document <p> . In this rule, there are two declarations that work together to make <p> all the fonts in the content green and bold.

To learn more detailed CSS rules, you can download a CSS manual .

extra elements and classes

When we first started to learn CSS, we made a lot of mistakes: using unnecessary XHTML elements, unnecessary classes, and extra <div> . This is not to say that the code is not normative, but that it contradicts some principles (such as separation of structure and performance, use of simple neat tags).

Here is an example of using an unnecessary XHTML element:

If you want to make the header row italic, you can use CSS to redefine the element:

h3 {font-style:italic;}

The following is an example of using a redundant class:

<div id= "main" > <div class= "maincontent" > <p class= "Maincontenttext" > Web Teaching Web CSS Technology </p> </div > </div>

It might be better to write the following:

<div id= "main" > <div> <p> Web Teaching Web CSS technology </p> </div> </div>

To control div#main The elements, you can use the relevant selectors in CSS code, for example:

Div#main p {/* rules */}

In most cases, CSS allows you to define XHTML with the style you want without adding additional markup. But sometimes it is necessary to add some extra code.

CSS Tips

Obviously, once you take a serious look at the use of CSS, you will surely find some problems that may be caused by misunderstandings, may be caused by the knowledge of the rules or browser vulnerabilities. CSS Crib Sheet is a good idea, with Dave Shea, and there will be some important tips that Dave doesn't mention.

• first check: in debugging, first from the check, HTML and CSS to be verified. Many problems are caused by nonstandard code.

• first in the most advanced browser debugging, and then turn to other browsers: If you have just started with the CSS to support the bad browser debugging, then your CSS will gradually adapt to this error processing. As you continue to test in a more advanced browser, something you do not want will appear. It's best to run it first in a browser that has good standard compatibility, and then take the code to the older browser and test it.

• Understanding the box model of CSS: to get the actual width and height of an element, you need padding to use and border to increase its width or height . In Internet Explorer 5.*/win, padding and border is included in the known width and height .

  Suppose you have the following CSS code:

  Div.box {width:300px; padding:20px; border:10px solid;}

  So the total width of this div is 360px.

  10px + 20px + 300px + 20px + 10px = 360px

  In Internet Explorer 5.*/win, the total width is actually 300px and the content is 240px wide.

  300px-10px-20px-20px-10px = 240px

  To circumvent this problem, you can also use CSS hack to provide different values to different browsers, or you should try to avoid defining and/or both in the same element width padding width border .

• a Non-zero value plus a unit: CSS requires some attribute values (e.g. width , height ,, font-size ) to have units. An exception is available when the property value is 0 o'clock. In that case, no unit is necessary, because 0 is 0, what units are also indifferent.

• Understanding Floats: Although the concept of floating objects is difficult to understand, it is important because it is frequently used in CSS layouts.

• "Love/hate?" Define pseudo classes for links in the following order: link, visited, Hover, Active.

• "troubled?" When used to define margin , padding and when using shorthand border , their order is the clockwise direction from top to bottom: up, right, down, and left.

• Name the class and ID in its function, not its performance: If you have a class name .smallblue , and then you decide to use it to locate the text, make it large and red, the class name will be confused. It is best to use names to describe functions and structures, such as .copyright and .im portant .

• CSS is a sensitive thing: when used in HTML attributes class and id with CSS, you should be careful.

• Check your ID: One element in the document can only be used, and the id ID must be unique, and it class can be shared by multiple elements.

• use legitimate characters for class and id name: Class and id The name can only consist of numbers, letters and hyphens, numbers and hyphens are not allowed to begin with.

• Correct comments: A CSS annotation is preceded by an /* */ end:

  /* This is a comment * *

CSS Layout

There are many examples and step tutorials that guide you through how to use CSS layouts. It is recommended that you start with a simple example, learn its rationale, and then learn the complex layout.