css-概述
行內樣式
<div style="width: 200px; height: 200px;"></div>
內聯樣式
內聯樣式可位於head、body標簽之間
<style type="text/css"> #demo { width: 200px; height: 200px; margin: 10px 0 0; background-color: #CCC; } </style>
導入樣式
@import可位於style標簽和css文件內(不推薦使用)
<styletype="text/css"> @import ‘layout.css‘; </style> or @charset "UTF-8"; @import "font.css";
鏈接樣式
<link rel="stylesheet" type="text/css" href="layout.css" />
單位
px 像素
% 百分比
em 相對父元素的字體大小
rem 相對根元素的字體大小 ie9+
vw 相對視口的寬度百分比 ie9+
vh 相對視口的高度百分比 ie9+
註：pc端考慮兼容性用px、%、em較多，vw、vh是移動端響應式的新趨勢
顏色
十六進制：#F00
顏色名：red
rgb：rgb(255, 0, 0)
rgba：rgba(255,0,0,0.5) ie9+
註：一般顏色使用十六進制表示
字體
(MS)Serif：Georgia Palatino Linotyp Times New Roman
(MS)sans serif：Helvetica Arial Trebuchet MS Verdana Tahoma Impact Segoe UI
Monospace：Courier Family Lucida Family Centaur Myriad Pro
windows：微軟雅黑(Microsoft YaHei)、黑體(SimHei)、幼圓(YouYuan)、宋體(SimSun)、楷體(KaiTi)、華文系列(ST)
OS X：冬青黑體(Hiragino Sans GB)、華文細黑(STHeiti Light STXihei)、華文系列(ST)
性能和效率
1、默認字體一般設為Arial
2、字體大小設置最小12px
3、行高設為1.5
4、中文字體最好轉為unicode編碼，如：\5b8b\4f53 宋體 \5fae\8f6f\96c5\9ed1 微軟雅黑
5、正確使用字體類型寫法，避免平凡使用引號
字體縮寫
family: 12px/1.5 \5fae\8f6f\96c5\9ed1, "STHeiti Light", Arial, \5b8b\4f53, sans-serif;
選擇器
基本：#id .class tag * #id, .class, div
層級：elem elem elem > elem elem + elem elem ~ elem
屬性：[attr] = 等於 ^= 開頭 $= 結尾 *= 包含 ~= 空格 |= 前綴
偽類：:hover :active :focus :before :after
css3 偽類 ie9+
子元素：:first-child :last-child :only-child :nth-child() :nth-last-child()
同類型子元素：:first-of-type :last-of-type :only-of-type :nth-of-type() :nth-last-of-type()
篩選：:not() :root :empty :target
功能：:enabled :disabled :checked ::selection
符號
!important 定義css屬性優先級 ie9+
註：不要使用
@import 導入樣式
註：不要使用
@charset 定義字符編碼
@media 定義自適應規則 ie9+
@font-face 定義字體 ie9+
@font-face {
font-family: name;
src: local() url() format();
unicode-range: U+201c, U+201d;
}
@keyframes 定義動畫 ie10+
@keyframes name {
from {}
50% {}
to {}
}
css hack
// ie6
*htmldiv{color:red;}
div{-color:red;}
// ie7
*+htmldiv{color:red;}
div{-color:red;}
// ie8
@media \0screen {div{color:red;}}
// ie9
:root div{color:red;}
// ie10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {div{color:red;}}
// ie6 7
@media screen\9 {div{color:red;}}
div{+color:red;}
// ie6 7 8
@media \0screen\,screen\9{div{color:red;}}
// ie8 9 10
@media screen\0 {div{color:red;}}
div{color:red\0;}
div{color:red\0\9;}
// ie9 10
@media screen and (min-width:0\0) {div{color:red;}}
div{color:red\9\0;}
// ie通用
div {color: red\9;}
behavior
語法：behavior: url();
作用：為css定義兼容腳本
註：不推薦使用
#demo {
width: 200px;
height: 200px;
box-shadow: 10px 100px 100px 10px #666;
behavior: url(ie-css3.htc);
}
expression()
語法：color: expression();
作用：為css屬性定義腳本
註：不推薦使用
a { *color: expression(this.parentNode.currentStyle.color); /* 顏色繼承 */ *hide-focus: expression(this.hideFocus=true); /* 隱藏焦點虛線 */
color: inherit; outline: none;
}
css-概述