CSS的建立與使用。

時間 2019-11-08

標籤 css 建立使用欄目 CSS 简体版

原文原文鏈接

一個頁面應該有幾種插入樣式表的方法？應該如何插入樣式表？css

插入樣式表的方法總共有三種：html

一、外部樣式表瀏覽器

二、內部樣式表編輯器

三、內斂樣式字體

###1、外部樣式表code

當樣式須要應用於不少頁面的時候，外部樣式表是最理想的選擇。在使用外部樣式表的時候，你能夠經過修改這個外部樣式表的文件來同時改變引用這個樣式表文件的網頁外觀。htm

每一個須要引用這個樣式表的頁面，都須要使用 <link> 標籤連接到樣式表。**<link> **標籤正常狀況下應該放在（文檔的）頭部：繼承

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

當引用外部樣式表後，瀏覽器會從文件style.css中讀到樣式聲明，並根據它來格式文檔。外部樣式表能夠在任何文本編輯器中打開文件進行編輯。文件中不能包含任何的html標籤。樣式表應該以**.css**擴展名來進行保存。文檔

###2、內部樣式表擴展

當單個文檔須要特殊的樣式時，就應該使用內部樣式表。使用內部樣式表時，可使用 <style> 標籤在文檔頭部定義內部樣式表，例如：

<head>
<style>
body{font-size:12px;color:#FFF;}
</style>
</head>

###3、內聯樣式

因爲要將表現和內容混雜在一塊兒，內聯樣式會損失掉樣式表的許多優點。須要慎重使用這種方法。

當樣式僅須要在一個元素上應用時，就可使用內聯樣式，你須要在相關的標籤內使用樣式**（style）屬性。style屬性能夠包含任何css**屬性。下面展現如何改變段落內文字的顏色。

<p style="color:#FFF;">kayze</p>

###多重樣式

當你同時使用外部樣式表與內部樣式表時，若是某些屬性在不一樣的樣式表中被一樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。

例如，外部樣式表對 h1 選擇器定義三個屬性：

h1
{
color:red;
text-align:left;
font-size:8px;
}

內部樣式表對 h1 選擇器定義兩個屬性：

h1
{
text-align:right;
font-size:20px;
}

當這個頁面同時擁有外部樣式表與內部樣式表時，h1 獲得的樣式將會是：

h1{
color:red;
text-align:right;
font-size:20pt;
}

即：這個頁面的 h1 選擇器繼承的是外部樣式表的顏色屬性，與內部樣式表的文字排列**（text-alignment）和字體尺寸（font-size）**。

下面將解釋，爲何h1 選擇器會繼承這樣的屬性。

###多重樣式將層疊爲一個

樣式表容許以多種方式規定樣式信息。樣式能夠規定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至能夠在同一個 HTML 文檔內部引用多個外部樣式表。

當同一個 HTML 元素被不止一個樣式定義時，會使用哪一個樣式呢？

通常而言，全部的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。

###具體層疊次序：

瀏覽器缺省設置
外部樣式表
內部樣式表（位於 <head> 標籤內部）
內聯樣式（在 HTML 元素內部）

在上面的層疊次序中，次序數字越大的優先權越高，即

內聯樣式（在 HTML 元素內部）
內部樣式表（位於 <head> 標籤內部）
外部樣式表
瀏覽器缺省設置

當一個選擇器被多個樣式表同時定義時，將會優先使用優先權越高的樣式表定義的樣式。

這個內容將涉及到另外一個方面的知識「CSS的樣式優先級機制」。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。