css教程之文本字体

老雷PHP全栈开发

发布于 2020-07-02 07:11:28

1.3K00

代码可运行

文章被收录于专栏：老雷PHP全栈开发老雷PHP全栈开发

运行总次数：0

代码可运行

css教程之文本字体

一、字体

1、font-size 字体大小

div{font-size:16px;}

2、font-weight 字体粗细

normal 正常的字体。相当于数字值400

bold 粗体。相当于数字值700。

bolder 定义比继承值更重的值

lighter 定义比继承值更轻的值

<integer>：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

div{
      font-weight:600;
}

3.font-family 字体名称

div{font-family: helvetica, verdana, sans-serif;}

4.font-style：normal | italic | oblique 字体样式

div{
      font-style:italic;
    }

5.字体颜色 color

div{color:#f60;}

二、文本Text

1.white-space 指定元素是否保留文本间的空格、换行；指定文本超过边界时是否换行。

normal 默认处理方式

pre 原封不动的保留你输入时的状态

nowrap：强制所有文本在同一行内显示

2.word-break 定义元素内容文本的字间与字符间的换行行为

normal：

默认的换行规则。依据各自语言的规则，允许在字间发生换行。

keep-all：

对于 CJK（中文，韩文，日文）文本不允许在字符内发生换行。Non-CJK 文本表现同normal

break-all：

对于 Non-CJK 文本允许在任意字符内发生换行。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字符断行。

3.text-align 定义元素内容的水平对齐方式。

left：内容左对齐。

center：内容居中对齐。

right：内容右对齐。

4.word-spacing 指定单词之间的额外间隙

p{word-spacing:20px;}

5.letter-spacing 指定字符之间的额外间隙

p{letter-spacing:10px;}

6.text-indent 定义块内文本内容的缩进

p{text-indent:20px;}

7.vertical-align

定义行内元素在行框内的垂直对齐方式 span/a/em/label

baseline：把当前盒的基线与父级盒的基线对齐。如果该盒没有基线，就将底部外边距的边界和父级的基线对齐

sub：把当前盒的基线降低到合适的位置作为父级盒的下标（该值不影响该元素文本的字体大小）

super：把当前盒的基线提升到合适的位置作为父级盒的上标（该值不影响该元素文本的字体大小）

text-top：把当前盒的top和父级的内容区的top对齐

text-bottom：把当前盒的bottom和父级的内容区的bottom对齐

middle：把当前盒的垂直中心和父级盒的基线加上父级的半x-height对齐

top：把当前盒的top与行盒的top对齐

bottom：把当前盒的bottom与行盒的bottom对齐

8.line-height 定义元素中行框的最小高度

9. text-decoration 文本装饰

text-decoration:none | underline | overline | line-through | blink

10.text-overflow

clip 当内联内容溢出块容器时，将溢出部分裁切掉。

ellipsis 当内联内容溢出块容器时，将溢出部分替换为（...）。

    p{overflow:hidden;width:200px;white-space:nowrap;text-overflow:ellipsis;}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文本字体</title>
    <style>
      .text{
        height: 100px;
        font-family: helvetica, verdana, sans-serif;
        font-size:24px;
        font-weight:bolder;
        font-style:italic;
        color: #0F8E82;
        text-align:center;
        word-spacing:20px;
        letter-spacing:10px;
        text-indent:20px;
        line-height:100px;
        
      }
      span{
        vertical-align:top;
        text-decoration:underline;
      }
      .text-over{
        width: 100px;
        height: 30px;
        overflow: hidden;
        white-space:nowrap;
        word-break:break-all;
        text-overflow: ellipsis;
      }
</style>
  </head>
  <body>
    <div class="text">
      <div>字体abc abc</div>
      <div>aa<span>bb</span></div>
    </div>
    <div class="text-over">
      textoverflowtextoverflowtextoverflow
    </div>
  </body>
</html>