search

博客列表 >CSS的常用文本属性

CSS的常用文本属性

万物皆对象
万物皆对象原创
2020年04月15日 17:01:071048浏览

文本属性

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 使单元格内边距的下边缘与该行底部对齐
上一条：CSS的Grid布局中的常用属性以及属性的常用值下一条：Flex弹性布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多