单位
绝对长度
px 像素(浏览器默认字体为16px)
注：用于pc端固定布局
相对长度
em 相对于父元素的字体大小
rem 相对于根元素的字体大小ie9+
注：一般html元素的字体大小设置为625%，body元素的字体大小设置为0.16rem(0.1rem=1px)
% 百分比
vw | vh 以百分比设置宽高(1vw=1%)ie9+
1 // 将元素高度设置100%，需将html和body的高度设置100% 2 <html style="height: 100%;"> 3 <body style="height: 100%;"> 4 <div style="height: 100%;"></div> 5 </body> 6 </html> 7 8 // 而使用vh则不用 9 <div style="height: 100vh;"></div>
颜色
设置颜色的方式：
1、red
2、rgb(255,0,0) | rgba(255,0,0,1)ie9+
3、hsl(360, 100%, 50%)ie9+ | hsla(360, 100%, 50%,1)ie9+
4、#FF0 | #FF0000
注：一般使用十六进制表示
选择器
div 选择元素
#id 选择id
.class 选择类名
* 通配符
elem elem 选择元素下的元素
elem > elem 选择元素下的子元素
elem + elem 选择元素后的第一个元素
elem ~ elem 选择元素后的所有元素
[attr] 选择带有某属性的元素(= *= ~= |= ^= $=)
=等于 *=包含 ~=空格 |=前缀 ^=开头 $=结尾
伪类
:hover 鼠标经过效果ie7
:focus 选择带有焦点的元素ie8
:before 在元素之前插入内容ie8
:after 在元素之后插入内容ie8
1 // 用于浮动元素清楚浮动
2 .clearfix:before,.clearfix:after{
3 content: "\200B";
4 display: block;
5 height: 0;
6 clear: both;
7 }
css3伪类
:first-child 选择第一个子元素ie7
以下ie9+支持
:last-child 选择最后一个子元素
:only-child 选择唯一的子元素
:first-of-type 选择第一个同类型的子元素
:last-of-type 选择最后一个同类型的子元素
:only-of-type 选择唯一的同类型的子元素
:nth-child() 选择第n个元素
:nth-last-child() 选择第n个元素(反向)
:nth-of-type() 选择第n个同类型的元素
:nth-last-of-type() 选择第n个同类型的元素(反向)
注：参数可以是数字(n)、关键字(odd even)、公式(2n+1)，索引是从1开始
:not(sel) 选择不是指的选择器的元素
:root 选择html元素
:empty 选择没有任何子级的元素
:target 选择锚点元素
:enabled 选择可用表单控件
:disabled 选择不可用表单控件
:checked 选择选中控件
::selection 被用户选中文本自定义高亮
符号
!important 指定样式优先权
1 <div id="demo"></div>
2
3 #demo {
4 width: .8rem;
5 height: .8rem;
6 background-color: #ccc; !important
7 background-color: #f00; // 不会覆盖上面的颜色
8 }
/* comment */ 添加注释
@import 导入样式
1 @import url("global.css");
2 @import url(global.css);
3 @import "global.css";
4
5 @import url(example.css) screen and (min-width:800px);
注：建议使用link标签替代
@charset 指定样式的字符集
1 @charset "UTF-8";
@media 媒体查询ie9+
@media screen and (min-width:768px;)
@font-face 指定用户没有的字体ie9+
1 @font-face {
2 font-family: myFont;
3 src: url("Sansation_Light.ttf") format(‘embedded-opentype‘),
4 url("Sansation_Light.eot") format(‘truetype‘); // ie9
5 }
6
7 // 使用
8 div {
9 font-family: myFont;
10 }
@keyframes 指定一个动画ie10+
1 @keyframes myAnimated1 {
2 from { opacity: 1; }
3 to { opacity: 0; }
4 }
5
6 @keyframes myAnimated2 {
7 from { transform: translate(0, 0); }
8 20% { transform: translate(20px, 20px); }
9 40% { transform: translate(40px, 0); }
10 60% { transform: translate(60px, 20); }
11 80% { transform: translate(80px, 0); }
12 to { transform: translate(100px, 20px); }
13 }
书写顺序
hack
定位与对齐
媒体查询
css3特性