css應用實例
css
來自css的70個實例
html
目錄:web ˙01.css背景 ˙02.文本控制 ˙03.css字體控制 ˙04.css邊框設置 ˙05.css列表樣式 ˙06.css表格應用 ˙07.輪廓展現 ˙08.元素尺寸控制 ˙09.對齊方式 ˙10.css定位 ˙11.css分類屬性 ˙12.12 ˙13.13 |
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.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.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.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;
屬性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');}
屬性介紹: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,表示列寬度有單元格內容決定、由表格寬度、列寬度決定。
屬性outline定義元素的輪廓線格式
p{outline: #50EED0 dotted thick;}
分別設置時,屬性分別表示:outline-color、outline-style、outline-width。
既能夠控制元素的高度、寬度,一樣也能夠設定行間距。
指定寬度用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.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.1.display
定義之內聯元素顯示、塊元素顯示
p {display: inline;} span {display: block;}
11.2.float
能夠把一幅圖像浮動於段落一側
img{float: right;}
清除元素側面的浮動元素
clear:right;
暫略