溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關有哪些引入CSS的方式，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
1.CSS初始
概念：CSS稱之為層疊樣式表或級聯樣式表。樣式定義如何顯示HTML元素。樣式通常存儲在樣式表中。
作用：CSS以HTML為基礎，提供了豐富的功能，而且還可以針對不同的瀏覽器設置不同的樣式。CSS主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式。
2.CSS語法
CSS語法由兩個主要的部分構成：選擇器，以及一條或多條聲明。每條聲明由一個屬性和一個屬性值組成。
簡單來說一個樣式的語法是由三部分構成：選擇器、屬性和屬性值。
例如：
選擇器：選擇器會告訴瀏覽器該樣式將作用于頁面中哪些對象，而這些對象可以是某個標簽、所有網頁對象、指定Class或ID值等。瀏覽器在解析這個樣式時，根據選擇器來渲染對象的顯示鮮果。也就是說選擇器通常是你想要改變樣式的HTML元素，選擇器就是用一種方式把你想要設置樣式的那一個標簽選中。把這個標簽選中了，你才能給這個標簽設置CSS樣式。
聲明：聲明可以是一條或者多條，這些聲明會告訴瀏覽器如何去渲染選擇器指定的對象。聲明由屬性和屬性值組成，并用分號來標識一個聲明的結束，在一個樣式中，最后一個聲明可以省略分號，所有的聲明被放置在一對大括號內，這個大括號跟在選擇器的后面。
知道了CSS是做什么的了，也知道了CSS的語法由幾部分組成，那么問題來了，如何使用CSS呢，CSS樣式書寫在什么位置呢？接下來要說的就是CSS的書寫位置。
3.CSS的引入方式
在HTML中引入CSS樣式的方式有3種，分別為內聯樣式表、內部樣式表、外部樣式表。
3.1內聯樣式表
內聯樣式表也稱之為行內樣式表、行間樣式表。內聯樣式表是把CSS代碼和HTML代碼放在同一個文件中。如果要使用內聯樣式，需要在相關的標簽內使用樣式（style）屬性。Style屬性可以包含任何CSS屬性。
語法：<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; ">內容</標簽名>
例如：
<!DOCTYPE html> <html> <head> <title>內聯樣式表</title> </head> <body> <h2 style="color:red;">我是內聯樣式表，也可以稱我為行內樣式表、行間樣式表</h2> </body> </html>
從上面的代碼可以看出，我們給<h2>標簽添加了style屬性，而給style屬性設置的CSS屬性是color屬性，屬性值是red，顯示效果如下：
內聯樣式表方便操作，也很容易理解。 實際上任何HTML標簽都擁有style屬性，用來設置內聯式 。使用內聯式需要注意的點如下：
(1).style其實就是標簽的一個屬性；
(2).樣式屬性和屬性值中間使用";"，也就是英文狀態下的分號；
(3).多組屬性值之間用英文狀態下的分號“;”隔開；
(4).內聯式只能控制當前的標簽和以及嵌套在其中的子標簽，容易造成代碼冗余。
內聯式是在單個標簽內定義的。對于網站來說，冗余代碼很多，而且由于冗余代碼多，每次改動CSS樣式都要到具體的標簽內修改，這樣使得網站的維護性也非常差。而且，內聯式沒有實現樣式和結構相分離。
3.2.內部樣式表
內部樣式表也稱之為內嵌樣式表，是將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義。
語法：
<!DOCTYPE html>
<html>
<head>
<title>內部樣式表</title>
<style>
選擇器{
屬性1:屬性值1;
屬性2:屬性值2;
}
</style>
</head>
<body>
</body>
</html>例如：
<!DOCTYPE html>
<html>
<head>
<title>內部樣式表</title>
<style>
p{
color:pink;
}
</style>
</head>
<body>
<p>我是內部樣式表，也叫內嵌式樣式表</p>
</body>
</html>從上面代碼中可以看出，給p標簽使用的是內部樣式表，添加了字體顏色是pink，顯示效果如下：
需要說明的是內部樣式表中，style標簽有個type屬性，其值為text/css，即：type="text/css"，在html5中可以省略。使用內部樣式表的缺點有兩點：第一點就是內部樣式表只能控制當前的頁面；第二點就是內部樣式表沒有實現結構與樣式分離。
3.3.外部樣式表
外部樣式表又稱之為鏈入式或者外鏈式。所謂外部樣式表就是把CSS代碼和HTML代碼都單獨放在不同文件中，然后在HTML文檔中使用link標簽或者@import來引用CSS樣式表。外部樣式表的文件擴展名是.css，且文件中不能包含任何html標簽。
外部樣式表的引入分為兩種情況：
第一種情況是放置于head標簽內的link標簽中。語法為：<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頁面中引用文件名為index的css文件--> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div></div> </body> </html>
第二種情況是放置于head標簽內的style標簽中或者直接寫入樣式表中。語法為：
<style>
@import 1.css;
@import '1.css';
@import "1.css";
@import url(1.css);
@import url('1.css);
@import url("1.css");
</style>注意：上面的語法中就“1.css”寫了6種形式，也就是說使用@import命令導入外部樣式表的書寫方式有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>對于是使用link標簽還是@import引入外部樣式表，可能大家有些疑惑。link標簽與@import的區別如下：
區別1：從從屬關系來說，link標簽是一個html標簽，除了可以加載CSS文件外還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等；而@import是CSS提供的一種方式，只能用來加載CSS文件。
區別2：從加載順序來說，頁面加載時，link標簽引入的CSS文件被同時加載；而@import引入的CSS將在頁面加載完畢后被加載。
區別3：從兼容性來說，link標簽是一個html標簽，不存在兼容性問題；而@import是 CSS2.1 提供的語法， IE5之前的瀏覽器是不支持的。
區別4：從DOM可控性來說，當你使用JavaScript控制dom去改變樣式的時候，只能使用link標簽，無法使用@import的方式。
區別5：從權重來說，link引入的樣式權重大于@import引入的樣式。（PS：關于權重相關的知識這里不做詳解，后面再做詳細的解釋）
以上就是有哪些引入CSS的方式，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
