03-状态伪类+复合属性+外边距合并
1.四种状态伪类
<html lang="en">
<head>
<style type="text/css">
/* 1 状态伪类的权重是10，当四种状态同时存在时要遵循lvha的顺序。 */
/* 未访问状态 */
a {
font-size: 50px;
}
a:link {
color: red;
font-size: 50px;
}
/* 2 访问后状态。访问后状态比较特殊，出于对隐私的考虑，访问后状态只能设置字体颜色。 */
a:visited {
color: green;
font-size: 80px;
}
/* 鼠标移入状态 */
a:hover{
color: blue;
font-size: 60px;
}
/* 鼠标按下（松开）状态 */
a:active{
color: orange;
font-size: 70px;
}
/* 当状态伪类有多个状态共存时会存在覆盖的情况。
如将访问后状态定义到最后，当访问后，在将鼠标移入，这里访问后状态和鼠标移入状态共存，
但是由于访问后状态定义在鼠标移入的后面，所以鼠标移入的状态会被覆盖，
页面依然呈现的是访问后的状态，所以当四种伪类都存在时需要遵循lvha的循序。
*/
/*a:visited {*/
/*color: green;*/
/*}*/
</style>
</head>
<body>
<div>
<a href="#">超链接</a>
</div>
</body>
</html>
2.常用的两种状态伪类
/* 默认状态 */
a {
color: red;
font-size: 50px;
}
/* 鼠标移入状态。 */
a:hover {
color: green;
}
3.行高和文本垂直居中
<html lang="en">
<head>
<style type="text/css">
/*
1 行高，line-height，用于设置文本在元素垂直方向的位置。
2 当盒子没有设置高度时，盒子的高度就是行高的值，因为文本会撑开盒子，且文本会始终垂直居中于盒子。
3 当盒子设置高度，盒子的高度不会随行高的变化为变化。
4 在设置行高的盒子中，如果希望文本垂直居中就将行高设置为盒子的高度。
*/
.box01 {
background: yellow;
line-height: 100px;
}
.box02 {
background: red;
height: 200px;
line-height: 200px;
}
</style>
</head>
<body>
<div class="box01">
<span>我是div</span>
</div>
<div class="box02">
<span>我是div</span>
</div>
</body>
</html>
4.行间距
<html lang="en">
<head>
<style type="text/css">
/*
1 文本分为四条线：顶线，中线，基线，底线。
2 行间距是多行文本行于行之间的距离，行间距是底线和底线之间的距离。
3 可以通过设置行高（line-height）来改变文本的行间距。
4 一个没有行高的盒子，盒子的高是行高*文本的行数。
*/
div {
background: red;
line-height: 50px;
}
</style>
</head>
<body>
<div>
<p>
hello jerryhello jerryhello jerryhello jerryhello jerryhello
</p>
</div>
</body>
</html>
5.练习-a标签导航
<html lang="en">
<head>
<!--
1 有5个a标签。a标签默认的状态是：宽100，高30，背景色是yellow，字体颜色是green，文本水平居中，去掉a的下划线。
2 鼠标移入a标签，背景色变为yellowgreen，字体颜色变为red，加上下划线。
3 5个a标签水平居中box，box的背景色是pink。
-->
<style type="text/css">
.box {
background: pink;
text-align: center;
line-height: 30px;
}
.box a {
width: 100px;
height: 30px;
background: yellow;
color: green;
/* a是行内元素，想要设置宽和高，需要显示转换为行内块元素。 */
display: inline-block;
/* a会继承父元素设置的文本属性。 */
/*text-align: center;*/
/* a会继承父元素设置的文本属性。 */
/*line-height: 30px;*/
/* 去掉下划线 */
text-decoration: none;
}
.box a:hover {
background: yellowgreen;
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
</div>
</body>
</html>
6.复合属性-font
.box1 {
background: gray;
width: 1000px;
color: red;
/* 字体倾斜：italic 倾斜；normal 正常 */
font-style: italic;
font-weight: bold;
font-size: 40px;
line-height: 100px;
font-family: "宋体";
}
.box2 {
background: gray;
width: 1000px;
color: red;
/* 如果样式中即定义了单属性又定义了复合属性，则后定义的覆盖先定义的。 */
font-style: normal;
/* font复合属性，属性依次为，是否倾斜 是否加粗 字号/行高 字体 */
/* 其中在font的复合属性中，字号和字体是必填向。 */
font: italic bold 40px/100px "宋体";
}
7.复合属性-border
<html lang="en">
<head>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background: red;
/* 边框单属性 */
/* 边框的粗细，默认3px */
border-width: 5px;
/* 边框的样式，solid 实线；dashed 虚线；dotted 点状线。 */
border-style: solid;
/* 边框的颜色，默认黑色。 */
border-color: orange;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
/* border复合属性，依次为边框粗细 边框样式 边框颜色 */
border: 5px dashed black;
}
.box3 {
width: 100px;
height: 100px;
background: orange;
/* 设置分别上下左右边框。 */
border-left: 5px dashed black;
border-top: 5px solid red;
border-right: 5px dotted blue;
border-bottom: 5px solid black;
}
.box4 {
width: 100px;
height: 100px;
background: orange;
/* 设置四个边框后，取消下边框的样式。 */
border: 5px dashed black;
border-bottom: none;
}
</style>
</head>
<body>
<div class="box1">我是div01</div>
<div class="box2">我是div02</div>
<div class="box3">我是div03</div>
<div class="box4">我是div01</div>
</body>
</html>
8.复合属性-background
<html lang="en">
<head>
<style type="text/css">
.box1 {
width: 1000px;
height: 600px;
/* 背景色 */
background-color: red;
/* 背景图 */
background-image: url("./img/timg.jpg");
/* 平铺方式。repeat 默认值，平铺；repeat-x，水平平铺，repeat-y，垂直方向平铺；no-repreat，不平铺。 */
background-repeat: no-repeat;
/* 背景图在元素中的位置，默认是left top。
水平位置：left center right 数值（正值向右，负值向左）
垂直位置：top center bottom 数值（正值向下，负值向上）
*/
/*background-position: center center;*/
/* 当background-position为数值时，0可以不用写单位px，其他数值则需要写单位px */
background-position: 10px 0;
}
.box2 {
width: 1000px;
height: 600px;
/*
background复合属性，属性依次为背景色 背景图 平铺方式 水平位置 垂直位置。
*/
background: red url("./img/timg.jpg") no-repeat center center;
}
</style>
</head>
<body>
<div class="box1">我是div01</div>
<div class="box2">我是div02</div>
</body>
</html>
9.复合属性-padding
<html lang="en">
<head>
<style type="text/css">
/*
1 内边距padding用于设置盒子和内容之间的距离。
2 当盒子设置内边距padding后，会撑大盒子。所以为了保证盒子的尺寸不变，又需要设置内边距，
要需要相应从盒子的宽高减去撑大的尺寸。
3 盒子在网页中的尺寸 = content区域（盒子设置的宽高） + padding区域 + border区域。
*/
.box1 {
width: 100px;
height: 100px;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
background: red;
}
.phone {
width: 50px;
height: 50px;
background: green;
}
.box2 {
width: 100px;
height: 100px;
background: orange;
/* padding复合属性的四种写法。 */
/* 一个值，上下左右 */
padding: 10px;
/* 两个值，上下 左右 */
padding: 10px 20px;
/* 三个值 上 左右 下 */
padding: 10px 20px 30px;
/* 四个值 上 右 下 左 */
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="box1">
<div class="phone">手机</div>
</div>
<div class="box2"></div>
</body>
</html>
10.练习-新浪导航
<html lang="en">
<head>
<style type="text/css">
.box {
height: 41px;
background: #fcfcfc;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
/*
box中的默认字号是16px，如果将a的字号设置为14px，则a的字号会和16px的文本沿着基线对齐，
导致a标签向下偏移，所以box的字体设置为16px。
*/
font-size: 14px;
padding-left: 170px;
}
.box a {
color: #4c4c4c;
text-decoration: none;
height: 41px;
display: inline-block;
line-height: 41px;
padding: 0 16px;
}
.box a:hover {
color: #ff8500;
background: #edeef0;
}
</style>
</head>
<body>
<div class="box">
<a href="#">手机</a>
<a href="#">电脑</a>
<a href="#">手机电脑</a>
</div>
</body>
</html>
11.padding需要减宽的场景
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11-padding需要减宽的场景</title>
<style type="text/css">
/*
1 当元素没有设置固定宽度时，宽度和父元素一样，给该元素设置水平方向的padding，不会撑开盒子。
2 当元素设置了固定宽度，此时设置水平方向的padding，盒子的尺寸会变大。
*/
.box {
height: 500px;
background: red;
padding-left: 100px;
}
.phone {
height: 300px;
background: green;
}
</style>
</head>
<body>
<div class="box">
<div class="phone">phone</div>
</div>
</body>
</html>
12.复合属性-margin
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-盒子模型之margin</title>
<style type="text/css">
/* 外边距margin表示盒子和盒子之间的距离。 */
.box {
height: 200px;
background: red;
/* margin单属性 */
margin-left: 50px;
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
}
.phone {
height: 50px;
background: green;
/* margin复合属性。 */
/* 一个值，上下左右 */
margin: 10px;
/* 两个值，上下 左右 */
margin: 10px 20px;
/* 三个值 上 左右 下 */
margin: 10px 20px 30px;
/* 四个值 上 右 下 左 */
margin: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="box">
<div class="phone"></div>
</div>
</body>
</html>
13.外边距合并
<html lang="en">
<head>
<style type="text/css">
/*
1 外边距合并。垂直排列的两个盒子，分别给上面的设置向下的外边距，给下面的盒子设置向上的外边距，
此时会出现外边距合并。
2 当两个盒子的外边距相同时，外边距合并之后的值，就是该值；当两个盒子的外边距不同时，合并之后的
值为较大的外边距值。
*/
.one {
width: 100px;
height: 100px;
background: red;
margin-bottom: 10px;
}
.two {
width: 100px;
height: 100px;
background: blue;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
浙公网安备 33010602011771号