概念
cascading style sheet 成疊樣式表
主要定義頁面中的表現(xiàn)
發(fā)展史
1996 css1,1998 css2,2007 css2.1,2001 css3
引入
- 外部樣式表
<head>
<link rel="stylesheet" href="base.css">
</head>
用link標(biāo)簽引入外部樣式表官脓，href屬性里寫css文件地址
- 內(nèi)部樣式表
<head>
<style>
body{background-color:red}
p{margin-left:20px}
</style>
</head>
通過style標(biāo)簽引入荠列，樣式內(nèi)容少時(shí)用內(nèi)部樣式缕坎。
- 內(nèi)嵌樣式
<p style="color:red;margin-left:20px;">
this is a paragraph
</p>
使得html與css雜合在一起不利于維護(hù)谐丢。不建議引用
語法
/*用戶列表*/
.m-userlist{margin: 0 0 30px}
.m-userlist.list{position: relative;height: 93px;overflow: hidden;}
.m-userlist.list ul{margin: -13px 0 0 -13px;zoom:1;}
selector{property1:value;property2:value;}
大括號之前為選擇器座舍，大括號里面屬性聲明岗喉，每個(gè)屬性聲明用分號隔開桃焕，每個(gè)屬性聲明＝屬性名：屬性值
注釋/* */
瀏覽器私有屬性
- chrome,safari
-webkit - firefox
-moz - IE
-ms- - opera
-o-
私有屬性為了兼容不同瀏覽器書寫如下
.pic{
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transrorm:rotate(-3deg);
}
把私有的屬性寫著前面买决，把標(biāo)準(zhǔn)的寫著后面契沫。
屬性值語法
margin: [<length>|<percentage>|auto]{1,4}
基本元素带猴，組和符號，數(shù)量符號
基本元素
- 關(guān)鍵字
-auto,solid,bold… - 類型
基本類型（<length>,<percentage>,<color>…)
其他類型（<'padding-width'>.<color-stop>…) - 符號（/,）
分割屬性值 - inherit,initial
組和符號－空格
<'font-size'> <'font-family'>
兩個(gè)都要出現(xiàn)且順序一致
- 合法值
－12px arial - 不合法值
－2em
-arial 14px
組和符號－&&
<length>&&<color>
兩個(gè)都要出現(xiàn)懈万，順序不要求
- 合法值
-green 2px
-1em blue - 不合法值
-blue
組合符號－||
underline||overline||line-through||blink
至少出現(xiàn)一個(gè)順序沒有關(guān)系
- 合法值
-underline
-overline underline
組和符號－|
<color>|transparent
兩個(gè)基本元素只能出現(xiàn)一個(gè)
- 合法值
-orange
-transparent - 不合法值
-blue transparent
組和符號－[]
bold[thin||<length>]
分組作用拴清，大括號里可以看作一個(gè)整體
- 合法值
-bold thin
-bold 2em
數(shù)量符號－無
<length>
基本元素只能出現(xiàn)一次
- 合法值
-1px
-10em
數(shù)量符號－＋
<color-stop>[,<color-stop>]+
出現(xiàn)一次或者多次
- 合法值
-#ff,red
-blue,green50%,gray - 不合法值
-red
數(shù)量符號－？
inset?&&<color>
基本屬性可以出現(xiàn)也可以不出現(xiàn)
- 合法值
-inset blue
-red
數(shù)量符號－{}
<length>{2,4}
基本元素可以出現(xiàn)幾次钞速，最少出現(xiàn)幾次贷掖，最多出現(xiàn)幾次
- 合法值
-1px 2px
-1px 2px 3px - 不合法值
-1px
數(shù)量符號－*
<time>[,<time>]*
可以出現(xiàn)零次，一次或者多次
- 合法值
-1s
-1s,4ms
數(shù)量符號－#
<time>#
需要出現(xiàn)一次或者多次渴语，中間需要用逗號隔開
- 合法值
－2s,4s - 不合法值
-1ms 2ms
屬性值例子
- padding-top:<length>|<percentage>
- 合法值
-padding-top:1px - 不合法值
-padding-top:1em 5% - box-shadow:[inset?&&[<length>{2,4}&&<color>?]]#|none
- 合法值
box-shadow:3px 3px rgb(50% 50% 50%),red 0 0 4px inset
@規(guī)則語法
@import"subs.css";
@charset"UTF-8";
@media print{
body{font-size: 10pt}
}
@keyframes fadeint{
0%{top: 0;}
50%{top: 30px;}
100%{top: 0;}
}
@標(biāo)識符 xxx;
@標(biāo)識符 xxx {}
@規(guī)則
- @media
用來做布局苹威，設(shè)備只有符合了媒體查詢條件，里面的樣式才能生效 - keyframes
用來描述css動畫的中間步驟 - font-face
引入外部字體驾凶，十頁面中字體更加豐富
