Web开发学习笔记(19)——CSS(6)常用样式-前端教程-前军教程网

（1）背景样式属性，用于定义 HTML 元素的背景色、背景图片，同时还可以进行背景定位、背景图片重复、背景图片固定。

background-color
background-image
background-size
background-position
background-repeat

background-color 属性可以给指定标签元素设置背景色。

举个例子！我们给 body 元素设置一个背景颜色：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: yellowgreen;
      }
    </style>
  </head>
  <body></body>
</html>

background-image 属性可以把图像插入背景。background-size 属性可以给背景图设置大小。

举个例子！我们给 body 元素设置一个背景图像。

wget https://labfile.oss.aliyuncs.com/courses/3773/moon.jpg

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-image: url("moon.jpg");
        background-size: 300px 300px;
      }
    </style>
  </head>
  <body></body>
</html>

通过 background-position 属性，可以改变图像在背景中的位置。

background-position 属性，设置属性值为居中:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-image: url("moon.jpg");
        background-size: 300px 300px;
        background-position: center;
      }
    </style>
  </head>
  <body></body>
</html>

background-repeat 属性是用来设置背景图像是否平铺。

下表列出了 background-repeat 属性的一些可取值以及每个可取值的含义。

可取值	描述
repeat	背景图像将在垂直方向和水平方向重复（默认值）
repeat-x	背景图像将在水平方向重复
repeat-y	背景图像将在垂直方向重复
no-repeat	背景图像将仅显示一次

我们规定应该从父元素继承 background-repeat 属性的设置。

background-repeat 属性并设置值为不平铺:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-image: url("moon.jpg");
        background-size: 300px 300px;
        background-position: center;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body></body>
</html>

（2）文本相关的属性：

line-height 属性
text-indent 属性
text-align 属性
letter-spacing 属性
text-decoration 属性
white-space 属性
line-break 属性

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

属性	可取值	描述
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-height 用于设置多行元素的空间量，可取值具体说明如下：

normal：取决于用户端。
number：数字乘以元素的字体大小。
length：指定长度用于计算高度。
%：计算值是给定的百分比值乘以元素计算出的字体大小。

例子，

<!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>

显示为，

text-indent 属性用于设置块级元素中首行文本内容的缩进量。可取值具体说明如下：

length 使用固定的长度指定文本的缩进。
% 使用包含块宽度的百分比作为缩进。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>text-indent 的使用</title>
    <style>
      p {
        background-color: cornflowerblue;
      }
      .item1 {
        text-indent: 5em;
      }
      .item2 {
        text-indent: 30%;
      }
    </style>
  </head>
  <body>
    <p class="item1">夏天的飞鸟，飞到我的窗前唱歌，又飞去了。</p>
    <p class="item2">夏天的飞鸟，飞到我的窗前唱歌，又飞去了。</p>
  </body>
</html>

显示为，

text-align 属性用于定义元素里的内容相对于父元素的对齐方式。可取值具体说明如下：

left 行内内容向左侧边对齐。
right 行内内容向右侧边对齐。
center 行内内容居中对齐。
justify 文字两侧对齐。
start 如果内容方向是左至右，则等于 left，反之则为 right。
end 如果内容方向是左至右，则等于 right，反之则为 left。

例子，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            background-color:grey;
        }
        .item1{
            text-align:center;
        }
        .item2{
            text-align:right;
        }
        .item3{
            text-align:left;
        }
    </style>
</head>
<body>
    <p class="item1">我的朋友，你的语声飘荡在我的心里，像那海水的低吟声绕缭。</p>
    <p class="item2">我的朋友，你的语声飘荡在我的心里，像那海水的低吟声绕缭。</p>
    <p class="item3">我的朋友，你的语声飘荡在我的心里，像那海水的低吟声绕缭。</p>
</body>
</html>

显示为，

letter-spacing 用于设置文本字符之间的间距。可取值具体说明如下：

normal 根据字体的正常间距来确定的。
length 指定文字间的间距。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>letter-spacing 的使用</title>
    <style>
      p {
        background-color: rgb(77, 122, 41);
      }
      .item1 {
        letter-spacing: normal;
      }
      .item2 {
        letter-spacing: 6px;
      }
      .item3 {
        letter-spacing: 2rem;
      }
    </style>
  </head>
  <body>
    <p class="item1">使生如夏花之绚烂，死如秋叶之静美</p>
    <p class="item2">使生如夏花之绚烂，死如秋叶之静美</p>
    <p class="item3">使生如夏花之绚烂，死如秋叶之静美</p>
  </body>
</html>

显示为，

text-decoration 属性用于设置文本的装饰线，例如给文本加下划线、中划线、波浪线等。可取值具体说明如下：

text-decoration-line 设置线的位置，可取值包含：underline（下划线）、overline（上划线）、line-through（中划线）。
text-decoration-color 设置线的颜色。
text-decoration-style 设置线的样式，可取值包含：wavy（波浪线）、solid（实线）、dashed（虚线）。
text-decoration-thickness 设置线的粗细。

例子，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item1{
            text-decoration:underline rgb(231, 43, 30);
        }
        .item2{
            text-decoration:wavy overline rgb(231, 43, 30);
        }
        .item3{
            text-decoration:line-through rgb(231, 43, 30);
        }
        .item4{
            text-decoration: none;
        }
        .item5{
            text-decoration:dashed underline overline rgb(231, 43, 30) 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>

显示为，

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

Web开发学习笔记(19)——CSS(6)常用样式