前言
相信做過網(wǎng)頁的對(duì)Css都不是很陌生,它可以幫助我們重鑄網(wǎng)頁中很多絢麗的特效,尤其是現(xiàn)在Css已經(jīng)發(fā)展3.0版本,很多功能更是豐富多彩,讓我們的開發(fā)時(shí)間不僅大大縮短,而且還可以輕松做出許多華麗的特效,需要注意的是,Css相當(dāng)于Html的一個(gè)美化裝置,所以它必須依賴于Html才能發(fā)揮作用,那么今天我們就來深入了解下它吧。
一、Css的用法1.如何使用Css
要想使用Css來增加Html的美觀,有三種方式:
1).頭部文件中定義<style>
標(biāo)簽的Css屬性
</style>2).導(dǎo)入Css文件#創(chuàng)建一個(gè)Css文件,里面寫入樣式,然后導(dǎo)入
<link rel="stylesheet" type="text/Css" href="1.Css"> 3).直接在標(biāo)簽中定義<div style='width:120px;height:60px;background-color:red'></div>Css注釋
注:與Html 不同,它的注釋方式是:/* Css語句*/
2.Css的選擇器
為什么一開始要講選擇器了,因?yàn)槲覀円刖_修改的Html中的某個(gè)元素的屬性,就必須使用選擇器,它可以通過選擇器定位到某個(gè)元素上然后修改元素的樣式。
1).id和class選擇器
id選擇器必須現(xiàn)在標(biāo)簽中的定義,然后在在頭部標(biāo)簽的style標(biāo)簽中用“?!眮肀硎荆?/p>
<Html>
<head>
<title>Css應(yīng)用</title>
<style type="text/Css">
#dv{
background: red 更改div的背景顏色為紅色
}
</style>
</head>
<body>
<div id='dv'>fd</div> 定義一個(gè)id為dv的div
</body>
</Html>
class選擇器和id選擇器差不多,只不過class選擇器用”.“來表示:
<Html>
<head>
<title>Css應(yīng)用</title>
<style type="text/Css">
.dv{
background: red
}
</style>
</head>
<body>
<div class='dv'>fd</div>
</body>
</Html>2).元素選擇器
就是指直接聲明標(biāo)簽名為選擇器,然后更改樣式
<Html>
<head>
<title>Css應(yīng)用</title>
<style type="text/Css">
div{
background: red
}
</style>
</head>
<body>
<div>fd</div>
</body>
</Html>
或者聲明所有標(biāo)簽名為選擇器
<Html>
<head>
<title>Css應(yīng)用</title>
<style type="text/Css">
Html,head,body,div{
background: red
}
</style>
</head>
<body>
<div>fd</div>
</body>
</Html>
也可以使用元素加選擇器更加精確的定位到該元素
<Html>
<head>
<title>Css應(yīng)用</title>
<style type="text/Css">
div#er{
background: red
}
</style>
</head>
<body>
<div id='df'>fd</div>
<p>fhsjak</p>
<div id='er'>re</div>
</body>
</Html>3).后代選擇器
訪問一個(gè)元素內(nèi)的其它元素,可以是元素內(nèi)的任意元素
<Html>
<head>
<title>Css應(yīng)用</title>
<style type="text/Css">
div span{
background: red
}
</style>
</head>
<body>
<div>
<p>erzi
<span>sunzi</span>
</p>
</div>
</body>
</Html>4).子元素選擇器<Html>
<head>
<title>Css應(yīng)用</title>
<style type="text/Css">
div>p{
background: red
}
</style>
</head>
<body>
<div>
<p>erzi
<span>sunzi</span>
</p>
</div>
</body>
</Html>5).兄弟選擇器
位于元素的下一個(gè)元素,不在元素內(nèi)
<Html>
<head>
<title>Css應(yīng)用</title>
<style type="text/Css">
div+big{
background: red
}
</style>
</head>
<body>
<div>
<p>erzi
<span>sunzi</span>
</p>
</div>
<big>borther</big>
</body>
</Html>6).偽類選擇器
偽類選擇器可分為三類
1)).錨偽類,用于檢測(cè)鼠標(biāo)的懸停狀態(tài)。<Html>
<head>
<title>Css應(yīng)用</title>
<style type="text/Css">
a:link{ /* 未訪問的鏈接 */
background: red
}
a:visited{ /* 已訪問的鏈接 */
background: green
}
a:hover{ /* 鼠標(biāo)移動(dòng)到鏈接上 */
background: blue
}
a:active{ /* 選定的鏈接 */
background: yellow
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
</body>
</Html>
注:a:hover必須置于a:link和a:visited 之后,才是有效的。a:active必須被置于a:hover 之后,才是有效的。
2)). :first-child偽類
匹配第一個(gè)匹配到的標(biāo)簽
<Html>
<head>
<title>Css應(yīng)用</title>
<style type="text/Css">
p:first-child{ 匹配第一個(gè)p標(biāo)簽
background: red
}
div:first-child{ 匹配第一個(gè)div標(biāo)簽
background: blue
}
</style>
</head>
<body>
<div id='dv'>
<p class='fd'>fdaf
<div id='gfd'>grerg</div>
</p>
<div class='gf'>fsdjkfhkj
<a href="https://www.baidu.com">baidu</a>
</div>
</div>
</body>
</Html>3)). :lang偽類<Html>
<head>
<title>Css應(yīng)用</title>
<style type="text/Css">
q:lang(hw) 短引用利用偽類
{
quotes: "^" "^"
}
</style>
</head>
<body>
<div id='dv'>
<p>hw<q lang="hw">任性的90后boy</q></p> 必須要用短引用
</div>
</body>
</Html>
<Html>
<head>7).通用選擇器
將樣式應(yīng)用到所有的元素中
*{
background:red
}
3.Css樣式更改1).背景Background
背景可以設(shè)置很多,比如背景顏色,背景圖片,背景定位,背景重復(fù),背景關(guān)聯(lián),
1)).背景顏色<div style='background-color='red'></div>2)).背景圖片<div style='background-image: url('1.png');'></div>3)).背景定位<div style='background-position:center'></div>
center 中間
top 頂部
bottom 底部
right 右邊
left 左邊
還可以使用百分比來設(shè)置定位:
<div style='background-position:40% 50%'></div>
或者設(shè)置像素值:
<div style='background-position:100px 100px'></div>4)).背景顯示方式<div style=' background-repeat:repeat-x'></div>
repeat-x 水平平鋪圖片
repeat-y 垂直平鋪圖片
no-repeat 不平鋪圖片5)).背景滾動(dòng)條<div style='background-attachment:fixed'></div>
fixed 固定 不出現(xiàn)滾動(dòng)條
scroll 出現(xiàn)滾動(dòng)條
no 沒有滾動(dòng)條6)).背景大?。糳iv style='background-size:50px 50px'></div>7)).背景圖片的定位區(qū)域<div style='background-origin:content-box'></div>
content-box 文本內(nèi)容區(qū)域
padding-box 內(nèi)邊距區(qū)域
border-box 外邊框區(qū)域8)).背景裁剪區(qū)域<div style='background-clip:content-box'></div>
content-box 裁剪文本內(nèi)容區(qū)域
padding-box 裁剪內(nèi)邊距區(qū)域
border-box 裁剪外邊框區(qū)域
2).文本Content1)).首行縮進(jìn)文本<div style='text-indent:2em'></div> 可以設(shè)置負(fù)數(shù) 也可使用百分?jǐn)?shù) 像素2)).文本對(duì)齊方式<div style='text-align:center'></div>
left 左邊
right 右邊
center 中間
justify 兩端對(duì)齊3)).字間距<div style='word-spacing:2em'></div> 可以設(shè)置負(fù)數(shù) 也可使用百分?jǐn)?shù) 像素4)).文本間距<div style='letter-spacing:2em'></div> 可以設(shè)置負(fù)數(shù) 也可使用百分?jǐn)?shù) 像素5)).文本轉(zhuǎn)換<div style='text-transform:none'></div>
none 不轉(zhuǎn)換
uppercase 大寫
lowercase 小寫
capitalize 首字母大寫6)).文本修飾<div style='text-decoration:none'></div>
none 不修飾
underline 下劃線
overline 上劃線
line-through 中劃線
blink 文本閃爍7)).文本空白符的處理<div style='white-space:normal'></div>
pre-line 合并空白符序列,但是保留換行符
normal 忽略空白符
nowrap 文本不會(huì)換行,直到<br>出現(xiàn)才換行
pre 空白會(huì)被瀏覽器保留
pre-wrap 保留空白符序列,但是正常地進(jìn)行換行8)).文本方向<div style='direction:ltr'></div>
ltr 從左到右
rtl 從右到左9)).文本行高<div style='line-h(huán)eight:2'></div> 可使用百分?jǐn)?shù) 像素10)).文本陰影<div style='text-shadow:1px 1px 1px red'></div>11)).字符換行<div style='word-wrap:normal'></div>
normal 只在允許的斷字點(diǎn)換行
break-word 在長(zhǎng)單詞、URL地址內(nèi)部進(jìn)行換行12)).處理溢出文本<div style='text-overflow:ellipsis'></div>
clip 修剪文本
ellipsis 省略符號(hào)來代表被修剪的文本
string 使用給定的字符串來代表被修剪的文本
13)).文本輪廓<div style='text-outline:1px 1px red'></div>14)).文本換行<div style='text-wrap:none'></div>
normal 只在允許的換行點(diǎn)進(jìn)行換行。
none 不換行。元素?zé)o法容納的文本會(huì)溢出
unrestricted 在任意兩個(gè)字符間換行。
suppress 壓縮元素中的換行。瀏覽器只在行中沒有其它有效換行點(diǎn)時(shí)進(jìn)行換行。
3).字體設(shè)置Font1)).字體系列<div style='font-family: sans-serif normal'></div>
可用字體:
Serif
Sans-serif
Monospace
Cursive
Fantasy
Times
Courier2)).字體風(fēng)格<div style='font-style:normal'></div>
文本傾斜:
normal 文本正常顯示
italic 文本斜體顯示
oblique 文本傾斜顯示3)).字體變形<div style='font-variant:small-caps'></div>
normal 顯示標(biāo)準(zhǔn)字體。
small-caps 顯示小型大寫字母的字體。4)).字體加粗<div style='font-weight:normal'></div>
normal 標(biāo)準(zhǔn)的字符
bold 粗體字符
bolder 更粗的字符
lighter 更細(xì)的字符
也可以使用數(shù)字表示,范圍為100~9005)).字體大?。糳iv style='font-size:60px'></div>
smaller 變小
larger 變大
length 固定值
而且還支持百分比
4).邊框Border
首先說一下邊框風(fēng)格,它的風(fēng)格比較多,常用的一般是實(shí)線為主:
<div style='border-style:none'></div>
hidden 隱藏邊框
dotted 點(diǎn)狀邊框
dashed 虛線邊框
solid 實(shí)線邊框
double 雙線邊框
groove 3D凹槽邊框
ridge 3D壟狀邊框
inset 3D inset邊框
outset 3D outset邊框
邊框也有四面,所以也會(huì)有上下左右
所以有時(shí)候?yàn)榱烁_定位并修改樣式可以使用:
border-top-style 上邊框樣式
border-right-style 右邊框樣式
border-bottom-style 下邊框樣式
border-left-style 左邊框樣式
先定義邊框的寬度 風(fēng)格和顏色,然后定義邊框的其它屬性。
1)).邊框形狀<div style='border-radius:25px;'></div>2)).邊框陰影<div style='box-shadow:1px 2px 2px 2px red'></div>
參數(shù)含義:
邊框各個(gè)方向的大小和顏色3)).邊框圖片<div style='border-image:url(1.png) 30 30 10 round'></div>
參數(shù)含義:
邊框圖片的路徑
圖片邊框向內(nèi)偏移
圖片邊框的寬度
邊框圖像區(qū)域超出邊框的量
圖像邊框是否應(yīng)平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。
5).列表List1)).列表的類型<ul style='list-style-type:square'><li></li></ul>
none 無標(biāo)記
disc 實(shí)心圓
circle 空心圓
square 實(shí)心方塊
decimal 數(shù)字
none 無2)).列表的圖像<ul><li style='list-style-image:url(1.png)'></li></ul>3)).列表的位置<ul><li style='list-style-position:inside'></li></ul>
inside 列表項(xiàng)目標(biāo)記放置在文本以內(nèi)
outside 列表項(xiàng)目標(biāo)記放置在文本以外
這三者屬性可以放在list-style中統(tǒng)一設(shè)置。
6).表格Table1)).折疊表格邊框table
{
border-collapse:collapse
}
separate 邊框會(huì)被分開
collapse 邊框合并為一個(gè)單一的邊框2)).表格文本對(duì)齊設(shè)置水平對(duì)齊方式,比如左對(duì)齊、右對(duì)齊或者居中
td
{
text-align:right
}
設(shè)置垂直對(duì)齊方式,比如頂部對(duì)齊、底部對(duì)齊或居中對(duì)齊
td
{
vertical-align:bottom
}3)).單元格邊框間距table
{
border-spacing:10px 50px
}
可以使用像素,不允許負(fù)值。
如果定義一個(gè)length 參數(shù),那么定義的是水平和垂直間距
如果定義兩個(gè)length 參數(shù),那么第一個(gè)設(shè)置水平間距,而第二個(gè)設(shè)置垂直間距
4)).表格標(biāo)題的位置caption
{
caption-side:bottom
}
top 表格標(biāo)題定位在表格之上
bottom 表格標(biāo)題定位在表格之下5)).顯示表格中的空單元格table
{
empty-cells:hide
}
hide 不在空單元格周圍繪制邊框
show 在空單元格周圍繪制邊框6)).設(shè)置表格布局算法table
{
table-layout:fixed;
}
automatic 列寬度由單元格內(nèi)容設(shè)定
fixed 列寬由表格寬度和列寬度設(shè)定
7).輪廓 Outline1)).設(shè)置輪廓顏色div
{
outline-color:red
}2)).設(shè)置輪廓樣式div
{
outline-style:dotted
}
和邊框的風(fēng)格是一樣的3)).設(shè)置輪廓寬度div
{
outline-width:1px
}
8).框模型Border Model
從上圖可以得知,如果把一個(gè)網(wǎng)頁比作一個(gè)方框,那么border padding margin 所扮演的角色。
通過通用選擇器,可以設(shè)置所有的元素的border padding margin 初始值為0:
*{
margin:0;
padding:0;
border:0
}
所有的邊距都可以用em px 百分比來設(shè)置
它們都有四個(gè)值,你可以單個(gè)設(shè)置,也可以一起設(shè)置,順序?yàn)閠op-right-bottom-left
9).定位Position1)).相對(duì)定位relative
相對(duì)于其正常位置進(jìn)行定位
div{
position:relative
}2)).絕對(duì)定位absolute
相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位
div{
position:absolute
}3)).靜態(tài)定位static
沒有定位,元素出現(xiàn)在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)
div{
position:static
}4)).固定定位fixed
相對(duì)于瀏覽器窗口進(jìn)行定位
div{
position:fixed
}
10).浮動(dòng)Float
元素內(nèi)的內(nèi)容向某個(gè)方向移動(dòng)
div{
float:left
}
left 左浮動(dòng)
right 右浮動(dòng)
none 不浮動(dòng)
11).溢出Overflow
元素內(nèi)容超過了框架的大小
div{
overflow:scroll
}
visible 內(nèi)容不會(huì)被修剪,會(huì)呈現(xiàn)在元素框之外
hidden 內(nèi)容會(huì)被修剪,并且其余內(nèi)容是不可見的
scroll 內(nèi)容會(huì)被修剪,但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容
auto 如果內(nèi)容被修剪,則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容
12).裁剪Clip
對(duì)元素某塊區(qū)域就行剪切
img{
clip:rect(23px,14px,45px,54px)
}
rect (top, right, bottom, left) 設(shè)置元素的形狀
auto 不應(yīng)用任何剪裁
13).Z-Index
設(shè)置元素的堆疊順序
div{
z-index:1
}
p{
z-index:10
}
a{
z-index:-1
}
z-index 值越大,所在的元素越靠前顯示
14).清除Clear
專門用來清除浮動(dòng)
div{
clear:both
}
left 清除左側(cè)浮動(dòng)
right 清除右側(cè)浮動(dòng)
both 清除左右兩側(cè)浮動(dòng)
none 允許浮動(dòng)
15).改變?cè)氐奶匦訢isplay
互相調(diào)換元素之間的特性
div{
display:inline
}
none 元素不會(huì)被顯示。
block 元素將顯示為塊級(jí)元素,此元素前后會(huì)帶有換行符。
inline 元素將被顯示為內(nèi)聯(lián)元素,元素前后沒有換行符。
inline-block 行內(nèi)塊元素
list-item 元素會(huì)作為列表顯示。
run-in 元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。
table 元素會(huì)作為塊級(jí)表格來顯示,表格前后帶有換行符。
inline-table 元素會(huì)作為內(nèi)聯(lián)表格來顯示,表格前后沒有換行符。
table-row-group 元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示(類似 <tbody>)。
table-h(huán)eader-group 元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示(類似 <thead>)。
table-footer-group 元素會(huì)作為一個(gè)或多個(gè)行的分組來顯示(類似 <tfoot>)。
table-row 元素會(huì)作為一個(gè)表格行顯示(類似 <tr>)。
table-column-group 元素會(huì)作為一個(gè)或多個(gè)列的分組來顯示(類似 <colgroup>)。
table-column 元素會(huì)作為一個(gè)單元格列顯示(類似 <col>)
table-cell 元素會(huì)作為一個(gè)表格單元格顯示(類似 <td> 和 <th>)
table-caption 元素會(huì)作為一個(gè)表格標(biāo)題顯示(類似 <caption>)
此時(shí)的塊級(jí)元素div就有了內(nèi)聯(lián)元素的特性了。
16).2D轉(zhuǎn)換1)).元素位移translate(左邊,頂邊)div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}2)).元素旋轉(zhuǎn)rotate(角度)div
{
transform: rotate(10deg);
-ms-transform: rotate(10deg); /* IE 9 */
-webkit-transform: rotate(10deg); /* Safari and Chrome */
-o-transform: rotate(10deg); /* Opera */
-moz-transform: rotate(10deg); /* Firefox */
}
rotate()
scale()
skew()
matrix()
3)).元素縮放scale(寬度倍數(shù),高度倍數(shù))div
{
transform: scale(1,2);
-ms-transform: scale(1,2); /* IE 9 */
-webkit-transform: scale(1,2); /* Safari 和 Chrome */
-o-transform: scale(1,2); /* Opera */
-moz-transform: scale(1,2); /* Firefox */
}
4)).元素翻轉(zhuǎn)給定的角度 skew(x,y)div
{
transform: skew(13deg,21deg);
-ms-transform: skew(13deg,21deg); /* IE 9 */
-webkit-transform: skew(13deg,21deg); /* Safari and Chrome */
-o-transform: skew(13deg,21deg); /* Opera */
-moz-transform: skew(13deg,21deg); /* Firefox */
}5)).將前面所有方法進(jìn)行組合matrix()div
{
transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65);
-ms-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65); /* IE 9 */
-moz-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65); /* Firefox */
-webkit-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65); /* Safari and Chrome */
-o-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65); /* Opera */
}
定義6個(gè)數(shù)的矩陣6)).2D過度到3Ddiv{
transform:rotate(1deg);
-ms-transform:rotate(1deg); /* IE 9 */
-moz-transform:rotate(1deg); /* Firefox */
-webkit-transform:rotate(1deg); /* Safari 和 Chrome */
-o-transform:rotate(1deg); /* Opera */
}
它包含了所有的2D方法和3D方法,并且可以單個(gè)設(shè)置每一種的方法的x,y軸轉(zhuǎn)向值,比如:
rotate(angle) 定義 2D 旋轉(zhuǎn),在參數(shù)中規(guī)定角度。測(cè)試
rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn)
rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)
其它的都是差不多的用法,不過還有一個(gè)用法不同的就是:
perspective(n) 為3D轉(zhuǎn)換元素定義透視視圖。17).過渡
元素從一種樣式逐漸改變?yōu)榱硪环N的樣式
div
{
transition: width 1s;
-moz-transition: width 1s; /* Firefox 4 */
-webkit-transition: width 1s; /* Safari 和 Chrome */
-o-transition: width 1s; /* Opera */
}
transition-property:應(yīng)用過渡的Css屬性的名稱 比如寬度width
transition-duration:過渡效果花費(fèi)的時(shí)間 比如1s
transition-timing-function:渡效果的時(shí)間曲線 如下所示:
linear 勻速
ease 先慢后快
ease-in 慢速開始
ease-out 慢速結(jié)束
ease-in-out 慢速開始和結(jié)束
cubic-bezier(n,n,n,n) 在cubic-bezie 函數(shù)中定義自己的值,可能的值是0至1之間的數(shù)值
transition-delay:過渡效果何時(shí)開始 如1s18).動(dòng)畫 Animation1)).首先定義@keyframes 規(guī)則@keyframes my
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes my /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes my /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes my /* Opera */
{
from {background: red;}
to {background: yellow;}
}
為了豐富元素的變化過程,你可以把from to改為百分比的樣子:
@keyframes my
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-moz-keyframes my /* Firefox */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-webkit-keyframes my /* Safari 和 Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
@-o-keyframes my /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
定義好了,接下來我們就可以啟動(dòng)我們的動(dòng)畫了。
2)).a(chǎn)nimation啟動(dòng)動(dòng)畫效果div
{
animation-name: my;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: my;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: my;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: my;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
animation-name 選擇器的 keyframes 的名稱
animation-duration 動(dòng)畫所花費(fèi)的時(shí)間
animation-timing-function 勻速播放動(dòng)畫
animation-delay 動(dòng)畫過多久開始
animation-iteration-count 播放動(dòng)畫次數(shù)
animation-direction 是否在下一周期逆向地播放 normal 正常播放 alternate 輪流反向播放
animation-play-state 暫停動(dòng)畫 paused 動(dòng)畫已暫停 running 動(dòng)畫正在播放
animation-fill-mode
none 不填充
forwards 當(dāng)動(dòng)畫完成后,保持最后一個(gè)屬性值
backwards 在animation-delay 所指定的一段時(shí)間內(nèi),在動(dòng)畫顯示之前,應(yīng)用開始屬性值
both 向前和向后填充模式都被應(yīng)用。
19).多列 DoubleCol1)).創(chuàng)建多列div
{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari 和 Chrome */
column-count:2;
}
div被分隔成兩列2)).規(guī)定列之間的間隔div
{
-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari 和 Chrome */
column-gap:30px;
}
規(guī)定列之間30像素的間隔3)).列規(guī)則div
{
-moz-column-rule:1px dotted red; /* Firefox */
-webkit-column-rule:1px dotted red; /* Safari and Chrome */
column-rule:1px dotted red;
}
column-rule-width 列之間的寬度規(guī)則
column-rule-style 列之間的樣式規(guī)則
column-rule-color 列之間的顏色規(guī)則4)).規(guī)定列的寬度和列數(shù)div
{
columns:10px 3;
-moz-columns:10px 3; /* Firefox */
-webkit-columns:10px 3; /* Safari 和 Chrome */
}
column-width 列的寬度
column-count 列數(shù)5)).填充列div
{
column-fill:auto;
}
balance 列處理
auto 自動(dòng)填充
20).用戶界面 UserGui1)).重設(shè)元素大小 resize div
{
resize:both
}
none 不調(diào)整
both 調(diào)整元素的高度和寬度
horizontal 調(diào)整元素的寬度
vertical 調(diào)整元素的高度2)).規(guī)定兩個(gè)并排的帶邊框的框 box-sizing div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
content-box 寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
border-box 為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。3)).對(duì)輪廓進(jìn)行偏移outline-offsetdiv
{
outline-offset:15px 輪廓與邊框邊緣的距離
}
21.元素是否可見Visibilitydiv{
visibility:hidden
}
visible 元素可見
hidden 元素不可見
collapse 用在表格中元素可見,其它標(biāo)簽元素不可見
22.圖片透明度0pacityopacity:0.4 范圍為0~1的小數(shù)
filter:alpha(opacity=100) 范圍為0~100的整數(shù)23.指針類型Cursordiv{
cursor:auto
}
光標(biāo)形狀:
default 默認(rèn)光標(biāo)(箭頭)
auto 瀏覽器設(shè)置的光標(biāo)。
crosshair 十字線
pointer 一只手
move 指示某對(duì)象可被移動(dòng)。
e-resize 指示矩形框的邊緣可被向右(東)移動(dòng)
ne-resize 指示矩形框的邊緣可被向上及向右移動(dòng)(北/東)
nw-resize 指示矩形框的邊緣可被向上及向左移動(dòng)(北/西)
n-resize 指示矩形框的邊緣可被向上(北)移動(dòng)
se-resize 指示矩形框的邊緣可被向下及向右移動(dòng)(南/東)
sw-resize 指示矩形框的邊緣可被向下及向左移動(dòng)(南/西)
s-resize 指示矩形框的邊緣可被向下移動(dòng)(南)
w-resize 指示矩形框的邊緣可被向左移動(dòng)(西)
text 指示文本
wait 指示程序正忙(通常是一只表或沙漏)
help 指示可用的幫助(通常是一個(gè)問號(hào)或一個(gè)氣球)
參考文檔:W3C官方文檔(CSS篇)
二、總結(jié)
通過對(duì)Css的學(xué)習(xí),相信大家應(yīng)該能做出許多華麗絢爛的特效了吧,CSS的確是一個(gè)很強(qiáng)大的東西。
-
CSS
+關(guān)注
關(guān)注
0文章
110瀏覽量
14856 -
選擇器
+關(guān)注
關(guān)注
0文章
110瀏覽量
14821
發(fā)布評(píng)論請(qǐng)先 登錄
貼片三極管上的印字與真實(shí)名稱的對(duì)照表詳細(xì)說明
瑞芯微rv1106開發(fā)資料 rv1106數(shù)據(jù)手冊(cè) rv1106詳細(xì)說明書免費(fèi)下載

調(diào)試變頻器詳細(xì)說明
UHV系列雷電沖擊電壓發(fā)生器試驗(yàn)裝置詳細(xì)說明使用
功率器件熱設(shè)計(jì)基礎(chǔ)知識(shí)
PCB繪制基礎(chǔ)知識(shí)

Verilog HDL的基礎(chǔ)知識(shí)

負(fù)載開關(guān)基礎(chǔ)知識(shí)

全新的半導(dǎo)體基礎(chǔ)知識(shí)

INA如何使用積分器歸零偏移?
超聲波傳感基礎(chǔ)知識(shí)

評(píng)論