web学习笔记--css(3)

最新推荐文章于 2023-05-16 22:13:26 发布

SkyeBCI

最新推荐文章于 2023-05-16 22:13:26 发布

阅读量605

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/Void_worker/article/details/80929196

版权

CCS学习系列笔记
web学习笔记–css(1)
web学习笔记–css(2)
web学习笔记–css(3)

web学习笔记–css(3)

8.行高

设置当行文本垂直居中的方式：只需要将行高设置和盒模型的高度设置一致即可。
文本在它的行高里面永远都是垂直居中的。

设置多行文本垂直居中显示：
step1：设置行高line-height，数行数n，文字的高度h_font=行数*行高
step2：用总的高度h-文字的高度h_font，再除以2，就是padding_top的值
step3：为了保持总的高度不变，需要将总的高度h自减padding_top求出修改后的总的高度h

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
p{
width: 500px;
/*原高度 600px*/
/*height: 600px;*/
/*为了保持总高度不变，将总高度减去padding_top的值*/
height: 350px;
border:1px solid black;
margin: 100px;
text-align: center;
line-height: 20px;

/*padding_top求法：(原高度height - （行高line_height * 行数n）) / 2 */
/*即：( 600px - (20 * 5) ) / 2 = 250 */
padding-top: 250px;
}
</style>
</head>
<body>
<p>我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦我是一只小鸭子咿呀咿呀呦</p>

</body>
</html>

9.伪类

伪类：同一标签根据用户的不同状态显示不同的样式
共四类：link、visited、hover、active

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*link是用户鼠标未点击链接之前所产生的样式*/
/*a{*/
/*color: aquamarine;*/
/*font-size: 30px;*/
/*background-color: mediumpurple;*/
/*}*/
a:link{
color: orangered;
font-size: 10px;
text-decoration: none;
background-color: yellow;
}
/*visited表示用户鼠标单击访问完链接之后产生的样式*/
/*访问之后：字体颜色，背景颜色可以继承，字体大小，下划线不可以继承*/
a:visited{
color: grey;
font-size: 100px;
text-decoration: underline;
background-color: lime;
}
/*hover表示用户鼠标经过产生的样式*/
a:hover{
color: lightskyblue;
font-size: 90px;
text-decoration: underline;
background-color: lime;
}
/*active表示用户鼠标点击该链接不松手时候产生的样式*/
a:active{
color: black;
font-size: 50px;
text-decoration: none;
text-shadow: 3px 3px 3px black;
background-color: lime;
}

</style>
</head>
<body>
<a href="伪类_跳转页面.html" class="">我要去跳转页面</a>

</body>
</html>

10.background属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-image: url(../img/yellow.png)

最低0.47元/天解锁文章

SkyeBCI

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
web学习笔记--css(3)

css目录8.行高9.伪类10.background属性11.定位11.1 静态定位 static11.2 相对定位 relitive11.3 绝对定位 absolute11.3 子绝父相css目录8.行高设置当行文本垂直居中的方式：只需要将行高设置和盒模型的高度设置一致即可。文本在它的行高里面永远都是垂直居中的。设置多行文本垂直居中显示...
复制链接

扫一扫