文本属性
1. 属性简介
| 序号 |
属性 |
描述 |
| 1 |
text-indent: 50px; |
文本缩进 |
| 2 |
text-align: left\center\right; |
文本行内对齐, left:左对齐, center:居中对齐, right:右对齐 |
| 3 |
line-height: 20px\50%; |
行高 |
| 4 |
vertical-align: top\middle\bottom; |
文本垂直对齐, top:顶部对齐, middle:中间对齐, bottom:底部对齐 |
| 5 |
word-spacing: 20px; |
单词间距 |
| 6 |
text-transform: uppercase\lowercase\capitalize ; |
大小写转换,uppercase:全部字母大写, lowsercase:全部字母小写, capitalize:单词首字母大写 |
| 7 |
text-decoration: overline\line-through\underline\none; |
文本修饰,overline:上划线, line-through:中划线, underline:下划线, nong:无任何划线 |
| 8 |
text-shadow: 2px 3px 5px #ccc ; |
文本阴影, 第一个参数水平阴影, 第二个参数垂直阴影, 第三个参数模糊距离, 第四个参数阴影颜色 |
| 9 |
white-space: nowrap; |
文本空白处理, 规定段落中的文本不进行换行 |
| 10 |
overflow-wrap: normal\anywhere\break-word; |
文本溢出换行 |
| 11 |
writing-mode: horizontal-tb\vertical-lr\sideways-lr\sideways-rl ; |
文本书写模式, 分横向模式和竖向模式 |
| 12 |
letter-spacing: 10px; |
文本每个字体的间距 |
2. 文本缩进与行内对齐
- 缩进与行内对齐: 控制文本在一行内的位置
- 块级方向: 块级元素排列方向(垂直排列)
- 行内方向: 行内元素排列方向(水平排列)
2.1 text-indent 文本缩进
- 属性:
text-indent text-indent只能用在块级元素上上, 控制段落首行文本的缩进长度, 允许负值- 如果想缩进行内元素首行, 只能使用
margin | padding来实现 - 该属性常用值
| 序号 |
属性值 |
描述 |
| 1 |
length |
绝对值, 如: 30px, 2em |
| 2 |
percentage |
相对父元素宽度的百分比, 如: 10% |
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>text-indent 文本缩进</title> <style> p { color: #666; font: 16px/1.5 Helvetica; width: 300px; background-color: lavender; border-radius: 10px; padding: 20px; text-indent: -6em; } p img { width: 90px; height: 65px; margin-top: 25px; margin-right: 5px; float: left; } </style></head><body> <p> <img src="./test.jpg" alt="童趣"> 余忆童稚时，能张目对日，明察秋毫，见藐小之物必细察其纹理，故时有物外之趣。 夏蚊成雷，私拟作群鹤舞于空中，心之所向，则或千或百，果然鹤也；昂首观之，项为之强。又留蚊于素帐中，徐喷以烟，使之冲烟而飞鸣，作青云白鹤观，果如鹤唳云端，为之怡然称快。 余常于土墙凹凸处，花台小草丛杂处，蹲其身，使与台齐；定神细视，以丛草为林，以虫蚁为兽，以土砾凸者为丘，凹者为壑，神游其中，怡然自得。 一日，见二虫斗草间，观之，兴正浓，忽有庞然大物，拔山倒树而来，盖一癞虾蟆，舌一吐而二虫尽为所吞。余年幼，方出神，不觉呀然一惊。神定，捉虾蟆，鞭数十，驱之别院。 </p></body></html>
2.2 text-align 文本行内对齐
- 该属性也是设置父元素上, 如:
<p> - 该属性用于控制父元素中每一行文本的对齐方向
- 常用的属性值如下
| 序号 |
属性值 |
描述 |
| 1 |
left |
左对齐: 默认值 |
| 2 |
right |
右对齐 |
| 3 |
center |
居中对齐 |
- 以上属性值,都是以常见的英文书写模式定义的,即从左到右书写
- 实际上还有其他的书写模式, 如阿拉伯语, 希伯来语, 它们是从右往左书写
- 所以, css3 对以上属性值进行规范,语义化更强
| 序号 |
属性值 |
描述 |
| 1 |
start |
对齐到起始边: 默认值 |
| 2 |
end |
对齐到终止边 |
| 3 |
justify |
两端对齐 |
两端对齐: 文本之间空白会自动调整, 确保文本每一行长度一致
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>text-align 文本行内对齐</title> <style> p { color: #666; font: 16px/1.5 Helvetica; width: 300px; background-color: lightcoral; border-radius: 10px; padding: 20px; text-indent: 2em; } p { /* 左对齐: 可以看出没变化因为默认是left */ text-align: left; /* 右对齐 */ text-align: right; /* 居中对齐 */ text-align: center; text-align: start; /* text-align: end; */ /* 两端对齐它要保证每一行的长度是完全一样 */ text-align: justify; /* 此属性仅设置文本最后一行的 left right center | start end justify */ text-align-last: center; } </style></head><body> <p> I like reading books so much. My parents have bought me a lot of books when I was three years old. They want me to be interested in reading. With my parents’s education, I am very interested in novel books and I want to write novels someday. I have come up with some idea, soon I can finish one. </p></body></html>
3. 块级对齐
- 文本在一行内, 除了水平对齐外, 还有垂直/纵向对齐, 即沿块级方向对齐
- 块级对齐, 必须要有布局的空间, 即高度
- 如果想实现文本在行内垂直方向的对齐, 必须先要掌握行高的概念
| 序号 |
术语 |
描述 |
| 1 |
文本行 |
垂直排列的一行或多行文本 |
| 2 |
内容区 |
文本中的每个元素(行内元素) |
| 3 |
行内框 |
包裹内容区的元素框 |
| 4 |
行距 |
行距都是相同的,不同的是字体高度 |
| 5 |
行框 |
行框是行内框的集合 |
- 行内框 = 字体高度 + 上下行距
- 行框 = 由多少个行内框组成
- 行框高度 = 行内框中最高和最低的端决定
/* 内容框: 内容区高度 */font-size: 14px;/* 设置行框 *//* 行高 */line-height: 18px;/* 行距 = 行高 - 字体高度 = 4px *//* 上行距 = 下行距 = 4/2 = 2px */
3.2 line-height设置文本行的高度
| 序号 |
属性值 |
描述 |
| 1 |
normal |
默认值,由浏览器自动计算, 约font-size = 1.2 |
| 2 |
绝对值 |
如: px, em, rem, 推荐px |
| 3 |
正数 |
相对font-size的换算系数, 可以是小数, 推荐 |
| 4 |
百分数 |
依据字体大小进行计算,可能具有不确定性 |
line-height在继承时,子元素是依据父元素的font-size计算,要特别注意
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>line-height 块级对齐</title> <style> body { background-color: #ccc; font-size: 16px; line-height: 20px; } p:nth-of-type(2) { /* 父元素的font-size: 16px; * line-height: 1.5em; = 24 */ /* 行高继承的时候,并不是依据父元素的line-height, 而是font-size */ line-height: 1.5em; } p:last-of-type { line-height: 8px; /* 1的意思是 1*父级的font-size:16px; (1*16=16) */ line-height: 2; background: red; } </style></head><body> <p>这个段落继承了body中的字体大小与行高</p> <p>这个段落行高是父级的1.5倍</p> <p>行高小于字体大小</p></body></html>
3.3 文本纵向对齐
vertical-align: 设置行内元素纵向对齐- 该属性只适用于”行内元素”或”置换元素”(
<img>, <input>…)
| 序号 |
适用元素 |
描述 |
| 1 |
行内元素 |
文本, <span> |
| 2 |
置换元素 |
img, <input>… |
| 3 |
单元格 |
td, th |
提示: 该属性不能用于”块级元素”垂直对齐
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vertical-align 纵向对齐</title> <style> div:first-of-type { background-color: cyan; } div:first-of-type p { vertical-align: baseline; vertical-align: bottom; } div:nth-of-type(2) { background-color: wheat; } div:nth-of-type(2) img { vertical-align: baseline; /* vertical-align: middle; */ vertical-align: bottom; } .up { vertical-align: 10px; } .down { vertical-align: -10px; } td { height: 100px; border: 1px solid; /* 默认是 middle */ vertical-align: middle; vertical-align: top; vertical-align: bottom; } .box1 { width: 200px; height: 200px; background-color: lightblue; /* 将这个块改成表格的单元格显示 */ display: table-cell; /* 垂直居中 */ vertical-align: middle; } .box2 { width: 100px; height: 100px; /* 水平居中 */ margin: auto; } </style></head><body> <div> <p>I like reading books so much</p> </div> <div> <img src="./test.jpg" width="100" alt=""> </div> <p> PHP中文网 <span class="up">php.cn</span> PHP爱好者的选择 <span class="down">海量资源</span> </p> <table> <tr> <td>CSS</td> </tr> </table> <!-- 2个div嵌套关系 --> <div class="box1"> <div class="box2"></div> </div></body></html>
| 序号 |
属性值 |
描述 |
| 1 |
baseline |
默认值, 使元素的基线与父级元素的基线对齐 |
| 2 |
sub |
使元素的基线与父级元素的下标基线对齐 |
| 3 |
super |
使元素的基线与父级元素的上标基线对齐 |
| 4 |
text-top |
使元素的顶部与父级元素的字体顶部对齐 |
| 5 |
text-bottom |
使元素的底部与父元素的字体底部对齐 |
| 6 |
长度值 |
使元素的基线对齐到父级元素的基线之上的给定长度, 允许负值 |
| 7 |
百分比 |
使元素的基线对齐到父级元素基线之上的给定百分比(相对于line-height) |
| 8 |
top |
使单元格内边距的上边缘与该行顶部对齐 |
| 9 |
middle |
使单元格内边距盒模型在该行内居中对齐 |
| 10 |
bottom |
使单元格内边距的下边缘与该行底部对齐 |
