A brief introduction to the three methods introduced in css

This article introduces to you a brief introduction to the three methods introduced in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

There are three ways to introduce CSS: internal style sheet, inline style (inline style) sheet, external style sheet, of course, you can also use multiple styles

Inline Style

<p style="color:red;font-size:20px">内联样式表</p >

Inline style unloads the style directly into the html code line. It is generally only used when this style is only applied to the current element. Others Try not to use it under certain circumstances.

Internal style sheet

 <style>
        p {
            color: blue;
            font-size: 20px        }
    </style>

The internal style sheet is generally written in the HTML header, using c9ccee2e6ea535a969eb3f532ad9fe89 within the 93f0f5c25f18dab9d176bd4f6de5d30e tag. tags enclosed. This method is generally used when the current page requires a special style.

External style sheet

 <link rel="stylesheet" href="CSS/Googlefonts.css">

External style sheet writes the style to a css file separately and references it in the head. When using external style sheets, be aware of the problems caused by style overrides if multiple styles appear.

Multiple styles

When using multiple styles, the multiple styles will overlap into one. Generally speaking, multiple style sheets will overlap into one according to the following rules, where 4 is the highest weight

1. Browser default settings

2. External style sheet

3. Internal style sheet (located in the head tag Internal)

4. Inline styles (inside HTML elements)

Multiple styles priority order

For the same element For multiple styles, the priority order is as follows, 7 has the highest priority (except for the !important rule, but generally try not to use it):

1. Universal selector (*)

2. Element (type) selector

3. Class selector

4. Attribute selector

5. Pseudo class

6. ##ID selector

7. Inline style

Related recommendations:

How to implement floating element line wrapping in css

Summary of usage of Grid layout in CSS (with code)

The above is the detailed content of A brief introduction to the three methods introduced in css. For more information, please follow other related articles on the PHP Chinese website!