Learn more about the structure and rules of CSS in the beginner's guide

css| Beginners

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 HTML for use in HTML code elements. Class attributes are classes that are used in HTML to indicate an element, for example,

<p class=warning> only one class is allowed for each selector.

For example, Code.html.proprietary is not valid. </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> Text Indent 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

Selector: Pseudo Class {property: Value}

Or

Selector: Pseudo Element {property: Value}

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:

Selector. Class: Pseudo Class {property: Value}
Or

Selector. Class: Pseudo element {property: Value}
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.

! Important

Rules can be specified with the! Important refers to 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. The following is! Examples of important declarations:

Body {background:url (bar.gif) white;
Background-repeat:repeat-x! IMPORTANT}
Origin of Rules (Author ' s vs. Reader ' s)

As mentioned before, 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! Important rules, because they will go beyond the user any! Important rules. For example, a user may require a large font or a specified color due to a visual relationship, and such a user would have the possibility to declare a defined style rule for! Important, because these styles are extremely important for users to read Web pages. Any of that! Important rules go beyond 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.

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.

Number of ID attributes in the statistics selector.

The number of class attributes in the statistics selector.

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--> characteristic = 100 * *
UL ul li.red {XXX}/* a=0 b=1 c=3--> characteristic = 013 * *
li.red {XXX}/* a=0 b=1 c=1--> feature = 011 * *
LI {XXX}/* a=0 b=0 c=1--> characteristic = 001 * *

Order of attributes

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