么是css的調用方式?
簡單來講,就是解決把css代碼寫在哪里的問題,這塊內容之前在課堂上演示過,這里再用文字說明一下,權當復習。
大體有以下四種方式:
1,外聯式樣式表
添加在HTML的頭部信息標識符< head>里:
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
其中href是目標文檔的URL, type則規定了目標URL的MIME類型,而media規定了文檔將顯示在什么設備上。
2,內嵌樣式表
添加在HTML的頭部信息標識符< head>里:
<head>
<style type="text/css">
<!-- 樣式表的具體內容 -->
</style>
</head>
type=”text/css”表示樣式表采用MIME類型,幫助不支持CSS的瀏覽器過濾掉CSS代碼,避免在瀏覽器面前直接以源代碼的方式顯示我們設置的樣式表。但為了保證上述情況一定不要發生,還是有必要在樣式表里加上注釋標識符“< !--注釋內容-->”。
3,元素內定
語法:
<Tag style="properties">網頁內容</tag>
舉個例子:
<p style="color: blue; font-size: 10px">CSS實例</p>
上面例子的代碼說明:
用藍色顯示字體大小為10px的“CSS實例”。盡管使用簡單、顯示直觀,但是這種方法不怎么常用,因為這樣添加無法完全發揮樣式表的優勢——即內容結構和格式控制分別保存。
4,導入樣式表(高級用法,暫時先放下)
語法:
<style type="text/css">
<!-- @import url("css/base.css"); -->
</style>
其中外部引用CSS主要用到兩種方式link和@import
本質上,這兩種方式都是為了加載CSS文件,但還是存在著細微的差別。
link和@import存在如下差別:
差別1:老祖宗的差別。link屬于HTML標簽,而@import完全是CSS提供的一種方式。
link標簽除了可以加載CSS外,還可以做很多其它的事情,比如定義RSS,定義rel連接屬性等,@import就只能加載CSS了。
差別2:加載順序的差別。當一個頁面被加載的時候(就是被瀏覽者瀏覽的時候),link引用的CSS會同時被加載,而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式(就是閃爍),網速慢的時候還挺明顯。
差別3:兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持,@import只有在IE5以上的才能識別,而link標簽無此問題。
差別4:當使用javascript控制DOM去改變樣式的時候,只能使用link標簽,因為@import不是DOM可以控制的。
從上面的分析來看,還是使用link標簽比較好。
課后練習:
步驟一:新建一個名為index.html的網頁。
步驟二:在index.html網頁文檔里加入兩個p標簽,分別在p標簽中加入內容(內容隨意)
步驟三:嘗試用上面提到的前三種方式,用css代碼改變p標簽內容的顯示格式。
Cascading Style Sheet, 級聯樣式表
HTML是網頁的內容/骨架
CSS是網頁的外衣/表現
文件擴展名: .css
1. 行內樣式表
<tagName style="css code here..." />
2. 內部樣式表
<style>
selector {
css code here...
}
午學習了HTML語言CSS樣式的內部樣式表,現在我們來學習下外部樣式表。這是CSS樣式表的一個重點。
實際開發都是外部樣式表,適合于樣式比較多的情況,核心是: 樣式單獨寫到CSS文件中,之后把CSS文件引入到HTML頁面中使用。
引入外部樣式表,分為兩步:
1.新建一個后綴名為.css的樣式文件,把所有CSS代碼都放到這個樣式文件中。
2.在HTML頁面中,使用<link>標簽引入.css這個文件
看下語法規范:
<link rel="stylesheet" href="css文件路徑">
對于css文件路徑,如果在同一個文件夾下,可以直接引用。如果不在同一個文件夾下,可以再引用下文件路徑。
來看下最終的樣式效果:
最開始沒有效果的展示:
對應代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS之外部樣式表</title>
<!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body>
<div>天生我材必有用,千金散盡還復來。</div>
</body>
</html>
修改后的顯示效果為:
對應的代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS之外部樣式表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>天生我材必有用,千金散盡還復來。</div>
</body>
</html>
這里加入了<link>標簽,<link rel="stylesheet" href="style.css"> 也引入了CSS的樣式文件。具體文件內容為:
對應文件內的代碼為:
/* 這個css文件里沒有標簽,只有樣式 */
div {
color: pink;
}
先在外部新建一個 .css文件,然后通過link將css文件引入
接下來對CSS引入樣式進行一個總結:
行內樣式表: 優點是書寫方便,權重高,缺點是結構樣式混寫,使用情況較少,控制范圍是控制一個標簽。
內部樣式表: 優點是部分結構和樣式相分離,缺點是沒有徹底分離,使用情況較多,控制范圍是控制一個頁面。
外部樣式表: 優點是完全實現樣式和結構相分離,缺點是需要引入,使用情況最多,吐血推薦,控制范圍是能夠控制多個頁面。
今天就先到這里了,明天進行綜合案例分析。謝謝大家~
*請認真填寫需求信息,我們會在24小時內與您取得聯系。