1 級聯樣式與CSS選擇器
1.1 CSS基本使用
1.1.1 引入CSS
/* 不建議@import 性能問題 */ <link href="CSS文件路徑" type="text/css" rel="stylesheet">
1.2 選擇器
1.2.1 元素選擇器
/* 僅對P標籤有作用 */
p{...}1.2.2 屬性選擇器
/* 僅對具有attr屬性的E元素起作用 */
E[attr]{...}
/* 僅對attr=value的E元素起作用 */
E[attr=value]{...}
/* attr的值以空格爲分隔符分開,其中一個值等於value即可的E元素 */
E[attr~=value]{...}
/* attr的值以連字符'_'爲分隔符分開,其中一個值等於value即可的E元素 */
E[attr |=value]{...}
/* attr屬性包含value值的E元素 */
E[attr*="value"]{...}
/* attr屬性以value爲開頭的E元素 */
E[attr^="value"]{...}
/* attr屬性以value爲結尾的E元素 */
E[attr$="value"]{...}1.2.3 ID選擇器
/* id爲xx的元素起作用 */
#xx{...}
/* id爲xx的E元素起作用 */
E#xx{...}1.2.4 class選擇器
/* E爲可選是否填寫指定元素,my_class爲指定lcass */
[E].my_class{...}
/* class同時包含class1.class2 */
.class1.class2{...}1.2.5 包含選擇器
/* div內所有class爲a的元素起作用,無論元素是否爲子元素 */
div .a{...}
/*注意 包含關係有空格,同時滿足關係無空格 */
.class1 .class21.2.6 子選擇器
/* 僅對div的子元素且class爲a的元素起作用 */
div>.a{...}1.2.7 兄弟選擇器
/* id爲android的標籤 之後出現的且class爲long的同級元素 */
#android ~ .long{...}1.2.8 選擇器組合
/*逗號分隔或關係,僅符合一種選擇器即起作用 */
#a,.b,div>.a{...}1.2.9 僞元素選擇器
:first-letter
:first-line
:before
:after
:first-letter和:first-line可實現首字大寫與首行大寫之類的問題
注意,這兩個僞屬性只對塊元素div,p,section等元素起作用,對內嵌span等必須設定heihht與width、或postition:absolute、或display:block.
span{
disply:block;
}
//首字變藍
.span:first-letter{
color:#00f;
}:before與:after用於在指定元素前/後插入內容,參考下面的內容相關屬性.
1.2.10 內容相關屬性
include-source: 屬性值爲url(url)
content: 作用向指定元素之前或元素之後插入指定內容,該屬性的值可以是字符串、url(url)、attr(alt)、counter(name)、counter(name,list-style-type)、open-quote和close-quote等格式.
quotes: 該屬性的值可以是兩個以空格分隔的字符串,前面代表open-quotes,後面帶便quote.
counter-increment:該屬性用於定義一個計數器,值爲該計數器的名稱.
counter-rest: 重置計數器.
eg: <!-- 子div前添加文字和設置樣式 --> div>div:before{ content: '文字'; colol: blue; } <!-- 含有class爲on的子div之後的添加圖片 --> div>div.no:after{ content:url("K.gif"); } <!-- 配合quetos 對的...其實這屬性貌似並沒神馬卵用.. --> <!-- 是的,你沒猜錯..其實close-quote寫在before裏也是可以的.. --> div>div{ quotes: "<<" ">>"; } div>div:before{ content: open-quote; } div>divafter{ content:close-quote; } <!-- counter-increment添加編號1. 2. 3. --> div>div{ counter-increment: fucking_K; } div>div:before{ content: counter{fucking_K} '.'; font-size: 20pt; } <!-- 拓展樣式 更多參數<https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type> --> div>after{ content: counter{fucking_K,lower-roman} '.'; font-size: 20pt; } <!-- 多級編號 --> div>h2{ counter-increment: fucking_K; } div>div{ counter-increment: funcking_K2; } div>h2:before{ counter-increment: funcking_K; counter-reset: fucking_K2; } div>div:before{ content: counter: funcking_K2; }
1.2.11 僞類選擇器
Selecttor可省略.不作爲匹配條件
結構性僞類選擇器
1.1 Selector:root: HTML元素中,永遠指向
<html.../>元素.1.2 Selector:first-child: 匹配其父元素的第一個節點.
1.3 Selector:last-child: 匹配選擇器,而且是其父元素的最後一個節點.
1.4 Selector:nth-child(n): 匹配選擇器,而且是其父元素的第n個節點.
1.5 Selector:nth-last-child(n): 匹配選擇器,而且是其父元素倒數第n個節點.
1.6 Selector:only-child: 匹配選擇器,而且是其父元素唯一的節點.
1.7 Selector:first-of-type: 匹配選擇器,而且是其同類型的兄弟元素中的第一個元素.
1.8 Selector:last-of-type: 匹配選擇器,而且是其同類型的兄弟元素中的最後一個元素.
1.9 Selecttor:nth-of-type(n): 匹配選擇器,而且是其同類型的兄弟元素中的第n個元素.
1.10 Selector:nth-last-of-type(n): 匹配選擇器,而且是其同類型的兄弟元素中的倒數第n個元素.
1.11 Selector:only-of-type: 匹配選擇器,而且是其同類型的兄弟元素的唯一一個元素.
1.12 Selector:only:empty: 匹配選擇器,而且其內部沒有任何子元素(包括文本)的元素.
拿first-child和first-of-type舉例
<ul> <img .../> <li>...</li> </ul> //匹配不到任何元素,li必須是父元素的第一個元素. li:first-child{...} //匹配到li,是在父元素中匹配到的類型中的第一個即可. li:first-of-type{...}-child匹配是會把其他不同類型的兄弟節點算進去,而-of-type只計算同類型的兄弟元素其中nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n)支持參數
odd:匹配奇數的元素
even:匹配偶數的元素
xn+y: 匹配第(x乘以n)加y的元素
UI元素狀態僞類選擇器
2.1 Selector:link: 匹配未訪問的元素
2.2 Selector:visited: 匹配訪問過的元素
2.3 Selector:active: 匹配處於用戶被激活(鼠標點擊與釋放的過程中)的元素
2.4 Selector:hover: 匹配鼠標懸停狀態的元素
2.5 Selector:focus: 匹配已得到焦點的元素
2.6 Selector:enabled: 匹配當前處於可用狀態的元素
2.7 Selector:disabled: 匹配當前不可用狀態的元素
2.8 Selector:checked: 匹配當前選中狀態的元素
2.9 Selector:ready-only: 匹配當前只讀狀態的元素
2.10 Selector:read-write: 匹配當前處於讀寫狀態的元素
2.11 Selector::selection: 匹配當前被選中的內容.
特殊的僞類選擇
3.1 Selector1:not(Selector2): 匹配符合Selector1選擇器,但不符合Selector2選擇器的元素
3.2 Selector:target: 匹配符合Selector選擇器且必須是命名描點的且正在被訪問的目標選擇器.
:target{ background-color: #fff; } <a href="#K" /> //當正在瀏覽此div,:target生效 <div id="K"> ... </div>
1.3 瀏覽器專屬屬性
-ms- IE內核
-moz- Gecko內核(Firefox)
-o- Opera瀏覽器
-webkit- Webkit內核(Chrome、Safari)
1.4 JS修改CSS
//修改屬性
//注意屬性名中採用駝峯命名,例如改變background-color,屬性名要寫backgroundColor
document.getElementById("id").style.屬性名=屬性值;
//修改class
document.getElementById("id").className=class名稱;2 字體與文本相關屬性
2.1 字體相關屬性
font: 可添加font-style,font-variant,font-weight,font-size,line-height,font-family等屬性.
color: 字體顏色,可顏色名,十六進制顏色值,RGB,HSL
font-family: 設置字體,可用
,分割按順序使用字體font-size: 字體大小
font-size-adjust: 對字體進行微調.
font-streth: 改變字體橫向拉伸,narrower既橫向壓縮,wider橫向拉伸.
font-style: 文字風格,常用屬性有italic斜體,oblique傾斜體.
font-weight: 是否加粗,屬性可數值,也可lighter、normal、bold、bolder,越來越粗.
text-decoration: 文字修飾線,常用屬性有:none、blink閃爍、underline、line-through中劃線、overline上劃線.
font-variant: 設置文字大寫字母格式,屬性有normal、small-caps(小型大寫字母).
text-shadow: 文字陰影效果,後面會詳細提.
text-transform: 字母大小寫none,capitalize首字母大寫、unpercase全部大寫、lowercase全部小寫;.
line-height: 行高,負值時候可用來實現陰影效果.
letter-spacing: 字符之後的間隔.最後一個字不受影響
word-soacing: 單詞之間的間隔.
2.1.1 字體添加陰影
text-shadow,多組陰影用,分割
color: 指定陰影顏色.
xoffset: 指定陰影在橫向上的偏移量.(可負值)
yoffset: 指定陰影在縱向上的偏移量.(可負值)
redius: 指定陰影的模糊半徑,半徑越大越模糊 .
<!-- 向右下角和左上角加陰影加陰影--> <span style="text-shadow:5px 5px 2px gray,-5px 5px 2px gray">帥哥麥</span>
2.1.2 微調字體大小
font-size-adjust用調節同樣字號不同字體的效果.
font-size-adjust通過設定aspect值從而控制不同字體的大小.
aspect等於字體小寫x的高度除以該字體的大小.
#div {
font-size: 16pt;
font-family: "狂草";
font-size-adjust:0.52;
}
#div2 {
font-size: 16pt;
font-family: "楷書";
font-size-adjust: 1.22;
}2.2 CSS3支持的顏色表示方法
顏色名:white,red,greenyellow
十六進制
rgb(r,g,b)
rgba(r,g,b,a): a在0~1之間,0表示完全透明
hsl(hue,saturation,lightness):色調,飽和度,亮度控制.
hsla(h,s,l,a).
2.3 文本相關屬性
此類屬性用於控制整段或整個div的
text-indent: 文本的縮進
text-overflow:
2.1 clip: 要指定overflow:hidden,隱藏溢出的文字
2.2 ellipsi: 要指定了overflow:hidden,溢出時候用…標記
vertical-align:指定內容垂直方式
3.1 auto: 自動對齊
3.2 baseline: 默認值,將支持valign屬性的元素的文本內容與基線對齊
3.3 sub: 文本下標對齊
3.4 super: 文本上標對齊
3.5 top: 默認值,將支持valign屬性的元素的文本內容與元素的頂端對齊
3.6 middle: 默認值,將支持valign屬性的元素的文本內容對齊到元素的中間.
3.7 bottom: 默認值,將支持valign屬性的元素的文本內容與元素的底端對齊.
text-align: left,right,center,justify(兩端對齊)
direction: 用於設置文本流入的方式,ltr(左到右),rtl(右到左),不會影響數字和拉丁文字母(除拉丁文標點符號).
word-break: 用於設置目標組件中文本的換行方式
6.1 normal: 按瀏覽器默認,西方文字:只會在半角空格、連字符地方換行.中文,任意文字後換行.
6.2 keep-all: 只能在半角空格或連字符換行
6.3 break-all: 允許在連續單詞中間換行
white-space:處理目標組件中文本對空格的處理
7.1 normal: 自動換行
7.2 nowrap: 強制文本一行顯示,除非遇到
<br />word-wrap: 用於設定目標組中文本內容的換行方式
8.2 normal: 瀏覽器默認
8.3 break-word: 允許單詞中間換行.
word-break兼容性不好,單詞中換行最好使用word-wrap:breakword;
word-break和word-wrap區別:
word-break: break-all:會讓每一行文本最後一個單詞換行.(不浪費一點空間)
word-wrap: break-word:會讓太長單詞之前自動換行.
情況很多,不好理解.具體參考http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html
2.4 服務器字體
下載.ttf/.otf字體
定義服務器字體
<!-- src ...;後可跟字體樣式屬性 --> @font-face { font-family: 404_K; src: url(url) format("字體格式"); font-weight: blod; }
2.4.1 優先使用客戶端字體
@font-face {
font-family: 404_K;
src: location("微軟雅黑"),url(url) format("字體格式");
font-weight: blod;
}3 背景、邊框和補丁相關屬性
3.1 背景相關屬性
background: 可控制背景顏色、背景圖片、背景重複方式.
background-p_w_upload: 背景圖片是否隨對象內容滾動還是固定.
2.1: scorll:背景隨內容滾動
2.2 fixed:背景圖片固定.
background-color: 背景色
background-p_w_picpath: 背景圖片,背景圖片會覆蓋背景色(假如同時設置了).
background-position: 可百分百可數值,只設橫百分比,縱百分比爲50%.
background-repeat:是否平鋪
6.1 repeat:平鋪
6.2 repeat-x:橫向平鋪
6.3 repeat-y:縱向平鋪
6.4 no-repeat:不平鋪
以下爲CSS3新增
background-clip: 指定背景覆蓋範圍.
7.1 border-box: border-box(覆蓋border,padding,content)
7.2 padding-box: 覆蓋padding,content(默認)
7.2 content-box,只覆蓋content.
background-origin: 設置背景覆蓋的起點,有點和background-position類似.或指定從哪個區域的開始放置背景圖片(content,padding,border).Chrome和Safari使用要開-webkit開頭.
background-size: 設置圖片大小.
9.1 數值: 12px,13px 佔寬12px,高13px;
9.2 百分比: eg 80% 10%,寬佔百分之80,高佔百分之10%
9.3 auto:只有一個值能爲auto,根據另外一個值自動縮放(這個對響應式非常有用,保證圖片不走形 100% auto,完全顯示圖片).
CSS3提供了多背景控制,屬性還是上面的,多個背景屬性用,隔開.
3.2 邊框相關屬性
border: 設置邊框樣式,粗細,線型,顏色.
border-color: 邊框顏色..任何顏色值
border-style: 邊框樣式
3.1 none:無邊框
3.2 hidden: 隱藏邊框,於none類似,當在表中可解決邊框衝突
3.3 dotted: 電線邊框
3.4 dashed: 虛線邊框
3.5 solid: 實現邊框
3.6 double: 雙線邊框
3.7 grove: 3D凹槽邊框
3.8 ridge: 3D凸槽邊框
3.9 inset: 3D凹入邊框
3.10 outset: 3D凸出邊框(個人感覺3.7,3.8和3.9,3.10類似,不過立體感弱一點)
border-width: 邊框線框.任何有效長度值.若只設width,是沒法佔位置的.
以下top bottom right left皆有.
border-top: 設置上線的複合屬性,可設置邊框樣式,粗細,線型,顏色.
border-top-color: 上邊框顏色.
border-top-style: 邊框樣式
border-top-width: 上邊線框.
border-top-colors: 漸變屬性,CSS3新增,假設border-top-width爲Npx,則可以設置N種顏色,從外框往裏漸變,若設置的顏色個數小於width,最後一個顏色會作爲之後的顏色.
圓角邊框,CSS3新增
border-radius: 圓角邊框,數值代表圓角半徑,半徑越大,越圓,
還有border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius屬性.
圖片邊框
border-p_w_picpath: 語法:
<border-p_w_picpath-source> <border-p_w_picpath-slice>[/boder-p_w_picpath-width]? <border-p_w_picpath-repeat>border-p_w_picpath-source: none/url(“圖片路徑”)
border-p_w_picpath-slice: 可輸1~4個百分比或數值用於切割圖片,按上下左右切割,得出9張小圖片,默認情況中間會丟棄.但例如 10 20&&fill中間就會保留放在內容中間.
border-p_w_picpath-width: 爲上面切割的圖片設置寬度.可設置1~4個長度,百分比,或auto,指定p_w_picpath-slice的寬度.
border-iamge-repeat: 指定圖片覆蓋方式.可設0~2個值,分別代表橫豎.
5.1 stretch: 拉伸覆蓋
5.2 repeat: 平鋪覆蓋
5.3 round: 取整平鋪,和repeat類似,
當最後一張圖片不能顯示超過一半,則不顯示最後一張圖片,通過拉伸前面的圖片實現填充. 當最後一張圖片可以顯示超過一半,則顯示最後一張圖片,壓縮前面的圖片.
border存在則border-p_w_picpath相關屬性不起作用.
3 大小、定位、輪轂相關屬性
3.1 大小相關屬性
height: 設定高度
max-height: 設定最大高度.當此屬性小於min-height,則自動轉化爲min-height,下面屬性同理
min-height: 設定最小高度.
width: 設定寬度
max-width: 最大寬度
min-widht: 最小寬度
CSS3新增屬性
box-sizing: 用於設定width和height控制content padding border等哪些區域.
1.1 content-box: 只控制content
1.2 padding-box: 控制content+padding
1.3 border-box: 控制contetn+padding+border
resize: 設置用戶能否拖動組件來改變組件的大小
2.1 none: 不能改變大小
2.2 both: 能改變大小,但只能按比例縮放
2.3 horizontal: 不允許改變高度,能改變寬度
2.4 vertical: 不允許改變寬度,能改變高度
3.2 定位相關屬性
定位作用爲在於佈局,漂浮~.除了position以外的其他屬性不對static起作用.
position 定位方式
1.1 absolute: 組件會漂浮在頁面上,不考慮周圍內容
1.2 relative: 參考前一個組件的位置來定位
1.3 static: 默認值,沒有定位,元素出現在正常的頁面流中.
1.4 fixed: 絕對定位,以瀏覽器爲定位參考
z-index: 數值覺得漂浮重疊優先級.數值越高優先級越高.
top: 設定最近一個具有定位設置的父元素向頂部偏移.
right: 設定最近一個具有定位設置的父元素向右側偏移.
bottom: 設定最近一個具有定位設置的父元素向底部偏移.
left: 設定最近一個具有定位設置的父元素向頂部偏移.
漂浮居中定位設置很常用的一招.
margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
原理及其它居中方式http://blog.csdn.net/freshlover/article/details/11579669.
3.3 輪廓相關屬性
輪廓不佔頁面實際物理佈局面積,可實現”光暈效果”.
outline: 可設置輪廓顏色 線寬 線型.
outline-color: 輪廓顏色.
outline-style: 和之前的border-style一致.
outline-width: 輪廓寬度.
outline-offset: 設置輪廓和邊框的距離
4 盒模型與佈局相關屬性
4.1 佈局相關屬性
float: 可left/right.當設置了該屬性強制display爲block,它會緊靠組件的左/右,直到遇到邊框/padding/margin或另外一塊組件(displ爲block)爲止.)
clear: 設置該組件能否出現浮動組件.
2.1 none: 默認,你隨便飄~
2.2 left: 不允許出現左飄~
2.3 right: 不允許出現右飄~
2.4 both: 你丫的別給我飄~.
clip: 對組件裁剪設置,(只有在position爲absolute且overflow:hidden,效果纔會較好.)
3.1 rect(Num_A,Num_B,Num_C,Num_D),定義一個矩形,只有在矩形內才顯示出來.這4個數有點奇葩,和別的不一樣,定義的矩形爲,橫向顯示(Num_D~Num_B)的內容,縱向顯示(Num_A~Num_C)的內容. 當Num爲auto,表示該邊不做裁剪.
overflow: 設置等組件不能容納內容顯示時,採取的措施
4.1 visble: 默認,不剪切也不加滾動條.
4.2 auto: 添加滾動條顯示全部內容.
4.3 hidden: 裁剪不能顯示的部分.
4.4 scroll: 不夠內容有沒有超,總顯示滾動條.
overflow-x: 僅對橫向方向起作用,屬性同overflow.
overflow-y: 僅對縱向起作用.屬性同overflow.
visibility: visibl/hidden.隱藏時仍佔據網頁空間
display: 設置盒模型.
8.1 block類型: 默認佔據一行,可CSS設置寬高度,默認此屬性的元素有
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>等.8.2 inline類型: 默認允許一行放多個組件,CSS設置寬高度無作用.默認此屬性的元素有
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>等.當兩個block中間有inline他們是不可以在同一行的,8.3 none: 隱藏組件,不佔網頁空間.
8.4 inline-block盒模型: 不佔據一行,但可以設置寬高度.這個也可以實現多欄佈局.默認情況下,多個inline-block盒模型會對齊底部.改變對齊頂部使用
vertical-align:top,默認此屬性的元素有<img>、<input>等.當兩個block中間有inline-block他們是可以在同一行的,8.5 inline-table盒模型: 與inline-block類似,分別在表格設置inline-table或inline-block,但是inline-table設置width會拉伸單元格,inline-block會把內容多餘的空間在右邊留白,而不是給單元格.
//關於表格的盒模型,其實作用不大,作用大概就是可以把div當做表格來顯示. 1. table: 將組件變爲表格. 2. table-caption: 將組件變爲表格標題. 3. table-cell: 將組件變爲單元格. 4. table-column: 將組件變爲表格列. 5. table-column-group: 將組件變爲表格列組. 6. table-row: 將組件變爲表格行. 7. table-row-group: 將組件變爲表格列組. 8. table-header-group: 將組件變爲表格頭部分. 9. table-footer-group: 將組件變爲表格尾部分.
8.6 list-item盒模型: 可以將組件轉爲ul等列表元素.
8.7 run-in盒模型: 和inline類似,但假如後面緊跟block,那麼run-in會包含在後面的block中. 8.8 box模型: CSS3新增.當disp爲box時,組件可以使用以下的屬性控制box
1. box-orient:horizontal/vertical. 1.1 當屬性爲horizontal時候,沒有爲子元素定義高度,則高度等於父元素的高度. 1.2 當屬性爲vertical時候,沒有爲子元素定義寬度,則高度等於父元素的寬度. 2. box-oridinal-group: 設置box盒模型中子元素的顯示順序. 3. box-flex: 設置模型自動適應寬度比例, 3.1 例如box盒模型多餘150px,第一個元素的box-flue爲1,第二個元素的box-flue爲2,則把多餘的寬度分50px給第一個元素,分100px給第二個元素.
4.2 給盒子加陰影
CSS3新增的,主要使用box-shadow屬性.是一個複合屬性,包括以下5個屬性.
hOffset: 控制陰影在水平方向的偏移.
vOffset: 控制陰影在縱向的偏移.
blurLength: 控制陰影的模糊程度.
scaleLength: 控制陰影的縮放程度.
color: 控制陰影顏色
eg:
<!-- 右下陰影,模糊程度10px,縮小陰影區域-10px --> <div style="box-shadow: 10px 8px 10px -10px red">..</div>
4.3 column-count分欄
column-count分欄爲CSS3新增,屬性主要有:
columns: 複合屬性,可指定欄目寬度,欄目數.但內容大於容器時,Firefox和Chrome會增加每欄的寬度,Opera會保持欄目寬度,但增加欄目數.
column-width: 指定每個欄目的寬度.
column-count: 指定欄目個數.
column-rule: 符合屬性,指定欄目之間分隔條的寬度 樣式 顏色.
column-rule-width: 指定分隔條的寬度.
column-rule-style: 指定分隔條的樣式,屬性和border-style的樣式一樣.
column-rule-color: 指定分隔條的顏色.
column-gap: 設定欄目的間距.
column-fill: 設定欄目的高度
9.1 auto: 根據內容多少變化高度.
9.2 balance: 高度統一爲最長的那欄的高度.
5 表格、列表及media query
5.1 表格相關屬性
border-collapse: 控制兩個單元格的邊框分開還是合併.
1.1 seperate: 邊框分開.(雙線)
1.2 collapse: 邊框合併.(單線)
border-spacing: 前提爲border-collapse爲seperate時,設置分割間距.
caption-side: 設置表格標題在表格的哪邊,必須與
<caption.../>一塊使用,屬性有top bottom/left/right.empty-cells: 前提爲border-collapse爲seperate,設置單元格爲空時,是否顯示單元格邊框,屬性有show/hide.
table-layout: 設置表格寬度佈局方法.
5.1 auto: 默認值.
5.2 fixed 固定佈局.
//fixed表格寬度計算方式. 1. 如果設置了<col../>或<colgroup../>每列的寬度,則表格寬度等於所有列寬的總和. 2. 如果表格內第一個單元格設置了寬度,則表格寬度所有所以列寬的總和. 3. 直接平均分配每列的寬度,忽略單元內容的實際寬度.
5.2 列表相關屬性
list-style: 複合屬性,可以指定list-style-p_w_picpath list-style-position list-style-type.
list-style-p_w_picpath: 指定列表標記的圖片.
list-style-position: 設定列表標記出現的位置
3.1 outside: 列表項標記防盜列表元素之外.
3.2 inside: 列表想標記放在列表元素之內.
list-style-type : 設置項標記符號,list-style-p_w_picpath會覆蓋list-style-type屬性,全部屬性參考.常用的有
4.1 decimal: 默認,阿拉伯數字.
4.2 disc: 實心圓
4.3 upper-roman: 大寫羅馬數字.
4.4 none: 不使用符號.
4.5 lower-alpha: 小寫英文字母
4.6 upper-alpha: 大寫英文字母
5.3 控制光標的屬性
cursor屬性控制光標屬性
auto: 默認
default: 默認光標(一般是箭頭).
all-scroll: 代表十字箭頭光標.
col-resize: 代表水平拖動線光標.
crosshair: 代表十字線光標.
more: 移動十字箭頭光標.
help: 帶問號光標.
no-drop: 禁止光標.
not-allowed: 和no-drop一樣.
pointer: 代表手型光標.
progress: 代表漏沙光標.
wait: 和progress一樣.
row-resize: 代表垂直拖動光標.
text: 文本編輯光標.
vertical-text: 代表垂直文本編輯光標.
*-resize: 該屬性*可爲n(上) s(下) e(右) w(左) 方向的光標.*可爲1位或2位,例如nw-resize代表指向上右的光標.
5.4 media query功能
語法
@media [not|only] 設備類型 [and 設備特性]*
all: 所有設備.
aural: 適用於語音和音頻合成器.
braille: 適用於觸覺反饋設備.
embossed: 使用凸點字符(盲文)印刷設備.
handheld: 適用於小型或手提設備.
print: 適用於打印機.
projection: 適用於投影圖像,如幻燈片.
screen: 適用於計算機顯示器.
tty: 適用於固定間距字符格的設備,如電傳打字機和終端.
tv: 適用於電視類設備.
設備特性中的值參考
最常用的設備特新爲 min-width和max-width.
一般使用的代碼
@media screen and (min-width: ***px){...}6 變形與動畫相關屬性.
6.1 CSS3提供的變形支持
transform: 設置1個或多個變形函數,設置變形函數順序和重要,按順序變形,變形函數有
1.1 translate[tx[,ty]]: 橫向移動tx,縱向移動ty.,ty不寫則不移動.
1.2 translateX(tx): 橫向移動tx.
1.3 translateY(ty): 縱向移動ty.
1.4 scanle(sx[,sy]): 橫向縮放比爲sx,縱向縮放比爲sy,但sy不填,則縮放比爲sx.
1.5 scanleX(sx): scanle(sx,1).
1.6 scanleY(sy): scanle(1,sy).
1.7 rotate(angle): 順時針轉angle角度.
1.8 skew(sx [,sy]): 沿X軸傾斜sx角度,沿Y軸傾斜sy角度.省略sy,sy爲0.
1.9 skewX(sx): skew(sx);
1.10 skewY(sy): skew(0,sy);
1.11 matrix(m11,m12,m21,m22,dx,dy): 基於矩陣變換,前4個參數組成變形矩形,dx、表示對座標系統進行平移.
//按照矩形變換公司最後變形座標計算公式,其實變形函數都是通過這個函數實現的. (x*m11+y*m21+dx,x*m12+y*m22+dy);
transform-origin: xCenter yCenter ,設置變形中心點,可選值有左上角 左下角 右下角 右上角
2.1 xCenter可爲left/right
2.2 yCenter可爲top/bottom
6.2 CSS3提供的Transition
transition屬性指定下面4部分,可設置多組動畫,用,分割.
transition-property:指定組件的哪個CSS屬性進行平滑漸變,可指定background-color,width,height等標準CSS屬性.
transition-duration: 漸變時間.
transition-timing-function: 漸變速度
3.1 ease: 先慢後快再慢.
3.2 linear: 速度不變.
3.3 ease-in: 先慢後快
3.4 ease-out: 先快後慢.
3.5 ease-in-out: 和ease類似.
3.6 cubic-bezier(x1,y1,x2,y2): 通過貝濟埃曲線控制動畫.
transition-delay: 指定延遲時間.延遲多久後開始漸變
eg:
div{
瀏覽器前綴-transition: background-color 4s linear 4s.
}6.3 CSS 3提供的Animation動畫
Animation動畫提供一下幾個屬性.
animation 複合屬性,可同時按順序設置下面的屬性.
animation-name: 動畫名稱,指向一個已有的關鍵幀.
animation-duration: 制動動畫的持續時間.
animation-timing-function: 指定動畫的變化速度.
animation-delay: 延遲多久開始執行動畫.
animation-iteration-count: 指定動畫循環次數.數值/infinite爲無數次,
關鍵幀定義格式:
keyframes 關鍵幀名稱 {
form | to | 百分比 {
css屬性1 : 屬性值1;
...
}
...
}eg 實現鼠標hover時放大div:
@-webkit-keyframes '404_K' {
0% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(2);
}
100% {
-webkit-transform: scale(1);
}
}
...
div>a:hover {
-webkit-animation-name: '404_K' ;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
}全能程序員交流QQ羣290551701，羣內程序員都是來自，百度、阿里、京東、小米、去哪兒、餓了嗎、藍港等高級程序員 ，擁有豐富的經驗。加入我們，直線溝通技術大牛，最佳的學習環境，瞭解業內的一手的資訊。如果你想結實大牛，那 就加入進來，讓大牛帶你超神！