淺析CSS中的4種引入方式及優(yōu)先級(jí)

發(fā)布時(shí)間：2020-04-02 16:44:56 作者：zhaogaojian

這篇文章主要介紹了CSS中的4種引入方式及優(yōu)先級(jí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

第一：CSS的4種引入方式

CSS的4種引入方式是：行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式、導(dǎo)入樣式

1.行內(nèi)樣式

最直接最簡(jiǎn)單的一種，直接對(duì)HTML標(biāo)簽使用style=""，例如：

<p style="color:#F00; "></p>

缺點(diǎn)：HTML頁(yè)面不純凈，文件體積大，不利于蜘蛛爬行，后期維護(hù)不方便。

2.內(nèi)嵌樣式

內(nèi)嵌樣式就是將CSS代碼寫(xiě)在<head></head>之間，并且用<style></style>進(jìn)行聲明，例如：

<style type="text/css">
body,div,a,img,p{margin:0; padding:0;}
</style>

優(yōu)缺點(diǎn)：頁(yè)面使用公共CSS代碼，也是每個(gè)頁(yè)面都要定義的，如果一個(gè)網(wǎng)站有很多頁(yè)面，每個(gè)文件都會(huì)變大，后期維護(hù)難度也大，如果文件很少，CSS代碼也不多，這種樣式還是很不錯(cuò)的。

3.鏈接樣式

鏈接樣式是使用頻率最高，最實(shí)用的樣式，只需要在<head></head>之間加上<link…/>就可以了，如下：

<link type="text/css" rel="stylesheet" href="style.css" />

優(yōu)缺點(diǎn)：實(shí)現(xiàn)了頁(yè)面框架代碼與表現(xiàn)CSS代碼的完全分離，使得前期制作和后期維護(hù)都十分方便

4.導(dǎo)入樣式（不建議使用）

導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，在HTML初始化時(shí)，會(huì)被導(dǎo)入到HTML或者CSS文件中，成為文件的一部分，類似第二種內(nèi)嵌樣式。

@import在html中使用，如下：

<style type="text/css">
@import url(style.css);
</style>

@import在CSS中使用，如下：

@import url(style.css);

第二：四種CSS引入方式的優(yōu)先級(jí)

1.就近原則

2.理論上：行內(nèi)>內(nèi)嵌>鏈接>導(dǎo)入

3.實(shí)際上：內(nèi)嵌、鏈接、導(dǎo)入在同一個(gè)文件頭部，誰(shuí)離相應(yīng)的代碼近，誰(shuí)的優(yōu)先級(jí)高

心得：

1、如果同一個(gè)css定義分布在兩個(gè)css文件中，那么樣式取后引入的css文件。

2、最好將第三方組件的css放在html靠前位置，自定義的css放到html后面位置。

總結(jié)

到此這篇關(guān)于淺析CSS中的4種引入方式及優(yōu)先級(jí)的文章就介紹到這了,更多相關(guān)css引入方式優(yōu)先級(jí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片