CCS2.1部分
style中可以载入别的css文件
1
2
3
| <style type="text/css">
@import url(./example.css)
</style>
|
选择器
属性选择器
1
2
3
| foo[class="bar"] {...}
# 可以加通配符 class属性中所有包含bar的元素
[class*="bar"] {}
|
后代选择器
直接上一层-称为父子关系；
h1>.bar {} # h1元素的子元素class为bar的元素
上两层或更多层-称为祖先-后代关系
h1 .bar {} # h1标签所有后代class为bar的元素
相邻选择器
ul+li {} # ul元素后面所有相邻的li元素
伪类和伪元素
动态伪类
1
2
3
| a:visited # 已访问过的a链接
a:focus # 激活的
a:hover # 停留的
|
1
2
3
| # 第一行与首字母
h2:first-letter {}
h2:first-line {}
|
1
2
3
| # 之前与之后元素的样式
h2:before { content:"foo"} # 在h2元素之前加入foo
h2:after{ content:"foo"} # 在h2元素之后加入foo
|
结构与层叠
每种选择器带有特殊性，特殊性强的覆盖弱的，格式如(0,0,0,0)
1
2
3
4
| (0,0,0,1) # 元素标签选择器
(0,0,1,0) # 类选择器和属性选择器
(0,1,0,0) # ID选择器
(1,0,0,0) # 内联样式，意味着style内的属性强于所有class的属性
|
重要声明 !important
` p {color: #333 !important;background: white} `
重要声明与非重要声明会分别计算其特殊性，且重要声明永远>非重要声明
继承
<h1 style="color:red">Title is<em>MyTitle</em></h1>
此时em会继承h1的color
且继承的值的无特殊性，连(0,0,0,0)都没有
值和单位
颜色
简写记法,将一位复制为两位，#F00 等价于#FF0000
` h1 {color:#000} #RGB`
安全颜色：256色系统避免抖动的颜色：20%;51;3的倍数
相对长度单位 em,ex,px
em: 跟随font的大小，若font大小为24px，则1em=24px
ex: 字体小写大小，中文不涉及
px: 像素点
px所占面积受显示器的ppi影响，所以是相对单位，pt为绝对单位
背景
背景
1
2
3
4
5
6
7
| p {
background-image: url(t.png); // 背景图
background-repeat: repeat; // 背景图重复
background-position: 20px 50px; // 背景图定位在p块内的水平20px，垂直50px处 可多选top/center/right等
background-attachment: fixed; // 背景图在浏览器视框内 可选scroll/fixed/inherit
background: white url(t.png) repeat 20px 50px fixed; // 简写模式，属性顺序没有限制
}
|
CSS3 部分
选择器
伪类选择器 :target
匹配被uri指向的元素，如ul:target ，即匹配ul下的所有元素，包括不限于<li>等
1
2
3
4
5
6
7
8
9
| <div>
<p id="pid">color want to change</p>
<a href="#pid">change color</>
</div>
div :target p {
color:red
}
// div下所有的元素被匹配，当有uri命中div下其中元素时，该p标签会生效
|
语言伪类选择器 :lang(en)
1
2
3
4
| <html lang="en">
:lang(en) {
background:#F00
}
|
UI元素状态伪类选择器
1
2
3
| E:checked 被选中
E:enable
E:disable 被禁用
|
结构伪类
1
2
3
4
5
| E:first-child // 等同于 E:nth-child(1)
E:last-child // 等同于 E:nth-last-child(1)
E F:nth-child(x) 选择 E元素下第x个F元素,保留关键字n/odd/even，n+3即n!+3递增
E F:nth-of-type(x) 选择 E元素下第x个F类型的元素，与上个不同的是只按F类型计数
...
|
否定选择器 :not()
1
2
3
| input:not([type=submit]) 除了submit按钮
input:not(.numInput) 除了class=numInput的
.ga:hover li:not(:hover) 也可以混合使用，hover到.ga上时，选择.ga下的li没有被hover的
|
边框
border简写
1
2
3
| div{
border: border-width border-style border-color // 有顺序要求
}
|
border-image
实用
box-shadow
div{
box-shadow:none | [inset x-offset y-offset blur-radius spread-radius color],
[inset x-offset y-offset blur-radius spread-radius color] // 多个投影时，可以用逗号“，”隔开
}
背景
background-image
大体与css2.1相同，新增了几个属性
1
2
3
| background-origin: padding-box || border-box || content-box // 确定起始位置，从外边缘开始还是内边缘开始
background-clip: padding-box || border-box || content-box // 背景图裁剪成指定位置
background-size: auto || <length> || <persent> || cover || contain // 背景图大小，auto不会改变大小，cover铺满父容器，contain保持宽高比例缩放到父容器大小
|
文本
