我給女友講編程CSS系列(1) –添加CSS樣式的3種方式及樣式表的優先權

時間 2020-06-19

標籤編程 css 系列添加樣式方式優先權欄目悠閒生活简体版

原文原文鏈接

若是說，原生態就是美，那麼，咱們就沒有必要穿衣打扮。css

網頁是什麼？html

說白了，網頁就是一堆【html標籤】有序的搭配，讓【CSS屬性值】整整容，請【Javascript語言】處理一下事件。程序員

一我的的整容效果，很大程度上取決於Ta本人，也就是原材料，對網頁來講，原材料就是html標籤，所以設計優秀的html標籤結構十分重要。瀏覽器

整容醫生的做用也相當重要，割雙眼皮，整容醫生的基本功，不一樣醫生割出來的效果不一樣。學習

做爲一個網頁設計師，咱們是否是應該追求完美，盡最大努力，讓網頁漂亮一些。字體

我知道，咱們每每自稱「屌絲程序員」，有時候本身都看不上本身寫出來的東西，我之前也這樣，不過，我在追求上進，就像這篇文章，是否是比前幾篇要好一些呢？spa

什麼是CSS呢？設計

CSS 是Cascading Style Sheets的縮寫，意思是「層疊樣式表」。3d

下面，咱們經過一個「選美比賽」來學習添加CSS樣式的3種方式及它們的優先權。code

1號選手：原生態

(1) 曬照片，以下：

(2) 看代碼：

新建一個網頁a.html，複製粘貼下面的內容：

<html>

<head>

</head>

<body >

添加CSS樣式的3種方式及它們的優先權

</body>

</html>

使用瀏覽器打開，看到的樣子就是上圖。

(3) 知識講解

每個瀏覽器都有本身的默認設置，當html標籤沒有整容之前，都採用默認值。

「白紙黑字」就是最典型的一種默認設置，網頁的背景顯示爲白色，字體顯示爲黑色。

並非全部的瀏覽器的默認值都是相同的，相同的內容，在不一樣瀏覽器中顯示的可能不一樣，這就是瀏覽器的差別性。

小結：

瀏覽器的默認值在樣式設置中是最低級的，只有當沒有樣式修飾時纔會按照默認值來顯示。

2號選手：紅色女郎

(1) 曬照片，以下：

(2)看代碼：

新建一個文件css.css，和a.html放在同一個文件夾中，複製粘貼下面的內容：

body
{
background-color:red;
}

在a.html添加一行代碼，添加後以下：

<html>

<head>

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

</head>

<body >

添加CSS樣式的3種方式及它們的優先權

</body>

</html>

使用瀏覽器打開，你就會看見「紅色女郎」。

(4) 知識講解

A：

css.css中的body是一個類型選擇符(專業叫法)。

類型選擇符：類型選擇符就是以文檔語言對象(Element)類型做爲選擇符。也就是直接把html標籤當作選擇符。

我以爲，叫「標籤選擇符」更好一些，一聽就知道怎麼用，簡單明瞭。

樣式【屬性鍵值對】通常要放在大括號{}內，多個【屬性對】中間使用【分號】間隔，【屬性和值】中間使用【冒號】。

的意思是設置body背景爲紅色。

background-color是background和color的組合，單獨寫background也行，background還能夠設置背景圖，加上color專門用來設置背景色。

B：

這一句就是把樣式文件css.css連接到a.html中，專業的叫法是「外部樣式表（Link Style Sheets）」。

注意連接詞是link，而不是style啊，千萬不要寫錯了。

必定要記住屬性href，它指定了樣式表css.css的路徑，本例中它們在相同的文件夾下，直接寫文件名就好了。

另一個必須的屬性rel，rel 屬性規定當前文檔與被連接文檔之間的關係。當值爲stylesheet時，瀏覽器纔會把css.css當作樣式表，若是你不寫rel或者把屬性值寫錯了，那麼外部樣式表也就不起做用了，你也就見不到紅色女郎了。

小結：

外部樣式表的優先級倒數第二，瀏覽器默認值倒數第一。

3號選手：綠色蔬菜

(1) 曬照片，以下：

(2)看代碼：

在a.html的head標籤內部添加一段代碼，添加後以下：

<html>

<head>

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

 

<style type="text/css">

body

{

background-color:green;

}

</style>

</head>

<body >

添加CSS樣式的3種方式及它們的優先權

</body>

</html>

使用瀏覽器打開，你就會看見「綠色蔬菜」。

(5) 知識講解

A：

選擇符和屬性值的用法徹底相同，通常設計網頁都是先使用這種方式寫樣式，而後在把通用的樣式複製剪切到一個css文件中，須要使用這種樣式的網頁加上link連接就好了。

B：

這用添加樣式的方式叫：嵌入式樣式表（Embedded Style Sheets），也就是把樣式嵌入到網頁head中。

可是head中有不少內容，爲了區分哪一部分是樣式，就須要把全部的樣式統一放在<style type="text/css"><style>中。

上面兩段是我編的，目的是方便初學者理解。

有沒有發現，外部樣式表和嵌入式樣式表同時存在時，顯示的是嵌入式的。這就是優先級的問題。

小結：

優先級順序：嵌入式樣式表 > 外部樣式表 > 瀏覽器默認樣式

4號選手：藍天

(1) 曬照片，以下：

(2)看代碼：

在a.html的body標籤內部添加一段代碼，添加後以下：

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

<style type="text/css">
body
{
background-color:green;
}
</style>
</head>
<body style="background-color:blue">
添加CSS樣式的3種方式及它們的優先權
</body>
</html>