Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "case analysis of CSS rules and features". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

CSS authoring rules

1. Introduce three ways of CSS style: external style sheet (External style sheet), internal style sheet (Internal style sheet) and inline style (Inline style). If referenced at the same time, according to the nearest principle, inline style is preferred. For example:,

2. CSS rules (rule) are composed of selector, curly braces, declaration, semicolon, and each declaration consists of attributes, colons and values. The last declaration in the declaration block can be made without a semicolon, but it is recommended to add it to facilitate the expansion of the declaration block. For example: P {color:red;font-size:14px;}

3. CSS comments start with "/ *" and end with "* /". For example: / * this is a comment * /

4. Class names and ID attributes are recommended to be lowercase, and multiple semantics are connected with "-". For example: .blue-box {backgroud-color:blue;}

rule of conflict

At some point, in the course of working on a project, you will find that some styles that are supposed to have an effect do not work. The usual reason is that you create two rules that work on the same element at the same time.

Cascading (cascade)

In a nutshell, the order of css rules is important; when two rules of the same level are applied to an element, the rules that are actually used are written later.

Specificity (Specificity)

Browsers decide which rule to use when multiple rules have different selectors corresponding to the same element based on priority.

Inheritance (Inheritance)

Inheritance also needs to be understood in context-some css attributes set on the parent element can be inherited by child elements, while others cannot.

Control inheritance: inherit- sets this attribute to make the child element attribute the same as the parent element. In fact, it is to "turn on inheritance". The initial- setting property value is the same as the browser default style. If the browser default style is not set and the property is naturally inherited, it will be set to inherit. Unset- resets the property to its natural value, that is, if the property is inherited naturally, it is inherit, otherwise it is the same as initial.

Let's demonstrate cascading and control inheritance of CSS through examples.

Cascading inheritance demonstration

Body {

Color: green

H3 {

Background-color: black

Color: white

P {

Background-color: blue

P {

Background-color: yellow

.my-class-1 a {

Color: inherit

.my-class-2 a {

Color: initial

.my-class-3 a {

Color: unset

Cascading demonstration

The background color of this section is blue at first, then yellow is defined, and according to the cascading rule, the final background color is yellow.

Inheritance demonstration

Default link color

Inherit the link color

Initial the link color

Unset the link color

Here's what the page looks like:

This is the end of "case Analysis of CSS rules and Features". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.