第六篇 css - 样式 - 【 字体样式 + 文本样式 】

字体样式

1、color

2、font-size

3、font-family

4、font-style

5、font-weight

字体样式解析

1、font-family

   该属性用于设置字体
   
   1、网页中常用的字体有宋体、微软雅黑、黑体等
   
     如果字体名中包含 空格、#、$ 等符号，则该字体必须加英文状态下的单引号或双引号
   
     例如 font-family: “Times New Roman”
     
   2、当为元素定义多种字体类型时，浏览器会从定义的第一个字体开始检索，若当前浏览器支持第一种字体，则使用第一种字体，否则向后检索，直到检索到浏览器支持的字体，在未设置字体时，默认显示宋体

2、font-size

  该属性用于设置字体大小
  
  该属性的值可以使用相对长度单位，也可以使用绝对长度单位 px 绝对像素单位；
  
  em 相对父元素字体大小单位
  
  rem 相对父根元素字体大小单位

3、font-weight

   设置字体粗细
   
4、color
  
   设置字体颜色

5、font-style

   设置字体风格
   
   在 CSS 中，我们常用 font-style 来定义斜体效果
   
   
| 属性值 | 描述 |
| --- | --- |
| normal | 正常 默认值 |
| italic | 斜体 |
| oblique | 斜体 |

后两个斜体在浏览器中效果是一样的，但是并非所有字体都有 italic 属性

对于没有这个属性的字体，使用 oblique 来实现斜体效果。

在日常开发中很少用到 font-style 属性。

文本样式

1、text-algin

2、text-indent

3、text-decoration

4、text-transform

5、text-shadow

6、line-height

7、letter-spacing

8、word-spacing

9、word-wrap 

10、word-break

11、white-space

文本样式解析

1、text-align  

   水平对齐
   
   使用 text-align 控制文本在水平方向上的对齐方式
   
| 属性值 | 描述 |
| --- | --- |
| left | 左对齐 |
| cnter | 剧中对齐 |
| right | 右对齐 |
| start | 块容器的方向是从左到右，则与 left 相同; 块容器的方向是从右到左，则与 right 相同 |
| end | 如果块容器的方向是从左到右，则为右;如果块容器的方向是从右到左，则为左 |
| justify | 两端对齐 |
| inherit | 继承父类的对齐样式 |

2、text-indent

  文本缩进
  
  CSS 中的 text-indent 属性可以实现段落的 首行缩进
  
  text-align 属性的值具有 4 种类型，如下所示：

    1、长度值：允许使用负值
   
    2、百分比值：使用所在块级元素的宽度的百分比作为缩进
    
    3、each-line：文本缩进会影响第一行，以及使用元素强制断行后的第一行
    
    4、hanging：该值会对所有的行进行反转缩进：除了第一行之外的所有的行都会被缩进
    
               看起来就像第一行设置了一个负的缩进值。

4、text-decoration

   文本装饰
   
   用于设置元素中的 文本 的修饰类型
   
   1、text-decoration-line 属性
   
     用于设置元素中的文本的修饰类型。

       1、underline: 下划线
       
       2、overline: 顶划线
       
       3、line-through: 删除线

   2、text-decoration-color 属性
   
      用于设置文本修饰线的颜色

   3、text-decoration-style 属性
   
      用于设置由 text-decoration-line 设定的线的样式

运用

  1、在 HTML 中，可以使用 s 标签、u 标签来实现文字的划线效果，但是为了保证结构与样式分离的原则，一般使用 CSS 来实现样式，提高代码的可读性和可维护性

  2、超链接默认带下划线，可以用 text-decoration：none 来清除超链接的下划线

  3、下划线常用于文章的重点标明，中划线用于促销时划掉原价，上划线基本没有应用场景

5、text-transform

   英文字母大小写的转换
   
| 属性值 | 描述 |
| --- | --- |
| none | 无转换（默认值） |
| uppercase | 转换成大写 |
| lowercase | 转换为小写 |
| capitalize | 将每个英文单词的首字母转为大写|

6、line-height

   控制两行元素之间的垂直距离
   
     1、行间距也称为行高指的是两行文本内容中基线的距离，即两条绿色线之间的距离
   
     2、行距指的是上一行的底线到下一行的顶线之间的距离
   
     3、字体大小值的是顶线到底线的距离

   line-height 属性的值允许指定如下 4 种类型
   
      1、normal 关键字：该值取决于用户电脑。一般情况下，浏览器使用的默认值为 1.2
      
      2、数字值：line-height 属性的最终的效果值是该数字值乘以该元素的字体大小（font-size 属性值）
      
      3、长度值：该值可以使用的单位请参考《单位》一节内容。如果使用 em 单位的可能会产生不确定的效果
      
      4、百分比值：line-height 属性的最终的效果值是该百分比值乘以该元素的字体大小font-size 属性值。

