line-height:行间距
行高是指文本行基线间的垂直距离:基线与基线之间的距离。
属性名 | line-height |
normal | 默认,设置合理的行间距 |
length | 设置固定的行间距(不允许使用复制,一般用px作单位) |
number | 设置数字,此数字会与当前的字体尺寸相乘来设置行间距,相当于倍数 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.odiv {
width: 200px;
height: 200px;
border: 1px solid red;
line-height: 200px;
/* 行高 会让文本在当前行内的最中间 单文本垂直方向居中*/
/* 如果需要在一个盒子中让单行文本垂直居中 需要设置行高为盒子的高度*/
text-align: center;
/* 内容在水平方向的对齐方式 left左对齐 center居中 right右居中*/
}
</style>
</head>
<body>
<div class="odiv">今天真热</div>
</body>
</html>
效果:
text-align:水平对齐方式
left | 左对齐 |
center | 居中 |
right | 右对齐 |
不仅仅可以使文本对齐,任何元素都可以
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200;
height: 200;
border: 1px solid red;
}
.odiv1 {
text-align: center;
/* 内容在水平方向的对齐方式 left左对齐 center居中 right右居中*/
}
.odiv2 {
text-align: left;
}
.odiv3 {
text-align: right;
}
</style>
</head>
<body>
<div>
<div class="odiv2">今天真热</div>
<div class="odiv1">今天真热</div>
<div class="odiv3">今天真热</div>
</div>
</body>
</html>
效果:
text-indent:缩进
1em == 一个字符的长度
其值一般为2em 实现效果和&emsp;相类是作用都是使文本空格
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.otext {
text-indent: 2em;
/*效果与&emsp;相类是*/
}
</style>
</head>
<body>
<p>热死了,真烦,还出不去了</p>
<p class="otext">热死了,真烦,还出不去了</p>
<p>  热死了,真烦,还出不去了</p>
</body>
</html>
效果:
总体学习过程:
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.odiv {
width: 200px;
height: 200px;
border: 1px solid red;
line-height: 200px;
/* 行高 会让文本在当前行内的最中间 单文本垂直方向居中*/
/* 如果需要在一个盒子中让单行文本垂直居中 需要设置行高为盒子的高度*/
text-align: center;
/* 内容在水平方向的对齐方式 left左对齐 center居中 right右居中*/
}
.inp {
text-align: center;
/* 不单单可以让文本对齐 任何元素都可以*/
}
.d2 {
text-indent: 2em;
}
.oa {
text-decoration: none;
}
/* 文本修饰,给文本添加或删除线 上划线 下划线 删除线*/
/*伪类选择器*/
/*:hover 鼠标悬停*/
.oa:hover {
text-decoration: underline;
/* 给文本添加下划线*/
}
.one {
word-spacing: 20px;
}
.oshadow {
text-shadow: -1px 0px 0px rgb(0, 226, 251), 1px 0px 0px red;
/* 4个属性 水平方向 垂直发方向 模糊程度 颜色 */
}
</style>
</head>
<body>
<div class="odiv">今天周五,明天就要考</div>
<div class="inp"><input type="text"></div>
<a href="" class="oa">aaaaaaaaaaaaaaaaaa</a>
<div class="one">aa aaaaaa aaaaaa aaaa</div>
<br><br><br>
<div class="oshadow">
爱好古,爱美好生活
</div>
</body>
</html>
字体样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: yellowgreen;
font-size: 10px;
/* 文本默认大小为16px
*/
}
p {
color: skyblue;
/*
color: rgba(red, green, blue, alpha);
alpha 为字体的透明度 值为0到1之间
若用16进制 注意在16进制之前添加#
*/
font-weight: 100;
/* 文本字体设置 */
}
</style>
</head>
<body>
<div>
天好热
<p style="color: red;">
热的要命
</p>
</div>
<p>
真的很热
</p>
</body>
</html>