一、背景:
CSS 允許應用純色作為背景,也允許使用背景影像建立相當複雜的效果。
1、背景色
可以使用 background-color 屬性為元素設定背景色。這個屬性接受任何合法的顏色值。
例如:
p {background-color: gray;}
2、背景影像
要把影像放入背景,需要使用 background-image 屬性。background-image 屬性的預設值是 none,表示背景上沒有放置任何影像。如果需要設定一個背景影像,必須為這個屬性設定一個 URL 值:
body {background-image: url(/i/eg_bg_04.gif);}
3、背景影像重複
如果需要在頁面上對背景影像進行平鋪,可以使用 background-repeat 屬性。
屬性值 repeat 導致影像在水平垂直方向上都平鋪,就像以往背景影像的通常做法一樣。repeat-x 和 repeat-y 分別導致影像只在水平或垂直方向上重複,no-repeat 則不允許影像在任何方向上平鋪。
預設地,背景影像將從一個元素的左上角開始。請看下面的例子:
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
4、背景影像定位
可以利用 background-position 屬性改變影像在背景中的位置。
下面的例子在 body 元素中將一個背景影像居中放置:
body
{
background-image:url(`/i/eg_bg_03.gif`);
background-repeat:no-repeat;
background-position:center;
}
為 background-position 屬性提供值有很多方法。首先,可以使用一些關鍵字:top、bottom、left、right 和 center。通常,這些關鍵字會成對出現,不過也不總是這樣。還可以使用長度值,如 100px 或 5cm,最後也可以使用百分數值。不同型別的值對於背景影像的放置稍有差異。
5、背景影像關聯
如果文件比較長,那麼當文件向下滾動時,背景影像也會隨之滾動。當文件滾動到超過影像的位置時,影像就會消失。您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性,可以宣告影像相對於可視區是固定的(fixed),因此不會受到滾動的影響:
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
二、文字CSS 文字屬性可定義文字的外觀。
1、縮排文字(text-indent )
p {text-indent: -5em;}
2、水平對齊(text-align)
h1{text-align:center;}
3、字間隔(word-spacing)
p {word-spacing: 30px;}
4、字母間隔(letter-spacing)
h4 {letter-spacing: 20px}
5、字元轉換(text-transform)
屬性值:
- none
- uppercase
- lowercase
- capitalize
h1 {text-transform: uppercase}
6、文字裝飾(text-decoration)
屬性值:
- none
- underline
- overline
- line-through
- blink
a {text-decoration: none;}
7、文字方向(direction)
【注:對於行內元素,只有當 unicode-bidi 屬性設定為 embed 或 bidi-override 時才會應用 direction 屬性。】
屬性值:
- ltr
- rtl
p {word-direction : rtl;}
8、處理空白符(white-space)
white-space 屬性會影響到使用者代理對源文件中的空格、換行和 tab 字元的處理。詳:
值 | 空白符 | 換行符 | 自動換行 |
pre-line | 合併 | 保留 | 允許 |
normal | 合併 | 忽略 | 允許 |
nowrap | 合併 | 忽略 | 不允許 |
pre | 保留 | 保留 | 不允許 |
pre-wrap | 保留 | 保留 | 允許 |
三、字型
1、設定字型系列。(font-family)
h1 {font-family: Georgia;}
2、設定字型的尺寸。(font-size)
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
3、設定字型風格。(font-style)
屬性值:
- normal : 文字正常顯示
- italic : 文字斜體顯示
- oblique : 文字傾斜顯示
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
4、以小型大寫字型或者正常字型顯示文字。(font-variant)
p {font-variant:small-caps;}
5、設定字型的粗細。(font-weight)
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
四、列表
1、將圖象設定為列表項標誌。(list-style-image)
ul li {list-style-image : url(xxx.gif)}
2、設定列表中列表項標誌的位置。(list-style-position)
屬性值:
- inside:列表專案標記放置在文字以內,且環繞文字根據標記對齊。
- outside:預設值。保持標記位於文字的左側。列表專案標記放置在文字以外,且環繞文字不根據標記對齊。
- inherit:規定應該從父元素繼承 list-style-position 屬性的值。
ul{list-style-position:inside;}
3、設定列表項標誌的型別。(list-style-type)
ul {list-style-type : square}
五、表格
1、設定是否把表格邊框合併為單一的邊框。(border-collapse)
屬性值:
- separate:預設值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
- collapse:如果可能,邊框會合併為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
- inherit:規定應該從父元素繼承 border-collapse 屬性的值。
table{border-collapse:collapse;}
2、設定分隔單元格邊框的距離。(border-spacing)
table{border-spacing:10px 50px;}
3、設定表格標題的位置。(caption-side)
屬性值:
- top:預設值。把表格標題定位在表格之上。
- bottom:把表格標題定位在表格之下。
- inherit:規定應該從父元素繼承 caption-side 屬性的值。
caption{caption-side:bottom;}
4、設定是否顯示錶格中的空單元格。(empty-cells)
屬性值:
- hide:不在空單元格周圍繪製邊框。
- show:在空單元格周圍繪製邊框。預設。
- inherit:規定應該從父元素繼承 empty-cells 屬性的值。
table{empty-cells:hide;}
5、設定顯示單元、行和列的演算法。(table-layout)
屬性值:
- automatic:預設。列寬度由單元格內容設定。
- fixed:列寬由表格寬度和列寬度設定。
- inherit:規定應該從父元素繼承 table-layout 屬性的值。
table{table-layout:fixed;}
六、輪廓
輪廓(outline)是繪製於元素周圍的邊框線,可起到突出元素的作用。
CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
1、設定輪廓的顏色。(outline-color)
p{outline-color:#00ff00;}
2、設定輪廓的樣式。(outline-style)
屬性值:
- none:預設。定義無輪廓。
- dotted:定義點狀的輪廓。
- dashed:定義虛線輪廓。
- solid:定義實線輪廓。
- double:定義雙線輪廓。雙線的寬度等同於 outline-width 的值。
- groove:定義 3D 凹槽輪廓。此效果取決於 outline-color 值。
- ridge:定義 3D 凸槽輪廓。此效果取決於 outline-color 值。
- inset:定義 3D 凹邊輪廓。此效果取決於 outline-color 值。
- outset:定義 3D 凸邊輪廓。此效果取決於 outline-color 值。
- inherit:規定應該從父元素繼承輪廓樣式的設定。
p{outline-style:dotted;}
3、設定輪廓的寬度。(outline-width)
p{outline-width:5px;}