注意

   line-height 属性设置值时，建议使用数字值。因为使用数字值时，不会在继承时产生不确定的结果

7、letter-spacing 

   字母间距
   
   letter-spacing 属性原意是用来设置文本字符之间的间距
   
   在英文中是可以分为 单词 和 字符 的，但在中文中只有文字，中文中的文字就相当于英文的字符，所以 letter-spacing 属性可以适用于中文环境

    letter-spacing 属性的值具有 2 种类型

      1、normal：该值是按照当前字体的正常间距确定的
      
      2、长度值：指定文字间的间距以替代默认间距，可以是负值

8、word-spacing

   单词间距
   
   word-spacing 属性用来设置 HTML 页面中标签之间或单词之间的距离，该属性对英文是有效的，但对中文是无效的
   
   word-spacing 属性的值具有 3 种类型
   
    1、normal：该值是按照当前字体的正常间距确定的
   
    2、长度值：指定单词间的间距以替代默认间距
   
    3、百分比值：指定单词之间的间距以替代默认间距的百分比

9、text-shadow

   文本阴影
   
   ext-shadow 属性用来设置 HTML 页面中文本内容的阴影
   
   selector {
      text-shadow: color offset-x offet-y blur-raduis;
   }
   
color：可选项，设置文本内容的阴影颜色。

offset-x：必选项，设置文本内容的阴影在水平方向的偏移量。

  1、如果值小于 0 的话，则表示向左偏移
  
  2、如果值等于 0 的话，则表示水平方向不发生任何偏移
  
  3、如果值大于 0 的话，则表示向右偏移

offset-y：必选项，设置文本内容的阴影在垂直方向的偏移量。

  1、如果值小于 0 的话，则表示向上偏移
  
  2、如果值等于 0 的话，则表示垂直方向不发生任何偏移
  
  3、如果值大于 0 的话，则表示向下偏移

blur-raduis：可选项，设置文本内容的阴影模糊半径

   如果没有指定，则默认为 0。值越大，模糊半径越大，阴影也就越大越淡

10、文本换行 word-wrap  和  word-break

1、浏览器自身带有文本换行的功能。在浏览器显示文本内容时，让文本和浏览器的右端自动实现换行

  1、对于西方文本，浏览器会在半角空格或连字符的地方自动换行

  2、对于中文文本，可以在任何文字后面换行。通常标点符号以及前面的文字作为整体统一换行

2、在 CSS 中可以用来设置文本换行效果的属性存在 2 个

    1、word-wrap 属性
  
    2、word-break 属性
  
  a、word-wrap 属性
  
    word-wrap 属性属于微软的一个私有属性
  
    在 CSS3 的文本规范中被重命名为 overflow-wrap
  
    word-wrap 作为 overflow-wrap 的别名
    
    overflow-wrap 属性用来设置 HTML 页面中当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行
    
    overflow-wrap 属性的值具有如下 2 种：

       1、normal：表示在正常的单词结束处换行
      
       2、break-word：表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。
       
  b、word-break 属性     
  
    word-break 属性用来设置 HTML 页面中文本内容自动换行的处理方式
    
    通过具体的属性值设置，可以告知浏览器实现任意位置的换行
    
    word-break 属性的值具有如下 3 种
    
       1、normal：使用默认的断行规则
       
       2、break-all：对于除中文、日文和韩文外的文本内容，设置可以在任意字符间断行
       
       3、keep-all：中文、日文和韩文的文本内容不断行，其他语言的文本内容等同于 normal。

11、white-space

   处理空白
   
   white-space 属性用来设置如何处理 HTML 元素中的空白
   
   <body>
     <!-- 浏览器默认会将所有的空白进行合并为一个 -->
      <p>19级   启嘉班</p>
   </body>
   
   该属性的值具有如下 6 种类型
   
    1、normal： 默认值，连续的空白符会被合并，换行符会被当作空白符来处理
    
       填充内联元素的盒子模型时，必要的话会换行
       
    2、nowrap：和 normal 一样，连续的空白符会被合并。但文本内的换行无效
    
    3、pre：连续的空白符会被保留。在遇到换行符或者 <br> 元素时才会换行
    
    4、pre-wrap：连续的空白符会被保留。在遇到换行符或者 <br> 元素，或者需要为了填充内联元素的盒子模型时才会换行。
    
    5、pre-line：连续的空白符会被合并。在遇到换行符或者 <br>元素，或者需要为了填充内联元素的盒子模型时会换行。
    
    6、break-spaces：与 pre-wrap 的行为相同