/******************************************************/
3.顏色值
顏色值可以用幾種不同的格式來寫,包括 RGB( Red, Green, Blue,紅綠藍)、
HSL( Hue, Saturation, Luminance,色相,飽和度,亮度)和 十六進制值(例如
color:#336699
)
3.1 顏色名
W3C 定義了 16 個顏色關鍵字:
aqua(淺綠色)、 black(黑色)、 blue(藍色)、 fuchsia(紫紅色)、
gray(灰色)、 green(綠色)、 lime(黃綠色)、 maroon(褐紅色)、
navy(深藍色)、 olive(茶青色 )、 purple(紫色)、 red(紅色)、
silver(銀色)、 teal(青色)、white(白色)和 yellow(黃色)。
提示:一般來說,顏色關鍵字最常用於指定白色和黑色。
3.2 十六進制顏色
格式:#rrggbb
示例:#ff8800
說明:
-
這個6位數的前兩位定義 紅色(red),中間兩位定義 綠色(green),後兩位定義 藍色(blue)。
-
十六進制以16爲基數,使用數字
0-9
和字母a-f
,共16個值。其中,a-f
代表10到15。由於每種顏色用兩位十六進制值表示,因此該顏色就有256
( 16× 16)種可能的值,結果就是16777216
(256× 256× 256)種組合,也就是可以表示那麼多種顏色。 -
範圍是16進制的
00-ff
,00
表示沒有顏色,ff
表示顏色最強。所以#000000
表示黑色,#ffffff
表示白色,同樣#ff0000
表示純紅色,#00ff00
表示純綠色,#0000ff
表示純藍色。 -
如果三對值中的每一對是兩個相同的數字,也可以使用簡寫形式:
#rgb
示例:#ff3322
=#f32
(深紅色)、#ffffff
=#fff
(白色)
提示:在設定陰影的時候,簡寫方式可以省不少勁兒。
3.3 RGB顏色值
格式:rgb(r, g, b)
示例:rgb(0, 255, 0)
說明:
-
每種顏色都可以用一個 0 到 255(包含)之間的值指定。
-
與十六進制 RGB 值一樣,只不過使用的是 十進制 的數值。因爲每種顏色都有
256
種可能,所以它能表示的顏色數量與十六進制格式的一樣。
3.4 RGB百分比值
格式:rgb(r%, g%, b%)
說明:可以接受的值是 0%到 100%。雖然以這種方法只能表示區區 一百萬( 100 × 100 ×100)種顏色,但對我們絕大數人來說,也已經足夠了。
3.5 HSL
格式:HSL (色相, 飽和度%, 亮度%)
說明:
-
HSL 比我們見過的各種 RGB 方式更直觀,因爲使用它更容易寫出和看懂顏色。
-
HSL 顏色中的第一個值表示色相,也就是一個實際的顏色,比如紅色和綠色。所有
顏色圍繞色相環(也叫 色輪)一週,而 色相值以圓周上的度數表示。
-
彩虹七色在色輪中大致的色相值:
- 紅:0
- 橙:35
- 黃:60
- 綠:125
- 藍:230
- 靛:280
- 紫:305
-
飽和度 設定有多少顏色,灰色的飽和度低,而強烈的色彩飽和度高。亮度 設定顏色的明暗, 0%就是黑色, 100%就是白色。
-
如果把上面七彩虹的色相值都記住,或者就放在手邊,那麼你會發現想寫出什麼顏色都不在話下。 RGB 和十六進制顏色值,都要求你事先在大腦裏先混合顏色,而 HSL則只有一個表示顏色的值。把飽和度和亮度都設定爲 50%,就可以輕鬆調製出你想要的任何顏色來。
3.6 Alpha通道
RGB 和 HSL 都支持 Alpha 通道,用於設置顏色的不透明度。相應的格式分別叫 RGBA
和
HSLA
。其中,兩種格式中的 A( alpha)值可以是 1(完全不透明)也可以是 0(完全透明),或者介於 1 和 0 之間的小數值。
1.盒模型
盒模型,就是 瀏覽器爲頁面中的每個 HTML 元素生成的矩形盒子。
這些盒子們都要按照 可見版式模型(visual formatting model)在頁面上排布。可見的頁面版式主要由三個屬性控制: position 屬性、 display 屬性和 float 屬性。其中,position 屬性控制頁面上元素間的位置關係, display 屬性控制元素是堆疊、並排,還是根本不在頁面上出現, float 屬性提供控制的方式,以便把元素組成成多欄佈局。
盒子屬性分三組:
- 邊框(border)。可以設置邊框的寬窄、樣式和顏色。
- 內邊距(padding)。可以設置盒子內容區與邊框的間距。
- 外邊距(margin)。可以設置盒子與相鄰元素的間距。
可以這麼理解盒子屬性:外邊距是邊框向 外推 其他元素,而內邊距是從邊框向 內推 元素的內容。
CSS 爲邊框、內邊距和外邊距分別規定了簡寫屬性。在每個簡寫聲明中,屬性值的順序都是上、右、下、左(順時針旋轉)。
示例:margin:5px 10px 12px 8px;
注意:4 個值之間有空格,但不能是其他分隔符(比如逗號之類的)。甚至,你都不用把 4 值
全都寫出來——如果哪個值沒有寫,那就使用對邊的值。
示例:margin:12px 10px 6px;
說明:缺少最後一個值(左邊),使用對邊(右邊)的值(10px
),即:margin:12px 10px 6px 10px
。
示例:margin:12px 10px;
說明:缺少最後兩個值(下邊和左邊),使用上邊(12px
)和右邊(10px
),即:margin:12px 10px 12px 10px;
示例:margin:12px;
說明:只寫一個值,那麼4個邊都去這個值。即:margin:12px 12px 12px 12px;
1.1 盒子邊框
邊框(border)有3個相關屬性:
-
寬度
可以使用thin
、medium
和thick
等文本值,也可以使用
除百分比和負值之外的任何絕對值。 -
樣式
有none
、hidden
、dotted
、dashed
、solid
、double
、groove
、ridge
、inset
和outset
等文本值。 -
顏色
可以使用任意顏色值,包括RGB
、HSL
、十六進制顏色值
和顏色關鍵字
。
1.2 盒子內邊距
內邊距(padding)用來設置盒子內容區與邊框的間距。在沒有設定內邊距的情況下,內容會緊挨着邊框。
1.3 盒子外邊距
外邊距(margin)用來設置盒子與相鄰元素的間距。
推薦使用這條規則作爲樣式表的第一條規則:
* {margin:0; padding:0;}
說明:這條規則把所有元素默認的外邊距和內邊距都設定爲零。把這條規則放到樣式表裏後,所有默認的外邊距和內邊距都會消失。然後,你可以爲那些真正需要外邊距的元素再添加外邊距。不同瀏覽器默認的內邊距和外邊距也不一樣,特別是對錶單和列表等複合元素。在這種情況下,用這條規則 中和 默認值,然後再根據需要添加,則會在各瀏覽器上獲得一致的效果。
1.4 疊加外邊距
垂直方向上的外邊距會疊加,這可是你必須得知道的一件事。
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
在CSS中,兩個或多個毗鄰(父子元素或兄弟元素)的普通流中的塊元素垂直方向上的 margin 會發生疊加。這種方式形成的外邊距即可稱爲外邊距疊加(collapsed margin)。
1.5 外邊距的單位
根據經驗,爲文本元素設置外邊距時通常需要混合使用不同的單位。比如說,一個段落的左、右外邊距可以使用像素,以便該段文本始終與包含元素邊界保持固定間距,不受字號變大或變小的影響。而對於上、下外邊距,以 em 爲單位則可以讓段間距隨字號變化而相應增大或縮小。
示例:p {font-size:1em; margin:.75em 30px;}
2.浮動與清除
浮動和清除是用來組織頁面佈局的一柄利劍,這柄劍的劍刃就是
float
和clear
屬性。
2.1 浮動
浮動,可以想象把元素從常規文檔流中拿出來。浮動元素脫離了常規文檔流之後,原來緊跟其後的元素就會在空間允許的情況下,向上提升到與浮動元素平起平坐。
如果浮動元素後面有兩個段落,而你只想讓第一段與浮動元素並列(就算旁邊還能放第二段,也不想讓它上來),可以使用 clear
屬性來
清除 第二段,然後它就會乖乖地呆在浮動元素下面了。
浮動 最常見的作用:
- 實現傳統出版物上那種文字繞排圖片的效果
- 讓原來上下堆疊的塊級元素,變成左右並列,從而實現佈局中的分欄。
2.2 圍住浮動元素的三種方法
注意:三種方法各有利弊,看情況使用。
-
方法一:爲父元素添加
overflow:hidden
-
方法二:同時浮動元素
-
方法三:添加非浮動的清除元素
3.定位
CSS 佈局的核心是 position
屬性,對元素盒子應用這個屬性,可以相對於它在常規文檔流中的位置重新定位。 position
屬性有 4 個值:
static
、 relative
、 absolute
、fixed
,默認值爲
static
。
3.1 靜態定位
static
在靜態定位的情況下,每個元素都處於常規文檔流中。要突破這種佈局元素的方式,就必須把盒子的 position
屬性改爲其它三個值。
3.2 相對定位
relative
相對定位,相對的是它原來在文檔流中的位置(或者默認位置)。設置之後,可以使用 top
、right
、bottom
和
left
屬性來改變它的位置。多數情況下,只用 top
和 left
就可以實現我們想要的效果。
使用相對定位的關鍵就是要考慮到元素原來的空間。因爲使用了相對定位的元素只是相對於原始位置挪動了一下,頁面沒有任何變化,即元素原來佔據的空間沒有動,其他元素也沒動。
3.3 絕對定位
absolute
絕對定位會把元素徹底從文檔流中拿出來,然後相對於其他元素(默認是定位上下文 body
)定位。同樣可以通過
top
和 left
設定偏移值來決定位置。
3.4 固定定位
fixed
從完全移出文檔流的角度說,固定定位與絕對定位類似。但不同之處在於,固定定位元素的定位上下文是視口(瀏覽器窗口或手持設備的屏幕),因此它不會隨頁面滾動而移動。
提示:固定定位並不常用,最常見的情況是用它創建不隨頁面滾動而移動的導航元素。
3.5 定位上下文
定位上下文,指的是定位元素所相對偏移的元素。
事實上,只要把元素的外邊距和內邊距設定好,多數情況下只用靜態定位就足以實現頁面佈局了。很多剛開始接觸 CSS 的初學者都會錯誤地設定
position
屬性,最終才發現從文檔流中挪出來的這些元素一點也不好控制。因此,除非真需要那麼做,否則 不要輕易修改元素默認的position
屬性。
4.顯示屬性
所有元素都有 position
屬性,也有 display
屬性。
display
屬性有三個值:block
、inline
和 none
。
- 塊級元素,比如段落,標題,列表等,在瀏覽器上下堆疊顯示。
- 行內元素,比如
a
、span
、img
,在瀏覽器中左右並排顯示,只有前一行沒有空間時纔會顯示到下一行。
把塊級元素變成行內元素(或者相反):
/*默認爲 block*/
p {display:inline;}
/*默認爲 inline*/
a {display:block;}
把元素的 display
設置爲 none
,則該元素及所有包含在其中的元素,都不會在頁面顯示,它們原先佔據的空間也不會被回收,就好像相關標記根本不存在一樣。
與此相對的元素是 visibility
屬性,屬性值爲:visible
(默認值)和 hidden
。如果設置爲
hidden
,元素會被隱藏,但其佔據的頁面空間會被保留。