Detailed explanation of the four writing methods of css-CSS Tutorial-php.cn

Detailed explanation of the four writing methods of css

高洛峰

Release： 2017-03-17 11:54:40

Original

1286 people have browsed it

Priority: External style < Internal style sheet < Inline style sheet;

Priority, that is: the right side of the selector with the same name will overwrite the left side

1. Internal style Table

<head>
    <style>
        /*内部样式表，一般用于覆盖公用样式*/
        ＃headTip {
            color: 0xff5;
         }
    </style></head></p>
<p></p>
<p>2. Use the link tag to declare the use of external resources in the document, which is the most common way. </p>
<p>The @CHARSET="utf-8"; specified encoding in the css external style sheet needs to be placed on the first line. </p>
<p class="cnblogs_code"></p>
<pre class="brush:php;toolbar:false"><span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">link </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="./my-common.css"</span><span style="color: #ff0000"> rel</span><span style="color: #0000ff">="stylesheet"</span><span style="color: #ff0000"> media</span><span style="color: #0000ff">="screen"</span><span style="color: #ff0000"> type</span><span style="color: #0000ff">="text/css"</span><span style="color: #0000ff">/></span><span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">><br></span>

Copy after login

3.@ method, introduce css. Note that this is loaded asynchronously. It is loaded after the entire html is loaded, which will cause the page to flicker. Not recommended.

<head>
    <style>
        @import 'my-common.css';    </style></head>

Copy after login

4. Inline style sheets have the highest priority and are the most straightforward, but they cannot be reused and are not easy to maintain.

<body>
    <input type="text" style="color:0x550;font-size:30px;"/></body>

Copy after login

The above is the detailed content of Detailed explanation of the four writing methods of css. For more information, please follow other related articles on the PHP Chinese website!