目录:
一、伪类
二、样式
1、字体
2、背景图片
3、margin和padding
4、列表属性
5、float
6、clear
7、position
8、text-decoration(a标签下划线去除)
9、vertical-align
内容:
一、伪类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{ background-color:red; } a:hover{ background-color:blue; } a:visited{ background-color: #dddddd; } a:active{ background-color:green; } p:after{ content: 'ppp'; } p:before{ content: 'aaa'; } </style> </head> <body> <!--伪类--> <a href="http://www.baidu.com">baidu</a> <p>hello p </p> </body> </html>
二、样式
1、字体格式:
letter-spacing: 字母之间的间距
word-spacing: 单词之间的间距(重要)
text-transform:capitalize 首字母大写
2、背景图片
background-position:center center 表示居中
3、margin和padding
注意:在div嵌套中,如果外面的div标签没有内容,设置里面div的margin的时候,会发现左右是你想要的效果,但是上下会有问题,这个问题是div塌陷问题,通常需要在div中标注内容或者在外面div中加border解决div塌陷问题
4、列表属性
ul,ol{
list-style:decimal-leading-zero;
list-style:none;
list-style:circle;
list-style:upper-alpha;
list-style:disc;
}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
ul{ /*list-style: decimal-leading-zero;*/ 显示数字 /*list-style:none;*/ 无任何样式 /*list-style:circle;*/ 显示为序列为空心圆 /*list-style:upper-alpha; 显示序列为A B C*/ list-style:disc; 普通显示 }
5、float
float设计之初是为了文本环绕图片而设计的,所以虽然div标签会悬浮,它还是会把其他div标签内的文本挤出自己所占的空间
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color:red; height:30px; width:50px; } #i2{ background-color:yellow; height:30px; float: left; width:50px; } #i3{ background-color:green; height:70px; width:200px; } </style> </head> <body> <div id="i1">1111</div> <div id="i2">222</div> <div id="i3">333</div> </body> </html>
6、clear
clear:none|left|right|both
取值:
none: 默认值,允许两边都可以有浮动对象
left:不允许左边有浮动对象
right:不允许右边有浮动对象
both:不允许有浮动对象
备注:
与clear达到同样的效果,可以在父级标签加overflow:hidden属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ background-color:blue; } .menu1{ width:100px; hegith:50px; color:gold; float:left; } .menu2{ width:100px; hegith:50px; color:gold; float:left; } .bottom{ background-color: green; text-align: center; } .clear{ clear:both; } </style> </head> <body> <div class="outer"> <div class="menu1">菜单一</div> <div class="menu2">菜单二</div> <div class="clear"></div> </div> <div class="bottom">底部</div> </body> </html>
7、position
取值:
static:默认值
fixed
relative:relative紧跟着设置top和left,它会相较它之前的位置移动
absolute:如果它一直找不到一个父类的position为非static,它会参照html整体的位置进行移动,如果找到会按照该父类进行移动
例子:relatvie效果,可以看到div2的位置没有被div3取代,说明relative不是一个脱离操作,它只是按照它自己的位置相对移动
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color:red; height:30px; width:50px; } #i2{ background-color:yellow; height:30px; width:50px; position: relative; left:100px; top:100px; } #i3{ background-color:green; height:70px; width:200px; } </style> </head> <body> <div id="i1">1111</div> <div id="i2">222</div> <div id="i3">333</div> </body> </html>
8、text-decoration(a标签下划线去除)
text-decoration:none 去掉a标签下面的横向,但是a标签仍然有超链接功能
underline 默认的,增加下划线
9、vertical-align 这个属性在图片对应的标签上设置
表示文本的垂直居中
top:表示文本和图片头部保持水平
bottom:表示文本和图片底部保持水平
middle:表示文本与图片中部保持水平
数字: 可以任意修改和图片的位置