關(guān)于CSS引入方式的詳細(xì)見(jiàn)解小結(jié)
我要評(píng)論關(guān)于CSS的發(fā)展史這里不做介紹。寫(xiě)博客的原因之一是想幫助那些與我一樣喜歡糾結(jié)的初入前端的伙伴，希望自己寫(xiě)的帖子能對(duì)伙伴有些許幫助；原因之二這些帖子也算自己的一個(gè)知識(shí)的整理。現(xiàn)在還沒(méi)有一定的順序可循，但從CSS開(kāi)始，盡量寫(xiě)的有順序可循。
1.CSS初始
概念：CSS稱(chēng)之為層疊樣式表或級(jí)聯(lián)樣式表。樣式定義如何顯示HTML元素。樣式通常存儲(chǔ)在樣式表中。
作用：CSS以HTML為基礎(chǔ)，提供了豐富的功能，而且還可以針對(duì)不同的瀏覽器設(shè)置不同的樣式。CSS主要用于設(shè)置HTML頁(yè)面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式。
2.CSS語(yǔ)法
CSS語(yǔ)法由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。每條聲明由一個(gè)屬性和一個(gè)屬性值組成。
簡(jiǎn)單來(lái)說(shuō)一個(gè)樣式的語(yǔ)法是由三部分構(gòu)成：選擇器、屬性和屬性值。
例如：
選擇器：選擇器會(huì)告訴瀏覽器該樣式將作用于頁(yè)面中哪些對(duì)象，而這些對(duì)象可以是某個(gè)標(biāo)簽、所有網(wǎng)頁(yè)對(duì)象、指定Class或ID值等。瀏覽器在解析這個(gè)樣式時(shí)，根據(jù)選擇器來(lái)渲染對(duì)象的顯示鮮果。也就是說(shuō)選擇器通常是你想要改變樣式的HTML元素，選擇器就是用一種方式把你想要設(shè)置樣式的那一個(gè)標(biāo)簽選中。把這個(gè)標(biāo)簽選中了，你才能給這個(gè)標(biāo)簽設(shè)置CSS樣式。
聲明：聲明可以是一條或者多條，這些聲明會(huì)告訴瀏覽器如何去渲染選擇器指定的對(duì)象。聲明由屬性和屬性值組成，并用分號(hào)來(lái)標(biāo)識(shí)一個(gè)聲明的結(jié)束，在一個(gè)樣式中，最后一個(gè)聲明可以省略分號(hào)，所有的聲明被放置在一對(duì)大括號(hào)內(nèi)，這個(gè)大括號(hào)跟在選擇器的后面。
知道了CSS是做什么的了，也知道了CSS的語(yǔ)法由幾部分組成，那么問(wèn)題來(lái)了，如何使用CSS呢，CSS樣式書(shū)寫(xiě)在什么位置呢？接下來(lái)要說(shuō)的就是CSS的書(shū)寫(xiě)位置。
3.CSS的引入方式
在HTML中引入CSS樣式的方式有3種，分別為內(nèi)聯(lián)樣式表、內(nèi)部樣式表、外部樣式表。
3.1內(nèi)聯(lián)樣式表
內(nèi)聯(lián)樣式表也稱(chēng)之為行內(nèi)樣式表、行間樣式表。內(nèi)聯(lián)樣式表是把CSS代碼和HTML代碼放在同一個(gè)文件中。如果要使用內(nèi)聯(lián)樣式，需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性。Style屬性可以包含任何CSS屬性。
語(yǔ)法：<標(biāo)簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; ">內(nèi)容</標(biāo)簽名>
例如：
<!DOCTYPE html>
<html>
<head>
<title>內(nèi)聯(lián)樣式表</title>
</head>
<body>
<h1 style="color:red;">我是內(nèi)聯(lián)樣式表，也可以稱(chēng)我為行內(nèi)樣式表、行間樣式表</h1>
</body>
</html>
從上面的代碼可以看出，我們給<h1>標(biāo)簽添加了style屬性，而給style屬性設(shè)置的CSS屬性是color屬性，屬性值是red，顯示效果如下：
內(nèi)聯(lián)樣式表方便操作，也很容易理解。 實(shí)際上任何HTML標(biāo)簽都擁有style屬性，用來(lái)設(shè)置內(nèi)聯(lián)式 。使用內(nèi)聯(lián)式需要注意的點(diǎn)如下：
(1).style其實(shí)就是標(biāo)簽的一個(gè)屬性；
(2).樣式屬性和屬性值中間使用";"，也就是英文狀態(tài)下的分號(hào)；
(3).多組屬性值之間用英文狀態(tài)下的分號(hào)“;”隔開(kāi)；
(4).內(nèi)聯(lián)式只能控制當(dāng)前的標(biāo)簽和以及嵌套在其中的子標(biāo)簽，容易造成代碼冗余。
內(nèi)聯(lián)式是在單個(gè)標(biāo)簽內(nèi)定義的。對(duì)于網(wǎng)站來(lái)說(shuō)，冗余代碼很多，而且由于冗余代碼多，每次改動(dòng)CSS樣式都要到具體的標(biāo)簽內(nèi)修改，這樣使得網(wǎng)站的維護(hù)性也非常差。而且，內(nèi)聯(lián)式?jīng)]有實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離。
3.2.內(nèi)部樣式表
內(nèi)部樣式表也稱(chēng)之為內(nèi)嵌樣式表，是將CSS代碼集中寫(xiě)在HTML文檔的head頭部標(biāo)簽中，并且用style標(biāo)簽定義。
語(yǔ)法：
<!DOCTYPE html>
<html>
<head>
<title>內(nèi)部樣式表</title>
<style>
選擇器{
屬性1:屬性值1;
屬性2:屬性值2;
}
</style>
</head>
<body>
</body>
</html>
例如：
<!DOCTYPE html>
<html>
<head>
<title>內(nèi)部樣式表</title>
<style>
p{
color:pink;
}
</style>
</head>
<body>
<p>我是內(nèi)部樣式表，也叫內(nèi)嵌式樣式表</p>
</body>
</html>
從上面代碼中可以看出，給p標(biāo)簽使用的是內(nèi)部樣式表，添加了字體顏色是pink，顯示效果如下：
需要說(shuō)明的是內(nèi)部樣式表中，style標(biāo)簽有個(gè)type屬性，其值為text/css，即：type="text/css"，在html5中可以省略。使用內(nèi)部樣式表的缺點(diǎn)有兩點(diǎn)：第一點(diǎn)就是內(nèi)部樣式表只能控制當(dāng)前的頁(yè)面；第二點(diǎn)就是內(nèi)部樣式表沒(méi)有實(shí)現(xiàn)結(jié)構(gòu)與樣式分離。
3.3.外部樣式表
外部樣式表又稱(chēng)之為鏈入式或者外鏈?zhǔn)健Ｋ^外部樣式表就是把CSS代碼和HTML代碼都單獨(dú)放在不同文件中，然后在HTML文檔中使用link標(biāo)簽或者@import來(lái)引用CSS樣式表。外部樣式表的文件擴(kuò)展名是.css，且文件中不能包含任何html標(biāo)簽。
外部樣式表的引入分為兩種情況：
第一種情況是放置于head標(biāo)簽內(nèi)的link標(biāo)簽中。語(yǔ)法為：<head><link rel="stylesheet" type="text/css" href="1.css"></head>
例如：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!--在HTML頁(yè)面中引用文件名為index的css文件-->
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div></div>
</body>
</html>
第二種情況是放置于head標(biāo)簽內(nèi)的style標(biāo)簽中或者直接寫(xiě)入樣式表中。語(yǔ)法為：
<style>
@import 1.css;
@import '1.css';
@import "1.css";
@import url(1.css);
@import url('1.css);
@import url("1.css");
</style>
注意：上面的語(yǔ)法中就“1.css”寫(xiě)了6種形式，也就是說(shuō)使用@import命令導(dǎo)入外部樣式表的書(shū)寫(xiě)方式有6種。
例如：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
@import url("index.css");
</style>
</head>
<body>
<div></div>
</body>
</html>
對(duì)于是使用link標(biāo)簽還是@import引入外部樣式表，可能大家有些疑惑。link標(biāo)簽與@import的區(qū)別如下：
區(qū)別1：從從屬關(guān)系來(lái)說(shuō)，link標(biāo)簽是一個(gè)html標(biāo)簽，除了可以加載CSS文件外還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等；而@import是CSS提供的一種方式，只能用來(lái)加載CSS文件。
區(qū)別2：從加載順序來(lái)說(shuō)，頁(yè)面加載時(shí)，link標(biāo)簽引入的CSS文件被同時(shí)加載；而@import引入的CSS將在頁(yè)面加載完畢后被加載。
區(qū)別3：從兼容性來(lái)說(shuō)，link標(biāo)簽是一個(gè)html標(biāo)簽，不存在兼容性問(wèn)題；而@import是 CSS2.1 提供的語(yǔ)法， IE5之前的瀏覽器是不支持的。
區(qū)別4：從DOM可控性來(lái)說(shuō)，當(dāng)你使用JavaScript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，無(wú)法使用@import的方式。
區(qū)別5：從權(quán)重來(lái)說(shuō)，link引入的樣式權(quán)重大于@import引入的樣式。（PS：關(guān)于權(quán)重相關(guān)的知識(shí)這里不做詳解，后面再做詳細(xì)的解釋?zhuān)?/p>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了css樣式引入及優(yōu)缺點(diǎn)，本文給大家分享三種css的引入方式，通過(guò)代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下2020-04-02
這篇文章主要介紹了詳解CSS文件的三種引入方式的相關(guān)資料，CSS的引入方式共有三種：行內(nèi)樣式、內(nèi)部樣式表、外部樣式表。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-27- CSS四種引入方式:標(biāo)簽內(nèi)的CSS 、網(wǎng)頁(yè)內(nèi)的CSS、link引用的CSS、import引用的CSS，下面用一個(gè)例子演示用法2013-12-06
- 在本文將為大家介紹下css的引入方式、css的基本語(yǔ)法等等，新手朋友們可以參考下哈，希望對(duì)大家有所幫助2013-09-12
詳解CSS文件中的4種引入方式:行內(nèi),內(nèi)聯(lián)式,外部式,導(dǎo)入式
這篇文章主要介紹了CSS文件中的4種引入方式:行內(nèi),內(nèi)聯(lián)式,外部式,導(dǎo)入式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-29
