鏈接送上CSS學習筆記一20200315
在CSS中設置顏色
初始狀態:
<style>
body {
background-color: black;
}
</style>
表示CSS中的顏色其中一種方式稱爲 hexadecimal code（十六進制編碼），簡寫爲 hex code。
我們通常使用 decimals，也就是十進制數字，它對每一位數字使用符號0到9來表示。Hexadecimals （或 hex）是十六進制數字，這意味着它使用十六個不同的符號。像十進制一樣，符號 0-9 代表數值零到九，那麼 A、B、C、D、E、F 代表數值十到十五。總共，用 0 到 F 可以表示 hexadecimal 中的每一位數字，共爲我們提供 16 個可能的數值。
在 CSS 中，我們可以使用 6 個十六進制數字來表示顏色，每 2 個分別表示紅 ®、綠 (G) 和藍(B) 成分。例如，#000000 是黑色，同時也是可能的數值中最小的。
<style>
body {
background-color: #000000;
}
</style>
數字 0 是十六進制代碼中最低的數字，表示完全沒有顏色。 數字 F 是十六進制代碼中最高的數字，表示最大可能的亮度。
<style>
body {
background-color: #ffffff;
}
</style>
hex code（十六進制代碼） 遵循 red-green-blue（紅-綠-藍），或者叫 rgb 格式。hex code 中的前兩位表示顏色中紅色的數量，第三四位代表綠色的數量，第五六位代表藍色的數量。
eg:絕對的純紅色就是在第一和第二位使用 F （最大可能的數值），且在第三、第四、第五和第六位使用 0 （最小可能數值）。
eg:橙色是純紅，與一些綠色混合，沒有藍色。在十六進制代碼中，這轉換爲 ＃FFA500。
注意：用正確的十六進制代碼替換 <style> 元素中的顏色詞。
從這三種純色（紅、綠、藍），我們能得到 1600 萬種其它的顏色。
我們也可以通過平均混合所有三種顏色得到不同灰度等級的灰色。
<style>
body {
background-color: #808080;
}
</style>
能理解平均嘛？
CSS 十六進制RGB表達式縮寫
太長記不住的話，看看這個：
<style>
body {
background-color: #F00;
}
</style>
這個縮寫形式給出一個數字爲紅色，一個數字爲綠色，一個數字爲藍色。
這將把所有可能的顏色總數減少到大約4000種，但是瀏覽器會把 #FF0000 和 #F00 解釋爲完全相同的顏色。
在 CSS 中表示顏色的另一個方法是使用 RGB 值。
代表黑色的 RGB 值如下所示：
rgb(0, 0, 0)
代表白色的 RGB 值如下所示：
rgb(255, 255, 255)
使用 RGB，是使用RGB指定每個顏色的亮度，數字介於0到255之間，而不是像使用十六進制代碼那樣使用六個十六進制數字。(16*16=255)
<style>
body {
background-color: rgb(0,0,0);
}
</style>
說實話，好像沒區別
紅色
<style>
body {
background-color: rgb(255, 0, 0);
}
</style>
over
咱們來大總結?
擺術語了嗷
多頁面應用同一個樣式
通常保存在外部的獨立的.css文件（該文件不屬於任何頁面文件）可以在多個頁面中使用同一個CSS樣式表。通過在任何的頁面文件中引用.css文件，你可以設置具有一致風格的多個頁面。
樣式層疊
樣式層疊就是對一個元素多次設置同一個樣式，這將使用最後一次設置的屬性值。
樣式層疊次序
當同一個 HTML 元素定義了多個樣式時，應該使用哪個樣式？
一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
- 瀏覽器缺省設置
- 外部樣式表
- 內部樣式表（位於 <head>標籤內部）
- 內聯樣式（在 HTML 元素內部）
CSS 註釋
註釋是用來解釋你的代碼，並且可以隨意編輯它，瀏覽器會忽略它。
CSS註釋以 “/∗” 開始, 以 “∗/” 結束
是這個*，我找不到字符實體了。
id 選擇器
id 選擇器可以爲標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 “#” 來定義。
ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。
ID屬性只能在每個 HTML 文檔中出現一次。
class 選擇器
class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示
CSS 創建
插入樣式表的方法有三種:
- 外部樣式表
- 內部樣式表
- 內聯樣式
外部樣式表
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 標籤鏈接到樣式表。 標籤在（文檔的）頭部
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
瀏覽器會從文件 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。
外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標籤。樣式表應該以 .css 擴展名進行保存。
樣表：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(/images/back40.gif);}
不要在屬性值與單位之間留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，它僅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。
內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標籤在文檔頭部定義內部樣式表
不放例子了，前面的文章都是這樣寫的。
內聯樣式
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。
多重樣式
如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。
例子：
外部樣式表擁有針對 h3 選擇器的三個屬性：
h3
{
color:red;
text-align:left;
font-size:8pt;
}
內部樣式表擁有針對 h3 選擇器的兩個屬性：
h3
{
text-align:right;
font-size:20pt;
}
假如擁有內部樣式表的這個頁面同時與外部樣式錶鏈接，那麼 h3 得到的樣式是：
color:red;
text-align:right;
font-size:20pt;
即顏色屬性將被繼承於外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內部樣式表中的規則取代。
多重樣式優先級順序
下列是一份優先級逐級增加的選擇器列表，其中數字 7 擁有最高的優先權：
通用選擇器（*）
元素(類型)選擇器
類選擇器
屬性選擇器
僞類
ID 選擇器
內聯樣式
!important 規則例外
當 !important 規則被應用在一個樣式聲明中時，該樣式聲明會覆蓋CSS中任何其他的聲明，無論它處在聲明列表中的哪裏。儘管如此，!important規則還是與優先級毫無關係。使用 !important 不是一個好習慣，因爲它改變了你樣式表本來的級聯規則，從而使其難以調試。
一些經驗法則：
Always 要優化考慮使用樣式規則的優先級來解決問題而不是 !important
Only 只在需要覆蓋全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定頁面中使用 !important
Never 永遠不要在全站範圍的 css 上使用 !important
Never 永遠不要在你的插件中使用 !important
其他的去查手冊去手冊
重要的都在這裏了，我覺得看完應該可以做一點簡單的模板修改了。前面我的HTML筆記中也有一部分，可以參考