CSS Structure and rules

Css

Basic syntax

Rules

Selection character

Any HTML element can be a CSS1 selector. A selector is just an element that points to a special style. For example,

P { text-indent: 3em }

The selector is P.

Class Selector

A single selector can have a different class (class), thus allowing the same element to have different styles. For example, a Web page producer may want to display the code in a different color depending on its language:

code.html { color: #191970 }code.css  { color: #4b0082 }

The above example establishes two classes,CSS , and HTMLfor use in HTML CODE elements. class attributes are classes that are used in HTML to indicate an element, for example,

<P CLASS=warning>每个选择符只允许有一个类。例如，code.html.proprietary是无效的。</p>

The declaration of a class can also require no related elements:

.note { font-size: small }

In this example, a class named note can be used for any element.

A good habit is to name classes, depending on their function rather than their appearance . The note class in The above example can also be named small, but if the page maker decides to change the style of the class so that it is no longer a small font, then the name becomes meaningless.

ID Selector

The ID selector defines the component of each element individually. This selector should be used sparingly, as he has some limitations. The designation of an ID selector must have an indicator "#" in front of the name. For example, the ID selector can be specified as follows:

#svp94O { text-indent: 3em }

This can refer to the ID attribute in HTML:

<P ID=svp94O>文本缩进3em</P>

Association Selector

An association selector is simply a string of two or more single selectors separated by a space. These selectors can specify general properties, and because of the rules for cascading order, they have a higher precedence than a single selector. For example, the following context selector

P EM { background: yellow }

is P EM. This value indicates that the accent text in the paragraph is a yellow background, while the accent text of the header is unaffected.

Statement

Property

A property is assigned to a selector to use its style. Examples of attributes include color , bounds , and font.

Value

The declared value is a specified that is accepted by a property. For example, an attribute color can accept a value of red.

Combination

To reduce the repeated declaration of the style sheet, the combination of the selector declaration is allowed. For example, all headings in a document can be combined to give the same statement:

H1, H2, H3, H4, H5, H6 {  color: red;  font-family: sans-serif }

Inherited

In fact, all the selectors nested in the selector inherit the property values specified by the outer selector, unless otherwise changed. For example, a color > value defined by a body is also applied to the text of a paragraph.

Some cases are that the inner selector does not inherit the value of the surrounding selector, but theoretically these are special. For example, the upper boundary property is not inherited; Intuitively, a paragraph does not have an upper boundary value like the body of the document.

Annotations

The annotations inside the stylesheet are specified using the same conventions as the C language programming method. Examples of CSS1 annotations are in the following format:

/* COMMENTS CANNOT BE NESTED */

Pseudo class and Pseudo element

Pseudo-class and pseudo-elements are special classes and elements that can be automatically recognized by browsers that support CSS. Pseudo classes distinguish between different kinds of elements ( for example , visited links (accessed connections) and active links (active connections) describe the types of two anchor anchors (anchors). A pseudo element is a part of an element, such as the first letter of a paragraph.

Pseudo-class or pseudo-element rules form such as

选择符:伪类 { 属性: 值 }

Or

选择符:伪元素 { 属性: 值 }

Pseudo-class and pseudo-elements do not apply HTML's class attribute to specify. A generic class can be used with pseudo classes and pseudo elements as follows:

选择符.类: 伪类 { 属性: 值 }

Or

选择符.类: 伪元素 { 属性: 值 }

Locating anchor Pseudo Class

A pseudo class can specify that a element displays the connection (links), the Access connection (visited links), and the active connection (active links) in different ways. Anchor element can give pseudo class link,visited or active. An access connection can be defined as a display of different colors, or even a different font size and style.

An interesting effect is to make the current (or "activate") connection appear in different colors and larger fonts. Then, when the visited connection of the Web page is being re-elected, it is displayed in a different color and in a smaller font. An example of this style sheet is as follows:

A:link    { color: red }A:active  { color: blue; font-size: 125% }A:visited { color: green; font-size: 85% }

First line pseudo element

Usually in newspaper articles, such as Wall Street Journal, the first line of text will be shown in bold print and all caps. CSS1 includes this feature as a pseudo element. The first line of pseudo elements can be used with any block-level element (such as P,H1 , and so on). The following is an example of a first-line pseudo element:

P:first-line {  font-variant: small-caps;  font-weight: bold }

First letter pseudo Element

The first letter pseudo element is used to enlarge (drop caps) and other effects. The first letter of the text containing the specified value selector is displayed according to the specified value. A first letter pseudo element can be used with any block-level element. For example:

P:first-letter { font-size: 300%; float: left }

Will be three times times larger than normal fonts.

Cascade Order

When more than one style sheet is used, the stylesheet needs to scramble for control over a particular selector. In these cases, there is always the rule of the style sheet to gain control over. The following attributes will determine the results of the opposite style sheet.

2. ! Important

   The rules can be specified as important by the ! important . A style that is especially important overrides the other same weights that are opposite. Similarly, when web-makers and readers specify important rules, the rules of web-makers will go beyond the reader's. Here are the examples of important declarations:

   BODY { background: url(bar.gif) white;       background-repeat: repeat-x ! important }

4. Origin of Rules (Author ' s vs. reader ' s)

   As previously mentioned, Web page makers and readers have the ability to specify style sheets. When the rules of the two collide, the Web page maker's rules override those of the reader's other same weights. Web page makers and readers have style sheets that go beyond the browser's built-in style sheet.

   Web page makers should be careful to use the ! important rules, because they will exceed any !  Important The rule. For example, a user may require a large font or a specified color due to a visual relationship, and such a user might be able to declare that a defined style rule is ! important , Because these styles are very important for users to read Web pages. Any ! important rules go beyond the general rules, so it is recommended that web makers use general rules to ensure that users with special styles need to be able to read Web pages.

6. selector rules: Calculating attributes

   Based on their attribute levels, style sheets can also transcend style sheets that conflict with them, and a style with a higher feature always overrides a lower-feature style. This is just a statistical game that calculates the specified number of selectors.

   1. Number of ID attributes in the statistics selector.
   2. The number of CLASS attributes in the statistics selector.
   3. The HTML tag name format in the statistics selector.

   Finally, write three numbers in the correct order, without spaces or commas, and get a three-digit number. (Note that you need to convert the number to a larger number that ends with three digits.) The final list of numbers corresponding to the selector can easily determine that a higher numeric attribute overrides a lower number. The following is a list of the selectors sorted by attribute:

   #id1         {xxx} /* a=1 b=0 c=0 --> 特性 = 100 */UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */LI.red       {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */LI           {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */

8. Order of Attributes

   For ease of use, when two rules have the same weight, take the one behind.