蓝桥杯Web应用开发-CSS 基础语法3(文本属性)

CSS 基础语法-文本属性

专栏持续更新中

文本属性
文本属性用于定义文本的样式,通过文本属性,可以改变文本的颜色、字间距、对齐方式、文本修饰和文本缩进等。常用文本属性如下表所示:

属 性 可取值 描述
line-height normal、number、length、% 设置行高
text-indent length、% 设置文本缩进
text-align left、right、center、justify、start、end 设置对齐方式
letter-spacing normal、length 设置字符间距
text-decoration line、color、style、thickness 设置文本修饰
white-space normal、pre、nowrap、pre-wrap、pre-line、break-spaces 规定如何处理空白
line-break auto、loose、normal、strict、anywhere、unset 处理如何断开带有标点符号的文本的行

这里只给大家介绍两个最常用的文本属性 line-heighttext-decoration

line-height 的使用

line-height 用于设置多行元素的空间量,可取值具体说明如下:
• normal:取决于用户端。
• number:数字乘以元素的字体大小。
• length:指定长度用于计算高度。
• %:计算值是给定的百分比值乘以元素计算出的字体大小。

新建一个 index11.html 文件,在其中写入以下内容。

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>line-height 的使用title>
    <style>
      div {
        width: 300px;
        height: 400px;
        border: 1px solid;
        font-size: 15px;
        display: inline-block;
        vertical-align: top;
      }
      .div1 {
        line-height: 2; /*15 * 2*/
      }
      .div2 {
        line-height: 30%; /*15 * 30% */
      }
    style>
  head>
  <body>
    <div class="div1">
      <p>“海水呀,你说的是什么?”p>
      <p>“是永恒的疑问。”p>
      <p>“天空呀,你回答的话是什么?”p>
      <p>“是永恒的沉默。”p>
    div>
    <div class="div2">
      <p>“海水呀,你说的是什么?”p>
      <p>“是永恒的疑问。”p>
      <p>“天空呀,你回答的话是什么?”p>
      <p>“是永恒的沉默。”p>
    div>
  body>
html>

蓝桥杯Web应用开发-CSS 基础语法3(文本属性)_第1张图片

text-decoration 的使用

text-decoration 属性用于设置文本的装饰线,例如给文本加下划线、中划线、波浪线等。可取值具体说明如下:
• none: 默认值,表示没有任何装饰效果。
• underline: 在文本下方添加下划线。
• overline: 在文本上方添加上划线。
• line-through: 在文本中间添加删除线。
• underline overline: 同时添加上划线和下划线。
• underline line-through: 同时添加下划线和删除线。
• overline line-through: 同时添加上划线和删除线。
• underline overline line-through: 同时添加上划线、下划线和删除线。

其他用法:
• text-decoration-line 设置线的位置,可取值包含:underline(下划线)、overline(上划线)、line-through(中划线)。
• text-decoration-color 设置线的颜色。
• text-decoration-style 设置线的样式,可取值包含:wavy(波浪线)、solid(实线)、dashed(虚线)。
• text-decoration-thickness 设置线的粗细。

新建一个 index12.html 文件,在其中写入以下内容。

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>text-decoration 的使用title>
    <style>
      .item1 {
        text-decoration: underline lime; /*下划线直线*/
      }
      .item2 {
        text-decoration: wavy overline lime; /*上划线波浪线*/
      }
      .item3 {
        text-decoration: line-through lime; /*中划线*/
      }
      .item4 {
        text-decoration: none; /*无样式*/
      }
      .item5 {
        text-decoration: dashed underline overline lime 5px; /*圆点上划线和下划线*/
      }
    style>
  head>
  <body>
    <p class="item1">太阳只穿一件朴素的光衣,白云却披了灿烂的裙裾。p>
    <p class="item2">太阳只穿一件朴素的光衣,白云却披了灿烂的裙裾。p>
    <p class="item3">太阳只穿一件朴素的光衣,白云却披了灿烂的裙裾。p>
    <p class="item4">太阳只穿一件朴素的光衣,白云却披了灿烂的裙裾。p>
    <p class="item5">太阳只穿一件朴素的光衣,白云却披了灿烂的裙裾。p>
  body>
html>

蓝桥杯Web应用开发-CSS 基础语法3(文本属性)_第2张图片

你可能感兴趣的:(蓝桥杯Web应用开发(大学组),前端,蓝桥杯,css,html5)