【前端学习笔记】文本属性
作者：互联网
文本属性
| 个数 | 属性 | 描述 | 说明 |
|---|---|---|---|
| 1 | font-size | 字体大小 | 单位是px，浏览器默认是16px，设计图常用字号是12px |
| 2 | font-family | 字体 | 当字体是中文字体、英文字体中有空格时，需加双引号；多个字体中间用逗号链接，先解析第1个字体如果没有解析第2个字体，以此类推 |
| 3 | color | 颜色 | color:red; color:#ff0; color:rgb(255,0,0); 0-255 |
| 4 | font-weight | 加粗 | font-weight:bolder(更粗的)/bold（加粗）/ normal（常规） font-weight: 100-900; 100-500 不加粗 800-900 加粗 |
| 5 | font-style | 倾斜 | font-style: italic(斜体字) / oblique (倾斜的文字) / normal （常规显示） |
| 6 | text-align | 文本水平对齐 | text-align：left; 水平靠左 text-align：right; 水平靠右 text-align：center; 水平居中 text-align：justify; 水平两端对齐，但是支队多行起作用 |
| 7 | line-heught | 行高 | line-height 的数据 = height的数据，可以实现单行文本的垂直居中 |
| 8 | text-indent | 首行缩进 | text-indent可以取负值， text-indent属性只对第一行起作用 |
| 9 | letter-spacing | 字间距 | 控制文字和文字之间的间距 |
| 10 | text-decoration | 文本修饰 | text-none; 没有 / underline 下划线 / overline 上划线 / line-through 删除线 |
| 11 | font | 文本简写 | font是font-style font-weight font-size / line-height font-family 的简写。 font: italic 800 30px/ 80px “宋体”；顺序不能改变，必须同时指定font-size和font-family属性时才起作用 |
文本颜色
写法1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.p1{
color:red;
}
</style>
</head>
<body>
<p class = "p1">
Loremdfjiojfisjfjfj
</p>
</body>
</html>
写法2:
<style>
.p1{
color:rgb(0,0,255); // 显示效果为蓝色
}
</style>
文本粗细
<!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>
.p2{
font-weight: 700;
}
h1{
font-weight: normal;
}
</style>
</head>
<body>
<p class="p1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
officiis architecto nisi cum officia fugiat enim, minus earum nemo
unde deleniti nam. Iste, blanditiis rerum. Nostrum doloribus iste
soluta porro?
</p>
<p class = "p2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
officiis architecto nisi cum officia fugiat enim, minus earum nemo
unde deleniti nam. Iste, blanditiis rerum. Nostrum doloribus iste
soluta porro?
</p>
<h1>我是标题</h1>
</body>
</html>
文本水平垂直居中
<!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>
.box1{
text-align: center;
width: 500px;
background-color: yellow;
}
.box2{
text-align: justify;
width: 500px;
background-color: rgb(43,255,0);
}
</style>
</head>
<body>
<div class = "box1">大家好</div>
<p class = "box2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
officiis architecto nisi cum officia fugiat enim, minus earum nemo
unde deleniti nam. Iste, blanditiis rerum. Nostrum doloribus iste
soluta porro?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
officiis architecto nisi cum officia fugiat enim, minus earum nemo
unde deleniti nam. Iste, blanditiis rerum. Nostrum doloribus iste
soluta porro?
</p>
</body>
</html>
文本修饰
text-decoration为none时一般用于a标签
检索大小写
text-transform ：capitalize (首字母大写)
text-transform ：lowercase (每个字母都小写)
text-transform ：capitalize (每个字母都大写)
font 文字简写
<!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>
p{
font:italic bold 20px/1em 宋体
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis ab dolorum
illo, voluptatum fugiat fugit nemo adipisci ipsam dicta nobis! Assumenda
doloremque repellendus nulla soluta alias eligendi voluptate voluptatum esse?
</p>
</body>
</html>
标签：文本,weight,color,text,前端,笔记,font,文本属性,align 来源： https://blog.csdn.net/weixin_43841844/article/details/122197272