标签：
第七章
1、css分类
（1）控制基本格式的属性：font-size和color
（2）控制布局的属性：position和float
（3）控制在哪里换页的打印控制元素
（4）控制项目显示和消失的动态属性
（5）创建下拉列表和其他交互性组件
2、css3的新特性
圆角、阴影效果、文字阴影、自定义字体、旋转文本、半透明背景颜色、多图像背景、渐变等
3、基本格式
注意，上一行没写完的换到下一行要空连个字符
注：h1叫做选择器（h1和{之间最好用一个空格隔开），{}之间叫做声明块
提示：可以添加空格和制表符，回车增加代码的可读性。
4、添加注释
/*******注释内容**********/
5、继承
子元素将父元素的属性
可以继承的属性：p128
6、层叠
当发生冲突时：id选择器>类选择器>普通选择器
定义 !important属性，重要性最高
如p { color:orange !important; }
7、属性的值
1、inherit(继承) IE8之前的ie不支持
例如：有些属性无法继承，例如：border
已经为article 元素设定一个borer
p { borer:inherit; }
2、预定义的值
3、长度和百分数
长度必须包括单位（em,px）:一个em的单位长度大约与对应(父级)元素的字号相等。
百分数：相对于父元素
4、纯数字
只有少数属性不带单位，例如：line-height、z-index、opacity
例如：line-height: 1.5 值将于字号相乘得到行高
5、url
6、css颜色 p133
hex、RGB、HSL、RGBA、HSLA（后两种有一定的透明度）
（1）hex格式p134
color： #59007f;
（2）RGB
color: rgb(89,0,127);
用0-255中的数字表示
(3)RGBA（IE9之前的浏览器不支持）
alpha越接近0，越透明，1表示完全不透明
例如：bockground-color: rgba(89,0,127,1);
(4)HSL hue(色相) saturation（饱和度）lightness(亮度）
例：color: hsl(282, 100%, 25%);
(5)HSLA（IE9之前的浏览器不支持）
例：color: hsla(95,100%,28%,.4);
第八章
1、链接到外部样式表
注:URL是相对于服务器上该样式表的位置
早期版本要求添加type="text/css"
2、嵌入式样式表
<style></style>
3、应用内联式
例如：
<img src="img/palau.jpg" style="border:4px solid red" />
注：内联样式等级高于其他样式
3、样式的层叠和顺序
越晚出现的样式优先级越高
第九章
1、集中常见的选择器
注意：
（1）、上下文选择（后代选择器）
h1 em {
color:red;
}
这个样式只应用与h1元素中的em元素
article.architect p {
color:red;
}
属于arichitect类的article元素下的后代元素p
注：无论是第几代，都会实现样式
（2）子元素选择器
.architect > p
{
color:red;
}
注：只选中architect的下一代p元素
（3）伪类选择器
a:link{
color:red;
}
（4）属性、值选择器
a[title]{
color:red;
}
所有具有title属性的a元素
几种情况p165
（5）、通配符选择器
* {
color:red;
}
注：尽量少用，回事浏览器加载速度变慢
2、类选择器和id选择器
注意：
h1.news{
color:red;
}
属于news类的h1元素
3、按相邻同胞元素选择要格式化的元素
.architect p+p{
color: red;
}
应用：给除第一个段落以外的所有段落缩进
4、普通同胞结合符
h1~h2 { color:red; }
会让任何属于同一父元素的同胞h1后面的h2元素显示红色（它们可以直接相邻，也可以间接相邻）
5、选择第一个后最后一个子元素
first-child last-child(ie9之前不支持）伪类选择器
例：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
li:first-child { color:red; }
li:last-child { color:red; }
注：选择作为父元素(ul) 的第一个或最后一个子元素的li元素。不是li元素的第一个或最后一个最元素
.architect h1:first-child { color:red; } 仅对作为architect类元素的第一个子元素的h1 应用样式
6、选择元素的第一个字母或者第一行
：fist-letter :firt-line 伪元素
段落的第一个首字母变为红色
7、四个伪元素：html并不存在的元素
：fist-letter :firt-line :befor :afer
css3为双冒号（IE9后都可以兼容）：：fist-letter
伪类：应用于一组html元素，而你无需在html代码中用类标注他们
（ :first-child :link :hover :visited )等
8、按状态选择链接元素
a:link(从未被激活）
a:visited(被访问者激活外观）
a:focus(通过键盘Tab键获得焦点时激活）
a:hover(将鼠标停留在链接上时激活）
a:active(当访问者激活链接时）
一般按照这个顺序排列
9、指定元素组
h1,
h2{
color: red;
}
10、复杂选择器的写法从右往左看,选择器写法越简单越好
例：p169
第10章
1、选择字体
font-family:mane;
注：对于包含多个单词的字体名称，应该用引号引起来
例如：
指定替代字体：
当没有第一种字体，将自动用后面的字体替代
2、创建斜体
font-style:italic;
font-style:normal;
3、创建粗体
font-weight:bold (100-900之间的100倍数的数，400代表正常，700代表粗体)
font-weight:narmal;
4、设置字体大小
四种单位：px 百分数 em rem（IE9以上支持）
（1）font-size: 35px;
（2）font-size:100% 与默认自己字体相同
（3）font-size:1.75em 28px/16px 要指定的字体大小/父元素的字体大小 1em应该始终等于父元素字体的大小
（4）font-size: 1.0625rem; rem(root em) 根元素就是html元素。也就是相对于html字体的大小 要指定的字体大小/根元素的大小=值
指定特定的字体大小：font-size:xx-small、x-small、small、medium、large、x-large、xx-large
5、设置行高
line-height:1.75；
注意：行高没单位，具体的计算方法为：当前元素的字体大小*数字
6、同时设置
font: 100% Geneva，bold， italic;
注：使用font简记一定要包括字体大小(font-size)和字体（font-family）先是字体大小，然后是字体
7、设置颜色
color: #7d717c;
color: rgb(15,35,67);
color:rgba(14,45,67,.01);
8设置背景
（1）设置背景颜色：
background-color： #686a63;
（2）使用背景图像作为背景：
background-image: url;
（3）重复背景图像
background-repeat: direction(repeat\repeat-x\repeat-y\no-repeat);
（4）控制背景图像是否随页面滚动
background-attachement:fixed/scroll(默认)
（5）指定背景图像的位置：距离左上角的绝对距离（14px 20px）或者百分数或者（left,center,right top,center,bottom）
background-positon：right bottom;
（6）了解css3更多背景的控制
background-clip和background-origin控制显示的范围和开始的位置
9、控制间距
（1）字间距（增加距离）word-spacing: 4px或5em
（2）字偶距（减少距离）letter-spacing：4px或5em
10、增加缩进
text-indent: 1.5em或18px;
注：默认情况下对内联元素没有效果。但是可以使用display: block属性
11、对齐文本
text-align:left/right/center
注：默认情况下对内联元素没有效果。但是可以使用display: block属性
12、修改文本的大小写
text-transform:uppercase(大写)/lowercase(小写)；
13、使用小型大写字母
font-variant: samll-caps;
font-variant: none;
14、修饰文本
text-decoration: underline(下划线)/overline(上划线)/line-through(删除线)/none;
15、设置空白属性：让浏览器显示额外空格
white-space: nowrap;
标签：
原文地址：http://www.cnblogs.com/nankeyimeng/p/5003918.html
