Develop advanced tutorials Using Dojo's AJAX applications, part 3rd: Deep understanding of CSS

When it comes to CSS, many web developers are not unfamiliar. It is a standard technique for controlling presentation in WEB applications. CSS, together with HTML and JavaScript, forms the basis of AJAX applications. For CSS, there are many books and articles have been introduced in detail. This article does not introduce the details of CSS syntax, but from the actual development of some of the problems encountered, discuss some of the specific practice-related topics.

Here are some important concepts in CSS to help readers deepen their understanding of CSS. The CSS 2.1 specification is described in this article.

Important concepts of CSS

The syntax of CSS is very simple and contains few elements, including the "@ rule" and the style rule set. The "@ rule" is a declaration of rules that begins with a @, and is commonly used for @import, @media, and @charset. A style rule set is a collection of a series of style declaration rules. Each style rule set consists of two parts, selector and declaration.

Selectors and declarations

The selector (selector) defines a pattern matching rule that is used to select elements in the current document. The element that conforms to the rule is applied to the style declaration that corresponds to that selector. CSS provides some basic selectors. The basic selector can also be combined to form complex expressions. The basic selector details are as follows:

Universal Selector (*): matches any element in the document.

Element type selector: matches a type of element in a document. such as span matches all span elements in a document.

Descendant selector: Matches the element that appears as a descendant of a particular element. For example, div span matches a SPAN element that is contained within a DIV element.

Direct descendant selector: Matches the element that appears as a direct descendant of a particular element. For example, div > span matches the span element that the parent node is a DIV element.

Neighbor Sibling Element selector: matches the element that has the same parent as a specific element and that appears directly behind the element. For example, Div + span matches a SPAN element that is the same as the DIV element's parent node and appears directly after the DIV element.

Property selector: An element that matches a property value that satisfies certain conditions. such as Div[title] matches the DIV element with the title attribute; Div[title=header] matches the DIV element with the Header value of the title property.

Class selector: Matches the element that contains a CSS class. such as. Header matches the element that contains the header of the CSS class. The class selector is actually one of the property selectors and is selected based on the value of the attribute class.

ID Selector: An element that matches the value of the specified ID attribute. such as an element with a #myDiv匹配 ID of mydiv.

Pseudo-Elements and pseudo-class selectors: matches elements that cannot be positioned according to their position in the document tree. The common pseudo element selectors are:: First-line matches the first line in the paragraph; first-letter matches the first letter of the first line in the block. The commonly used pseudo class selectors are:: Link and: Visited match the links that have not been visited and those that have been visited respectively;: the hover matches the element on which the current mouse hovers;: Active matches the element currently activated by the user;

A declaration is a name-value pair of a style attribute in a CSS in the form of "Property name: Property value." Declare "font-color:red" to set the value of the style font-color to red.

Property inheritance

For some style properties in a CSS, if the element does not explicitly specify a value, the property inherits the value of this property of the element's parent element. Common attributes that will be inherited are: visibility, color, font, and text-decoration. It should be noted that when property inheritance occurs, the child element inherits the computed value of the parent element property, not the specified value. A more typical example is the font size specified by em or percent. For example, the parent element's font size declaration is "Font-size:1.2em" and the actual calculated font size is 12px, then the child element inherits 12px instead of 1.2em. By setting the value of a property to inherit, you can have the property enforce the value of its parent element's corresponding property.

After introducing the important concepts of CSS, the following describes the cascading order of CSS rules.