Four ways to write css

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 sheet

<span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">>
    <span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
        <span style="background-color: #f5f5f5; color: #008000">/*</span><span style="background-color: #f5f5f5; color: #008000">内部样式表，一般用于覆盖公用样式</span><span style="background-color: #f5f5f5; color: #008000">*/</span><span style="background-color: #f5f5f5; color: #800000">
        ＃headTip </span><span style="background-color: #f5f5f5; color: #000000">{</span><span style="background-color: #f5f5f5; color: #ff0000">
            color</span><span style="background-color: #f5f5f5; color: #000000">:</span><span style="background-color: #f5f5f5; color: #0000ff"> 0xff5</span><span style="background-color: #f5f5f5; color: #000000">;</span>
         <span style="background-color: #f5f5f5; color: #000000">}</span>
    <span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>

</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>@CHARSET="utf-8"; that specifies the encoding of the css external style sheet needs to be placed on the first line. </p>
<div class="cnblogs_code">
<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>

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.

<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">style</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #800000">
        @import 'my-common.css';
    </span><span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>

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

<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text"</span><span style="color: #ff0000"> style</span><span style="color: #0000ff">="color:0x550;font-size:30px;"</span><span style="color: #0000ff">/></span>
<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>