目录
显示模式
-
块元素:
- 独占一行
- 高度、宽度等可以自行设置(没有制定和父亲一样宽)
- 可以装各种行块元素
常见块元素有:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<il>,文字类元素不可再放块元素
-
行元素:
- 一行中可以写多个元素
- 宽和高不可设置,由文字决定
- 只能容纳文字和行类其他元素
特殊,<a>链接中不能放链接,但是可以放块元素
-
行内块元素:
- 一行中可以有多个行内块元素(行特点)
- 可以设定宽度(块特点)
- <img/><input><td>
显示模式的转换:display:block(将行类元素转换为块类元素)、display:inline(块元素转换为行类元素)、display:inline-block(转换为行类块元素)
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
display: block;
color: black;
background-color: dimgrey;
line-height: 40px;
text-decoration: none;
text-align: center;
font-size: 14px;
height: 40px;
width: 230px;
}
a:hover {
background-color: orange;
}
.div1 {
width: 200px;
height: 200px;
background-color: aqua;
}
.div2 {
width: 600px;
height: 600px;
background-color: bisque;
background-image: url("../images/yang\'s帅照.jpg");
/* repeat-x -y */
background-repeat: no-repeat;
background-position: center top;
}
.div3 {
width: 600px;
height: 600px;
background-color: rgb(0, 0, 0, 0.6);
background-image: url("../images/yang\'s帅照.jpg");
background-position: center top;
background-attachment: fixed;
}
</style>
</head>
<body>
<a href="http://www.cug.edu.cn" target="_blank">中国地质大学(武汉)</a>
<a href="http://www.whu.edu.cn" target="_blank">武汉大学</a>
<a href="http://www.ncu.edu.cn" target="_blank">南昌大学</a>
<a href="http://www.nuist.edu.cn" target="_blank">南京信息工程大学</a>
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello
css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css
<br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello
css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css <br/> hello css
<br/> hello css <br/> hello css <br/> hello css <br/> </div>
</body>
</html>
背景
背景颜色:background-color:color直接使用颜色
背景图片:background-image: url(path)插入图片作为背景
背景图片平铺:如果图片过小,则会复制图片进行平铺,可以使用background-repeat:进行设置,不平铺,根据x平铺,根据y平铺
背景图片位置:背景图片位置控制特别方便,可以使用精确单位,也可使用方位名词
背景图像是否固定:利用background-attachment,fixed固定住,scroll随着内容滚动
背景的复合用法:background:color url repeat fixed position
三大特性
层叠性:后样式将前样式覆盖,存在相同样式则进行覆盖,不同样式则是继承。
继承性:儿子继承父亲的样式
优先级:
- 选择器相同则执行层叠性
- 选择器不同则根据选择器权重执行
- 继承(*)<元素选择器<类选择器(伪类)<ID选择器<行内样式<!important
- 在复合选择器中存在权重叠加的情况(重要)