2021-02-01

目录

1. 调整文本的背景色
2. 调整标题与段落的大小
3. 给卡片元素添加 box-shadow
4. 降低元素的 opactiy
5. 设置多个标题元素的 font-size
6. 设置多个标题元素的 font-weight
7. 设置段落文本的 font-size
8. 设置段落的 line-height
9. 调整锚点的悬停状态

---

1.调整文本的背景色
为了让页面更美观，除了设置整个页面的背景色以及文字颜色外，还可以单独设置文字的背景色，即在文字的父元素上添加background-color属性。可以使用rgba()颜色。

rgba 代表： r = red 红色 g = green 绿色 b = blue 蓝色 a = alpha 透明度

RGB 值可以在 0 到 255 之间。alpha 值可以在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。rgba()非常棒，因为你可以设置颜色的透明度，这意味着你可以做出一些很漂亮的半透明效果。

2.调整标题与段落的大小
标题（h1到h6）的文字应该比的段落的文字大，这样可以让用户更直观的看到页面的布局，同时能区别出不同元素的重要程度，更方便用户捕捉关键的信息。你可以使用font-size属性来设置元素内文字的大小。

3.给卡片元素添加 box-shadow
box-shadow属性用来给元素添加阴影，该属性值是由逗号分隔的一个或多个阴影列表。

box-shadow属性的每个阴影依次由下面这些值描述：
offset-x阴影的水平偏移量；
offset-y阴影的垂直偏移量;
blur-radius模糊距离；
spread-radius阴影尺寸；
颜色。
其中blur-raduis和spread-raduis是可选的。

下面是创建了多个阴影的 CSS 例子，阴影加了模糊效果，颜色是透明度很高的黑色:

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

4.降低元素的 opactiy
CSS 里的opacity属性用来设置元素的透明度。

值 1 代表完全不透明。
值 0.5 代表半透明。
值 0 代表完全透明。

透明度会应用到元素内的所有内容，不论是图片，还是文本，或是背景色。

使用 text-transform 属性给文本添加大写效果
CSS 里面的text-transform属性来改变英文中字母的大小写。它通常用来统一页面里英文的显示，且无需直接改变 HTML 元素中的文本。

下面的表格展示了text-transform的不同值对文字 “Transform me” 的影响。

Value	Result
lowercase	“transform me”
uppercase	“TRANSFORM ME”
capitalize	“Transform Me”
initial	使用默认值
inherit	使用父元素的text-transform值。
none	Default:不改变文字。

5.设置多个标题元素的 font-size
font-size属性用来指定元素内文字的大小。这个规则可以应用到多个元素上，合理的使用，能让页面的文字显示的错落有致。

<style>
  h1{
    font-size:68px;
  }
  h2{
    font-size:52px;
  }
  h3{
    font-size:40px;
  }
  h4{
    font-size:32px;
  }
  h5{
    font-size:21px;
  }
  h6{
    font-size:14px;
  }
</style>
<h1>我是 h1 文字</h1>
<h2>我是 h2 文字</h2>
<h3>我是 h3 文字</h3>
<h4>我是 h4 文字</h4>
<h5>我是 h5 文字</h5>
<h6>我是 h6 文字</h6>

6.设置多个标题元素的 font-weight
font-weight属性用于设置文本中所用的字体的粗细。

<style>
  h1 {
    font-size: 68px;
    font-weight:800;
  }
  h2 {
    font-size: 52px;
    font-weight:600;
  }
  h3 {
    font-size: 40px;
    font-weight:500;
  }
  h4 {
    font-size: 32px;
    font-weight:400;
  }
  h5 {
    font-size: 21px;
    font-weight:300;
  }
  h6 {
    font-size: 14px;
    font-weight:200;
  }
</style>
<h1>我是 h1 文字</h1>
<h2>我是 h2 文字</h2>
<h3>我是 h3 文字</h3>
<h4>我是 h4 文字</h4>
<h5>我是 h5 文字</h5>
<h6>我是 h6 文字</h6>

7.设置段落文本的 font-size
CSS 里面的font-size属性不只限于标题，它可以应用于任何包含文字的元素内。

8.设置段落的 line-height
CSS 提供line-height属性来设置行间的距离。行高，顾名思义，用来设置每行文字所占据的垂直空间。

9.调整锚点的悬停状态
该方法涉及到伪类。伪类是可以添加到选择器上的关键字，用来选择元素的指定状态。

比如，超链接可以使用:hover伪类选择器定义它的悬停状态样式。下面是悬停超链接时改变超链接颜色的 CSS：

a:hover {
  color: red;
}