css 功能小實例

css應用實例
css

來自css的70個實例
html

目錄:web

˙01.css背景
api

˙02.文本控制
ide

˙03.css字體控制
佈局

˙04.css邊框設置
字體

˙05.css列表樣式
url

˙06.css表格應用
spa

˙07.輪廓展現
orm

˙08.元素尺寸控制

˙09.對齊方式

˙10.css定位

˙11.css分類屬性

˙12.12

˙13.13


1.css背景


  wKioL1jSDFfjCKuCAACe2BWW0CI450.jpg


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.僞元素


暫略




wKiom1jJ_jihZXFhAABm6i-XhL0903.jpg

相關文章
相關標籤/搜索