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.只能作用于定位过的元素