零基礎(chǔ)學(xué)網(wǎng)頁—CSS的調(diào)用方式有哪些？

么是css的調(diào)用方式？

簡單來講，就是解決把css代碼寫在哪里的問題，這塊內(nèi)容之前在課堂上演示過，這里再用文字說明一下，權(quán)當(dāng)復(fù)習(xí)。

大體有以下四種方式：

外聯(lián)式樣式表；
內(nèi)嵌樣式表；
元素內(nèi)定；
導(dǎo)入樣式表

1，外聯(lián)式樣式表

添加在HTML的頭部信息標(biāo)識符< head>里：

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

其中href是目標(biāo)文檔的URL， type則規(guī)定了目標(biāo)URL的MIME類型，而media規(guī)定了文檔將顯示在什么設(shè)備上。

2，內(nèi)嵌樣式表

添加在HTML的頭部信息標(biāo)識符< head>里：

<head> 
      <style type="text/css"> 
             <!-- 樣式表的具體內(nèi)容 --> 
      </style> 
</head>

type=”text/css”表示樣式表采用MIME類型，幫助不支持CSS的瀏覽器過濾掉CSS代碼，避免在瀏覽器面前直接以源代碼的方式顯示我們設(shè)置的樣式表。但為了保證上述情況一定不要發(fā)生，還是有必要在樣式表里加上注釋標(biāo)識符“< !--注釋內(nèi)容-->”。

3，元素內(nèi)定

語法：

<Tag style="properties">網(wǎng)頁內(nèi)容</tag>

舉個(gè)例子：

<p style="color: blue; font-size: 10px">CSS實(shí)例</p>

上面例子的代碼說明：

用藍(lán)色顯示字體大小為10px的“CSS實(shí)例”。盡管使用簡單、顯示直觀，但是這種方法不怎么常用，因?yàn)檫@樣添加無法完全發(fā)揮樣式表的優(yōu)勢——即內(nèi)容結(jié)構(gòu)和格式控制分別保存。

4，導(dǎo)入樣式表(高級用法，暫時(shí)先放下）

語法：

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

其中外部引用CSS主要用到兩種方式link和@import

本質(zhì)上，這兩種方式都是為了加載CSS文件，但還是存在著細(xì)微的差別。

link和@import存在如下差別：

差別1：老祖宗的差別。link屬于HTML標(biāo)簽，而@import完全是CSS提供的一種方式。

link標(biāo)簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS了。

差別2：加載順序的差別。當(dāng)一個(gè)頁面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候），link引用的CSS會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁面時(shí)開始會(huì)沒有樣式（就是閃爍），網(wǎng)速慢的時(shí)候還挺明顯。

差別3：兼容性的差別。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標(biāo)簽無此問題。

差別4：當(dāng)使用javascript控制DOM去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是DOM可以控制的。

從上面的分析來看，還是使用link標(biāo)簽比較好。

課后練習(xí)：

步驟一：新建一個(gè)名為index.html的網(wǎng)頁。

步驟二：在index.html網(wǎng)頁文檔里加入兩個(gè)p標(biāo)簽，分別在p標(biāo)簽中加入內(nèi)容（內(nèi)容隨意）

步驟三：嘗試用上面提到的前三種方式，用css代碼改變p標(biāo)簽內(nèi)容的顯示格式。

SS基本概念

Cascading Style Sheet, 級聯(lián)樣式表

HTML是網(wǎng)頁的內(nèi)容/骨架

CSS是網(wǎng)頁的外衣/表現(xiàn)

文件擴(kuò)展名: .css

CSS寫在哪

1. 行內(nèi)樣式表

<tagName style="css code here..." />

2. 內(nèi)部樣式表

<style>
selector {
css code here...
}

午學(xué)習(xí)了HTML語言CSS樣式的內(nèi)部樣式表，現(xiàn)在我們來學(xué)習(xí)下外部樣式表。這是CSS樣式表的一個(gè)重點(diǎn)。

實(shí)際開發(fā)都是外部樣式表，適合于樣式比較多的情況，核心是: 樣式單獨(dú)寫到CSS文件中，之后把CSS文件引入到HTML頁面中使用。

引入外部樣式表，分為兩步:

1.新建一個(gè)后綴名為.css的樣式文件，把所有CSS代碼都放到這個(gè)樣式文件中。

2.在HTML頁面中，使用<link>標(biāo)簽引入.css這個(gè)文件

看下語法規(guī)范:

對于css文件路徑，如果在同一個(gè)文件夾下，可以直接引用。如果不在同一個(gè)文件夾下，可以再引用下文件路徑。

來看下最終的樣式效果:

最開始沒有效果的展示：

對應(yīng)代碼為:

<!DOCTYPE html>

<head>

<title>CSS之外部樣式表</title>

</head>

<body>

<div>天生我材必有用，千金散盡還復(fù)來。</div>

</body>

</html>

修改后的顯示效果為:

對應(yīng)的代碼為:

<!DOCTYPE html>

<head>

<title>CSS之外部樣式表</title>

</head>

<body>

<div>天生我材必有用，千金散盡還復(fù)來。</div>

</body>

</html>

這里加入了<link>標(biāo)簽，<link rel="stylesheet" href="style.css"> 也引入了CSS的樣式文件。具體文件內(nèi)容為:

對應(yīng)文件內(nèi)的代碼為:

/* 這個(gè)css文件里沒有標(biāo)簽，只有樣式 */

div {

color: pink;

}

先在外部新建一個(gè) .css文件，然后通過link將css文件引入

接下來對CSS引入樣式進(jìn)行一個(gè)總結(jié):

行內(nèi)樣式表: 優(yōu)點(diǎn)是書寫方便，權(quán)重高，缺點(diǎn)是結(jié)構(gòu)樣式混寫，使用情況較少，控制范圍是控制一個(gè)標(biāo)簽。

內(nèi)部樣式表: 優(yōu)點(diǎn)是部分結(jié)構(gòu)和樣式相分離，缺點(diǎn)是沒有徹底分離，使用情況較多，控制范圍是控制一個(gè)頁面。

外部樣式表: 優(yōu)點(diǎn)是完全實(shí)現(xiàn)樣式和結(jié)構(gòu)相分離，缺點(diǎn)是需要引入，使用情況最多，吐血推薦，控制范圍是能夠控制多個(gè)頁面。

今天就先到這里了，明天進(jìn)行綜合案例分析。謝謝大家~

在線咨詢

上一篇：爬蟲系列(1)：抓取網(wǎng)頁URL
下一篇：vue post json數(shù)據(jù)

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

零基礎(chǔ)學(xué)網(wǎng)頁—CSS的調(diào)用方式有哪些？

SS基本概念

CSS寫在哪

您的項(xiàng)目需求