CSS複習資料
CSS簡介
概念
Cascaing Style Sheet 這三個單詞的首字母縮寫，翻譯過來就是層疊樣式表；
css的作用主要是用來定義頁面中的表現；
引入
1. 外部樣式表
使用link標籤引入外部樣式表。一般情況下，會有一些樣式是公有的，這些樣式寫在一個或多個檔案中，通過外部樣式表引入到檔案中，維護起來也比較方便。
<head>
<link rel='stylesheet' href='http://demo.css'>
</head>
複製程式碼2. 內部樣式表
寫在style裡面，如果一些頁面有特有的樣式，並且樣式比較少的情況麼可以放在內部樣式表中。
如果內容比較多，並且為了不影響頁面的載入，一般採用外部樣式表。
<head>
<style>
body{background-color:#ffffff;}
p{margin-left:20px;}
</style>
</head>
複製程式碼3. 內嵌樣式
直接寫在標籤內部，用style屬性的方式；這種方式使得css樣式和html標籤嵌在一起，不利於後面的維護，一般不建議使用這種方式。
<p style='color:red;margin-left:20px;'>
this is a paragraph
</p>
複製程式碼語法
總語法
在大括號前面是選擇器，在大括號裡面是屬性宣告；
每個屬性生命需要用分號來分隔（最後一個屬性可以不寫分號，但是為了以後的維護，我們一般在最後一個屬性後也寫上分號）；
每一個屬性由屬性名和屬性值組成，中間用冒號來分隔；（屬性名：屬性值）
註釋：/* 註釋內容 */
/*使用者列表*/
.m-userlist{
margin:0 0 30px 0;
}
.m-userlist .list{
position:relative;
height:93px;
overflow:hidden;
}
.m-userlist .list ul{
margin:-13px 0 0 -13px;
zoom:1;
}
複製程式碼@規則
- @media 主要是一些響應式的佈局
- @keyframes 主要是用來描述css動畫的中間步驟
- @font-face 引入外部字型
瀏覽器私有屬性
瀏覽器廠商會實現一些還沒有成為標準的屬性，為了區分標準屬性，瀏覽器會在屬性前加一些字首
- chrome、safri
-webkit- - Firefox
-moz- - IE
-ms- - opera
-o-
為了相容這些私有的屬性，我們會把這些私有屬性寫在前面，將標準屬性寫在後面，
.pic{
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
複製程式碼