1、基本选择器
ID选择器（全局唯一）>类选择器>标签选择器
1.1、ID选择器
ID选择器就是唯一的一个ID
id="xxx"
1.2、类选择器
在标签后面加上class的声明，可以给多个标签归在一个类里面，一起使用这个选择器。
class="xxx"
1.3、标签选择器
通过标签来给与。
2、层次选择器
2.1、后代选择器
body p{
background:red;
}
上面这个意思是body，他的子代里面所有的p都用这个样式。body可以改成别的id或者别的属性，p也可以换成别的类或是标签。
2.2、子代选择器
body>p{
background:red;
}
和后代选择器相比，不是全部的p，而是第一代，也就是儿子。
2.3、相邻兄弟选择器
#nav + p{
background:red;
}
（弟弟选择器，第一个弟弟，不包括弟弟后代）
2.4、通用选择器
#nav ~ p{
background:red;
}
（全部弟弟，不包括弟弟后代）
3、结构伪类选择器
3.1、选中首/尾子元素
:first-child，:last-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#list li:first-child {
background: red;
}
</style>
</head>
<body>
<ul id="list">
<li>one</li>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
<li>two</li>
<ul>
<li>列表3</li>
<li>列表4</li>
</ul>
<li>three</li>
<ul>
<li>列表5</li>
<li>列表6</li>
</ul>
</ul>
</body>
</html>
这里面，first就是取ul属性中的第一个li（如果第一个是li），和每一个属性里的第一个li（如果第一个是li)。last同理。
3.2、选中第n个元素
:nth-child(n)按顺序选中父级下的第n个，:nth-of-type(n)选中第n个。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#list li:nth-child(2) {
background: red;
}
</style>
</head>
<body>
<ul id="list">
<li>one</li>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
<li>two</li>
<ul>
<li>列表3</li>
<li>列表4</li>
</ul>
<li>three</li>
<ul>
<li>列表5</li>
<li>列表6</li>
</ul>
</ul>
</body>
</html>
这里面，:nth-child(n)就是取ul属性中的数下来的第n个li（如果第n个是li），和每一个属性里的第n个li（如果第n个是li)。:nth-of-type是取ul里面的第n个li和每个属性里的第n个li。（一个是child的一个是type的）
4、属性选择器
= 等于等号右边
*=包含等号右边
^=以等号右边开头
$=以等号右边结尾
4.1、表达方式
p[id^=kkk]{
background:red
}
a[class*=links]{
background:green
}
a[href^=www]{
background:green
}
<p id="kkkqeywi">one</p>
<p id="kahdia">two</p>
<p id="fasywi">three</p>
<p id="kkkcc">four</p>
<p id="qqrqw">five</p>
<a href="rnm.doc" class="item links">one</a>
<a href="" class="item links sex">two</a>
<a href="www.baidu.com" class="links active">three</a>
<a href="cnm.pdf" class="item active">four</a>
上述代码表示，p元素内，id以kkk开头的标签；a元素内，class含有links的；a元素内，href以www开头的。
5、美化网页
5.1、字体样式
font-family 字体类型
font-size 字体大小
font-weight 字体粗细
color 字体颜色
body{
font-family:"Arial Black",楷体;
}
字体类型可以一次指定两种，一个中文一个英文。
通过vertical-align:middle可以给i标签设置和文字对齐。
5.2、文本样式
color rgb rgba(a是透明度)颜色
text-align = center 文本居中（左右的中间）
text-decoration 划线样式
text-indent:2em 首行缩进2字节
line-height 行高（行高和边框一样，就可以让文本在上下的中间）
vertical-align = center 垂直居中（多行居中，而不是line-height的单行居中）
5.3、阴影
text-shadow:阴影颜色，水平偏移，竖直偏移，阴影模糊度
text-shadow: red 20px -10px 2px ;
5.4、超链接伪类
a{
默认不动他的状态
}
a:hover{鼠标悬停在上面的状态
color:orange;
font-size:50px;
}
a:active{鼠标按住的状态
color:bule;
}
5.5、列表样式
list-style列表前面序号的样子，有/空心圆/正方形等等
5.6、背景
可以直接在background里面按照（颜色，图片，图片坐标，平铺方式）写
background:red url("") 300px 10px repeat-x;
也可以分为background-image（图片）、background-position（图片坐标）、background-repeat（平铺方式）
6、盒子模型
盒子套盒子的样子。外边距边框等等。
pading是盒子内的边距，margin是盒子外的边距
6.1、内外边距
可以把margin设置为auto，通过左右边距相同来达到居中样式。
margin：0 1px 2px 3px，上左下右的顺序，也可以只有一个（全部）和两个（上下和左右）。
6.2、边框
实线solid 1px宽 黑色边框
点线dotted，虚线dashed
border:1px #000 solid;
圆角边框
border-radius:25px;
和边距一样，顺时针填入。也可以只有一个（全部）和两个（左上右下和左下右上）。
<li class="kill-goods">
<div class="goods_img">
<a href=""><img src="upload/mobile.png" alt=""></a>
</div>
<div class="goods_title">
<em>Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机 </em>
</div>
<div class="goods_price">
<strong><em>¥</em>6088.00</strong>
<span>￥6988</span>
</div>
<div class="goods_progress">
<em>已售87%</em>
<div class="bar">
<div class="bar_in"></div>
</div>
<em>剩余<span class="style-red">29</span>件</em>
</div>
<div class="goods_buy">
<a href="">立即抢购</a>
</div>
</li>
6.3、浮动
6.3.1、display(不能选择方向)
display:inline 行元素
display:block 块元素
display:inline-block 行内块元素
6.3.2、float
东西都浮出来，但是父级边框塌陷。
float:right;
float:left;
6.3.3、解决父级边框塌陷
clear:left; 不允许左侧有浮动
clear:right;不允许右侧有浮动
clear:both; 不允许两侧有浮动
1.增加父级边框元素的高度
有固定高度，会被限制，不推荐
#father{
border:1px solid #000;
height:800px;
}
2.在父级中的最后加一个空的div标签，并将他的浮动清除
实际中要避免空div，不推荐
.zzz{
clear:both;
margin:0;
padding:0;
}
3.使用overflow
产生滚动条不美观或者有内容可能被裁剪，不推荐
overflow是规定内容溢出区域时怎么做
overflow:hidden;内容被裁剪，其余内容不可见
overflow:scroll;内容被裁剪，滚动条展示其余内容
overflow:auto;如果被修裁剪就滚动条。
#father{
border:1px solid #000;
overflow:hidden;
}
4.为父类添加一个伪类
（推荐）
#father:after{
content: '';
display: block;
clear:both;
}
7、定位
7.1、相对定位
position:relative;
top:100px;离上端100px
bottom:200px;离下端200px
left:200px;离左端200px
right:100px;离右端100px
相对于原来的位置，进行指定的偏移。
7.2、绝对定位
position:absolute;
top:100px;离上端100px
bottom:200px;离下端200px
left:200px;离左端200px
right:100px;离右端100px
有父级元素就以父级元素定位，没有就相对于浏览器定位。只能在用于定位的元素的范围内进行偏移。不在标准文档流中，原来的位置会被保留。
7.3、固定定位
position:fixed;
top:100px;离上端100px
bottom:200px;离下端200px
left:200px;离左端200px
right:100px;离右端100px
在页面里面，绝对定位的东西滚轮移动他就动了。固定定位则是永远在规定的位置。
7.4、z-index和透明度
z-index就是一种层级的元素，z-index越高，层次越高，两个元素重叠在一起越会显示。
opacity透明度。可以使元素变透明，显示出叠在下面的元素。
8、过渡
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。
我们现在经常和 :hover 一起 搭配使用。
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
- 属性
属性就是你想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。
-
花费时间
transition-duration 花费时间 单位是 秒（必须写单位） s ms 比如 0.5s 这个s单位必须写 ms 毫秒
-
运动曲线 默认是 ease
运动曲线示意图：
-
何时开始
默认是 0s 鼠标触发就立即开始 可以设置 延迟触发时间
案例：
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
/* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */
}
div:hover { /* 鼠标经过盒子，我们的宽度变为400 */
width: 600px;
height: 300px
}
transition: all 0.6s; /* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */
transition: all 0.5s;
常见效果：
按钮变换底色 图片移动 小米效果 （阴影效果） 传智导航栏效果 等等
9、关于hover事件附加边框，盒子变动
延迟触发时间
案例：
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
/* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */
}
div:hover { /* 鼠标经过盒子，我们的宽度变为400 */
width: 600px;
height: 300px
}
transition: all 0.6s; /* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */
transition: all 0.5s;
常见效果：
按钮变换底色 图片移动 小米效果 （阴影效果） 传智导航栏效果 等等
9、关于hover事件附加边框，盒子变动
可以把原来就设置好边框。透明色。再添加事件鼠标移动换色，而非加框。
1151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
