您的位置：首页 > Web前端 > CSS

css 行高对齐 文字缩进 文字距离 文字的透明 文字阴影

2019-06-22 11:05 453 查看

css 行高对齐 文字缩进 文字(英文)距离 文字的透明 文字阴影

行高(line-height:??px)对齐:行高就是文字在一行中所占的高度,当设置文字所在的位置(盒子)的高度为50px,当我们不设置行高的时候,文字在一行中就显得不居中,那么怎么解决这个问题呢?我们只要将行高也设置为50px,那么文字就会根据行高来自动的居中。下面来演示一下，加行高和不加行高的效果。
第一种不加行高的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
height: 50px;
background: pink;
}
</style>
</head>
<body>
<div>搞事情</div>
</body>
</html>

效果就会成为这个样子：

很显然它的效果就是不居中，显得很难看。
第二种就是加行高的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
height: 50px;
background: pink;
line-height: 50px;
}
</style>
</head>
<body>
<div>搞事情</div>
</body>
</html>

效果如下：

这样就显得舒服多了。
文字缩进(text-indent:??em)：：就是将文字向右移动一点。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
p:first-child {
color: #00FF00;
text-indent: 5em;
}
p:last-child{
color: #00a4ff;
}
</style>
</head>
<body>
<p>我比较快</p>
<p>我先让你几米。</p>
</body>
</html>

效果如下：

可以很明显的察觉这个效果的差异。
文字(英文)距离：文字的间距用letter-spacing：+px；英文的距离用word-spacing:+px;
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
letter-spacing: 10px;

}
p {
word-spacing: 10px;
}
</style>
</head>
<body>
<div>我们之间有10个像素的差距，我们不合适。</div>
<p>There is a ten-pixel gap between us, which is not suitable for us.（百度翻译）</p>
</body>
</html>

效果如下：

文字的透明：rgba(0,0,0,0.1),前三个数值表示为颜色，第四个表示透明度。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
h1 {
color: rgba(0, 0, 0, 0.1);
}
h2 {
color: rgba(0, 0, 0, 1);
}
</style>
</head>
<body>
<h1>我的肾透支了！！！</h1>
<h2>我超级强壮的！</h2>
</body>
</html>

效果如下：

文字阴影：text-shadow：？？ ？？ ？？ ？？，它有四个数值，分别代表的是水平位置 垂直位置 模糊距离 阴影颜色。后面两个可以省略。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
h1 {
font-size: 100px;
text-shadow: 5px 11px 3px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<h1>你的心中是否有阴影！</h1>
</body>
</html>

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航