css3学习参考手册
1、什么是CSS3
CSS（层叠样式表）它是用来控制页面的布局、字体、颜色、背景和其它效果，CSS3是最新版本，控制更加精细，更加高效，实现更复杂的效果。
2、CSS文件的命名方式 style.css
3、写CSS的常用三种方法
行内样式、内部样式、外链样式
<link rel="stylesheet" href="style.css">
CSS三种位置写法的优先级是：行内样式＞内部样式＞外部
控制越精细，优先级越高
4、CSS语法
h1,h2,h3{color:red;font-size:16px}
选择器种类：
1、类选择器 class ----- .
2、ID选择器 id---------#
3、标签选择器 p{color:red}
4、派生选择器 li span{color:red}
5、属性选择器 a[target=_blank]{color:red}
CSS 样式(属性)：
1、宽度 width 高度：height 颜色 ： color
2、 背景 background(图片背景 颜色背景)
background:url(bg.jpg) repeat;
3、文字（大小：font-size 粗细：font-weight 字体：font-family ）
4、段落（文本缩进 text-indent 文本对齐：text-align 垂直对齐：vertical-align 行高：line-height)
5、伪类：链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
下划线：text-decoration
6、列表样式：list-style
li {list-style : url(example.gif) square inside}
7、表格 合并边框
table { border-collapse:collapse; }
8、盒模型
圆角边框：border-radius
不让边框和内距占用尺寸：box-sizing:border-box;
10、浮动：float 清除浮动：clear 溢出：overflow 文字溢出：text-overflow:ellipsis（省略号）
11、定位：position 相对定位：relative 从不定位：absolute 参照物：拥有position属性的父标签 否则body
12、阴影：文字阴影：text-shadow 盒阴影：box-shadow
13、行内元素，块元素
浮动：float 转换：display
块元素：p\div\H 行内：a span
区别：块元素独立一行；可以设置margin的上下左右值
行内元素不独立一行；只能设置margin的左右值；不能设置宽高
14、变形：transform的属性包括：rotate() / skew() / scale() / translate(,)
15、动画功能之transtions
transition: all 1s linear
16、animation复杂动画
.box { background-color: red;
animation: mycolor 4s linear infinite;//无限循环
//animation: mycolor 4s linear 1;//1次循环
}
@keyframes mycolor {
0% { background-color: red; }
40% { background-color: darkblue; }
70% { background-color: yellow; }
100% { background-color: green; }
}
17、不同浏览器的非兼容写法
谷歌：-webkit- 火狐：-moz- IE：-ms- 欧朋:-o-
==============特殊选择器===========
18、E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1
p:nth-child(3) { color:#f00; }
E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-child(odd) { color:#f00; }匹配父元素下奇数个子元素
E:nth-child(even) { color:#f00; }匹配父元素下偶数个子元素
E:nth-child(An+B)应用于倍数的循环
li:nth-child(4n+1) {background:red;}
li:nth-child(4n+2) {background:blue;}
li:nth-child(4n+3) {background:green;}
li:nth-child(4n+4)
19、E ~ F 匹配F元素，限E元素之后的同级F元素（E元素的子F元素不起作用）
p ~ ul { background:#ff0; }
20、E:first-line 匹配E元素的第一行
p:first-line { font-weight:bold; color;#600; }
E:first-letter匹配E元素的第一个字母
E:before在E元素之前插入生成的内容
E:after在E元素之后插入生成的内容
21：E[att^=”val”]属性att的值以”val”开头的元素
div[id^="nav"] { background:#ff0; }
E[att$=”val”]属性att的值以”val”结尾的元素
E[att*=”val”]属性att的值包含”val”字符串的元素
本课做的HTML页面： 
素材.rar (2.39 KB, 下载次数: 2655)
