Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS的常用文本属性
Blogger Information
Blog 40
fans 2
comment 1
visits 38891
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS的常用文本属性
万物皆对象
Original
1053 people have browsed it

文本属性

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% 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>text-indent 文本缩进</title>
  7.     <style>
  8.         p {
  9.             color: #666;
  10.             font: 16px/1.5 Helvetica;
  11.             width: 300px;
  12.             background-color: lavender;
  13.             border-radius: 10px;
  14.             padding: 20px;
  15.             text-indent: -6em;
  16.         }
  17.         p img {
  18.             width: 90px;
  19.             height: 65px;
  20.             margin-top: 25px;
  21.             margin-right: 5px;
  22.             float: left;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <p>
  28.         <img src="./test.jpg" alt="童趣">
  29.         余忆童稚时，能张目对日，明察秋毫，见藐小之物必细察其纹理，故时有物外之趣。
  30. 　      夏蚊成雷，私拟作群鹤舞于空中，心之所向，则或千或百，果然鹤也；昂首观之，项为之强。又留蚊于素帐中，徐喷以烟，使之冲烟而飞鸣，作青云白鹤观，果如鹤唳云端，为之怡然称快。
  31. 　      余常于土墙凹凸处，花台小草丛杂处，蹲其身，使与台齐；定神细视，以丛草为林，以虫蚁为兽，以土砾凸者为丘，凹者为壑，神游其中，怡然自得。
  32. 　      一日，见二虫斗草间，观之，兴正浓，忽有庞然大物，拔山倒树而来，盖一癞虾蟆，舌一吐而二虫尽为所吞。余年幼，方出神，不觉呀然一惊。神定，捉虾蟆，鞭数十，驱之别院。
  33.     </p>
  34. </body>
  35. </html>

2.2 text-align 文本行内对齐

  • 该属性也是设置父元素上, 如: <p>
  • 该属性用于控制父元素中每一行文本的对齐方向
  • 常用的属性值如下
序号 属性值 描述
1 left 左对齐: 默认值
2 right 右对齐
3 center 居中对齐
  • 以上属性值,都是以常见的英文书写模式定义的,即从左到右书写
  • 实际上还有其他的书写模式, 如阿拉伯语, 希伯来语, 它们是从右往左书写
  • 所以, css3 对以上属性值进行规范,语义化更强
序号 属性值 描述
1 start 对齐到起始边: 默认值
2 end 对齐到终止边
3 justify 两端对齐

两端对齐: 文本之间空白会自动调整, 确保文本每一行长度一致

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>text-align 文本行内对齐</title>
  7.     <style>
  8.         p {
  9.             color: #666;
  10.             font: 16px/1.5 Helvetica;
  11.             width: 300px;
  12.             background-color: lightcoral;
  13.             border-radius: 10px;
  14.             padding: 20px;
  15.             text-indent: 2em;
  16.         }
  17.         p {
  18.             /* 左对齐: 可以看出没变化因为默认是left */
  19.             text-align: left; 
  20.             /* 右对齐 */
  21.             text-align: right;
  22.             /* 居中对齐 */
  23.             text-align: center;
  25.             text-align: start;
  26.             /* text-align: end; */
  28.             /* 两端对齐它要保证每一行的长度是完全一样 */
  29.             text-align: justify;
  31.             /* 此属性仅设置文本最后一行的 left right center | start end justify */
  32.             text-align-last: center;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <p>
  38.         I like reading books so much. My parents have bought me a lot of books when I was three years old. 
  39.         They want me to be interested in reading. With my parents’s education, I am very interested in novel 
  40.         books and I want to write novels someday. I have come up with some idea, soon I can finish one. 
  41.     </p>
  42. </body>
  43. </html>

3. 块级对齐

  • 文本在一行内, 除了水平对齐外, 还有垂直/纵向对齐, 即沿块级方向对齐
  • 块级对齐, 必须要有布局的空间, 即高度
  • 如果想实现文本在行内垂直方向的对齐, 必须先要掌握行高的概念
序号 术语 描述
1 文本行 垂直排列的一行或多行文本
2 内容区 文本中的每个元素(行内元素)
3 行内框 包裹内容区的元素框
4 行距 行距都是相同的,不同的是字体高度
5 行框 行框是行内框的集合

  • 行内框 = 字体高度 + 上下行距
  • 行框 = 由多少个行内框组成
  • 行框高度 = 行内框中最高和最低的端决定
  1. /* 内容框: 内容区高度 */
  2. font-size: 14px;
  3. /* 设置行框 */
  4. /* 行高 */
  5. line-height: 18px;
  6. /* 行距 = 行高 - 字体高度 = 4px */
  7. /* 上行距 = 下行距 = 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计算,要特别注意

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>line-height 块级对齐</title>
  7.     <style>
  8.         body {
  9.             background-color: #ccc;
  10.             font-size: 16px;
  11.             line-height: 20px;
  12.         }
  13.         p:nth-of-type(2) {
  14.             /* 父元素的font-size: 16px; * line-height: 1.5em; = 24 */
  15.             /* 行高继承的时候,并不是依据父元素的line-height, 而是font-size */
  16.             line-height: 1.5em;
  17.         }
  18.         p:last-of-type {
  19.             line-height: 8px;
  20.             /* 1的意思是 1*父级的font-size:16px; (1*16=16) */
  21.             line-height: 2;
  22.             background: red;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  28.     <p>这个段落继承了body中的字体大小与行高</p>
  29.     <p>这个段落行高是父级的1.5倍</p>
  30.     <p>行高小于字体大小</p>
  31. </body>
  32. </html>

3.3 文本纵向对齐

  • vertical-align: 设置行内元素纵向对齐
  • 该属性只适用于”行内元素”或”置换元素”(<img>, <input>…)
序号 适用元素 描述
1 行内元素 文本, <span>
2 置换元素 img, <input>…
3 单元格 td, th

提示: 该属性不能用于”块级元素”垂直对齐

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>vertical-align 纵向对齐</title>
  7.     <style>
  8.         div:first-of-type {
  9.             background-color: cyan;
  10.         }
  11.         div:first-of-type p {
  12.             vertical-align: baseline;
  13.             vertical-align: bottom;
  14.         }
  16.         div:nth-of-type(2) {
  17.             background-color: wheat;
  18.         }
  20.         div:nth-of-type(2) img {
  21.             vertical-align: baseline;
  22.             /* vertical-align: middle; */
  23.             vertical-align: bottom;
  24.         }
  26.         .up {
  27.             vertical-align: 10px;
  28.         }
  29.         .down {
  30.             vertical-align: -10px;
  31.         }
  33.         td {
  34.             height: 100px;
  35.             border: 1px solid;
  36.             /* 默认是 middle */
  37.             vertical-align: middle;
  38.             vertical-align: top;
  39.             vertical-align: bottom;
  40.         }
  42.         .box1 {
  43.             width: 200px;
  44.             height: 200px;
  45.             background-color: lightblue;
  46.             /* 将这个块改成表格的单元格显示 */
  47.             display: table-cell;
  48.             /* 垂直居中 */
  49.             vertical-align: middle;
  50.         }
  51.         .box2 {
  52.             width: 100px;
  53.             height: 100px;
  54.             /* 水平居中 */
  55.             margin: auto;
  56.         }
  57.     </style>
  58. </head>
  59. <body>
  60.     <div>
  61.         <p>I like reading books so much</p>
  62.     </div>
  64.     <div>
  65.         <img src="./test.jpg" width="100" alt="">
  66.     </div>
  68.     <p>
  69.         PHP中文网
  70.         <span class="up">php.cn</span>
  71.         PHP爱好者的选择
  72.         <span class="down">海量资源</span>
  73.     </p>
  75.     <table>
  76.         <tr>
  77.             <td>CSS</td>
  78.         </tr>
  79.     </table>
  81.     <!-- 2个div嵌套关系 -->
  82.     <div class="box1">
  83.         <div class="box2"></div>
  84.     </div>
  85. </body>
  86. </html>
  • 该属性常用值
序号 属性值 描述
1 baseline 默认值, 使元素的基线与父级元素的基线对齐
2 sub 使元素的基线与父级元素的下标基线对齐
3 super 使元素的基线与父级元素的上标基线对齐
4 text-top 使元素的顶部与父级元素的字体顶部对齐
5 text-bottom 使元素的底部与父元素的字体底部对齐
6 长度值 使元素的基线对齐到父级元素的基线之上的给定长度, 允许负值
7 百分比 使元素的基线对齐到父级元素基线之上的给定百分比(相对于line-height)
8 top 使单元格内边距的上边缘与该行顶部对齐
9 middle 使单元格内边距盒模型在该行内居中对齐
10 bottom 使单元格内边距的下边缘与该行底部对齐
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：你应该是老学员了, 这次是巩固
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post