《css权威指南》文本属性

最新推荐文章于 2023-03-16 17:48:49 发布

dawnchengx

最新推荐文章于 2023-03-16 17:48:49 发布

阅读量281

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/u013214292/article/details/80930693

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

引言：

博文中我们将会对每一个文本属性进行讨论，并举demo，以方便大家快速理解对应属性的含义

大纲：

1. text-indent 文本缩进
2. text-align 水平对齐
3. line-height 文本框行高
4. vertical-align 垂直对齐
5. word-spacing 字间隔
6. letter-spacing 字母间隔
7. text-transform 文本转换
8. text-decoration 文本装饰
9. text-shadow 文本阴影
10. white-space 处理空白符
11. direction 文本方向

text-indent

解释：文本缩进
可选值：length | percentage | inherit
初始值：0
应用于：块级元素
详解：
1、百分数：相对于包含块的宽度 
2、计算值：对于百分数值，要根据指定确定；对于长度值，则为绝对长度

eg:
<style>
  .text-indent1 {text-indent: 20}
  .text-indent2 {text-indent: 20px}
  .father-text-indent {text-indent: 2%}
</style>
<div class="text-indent1">
  腾讯新闻,事实派。新闻中心,包含有时政新闻、<br>
  国内新闻、国际新闻、社会新闻、时事评论、<br>
  新闻图片、新闻专题、新闻论坛、军事、历史、<br>
  的专业时事报道门户网站
</div>
<div class="text-indent2"> 
  腾讯新闻,事实派。新闻中心,包含有时政新闻、<br>
  国内新闻、国际新闻、社会新闻、时事评论、<br>
  新闻图片、新闻专题、新闻论坛、军事、历史、<br>
  的专业时事报道门户网站
</div>                
<div class="father-text-indent">
  <div>
    腾讯新闻,事实派。新闻中心,包含有时政新闻、<br>
    国内新闻、国际新闻、社会新闻、时事评论、<br>
    新闻图片、新闻专题、新闻论坛、军事、历史、<br>
    的专业时事报道门户网站
  </div>
</div>

这里写图片描述

text-align

解释：文本水平对齐
可选值：left左对齐 | center居中 | right右对齐 | justify两端对齐 | inherit继承
初始值：left
应用于：块级元素

eg:
<style>
  .text {width:210px}
  .text div {margin-bottom: 50px}
  .text-align1 {text-align: left}
  .text-align2 {text-align: justify}
  .father-text-align {text-align: right}
</style>
<div class="text">
    <div class="text-align1">
        (我是左对齐)腾讯新闻,事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>
    <div class="text-align2">
        (我是两端对齐)腾讯新闻,事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>             
    <div class="father-text-align">
      <div>
        (我继承了父元素的右对齐)腾讯新闻,事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
      </div>   
    </div>
</div>

这里写图片描述

line-height

解释：文本框的行高
可选值：length高度 | percentage百分比(100%与1em相同) |  number(缩放因子) | normal(浏览器决定，一般为1.2) | inherit
初始值：normal
应用于：所有元素
详解：子元素的真正行距是分别与自身元素字号相乘的计算结果

eg:
<style>
  .text {width:210px}
  .text div {margin-bottom: 20px}
  .line-height1 {line-height: 20px}
  .line-height2 {line-height: 120%}
  .line-height3 {line-height: 0.5}
  .father-line-height1 {line-height: 1.5rem}
  .father-line-height2 {line-height: 1.5}
</style>
<div class="text">
    <div>
        (我是normal)腾讯新闻,事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>
    <div class="line-height1">
        (我是length)腾讯新闻,事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>
    <div class="line-height2">
        (我是percentage)腾讯新闻,事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>
    <div class="line-height3">
        (我是number)腾讯新闻,事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>  
    <div style="font-size:0.1rem" class="father-line-height1">
      <div style="font-size:1rem">
        ()腾讯新闻,事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
      </div>   
    </div>
    <div style="font-size:0.1rem" class="father-line-height2">
        <div style="font-size:1rem">
          ()腾讯新闻,事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
        </div>   
      </div>
</div>

这里写图片描述

vertical-align

解释：文本垂直对齐
可选值：baseline基线对齐 | sub基线下降 | super基线升高 | bottom行内框与行框对齐 | text-bottom | middle居中对齐 | top | text-top |  percentage(以当前元素line-height为准) | length | inherit
初始值：baseline
应用于：行内元素、表单元格

eg:
<style>
  .text {width:210px}
  .text div {margin-bottom: 15px; line-height:2rem;}
