CSS Basics Grooming

CSS Basics:

1.CSS Cascading style sheet (cascading style Sheets): solves the problem of separating content from performance.

2. Stacking order:

(1) Browser default settings;

(2) external style sheet;

(3) Internal style sheet (located inside the

(4) inline style (inside HTML elements);

That is, the inline style (inside the HTML element) has the highest precedence, which means that it will take precedence over the style declarations in the:

3.CSS syntax: A CSS rule consists of two main parts: a selector, and one or more declarations. The syntax format is as follows:

selector {Property:value}

Cases:

PS:CSS is insensitive to capitalization. However, there is one exception: class and ID names are sensitive to capitalization if they involve working with HTML documents.

4. Grouping selectors: Use commas to separate the selectors that need to be grouped. Cases:

5. Inheritance and its problems: according to CSS rules, child elements inherit attributes from the parent element.

(1) But some browsers may not support, such as Netscape4. We can deal with this problem through the redundancy law, that is, the same attributes are defined in the child elements;

(2) At the same time, you can also detach the parent element's inherited property by redefining the attribute in the child element. Cases:

6.CSS Derived selectors:

#派生选择器允许你根据文档的上下文关系来确定某个标签的样式. By using derived selectors reasonably, we can make the HTML code neater.

Cases:

7.id selector:

(1) The ID selector can specify a specific style for an HTML element labeled with a specific ID, defined by "#". Cases:

(2) ID selector and derived selector: in modern layouts, the ID selector is often used to establish a derived selector. Usage:

<1> The following styles apply only to paragraphs that appear in an element with the ID box

<2> a selector for multiple uses. Cases:

(3) as a separate selector: example:

PS: According to this rule, the element with the ID box will have a solid black line border with a pixel width, and the old version of the Windows/ie browser may ignore this rule unless you specifically define the element that this selector belongs to:

8. Class Selector:

(1) in CSS, the class selector is displayed as a dot: example:

Ps: The first character of a class name cannot use numbers! does not work in Mozilla or Firefox.

(2) class can be used as a derived selector: use the following:

Table cells inside a larger element of the <1> class named Tab1 are displayed with an orange-yellow background;

The table cell with the <2> class named Tab1 will have an orange-yellow background;

9.CSS Property Selector: Sets the style for the HTML element with the specified property.

Selector Selector	Describe
[attribute]	Used to select an element with the specified attribute.
[attribute=value]	Used to select an element with the specified attributes and values.
[attribute~=value]	Used to select the element in the attribute value that contains the specified vocabulary.
[attribute|=value]	Used to select an element with an attribute value that begins with the specified value, which must be the entire word.
[attribute^=value]	Matches each element of the property value to the beginning of the specified value.
[attribute$=value]	Matches each element of the property value to the end of the specified value.
[attribute*=value]	Matches each element of the property value that contains the specified value.

10. How to insert CSS:

(1) External style sheet:

(2) Internal style sheet:

(3) Inline style:

Ps: Do not leave a space between the attribute value and the unit.

CSS Basics Grooming