1.伪类
1. :link
2. :visited
3. :hover(重要)
4. :active
5. :focus(input标签获取光标焦点)
2.伪元素
1.:first-letter
2.:before(重要在内部前面添加)
3.：after(重要 在内部后面添加)
一、CSS
1.css属性
1.字体
字体居中：
.font-dv {
font-size: 20px;
font-family: "微软雅黑";
font-weight: 700;
font-style: italic;
border: 1px solid red;
height: 100px;
line-height: 100px;
text-align: center;
}
font字体连写
- 语法：font:font-styel font-weight font-size/line-height font-family;
- PS: 框高=行高 字体垂直居中
- 代码：font连写：font: italic 700 20px/100px "微软雅黑";
1 .font-dv{ 2 height:100px 3 font: italic 700 20px/100px "微软雅黑"; 4 border:1px solid red; 5 text-align: center; 6 }
2.文本属性
1.text-align 对齐（重要）
2.text-decoration装饰（去除a标签的下划线(text-decoration:none）
3.text-indent 首行缩进
3.背景属性
1.background-color 背景颜色
2.background-image 背景图片（XXX） url（） no-repeat 50% 50%
background-color
背景颜色
background-image
背景图片
background-image：url（图片地址）
background-repeat
背景平铺
值：repeat(默认) | no-repeat | repeat-x | repeat-y
background-position
背景定位
值：left | right | center | top | bottom
background-position-x: left | right | center
background-position-y: center | top | bottom
★方位值只写一个的时候，另外一个值默认居中。
background-position:right center;
background-position:center; --> center center;
★写2个方位值的时候，顺序没有要求。
background-position:20px 30px;
★写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向。
background-position:right center;
background-attachment
定义：设置背景图像是否固定或者随着页面的其余部分滚动。
值：scroll | fixed
背景属性连写：
background: url("../content/images/top.jpg") no-repeat center top;
4.color
1.red
2.#FF0000
3.rgb(255,0,0) -->rgb(255,0,0,0.5)
5.边框属性 border
1.border-width(边框宽度)
2.border-style(边框样式)
3.border-color(边框颜色)
简写：
border:1px solid red;
6.css盒子模型
1.content(内容)
2.padding(内填充) 调整内容和边框之间距离时使用这个属性
3.border(边框)
4.margin(外边框) 多用于调整标签之间的 距离
注意：要习惯看浏览器console窗口那个盒子模型
7.display(标签的展现形式)
1.inline
2.block 菜单里面的a标签可以设置成block
3.inline-block
4.none(不让标签显示，不占位)
8.float(浮动)
1.多用于实现布局效果
1.顶部的导航条
2.页面左右分栏（博客页面：左边20% 右边80%）
2.float
1.任何标签都可以浮动，浮动之后都会变成块级 a标签float之后就可以设置高宽
3.float取值：
1.left
2.right
3.none
9.clear清除浮动--》清除浮动的副作用（内容飞出，父标签撑不起来）
1.结合伪元素来实现
.clearfix:after{ content:""; display:"block"; clear:both; }
2.clear取值：
1.left
2.right
3.both
10.overflow
1.标签的内容放不下（溢出）
2.取值：
1.hidden-->隐藏
2.scroll-->出现滚动条
3.auto
4.scroll-x scroll-y
列子：
圆形头像的列子
1.overflow：hidden
2.border-radius:50%(圆角)
当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误。
总结：哪个容器的子元素有浮动，那么父容器必须要清浮动!
◆清除浮动不是不用浮动，清除浮动产生的不利影响。
◆清除浮动的方法
语法：clear: left | right | both
工作里用的最多的是clear:both;
★额外标签法
在最后一个浮动元素后添加标签,然后标签中加clear:both;。
★给父集元素使用overflow:hidden;(如果有内容出了盒子，不能使用这个方法)
★伪元素清除浮动 推荐使用<ul class="nav-ul clearfix">
clearfix:after {
content: " ";
/*both:left+right*/
clear: both;
height: 0px;
display: block;
visibility: hidden;
}
<ul class="u1 clearfix" style="overflow:hidden">
<li class="nav-cell">秒杀</li>
<li class="nav-cell">优惠券</li>
<li class="nav-cell">PLUS会员</li>
<li class="nav-cell">闪购</li>
<!-- 第一种：使用而外标签 -->
<!-- <li style="clear:left;"></li> -->
</ul>
11.定位position
1.static(默认)
2.relative(相对定位-->相对于原来的位置)
3.absolute(绝对定位-->相对于定位过的前辈标签)
4.fixed(固定-->返回顶部按钮实例)
补充：
脱离文档列的3中方式
float
absolute
fixed
12.opacity(不透明度)
1.取值0~1
2.和rgba()的区别：
1.opacity 改变元素\子元素的透明度效果
2.rgba()只改变北京颜色的透明度效果
13.z-index
1.数值越大，越靠近你
2.只能作用于定位过的元素