(003)CSS basics_html/css_WEB-ITnose

1. Introduction

CSS can add styles to the page, enhance and improve the appearance of the content. It is XHTML that provides the structure: each element identifies a different part of the content, and attributes convey more information about the element. CSS is another layer that affects the appearance of these XHTML elements. Color, font, size, background, and layout on the page are all aspects of content presentation that can be controlled through the clever use of CSS.

2. Analysis of CSS rules

If elements and attributes are the raw materials of xhtml documents, then the raw materials of CSS documents are "rules". A "rule" is a set of instructions that a browser can follow to change the appearance of an xhtml element based on supplied descriptive values. A CSS rule consists of several parts, as shown in the figure below:

The selector is the part of the rule that is used to determine the target element to which the style is applied. Its scope is large enough to affect every instance of a certain element, and small enough to affect only a few or even one element.

Style declaration contains two parts: attributes and values. Properties are aspects of an element's presentation that are to be modified, such as color, width, or position on the page. There are a large number of properties available in the CSS language. The attribute's value specifies the specific style that should be applied to the selected element. Acceptable values ​​depend on the attribute itself; some attributes can have multiple values ​​separated by spaces.

Style declaration is located between a pair of curly brackets "{}". Multiple style declarations can be specified for a selector, allowing a single rule to change multiple aspects of an element's appearance. Properties and their values ​​are separated by a colon (:), and style declarations end with a semicolon. Semicolons can separate multiple style declarations, but are optional if there is only one style declaration in the rule. The same goes for the last in a series of style declarations. To err on the side of caution, it's not a bad thing to get into the habit of putting a semicolon after every style declaration (even if there's only one).

If the CSS code does not adhere to these basic structures and syntax, for example, missing a closing bracket or a colon that separates attributes and values, then the entire rule or even the entire style sheet may fail. Just like xhtml, stylesheets should be appropriate and correctly constructed. w3c also provides a css validator, which can help you find css style sheet errors.