CSS基础 和 font字体、背景属性连写 与 清除浮动方法

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" >
<li class="nav-cell">秒杀</li>
<li class="nav-cell">优惠券</li>
<li class="nav-cell">PLUS会员</li>
<li class="nav-cell">闪购</li>
<!-- 第一种：使用而外标签 -->
<!-- <li ></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.只能作用于定位过的元素