前端HTML字体和文本样式
文章目录
- 前端HTML字体和文本样式
- 1.字体样式
- 1.1字体大小
- 1.2 字体粗细
- 1.3 字体样式（是否倾斜）
- 1.4字体类型
- 1.5 样式层叠问题
- 1.6 字体复合属性
- 2.文本样式
- 2.1 文本缩进
- 2.2 文本水平对齐方式
- 2.3文本修饰
- 3.行高
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 我们通常用的单位是 px 像素，一定要跟上单位 |
| font-family | 字体 | 实际开发中按照约定来写字体 |
| font-weight | 字体粗细 | j记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位 |
| font-style | 字体样式 | 记住倾斜是 italic , 不倾斜是 normal 工作中我们最常用 normal |
| font | 字体连写 | 1.字体连写是由顺序的 不能随意换位置 2.期中字号和字体必须同时出现 |
1.字体样式
1.1字体大小
- 属性名：
font-size - 取值：
数字+px - 谷歌默认浏览器的字体大小是
16px
嵌入式引用：
<!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-size:30px }</style>
</head>
<body><p>段落文字</p>
</body>
</html>
1.2 字体粗细
- 属性名：
font-weight - 取值：关键字
| 关键字 | |
|---|---|
| 正常 | normal |
| 加粗 | bold |
| 纯数字 | 100~900的整百分数 |
|---|---|
| 正常 | 400 |
| 加粗 | 700 |
- 不是所有字体都提供九种粗细，因此部分取值页面中无变化
- 实际开发中 正常 加粗两种取值使用最多
<!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>/* 400正常，700加粗 */div{font-weight: 700;}</style>
</head>
<body><div>这是div</div>
</body>
</html>
1.3 字体样式（是否倾斜）
- 属性名：
font-style - 取值
| 正常 | normal |
|---|---|
| 倾斜 | italic |
<!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-style: italic}</style>
<body><p>这是倾斜的文字</p>
</body>
</html>
1.4字体类型
- 属性名：
font-family - 字体有 “Microsoft YaHei"、微软雅黑，黑体…
<!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>div{/* sans-serif *//* 如果用户电脑没有安装微软雅黑，就按照黑体显示文字 *//* 如果用户电脑没有安装黑体，就按任一一种非衬线字体系列显示 */font-family: YaHei,黑体,sans-serif;}</style>
</head>
<body><div>我想变字体</div>
</body>
</html>
1.5 样式层叠问题
Q: 如果给同一个标签设置了相同的样式，浏览器会如何渲染呢？
A: 如果给同一个标签设置了相同的样式，此时样式会叠层覆盖，写在最下面的会生效。
Tips： 1.CSS叠层样式表
2.所谓的叠层叠加的意思，表示样式可以一层一层发叠层覆盖
下面代码字体颜色发生叠层，巧克力色最后覆盖前面的蓝色，在浏览器中渲染出来
<!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{color: blue;color: chocolate;}</style>
</head>
<body><p>层叠</p>
</body>
</html>
1.6 字体复合属性
- 属性名：
font - 取值：
font: style weight size family - 注意点：如果需要同事设置单独和连写形式，要么把单独的样式写在连写下面，要么把单独的样式写在连写里面
<!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:style weight size 字体; */font: italic 700 30px 宋体;}</style>
</head>
<body><p>这是好的好的吧</p>
</body>
</html>
2.文本样式
| 文本缩进 | text-indent |
|---|---|
| 文本水平对齐方式 | text-align |
| 文本修饰 | text-decoration |
2.1 文本缩进
- 属性名：
text-indent - 取值
数字+px
数字+em(推荐 ：1em=当前标签的font-size的大小）
<!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{/* 浏览器默认字号：16px *//* 首行缩进2个字体 32px */text-indent: 32px;}</style>
</head>
<body><p>hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必hbdiwkj不丢五千七百都比我高的杠八岁的u阿凡达给挂u给iegd成功后请务必</p>
</body>
</html>
2.2 文本水平对齐方式
- 属性名：
text-align - 取值:
| 属性值 | 效果 |
|---|---|
| left | 左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
注意点：如果需要文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
<!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>h1{/* text-align: left; *//* text-align: right; */text-align: center;}</style>
</head>
<body><h1>新闻标题</h1>
</body>
</html>
text-align:center 可以让 文本、图片，span标签，a标签，input标签，img标签等居中。
图片居中，图在哪个标签里面就给哪个标签添加center属性。
2.3文本修饰
- 属性名：
text-decoration - 取值：
| 属性名 | 效果 |
|---|---|
| underline | 下划线（常用 |
| line-throgh | 删除线（不常用 |
| overline | 上划线 |
| none | 无装饰线 |
注意：开发中会使用text-decoration :none 清除a标签默认的下划线
下面是针对不同标签分别采用上面四个属性值的效果。
<!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>div{text-decoration: underline;}p{text-decoration: line-through;}h2{text-decoration: overline;}a{text-decoration: none;}</style>
</head>
<body><div>div</div><p>pppp</p><h2>h2</h2><a href="#">我是一个超链接</a>
</body>
</html>
3.行高
<style>p{/* font-size: 40px; *//* line-height: 60px; */line-height: 1.5;}</style>
![[HDF5]如何使用CMake一起编译自己的代码和HDF5库](https://img-blog.csdnimg.cn/80aad4c59d4d4b2582804c416e00a2b5.jpg)
