写在前面
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！
如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！
目录
【往期回顾】
【其他系列】
1. CSS文本属性
1.1 文本颜色
- 属性名： color
- 作用：控制文字的颜色。
- 可选值：
- 颜色名
- rgb 或 rgba
- HEX 或 HEXA （十六进制）
- HSL 或 HSLA
- 开发中常用的是： rgb/rgba 或 HEX/HEXA （十六进制）。
举例：div { color: rgb(112,45,78); }代码演示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>01_文本颜色</title> <style> div { font-size: 90px; } .xiaobai1 { color: red; } .xiaobai2 { color: rgb(255, 0, 0); } .xiaobai3 { color: rgba(255, 0, 0, .5); } .xiaobai4 { color: #00f; } .xiaobai5 { color: #00f8; } .xiaobai6 { color: hsl(0, 100%, 50%); } .xiaobai7 { color: hsla(0, 100%, 50%, .5); background-color: orange; } </style> </head> <body> <div class="xiaobai1">麟-小白1</div> <div class="xiaobai2">麟-小白2</div> <div class="xiaobai3">麟-小白3</div> <div class="xiaobai4">麟-小白4</div> <div class="xiaobai5">麟-小白5</div> <div class="xiaobai6">麟-小白6</div> <div class="xiaobai7">麟-小白7</div> </body> </html>
1.2 文本间距
- 字母间距： letter-spacing
- 单词间距： word-spacing （通过空格识别词）
- 属性值为像素（ px ），正值让间距增大，负值让间距缩小。
代码演示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { font-size: 30px; } .xiaobai2 { letter-spacing: 20px; } .xiaobai3 { word-spacing: 20px; } </style> </head> <body> <div>You got a dream, you gotta protect it.麟-小白1</div> <div class="xiaobai2">You got a dream, you gotta protect it.麟-小白2</div> <div class="xiaobai3">You got a dream, you gotta protect it.麟-小白3</div> </body> </html>
1.3 文本修饰
- 属性名： text-decoration
- 作用：控制文本的各种装饰线。
- 可选值：
- none ：无装饰线（常用）
- underline ：下划线（常用）
- overline ：上划线
- line-through ：删除线
- 可搭配如下值使用：
- dotted ：虚线
- wavy ：波浪线
- 也可以指定颜色
举例：a { text-decoration: none; }代码演示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>03_文本修饰</title> <style> div { font-size: 40px; } .xiaobai1 { text-decoration: overline green dotted; } .xiaobai2 { text-decoration: underline red wavy; } .xiaobai3 { text-decoration: line-through; } .xiaobai4, ins, del { font-size: 40px; text-decoration: none; } </style> </head> <body> <div class="xiaobai1">麟-小白1</div> <div class="xiaobai2">麟-小白2</div> <div class="xiaobai3">麟-小白3</div> <a class="xiaobai4" href="https://www.baidu.com">麟-小白4</a> <ins>测试1</ins> <del>测试2</del> </body> </html>
1.4 文本缩进
- 属性名： text-indent 。
- 作用：控制文本首字母的缩进。
- 属性值： css 中的长度单位，例如： px
举例：div { text-indent:40px; }
- 后面我们会学习 css 中一些新的长度单位，目前我们只知道像素( px )。
代码演示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>04_文本缩进</title> <style> div { font-size: 30px; text-indent: 60px; } </style> </head> <body> <div>欢迎学习前端！欢迎学习前端！欢迎学习前端！欢迎学习前端！欢迎学习前端！欢迎学习前端！欢迎学习前端！欢迎学习前端！欢迎学习前端！</div> </body> </body> </html>
1.5 文本对齐_水平
- 属性名： text-align 。
- 作用：控制文本的水平对齐方式。
- 常用值：
- left ：左对齐（默认值）
- right ：右对齐
- center ：居中对齐
举例：div { text-align: center; }代码演示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>05_文本对齐_水平</title> <style> .xiaobai { font-size: 40px; background-color: orange; text-align: center; } </style> </head> <body> <div class="xiaobai">麟-小白</div> </body> </html>
1.6 细说 font-size
- 由于字体设计原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能大，也可能小。 例如： font-size 设为 40px ，最终呈现的文字，可能比 40px 大，也可能比 40px小。
- 通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下 一些。
1.7 行高
- 属性名： line-height
- 作用：控制一行文字的高度。
- 可选值：
- normal ：由浏览器根据文字大小决定的一个默认值。
- 像素( px )。
- 数字：参考自身 font-size 的倍数（很常用）。
- 百分比：参考自身 font-size 的百分比。
- 备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。
举例：div { line-height: 60px; line-height: 1.5; line-height: 150%; }代码演示：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>07_行高</title> <style> #d1 { font-size: 40px; background-color: orange; line-height: 60px; line-height: normal; line-height: 1.5; line-height: 150%; } </style> </head> <body> <div id="d1">欢迎学习前端！欢迎学习前端！欢迎学习前端！欢迎学习前端！欢迎学习前端！欢迎学习前端！欢迎学习前端！欢迎学习前端！欢迎学习前端！</div> </body> </html>行高注意事项：
- line-height 过小会怎样？—— 文字产生重叠，且最小值是 0 ，不能为负数。
- line-height 是可以继承的，且为了能更好的呈现文字，最好写数值。
- line-height 和 height 是什么关系？
- 设置了 height ，那么高度就是 height 的值。
- 不设置 height 的时候，会根据 line-height 计算高度。
应用场景：
- 对于多行文字：控制行与行之间的距离。
- 对于单行文字：让 height 等于 line-height ，可以实现文字垂直居中。
备注：由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。代码演示：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>08_行高_注意事项</title> <style> /* 注意点1：行高过小会怎样？ —— 文字重叠，且最小值是0，不能为负数。 */ #d1 { font-size: 40px; background-color: skyblue; line-height: 0px; } /* 注意点2：行高是可以继承的 */ #d2 { font-size: 40px; background-color: orange; line-height: 1.5; } span { font-size: 200px; color: red; } /* 注意点3：line-height和height是什么关系 设置了height，高度就是height的值。 没有设置height，高度就是line-height*行数 */ #d3 { font-size: 40px; background-color: yellowgreen; line-height: 100px; } #d4 { font-size: 40px; background-color: skyblue; line-height: 0px; } /* 行高的应用场景1：调整多行文字的间距 */ #d5 { font-size: 40px; background-color: skyblue; line-height: 100px; } /* 行高的应用场景2：单行文字的垂直居中 */ #d6 { font-size: 40px; background-color: skyblue; height: 300px; line-height: 300px; } </style> </head> <body> <!-- <div id="d1">欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端</div> --> <!-- <div id="d2">欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端</div> --> <!-- <div id="d3">欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端</div> --> <!-- <div id="d4">欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端</div> --> <!-- <div id="d5">欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端欢迎学习前端</div> --> <div id="d6">欢迎学习前端x</div> </body> </html>
1.8 文本对齐_垂直
- 顶部：无需任何属性，在垂直方向上，默认就是顶部对齐。
- 居中：对于单行文字，让 height = line-height 即可。
- 问题：多行文字垂直居中怎么办？—— 后面我们用定位去做。
- 底部：对于单行文字，目前一个临时的方式：
- 让 line-height = ( height × 2 ) - font-size - x 。
- 备注： x 是根据字体族，动态决定的一个值。
- 问题：垂直方向上的底部对齐，更好的解决办法是什么？—— 后面我们用定位去做。
代码演示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>09_文本对齐_垂直</title> <style> div { font-size: 40px; height: 400px; line-height: 745px; background-color: skyblue; } </style> </head> <body> <div>麟-小白</div> </body> </html>
1.9 vertical-align
- 属性名： vertical-align 。
- 作用：用于指定同一行元素之间，或 表格单元格 内文字的 垂直对齐方式。
- 常用值：
- baseline （默认值）：使元素的基线与父元素的基线对齐。
- top ：使元素的顶部与其所在行的顶部对齐。
- middle ：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。
- bottom ：使元素的底部与其所在行的底部对齐。
- 特别注意： vertical-align 不能控制块元素。
代码演示：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>10_vertical-align</title> <style> div { font-size: 100px; height: 300px; background-color: skyblue; } span { font-size: 40px; background-color: orange; vertical-align: middle; } img { height: 30px; vertical-align: top; } .san { vertical-align: bottom; } </style> </head> <body> <div> 麟-小白x<span>x前端</span> </div> <hr> <div> 麟-小白x<img src="../images/我的自拍.jpg"> </div> <hr> <table border="1" cellspacing="0"> <caption>人员信息</caption> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr height="200"> <td class="san">张三</td> <td>18</td> <td>男</td> </tr> <tr> <td>李四</td> <td>20</td> <td>女</td> </tr> </tbody> </table> </body> </html>
结语
本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力
