<ul>
<li>CSS背景</li>
<li>CSS字體</li>
<li>CSS鏈接</li>
<li>CSS 列表</li>
<li>CSS 表格</li>
<li>CSS輪廓</li>
</ul>
CSS背景
1、背景色
background-color 屬性
p {background-color: gray; padding: 20px;}
background-color 不能繼承，其默認值是 transparent。transparent 有“透明”之意。也就是說，如果一個元素沒有指定背景色，那么背景就是透明的，這樣其祖先元素的背景才能可見。
2、背景圖像
要把圖像放入背景，需要使用 background-image 屬性。background-image 屬性的默認值是 none，表示背景上沒有放置任何圖像。
3、背景重復
background-repeat 屬性
- repeat 水平豎直都平鋪
- repeat-x 水平
- repeat-y 豎直
- no-repeat 不允許任何方向上平鋪
4、背景定位
background-position 屬性
- center、top、bottom、right、left及兩兩組合
- 百分數 background-position:66% 33%;
- 長度值 background-position:50px 100px;
5、背景關聯
如果文檔比較長，那么當文檔向下滾動時，背景圖像也會隨之滾動。
background-attachment 屬性的默認值是 scroll，也就是說，在默認的情況下，背景會隨文檔滾動。
background-attachment:fixed 防止這種滾動
示例：
所有背景屬性在一個聲明之中
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
CSS文本
1、text-indent 縮進文本
這個屬性最常見的用途是將段落的首行縮進
p{text-indent: 5em;}
text-indent 還可以設置為負值。(如果對段落設置負值，首行的某些文本可能會超出瀏覽器窗口的左邊界,建議針對負縮進再設置一個外邊距或一些內邊距：)
p{text-indent: -5em; padding-left: 5em;}
2、水平對齊
text-align
left、right、center、justify（兩端對齊）、inherit（從父元素集成text-align屬性的值）
3、字間隔
word-spacing
默認值：normal，與設置為0是一樣的
正直字間隔增加 負值 字間隔拉近
4、字母間隔
letter-spacing 字符與字符或字母之間的間隔。
5、字符轉換
text-transform 處理文本的大小寫
none 使用源文檔中的原有大小寫
uppercase 大寫
lowercase 小寫
capitalize 只對每個單詞的首字母大寫
6、文本裝飾
text-decoration
none
underline 對元素加下劃線
overline 在文本的頂端畫一個上劃線
line-through 在文本中間畫一個貫穿線
blink 讓文本閃爍
示例：
去掉超鏈接的下劃線
a{text-decoration: none;}
可以在一個規則中結合多種裝飾。如果希望所有超鏈接既有下劃線，又有上劃線
a:link a:visited {text-decoration: underline overline};
7、處理空白符
white-space
對源文檔中的空格、換行和 tab 字符進行處理
normal ：會合并所有的空白符，并忽略換行符
pre ： 瀏覽器不會合并空白符，也不會忽略換行符
nowrap ：防止元素中的文本換行，除非使用了一個 br 元素
pre-wrap ：保留空白符序列，但是文本行會正常地換行
pre-line ：合并空白符序列，但保留換行符。
8、為文本設置陰影
語法text-shadow: h-shadow v-shadow blur color:
h-shadow：水平陰影的位置。允許負值。
v-shadow：垂直陰影的位置。允許負值。
blur：模糊的距離。
color：陰影的顏色。
.h1{
text-shadow:2px 2px 8px #ff0000;
}
.h2{
text-shadow:2px 2px 4px #000000;
color:white;
}
.h3{
text-shadow:0 0 3px #ff0000;
}
| color | 設置文本顏色 |
|---|---|
| direction | 設置文本方向。 |
| line-height | 設置行高。 |
| letter-spacing | 設置字符間距。 |
| text-align | 對齊元素中的文本。 |
| text-decoration | 向文本添加修飾。 |
| text-indent | 縮進元素中文本的首行。 |
| text-shadow | 設置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。 |
| text-transform | 控制元素中的字母。 |
| unicode-bidi | 設置文本方向。 |
| white-space | 設置元素中空白的處理方式。 |
| word-spacing | 設置字間距。 |
CSS字體
在 CSS 中，有兩種不同類型的字體系列名稱：
- 通用字體系列 - 擁有相似外觀的字體系統組合（比如 "Serif" 或 "Monospace"）
- 特定字體系列 - 具體的字體系列（比如 "Times" 或 "Courier"）
除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：
- Serif 字體
- Sans-serif 字體
- Monospace 字體
- Cursive 字體
- Fantasy 字體
1、指定字體系列
如果用戶代理上沒有安裝 Georgia 字體，就只能使用用戶代理的默認字體來顯示 h1 元素。我們可以通過結合特定字體名和通用字體系列來解決這個問題
h1{font-family: Georgia,serif;}
2、字體風格
font-style
normal 正常顯示
italic 斜體
oblique 傾斜顯示
斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。
通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。
3、字體變形
font-variant
設定小型大寫字母
p {font-variant:small-caps;}
4、字體加粗
font-weight
bold : 粗體
lighter
100~900： 指定9級加粗度
5、字體大小
在所有瀏覽器中，可以顯示相同的文本大小，有效的方案是為 body 元素（父元素）以百分比設置默認的 font-size 值：
body {font-size:100%;}
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
6、文本與圖片垂直對齊方式
img.top{
vertical-align:text-top;
}
img.middle{
vertical-align:middle;
}
img.bottom{
vertical-align:text-bottom;
}
text-top 把元素的底端與父元素字體的頂端對齊
middle 把此元素放置在父元素的中部
text-bottom 把元素的底端與父元素字體的底端對齊
%使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
CSS鏈接
鏈接的四種狀態：
- a:link - 普通的、未被訪問的鏈接
- a:visited - 用戶已訪問的鏈接
- a:hover - 鼠標指針位于鏈接的上方
- a:active - 鏈接被點擊的時刻
當為鏈接的不同狀態設置樣式時，請按照以下次序規則：
a:hover 必須位于 a:link 和 a:visited 之后
a:active 必須位于 a:hover 之后
示例：
文本修飾
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
背景色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
向鏈接添加不同的樣式
```
<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:'微軟雅黑';}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>請把鼠標指針移動到下面的鏈接上，看看它們的樣式變化。</p>
<p><b><a class="one" href="/index.html" target="_blank">這個鏈接改變顏色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">這個鏈接改變字體尺寸</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">這個鏈接改變背景色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">這個鏈接改變字體</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">這個鏈接改變文本的裝飾</a></b></p>
</body>
</html>
```
創建連接框
<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="/index.html" target="_blank">W3School</a>
</body>
</html>
CSS 列表
ul {list-style-type : square}
ul li {list-style-image : url(xxx.gif)}
li {list-style : url(example.gif) square inside}
| 屬性 | 描述 |
|---|---|
| list-style | 簡寫屬性。用于把所有用于列表的屬性設置于一個聲明中。square 實心方塊circle 空心圓none 不顯示標記項 |
| list-style-image | 將圖象設置為列表項標志。 |
| list-style-position | 設置列表中列表項標志的位置。 |
| list-style-type | 設置列表項標志的類型。 |
| marker-offset |
CSS 表格
1、表格邊框
table, th, td{
border: 1px solid blue;
}
2、折疊邊框
border-collapse 屬性設置是否將表格邊框折疊為單一邊框：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
3、表格寬度和高度
table
{
width:100%;
}
th
{
height:50px;
}
4、表格文本對齊
text-align 屬性設置水平對齊方式，比如左對齊、右對齊或者居中：
td
{
text-align:right;
}
vertical-align 屬性設置垂直對齊方式，比如頂部對齊、底部對齊或居中對齊：
td
{
height:50px;
vertical-align:bottom;
}
5、表格內邊距
如需控制表格中內容與邊框的距離，請為 td 和 th 元素設置 padding 屬性：
td
{
padding:15px;
}
6、表格顏色
下面的例子設置邊框的顏色，以及 th 元素的文本和背景顏色：
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
CSS輪廓
| 屬性 | 描述 |
|---|---|
| outline | 在一個聲明中設置所有的輪廓屬性。 |
| outline-color | 設置輪廓的顏色。 |
| outline-style | 設置輪廓的樣式。 |
| outline-width | 設置輪廓的寬度。 |
p
{
border:red solid thin;
**outline:#00ff00 dotted thick;**
}
元素隱藏：
display：none 隱藏不占用空間
visibility：hidden 隱藏但是占用空間
visibility：visible 元素可見 默認值
