css 功能小實例

css應用實例

來自css的70個實例

目錄： ˙01.css背景 ˙02.文本控制 ˙03.css字體控制 ˙04.css邊框設置 ˙05.css列表樣式 ˙06.css表格應用 ˙07.輪廓展現 ˙08.元素尺寸控制 ˙09.對齊方式 ˙10.css定位 ˙11.css分類屬性 ˙12.12 ˙13.13

1.css背景

---

　　

1.1.設置元素背景顏色
　　爲元素設置背景顏色

<style type="text/css">
    body {background-color: black}
    h1 {background-color: #E3E3D2}
    p {background-color: rgb(227,227,178)}
</style>

1.2.設置文本背景色
　　爲文本中部份內容設定背景顏色

<style type="text/css">
    span.caution{background-color:yellow}
</style>
......
<p>
    <span class="highlight">使用說明：</span> 該產品屬於
</p>

1.3.以圖像做爲背景

  默認跟文本同樣，做爲網頁的內容，並且自動重疊。隨着滾動條拖動而（象文字內容同樣）移動。

<style type="text/css">
    body {background-p_w_picpath:url(back.png);}
</style>

1.4.圖像的顯示效果
1.4.1.重疊樣式

　　默認效果

background-repeat: repeat;

1.4.2.豎直重疊樣式

background-repeat: repeat-y;

1.4.3.水平重疊樣式

background-repeat: repeat-x;

1.4.4.不重疊

background-repeat: no-repeat;

1.4.5.設置背景圖像（靜止效果）
　　背景不會隨着滾動條拖動而發生移動，並且背景不須要重疊

  background-repeat:no-repeat;
  background-p_w_upload:fixed;

　　爲背景圖片設定位置

background-repeat: no-repeat;
background-p_w_upload:fixed;
background-position: 55px 370px;

1.4.6.一步設置背景屬性

background:  url(1.png) no-repeat fixed center #13e5d0;

2.css文本控制

---

2.1.文本顏色

h1{color: blue;}
h2{color: #03F2EE;}

2.2.字符間距

h1 {letter-spacing: -3px;}
h2 {letter-spacing: 0px;}

　　英文單詞間距

p {word-spacing: 20px;}

2.3.行間距

line-height: 3;
line-height: 3px;
line-height: 30%;

2.4.文本對齊

.mainwebfont h1{text-align: center;}
.mainwebfont p{text-align: left;}
.mainwebfont h3{text-align: right;}

2.5.文本修飾

　　去掉連接的下劃線

a {text-decoration: none;}

2.6.首行縮進

　　段落首行縮進3箇中文字符

p {text-indent: 3em;}

2.7.英文字母

　　統一顯示大寫字母、小寫字母、首字母大寫

  p.up {text-transform: uppercase;}
  p.lo {text-transform: lowercase;}
  p.ca {text-transform: capitalize;}

3.css字體控制

---

3.1.設置文本字體

p {font-family: 華文彩雲;}
p {font-family: 華文細黑;}
p {font-family: 宋體;}
p {font-family: 仿宋;}
p {font-family: 隸書;}

3.2.字體大小

h2 {font-size: 200%;}
p {font-size: 59px;}

3.3.字體風格

　　斜體字

p {font-style: italic;}

3.4.字體加粗

p {font-weight: bold;}

4.css邊框設置

---

4.1.邊框樣式
　　屬性border-style控制邊框樣式，默認無邊框（none）

　　none：無邊框、dotted：點狀邊框、dashed：虛線邊框、solid：實線邊框、……

p.dot {border-style: dotted;}

　　邊框寬度

border-width: 5px;

　　邊框顏色

border-color: black;

4.2.下邊框

　　只顯示下邊框，點狀邊框

border-bottom-style: dotted;

　　邊框寬度，thin表示細，thick表示粗點

border-bottom-width: 5px;
border-bottom-width: thin;

　　一行搞定下邊框

border-bottom:thin dotted black;

5.css列表樣式

---

　　屬性list-style-type設置標誌類型、list-style-p_w_picpath把圖像設爲標誌

5.1.自帶標記樣式

　　無序列表標記，disc：默認，實心小圓點、circle：空心圓、square：實心方塊、decimal：數字

　　有序列表標記，disc：默認，實心小圓點、circle：空心圓、square：實心方塊、decimal：數字

ul.circle {list-style-type: circle;}

5.2.圖像做爲樣式標記

ul {list-style-p_w_picpath: url('3.png');}

6.css表格應用

---

　　屬性介紹：border-collapse、border-spacing、caption-side、empty-cells、table-layout。分別表明：是否把表格邊框合併爲單一的邊框、 分割單元格邊框的距離、 標題的位置、 顯示爲空單元格、 。

　　最基本的就是前景色、背景色

th{background-color: red; color: yellow;}

6.1.邊框線

　　表格邊框爲紅色實線（寬度、類型、顏色）

table,th,td{border: 1px solid blue;}

　　單一邊框

table {border-collapse: collapse;}

6.2.表格大小

　　表格寬度70%、標題高度、數據行高度

table{width: 70%;}
th{height: 35px;}
td{height: 22px;}text-align:right;

6.3.表格中文本對齊

　　右對齊

td{text-align: right; vertical-align: bottom;}

6.4.表格中文本對齊

　　設置前景色、背景色

td {background-color: red; color: yellow;}

6.5.設置表格邊框之間的空白

border-spacing: 7px;

6.6.設置表格標題的位置

　　默認在上邊

<table border="1">
    <caption>標題</caption>
    <tr><td>單行</td></tr>
</table>

caption{caption-side:bottom;}

6.7.表格佈局

　　屬性tablelayout用來定義佈局格式，就是表格會不會隨着內容多少自動調整。取值automatic、fixed，表示列寬度有單元格內容決定、由表格寬度、列寬度決定。

7.輪廓展現

---

　　屬性outline定義元素的輪廓線格式

p{outline: #50EED0 dotted thick;}

　　分別設置時，屬性分別表示：outline-color、outline-style、outline-width。

8.尺寸表示

---

　　既能夠控制元素的高度、寬度，一樣也能夠設定行間距。

　　指定寬度用width，指定高度用height。

img .one{height: 120px;}
img .two{height: 50%;}
img .three{height: auto;}

　　一樣規定段落寬度

p .one{width: 120px;}
p .two{width: 50%;}
p .three{width: auto;}

　　設定行間距

p .da{line-height: 30px;}
p .xiao {line-height: 20px;}

9.對齊

---

9.1.對齊塊元素內容

　　塊元素有：段落標記（<p>）、標題標記（<h1><h2>...）、切塊標記（<div>）。

　　文本內容對齊能夠由屬性text-align定義。

h1 {text-align: center;}

9.2.對齊塊元素

　　使用margin屬性把左右設置爲auto，達到對齊快元素內容的目的。

div {width: 70%; margin: auto;}

9.3.對齊元素

　　使用絕對定位元素

div {position: absolute; left: 0; width: 120px;}

10.定位

---

　　定位的意思，用來調整「元素框」須要出現的位置。CSS有三種基本的定位機制：文檔流、浮動、絕對定位。默認狀況下都是普通流，元素的位置由html中的位置依次排列。

　　屬性position的值：static、relative、absolute、fixed。分別表示：文檔流、元素框偏移某個距離、脫離文檔流從新定位、。

10.1.相對定位

　　相對正常位置，移動了一些。

h2{position: relative; left: -35px}

10.2.絕對定位

　　移動默認位置的標題

h2{position: absolute; left:100px; top:150px;}

10.3.固定位置

　　移動默認位置的標題

h2{position: fixed; top: 70px; right: 35px;}

11.分類屬性

---

11.1.display

　　定義之內聯元素顯示、塊元素顯示

p {display: inline;}
span {display: block;}

11.2.float

　　能夠把一幅圖像浮動於段落一側

img{float: right;}

　　清除元素側面的浮動元素

clear:right;

12.僞類

---

暫略




13.僞元素

---

暫略