Vier Möglichkeiten, CSS zu schreiben

Priorität: Externer Stil < Internes Stylesheet <

Priorität, das heißt: Die rechte Seite des Selektors mit demselben Namen überschreibt die linke Seite

1. Internes Stylesheet

<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>
2. Verwenden Sie das Link-Tag, um die Verwendung externer Ressourcen im Dokument zu deklarieren. Dies ist die häufigste Methode. </p>
<p>
</p>Die @CHARSET="utf-8"; angegebene Kodierung im externen CSS-Stylesheet muss in der ersten Zeile platziert werden. <p>
</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.@ Methode, CSS einführen. Es wird geladen, nachdem der gesamte HTML-Code geladen wurde, was zum Flackern der Seite führt. Nicht empfohlen.

<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-Stylesheets haben die höchste Priorität und sind am einfachsten, können jedoch nicht wiederverwendet werden und sind nicht einfach zu warten.

<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>