CSS學(xué)習(xí)筆記(五) 規(guī)則聲明

kyanag 發(fā)布于2019-08-28 18:01 / 1289人閱讀

摘要：規(guī)則由選擇器和聲明兩部分組成，本文將要說(shuō)的是第二部分聲明。數(shù)字值數(shù)字值后面都有一個(gè)單位，例如英寸或點(diǎn)。絕對(duì)值絕對(duì)值描述的是一個(gè)真實(shí)的長(zhǎng)度比如，英寸，而相對(duì)值則是相對(duì)于其他基準(zhǔn)的描述比如是某某的兩倍長(zhǎng)。

  CSS 規(guī)則由 選擇器 和 聲明 兩部分組成，本文將要說(shuō)的是第二部分：聲明。

一個(gè)聲明包含兩部分：屬性和值。

屬性指出要影響元素的哪個(gè)方面（顏色、高度，等等），而值表示屬性設(shè)定為什么（綠色、15px，等等）。

CSS屬性值主要分以下三類：

文本值

數(shù)字值

顏色值

1.文本值

文本值也叫關(guān)鍵字。所有 CSS 屬性都有文本值。

例如，border-style 屬性有 solid、dashed 以及 insert 值。

2.數(shù)字值

數(shù)字值后面都有一個(gè)單位，例如英寸或點(diǎn)。在聲明 font-size:12px 中， 12是數(shù)字值，而 px 是單位（像素）。如果數(shù)字值為 0，那么就不用帶單位了。

數(shù)字值用于描述元素的各種長(zhǎng)度（在 CSS 里，“長(zhǎng)度”的含義比較廣，還包括高度、寬度、粗細(xì)，等等）。數(shù)字值主要分兩類：絕對(duì)值和相對(duì)值。

2.1 絕對(duì)值

絕對(duì)值描述的是一個(gè) 真實(shí)的長(zhǎng)度（比如， 6 英寸），而相對(duì)值則是 相對(duì)于其他基準(zhǔn)的描述 （比如“是某某的兩倍長(zhǎng)”）。

2.2 相對(duì)值

em 表示一種字體中字母 M 的寬度，因此它的具體大小取決于你使用的字體。

ex 表示給定字體中字母 x 的高度（小寫(xiě)字母 x 代表一種字體的字母中間部分的高度，不包括字母上、下突出的部分——如 d 和 p 上下都出頭兒）。

百分比非常適合設(shè)定被包含元素的寬度，此時(shí)的百分比就是相對(duì)于寬度而言的。把 HTML 結(jié)構(gòu)元素的寬度設(shè)定為 body 寬度的百分比，就是流式設(shè)計(jì)的關(guān)鍵所在。這種布局設(shè)計(jì)可以隨著用戶調(diào)整瀏覽器窗口大小而成比例地伸縮。

3.顏色值

顏色值可以用幾種不同的格式來(lái)寫(xiě)，包括 RGB（ Red, Green, Blue，紅綠藍(lán)）、
HSL（ Hue, Saturation, Luminance，色相，飽和度，亮度）和 十六進(jìn)制值（例如 color:#336699）

3.1 顏色名

W3C 定義了 16 個(gè)顏色關(guān)鍵字：

aqua（淺綠色）、 black（黑色）、 blue（藍(lán)色）、  fuchsia（紫紅色）、 
gray（灰色）、 green（綠色）、 lime（黃綠色）、  maroon（褐紅色）、 
navy（深藍(lán)色）、 olive（茶青色 ）、 purple（紫色）、 red（紅色）、 
silver（銀色）、 teal（青色）、white（白色）和 yellow（黃色）。

  提示：一般來(lái)說(shuō)，顏色關(guān)鍵字最常用于指定白色和黑色。

3.2 十六進(jìn)制顏色

格式：#rrggbb
示例：#ff8800
說(shuō)明：

這個(gè)6位數(shù)的前兩位定義紅色（red），中間兩位定義綠色（green），后兩位定義 藍(lán)色（blue）。

十六進(jìn)制以16為基數(shù)，使用數(shù)字 0-9 和字母 a-f，共16個(gè)值。其中，a-f 代表10到15。由于每種顏色用兩位十六進(jìn)制值表示，因此該顏色就有 256（ 16× 16）種可能的值，結(jié)果就是 16777216（256× 256× 256）種組合，也就是可以表示那么多種顏色。

范圍是16進(jìn)制的 00-ff，00 表示沒(méi)有顏色，ff 表示顏色最強(qiáng)。所以 #000000 表示黑色，#ffffff 表示白色，同樣 #ff0000 表示純紅色，#00ff00 表示純綠色，#0000ff 表示純藍(lán)色。

如果三對(duì)值中的每一對(duì)是兩個(gè)相同的數(shù)字，也可以使用簡(jiǎn)寫(xiě)形式：#rgb
示例：#ff3322 = #f32（深紅色）、#ffffff = #fff（白色）

  提示：在設(shè)定陰影的時(shí)候，簡(jiǎn)寫(xiě)方式可以省不少勁兒。

3.3 RGB顏色值

格式：rgb(r, g, b)
示例：rgb(0, 255, 0)
說(shuō)明：

每種顏色都可以用一個(gè) 0 到 255（包含）之間的值指定。

與十六進(jìn)制 RGB 值一樣，只不過(guò)使用的是 十進(jìn)制 的數(shù)值。因?yàn)?strong>每種顏色都有256 種可能，所以它能表示的顏色數(shù)量與十六進(jìn)制格式的一樣。

3.4 RGB百分比值

格式：rgb(r%, g%, b%)
說(shuō)明：可以接受的值是 0%到 100%。雖然以這種方法只能表示區(qū)區(qū) 一百萬(wàn)（ 100 × 100 ×100）種顏色，但對(duì)我們絕大數(shù)人來(lái)說(shuō)，也已經(jīng)足夠了。

3.5 HSL

格式：HSL (色相, 飽和度%, 亮度%)
說(shuō)明：

HSL 比我們見(jiàn)過(guò)的各種 RGB 方式更直觀，因?yàn)槭褂盟?strong>更容易寫(xiě)出和看懂顏色。

HSL 顏色中的第一個(gè)值表示色相，也就是一個(gè)實(shí)際的顏色，比如紅色和綠色。所有
顏色圍繞色相環(huán)（也叫色輪）一周，而 色相值以圓周上的度數(shù)表示。

彩虹七色在色輪中大致的色相值：

紅：0

橙：35

黃：60

綠：125

藍(lán)：230

靛：280

紫：305

飽和度 設(shè)定有多少顏色，灰色的飽和度低，而強(qiáng)烈的色彩飽和度高。亮度設(shè)定顏色的明暗， 0%就是黑色， 100%就是白色。

如果把上面七彩虹的色相值都記住，或者就放在手邊，那么你會(huì)發(fā)現(xiàn)想寫(xiě)出什么顏色都不在話下。 RGB 和十六進(jìn)制顏色值，都要求你事先在大腦里先混合顏色，而 HSL則只有一個(gè)表示顏色的值。把飽和度和亮度都設(shè)定為 50%，就可以輕松調(diào)制出你想要的任何顏色來(lái)。

3.6 Alpha通道

RGB 和 HSL 都支持 Alpha 通道，用于設(shè)置顏色的不透明度。相應(yīng)的格式分別叫 RGBA 和 HSLA。其中，兩種格式中的 A（ alpha）值可以是 1（完全不透明）也可以是 0（完全透明），或者介于 1 和 0 之間的小數(shù)值。

參考資料

CSS設(shè)計(jì)指南