優先權:外部樣式< 內部樣式表< 內嵌樣式表;
優先權,即:同名的選擇器右邊的會覆寫左邊
1.內部樣式表
<head> <style> /*内部样式表,一般用于覆盖公用样式*/ #headTip { color: 0xff5; } </style></head></p> <p></p> <p>2.使用link標籤,在文件中宣告使用外接資源,最常用的一種方式。 </p> <p>css外部樣式表指定編碼的@CHARSET="utf-8"; 需要放在第一行。 </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>
3.@方式,引入css,注意這個是異步加載的,在整個html加載之後才加載,會導致頁面閃爍。不建議使用。
<head> <style> @import 'my-common.css'; </style></head>
4.內聯樣式表,優先順序最高最直白,但無法重複使用不容易維護。
<body> <input type="text" style="color:0x550;font-size:30px;"/></body>
以上是詳解css的四種書寫方式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!