CSS
选择器
p.into 表示带有into类的p元素
伪类：
a) first-line
b) last-line
伪元素：
:before 能在指定的元素前添加内容（创造内容）
如：p.tip:before{content: ‘hot top’;}
:after 用法和:before相同
::sekection 针对访问者选中的东西进行样式设置。（只能对颜色和背景颜色进行改变）
如：::selection{
color:#fff;
background-color:red;
}
属性选择器
如：img[title]
子选择器：nth-child()
如: tr:nth-child(odd){color:red;}
tr:nth-child(odd){color:blue;}
子类型选择器：
如：
:first-of-type 同 :first-child
:last-of-type 同 :last-child
:nth-of-type 同 :nth-child
not选择器
用样式继承节省时间
继承：用用在某个css标签上的样式内嵌到其子标签上
一般影响网页元素位置的属性，或者边距，背景色和元素的边框都不会被继承。
用层叠管理多样式
有限性：直接应用的->最近的祖先
用权值决定哪种样式胜出：（权重由上往下增大）
a) 标签选择器
b) 类选择器
c) ID选择器
d) 内嵌样式
权重相同的后面的会覆盖前面的。
文本格式化
大小写： text-transform: uppercase; / lowercase; / none;
小型大小写字母： font-variant : small-caps;
文本修饰： text-decoration: overline; / underline; …
使用上下边框可以代替上下下划线
字间距，字耦距 word-spacing letter-spacing
给文本添加阴影：text-shadow : 4px 4px 3px #ddd;
水平偏移量，垂直偏移量，阴影模糊度，颜色
给网页添加图片
background-image: url();
background-position: top; / center; /bottom;
例如：
background-position: top top;
background-position: 20px 30px;
background-position: 50% 50%;
background-attachment: scroll; / fixed;
background-origin 和 background-clip
background-origin: 图片的起始位置：可接收的值如下
border-box 图片放置与border区域左上角
padding-box 图片放置与padding区域左上角
center-box 图片放置与center区域右上角
background-clip ： 限制背景图片的显示区域
border-box 图片放置与内容区域后面
padding-box 图片放置与padding区域左上角
center-box 图片放置与center区域右上角
background-size: 缩放背景图片
value ： background-size：100px 200px;
key : background-size: contain; / cover
contain:保持长宽比 ； cover： 不保持长宽比
使用渐变色背景：
background-image : linear-gradient(left , black, red);
装饰网站导航
css的transform transition animation
1,transform (变形)
a) transform: roate(10deg); 顺时针旋转10度
b) transform: scale(2); 放大2倍
c) transform: translate(1px 2px); 向右移动1px 向下移动2px
d) transform: skew(0, 45deg); 沿Y轴倾斜45度
可以多个函数共用：
transform: roate(10deg) scale(2) translate(1px 2px);
2，transition 在一定时间内是一组样式换到领一组样式
.navbutton{
color: red;
transition-property: background-color;
transition-duration: 1s;
}
.navbutton:hover{
color: blue;
}
transition-property: background-color, color, border-color;
transition-duration: 1s, 2s, 3s;
transition-timing-function
a) linear
b) ease
c) ease-in
d) ease-out
e) ease-in-out
f) cubic-bezier(0.1, 0.2, 0.8, 0.6);
transition-delay: 5s;
animation
animation-duration: 1s;
animation-name: fideIn, blink;
animation-interation-count:10;
animation-play-state: running; / paused;
表格和表单的格式化
1， 给表格定义样式
a) 添加padding td{padding: 1px 2px 3px 4px;}
b) 调整垂直对齐和水平对齐
1,text-align (left , right, center)
2,vertical-align (top, baseline, middle, bottom)
c) 创建边框
1，cellspacing borderspacing: 0;
2,border-callapse (collapse) 消除双边框
2， 给行和列定义样式
tr:nth-of-type(odd){color:red;}
tr:nth-of-type(even){color:red;}
3,给表单定义样式
CSS布局
<blockquot> 标签（一个块）
<article> <header> <footer> <nav>
基于浮动的布局
float: left; / right; / none;
克服浮动： clear: left; / right;
浮动下落：
box-sizing: center-box; / padding-box; border-box;