</style>
<div class="text">
    <div>
        (默认是基线对齐)腾讯新闻,事实派<span>新闻中心</span>,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>   
    <div>
        (基线下降)腾讯新闻,事实派。<span style="vertical-align: sub">新闻中心</span>,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>
    <div>
        (基线升高)腾讯新闻,事实派。<span style="vertical-align: super">新闻中心</span>,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>
    <div>
        (行内框与行框对齐)腾讯新闻,事实派。<span style="vertical-align: bottom">新闻中心</span>,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>
    <div>
        (text-bottom)腾讯新闻,事实派。<span style="vertical-align: text-bottom">新闻中心</span>,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>
    <div>
        (middle)腾讯新闻,事实派。<span style="vertical-align: middle">新闻中心</span>,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>
    <div>
        (top)腾讯新闻,事实派。<span style="vertical-align: top ">新闻中心</span>,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>
    <div>
        (text-top)腾讯新闻,事实派。<span style="vertical-align: text-top ">新闻中心</span>,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>
    <div>
        (percentage)腾讯新闻,事实派。<span style="vertical-align: percentage ">新闻中心</span>,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>
    <div>
        (length )腾讯新闻,事实派。<span style="vertical-align: 20 ">新闻中心</span>,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>
</div>

这里写图片描述

word-spacing(英文单词)

解释：字间隔
可选值：length | normal | inherit
初始值： normal
应用于：所有元素

letter-spacing（英文字母和汉字）

解释：字母间隔
可选值：length | normal | inherit
初始值：normal
应用于：所有元素

eg:

eg:
<style>
  .text {width:210px}
  .text div {margin-bottom: 50px}
</style>
<div class="text">
    <div>
        (我是normal)腾讯新闻,事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </div>
    <p style="letter-spacing:1.5rem">
        (我是length)腾讯新闻,事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站
    </p>
</div>

这里写图片描述

text-transform

解释：文本转换
可选值：uppercase全大写 | lowercase全小写 | capitalize首字母大写 | none | inherit
初始值：none
应用于：所有元素

eg:
<style>
  .text {width:210px}
  .text div {margin-bottom: 50px}
</style>
<div class="text">
    <div>
        (我是none)Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.
    </div>
    <p>
        (我是uppercase)<span style="text-transform:uppercase">Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.</span>
    </p>
    <p>
        (我是lowercase)<span style="text-transform:lowercase">Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.</span>
    </p>
    <p>
        (我是capitalize)<span style="text-transform:capitalize">Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.</span>
    </p>
</div>

这里写图片描述

text-decoration

解释：文本装饰
可选值：none | underline | overline | line-through | blink
初始值：none
应用于：所有元素

eg:
<style>
  .text {width:210px}
  .text div {margin-bottom: 50px}
</style>
<div class="text">
    <div>
        (我是none)Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.
    </div>
    <p>
        (我是underline)<span style="text-decoration:underline ">Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.</span>
    </p>
    <p>
        (我是overline)<span style="text-decoration:overline ">Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.</span>
    </p>
    <p>
        (我是line-through)<span style="text-decoration:line-through">Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.</span>
    </p>
</div>

这里写图片描述

text-shadow

解释：文本阴影
可选值：none | color 
初始值：none
应用于：所有元素

eg:
<style>
  .text {width:210px}
  .text div {margin-bottom: 50px}
</style>
<div class="text">
    <div>
        (我是none)Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.
    </div>
    <p>
        (我是color )<span style="text-shadow:5px 5px 5px coral ">Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.</span>
    </p>
</div>

这里写图片描述

white-space

解释：处理空白符
可选值：normal | nowrap | pre | pre-wrap | pre-line | inherit
初始值：normal
应用于：所有元素

eg:
<style>
  .text {width:210px}
  .text div {margin-bottom: 50px}
</style>
<div class="text">
    <div>
        (我是none)Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.
    </div>
    <p>
        (我是nowrap )<span style="white-space:nowrap ">Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.</span>
    </p>
    <p>
        (我是pre  )<span style="white-space:pre  ">Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.</span>
    </p>
    <p>
        (我是pre-wrap )<span style="white-space:pre-wrap ">Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.</span>
    </p>
    <p>
        (我是pre-line )<span style="white-space:pre-line ">Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.</span>
    </p>
</div>

这里写图片描述

direction

解释：文本方向
可选值：ltr | rtl 
初始值：ltr
应用于：所有元素

eg:
<style>
  .text {width:210px}
  .text div {margin-bottom: 50px}
</style>
<div class="text">
    <div style="direction: rtl">Some text. Right-to-left direction.</div>
    <div style="direction: ltl">Some text. Left-to-right direction.</div>
</div>

这里写图片描述

dawnchengx

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
《css权威指南》文本属性

引言：博文中我们将会对每一个文本属性进行讨论，并举demo，以方便大家快速理解对应属性的含义大纲：1. text-indent 文本缩进2. text-align 水平对齐3. line-height 文本框行高4. vertical-align 垂直对齐5. word-spacing 字间隔6. letter-spacing 字母间隔7. text-trans...
复制链接

扫一扫

专栏目录