这是我参与「第五届青训营」笔记创作活动的第2天复习CSS时记录的笔记。从最基本的 CSS 概念开始，复习如何使用 CSS 同时控制多重网页的样式和布局。同时涉及最新版本 CSS3 的内容，掌握新的标准化组件。

一、CSS介绍

1.CSS概述

层叠样式表（英语：Cascading Style Sheets，简写 CSS），又称串样式列表、级联样式表、串接样式表、阶层式样式表，一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，由 W3C 定义和维护。目前最新版本是 CSS2.1，为 W3C 的推荐标准。

注：定义来自维基百科。

直观的来说 CSS 就是我们网页的美容师，为我们的网页添加样式，美化网页，让网页更加美观。而我们前面所学到的 HTML 是写出我们网页的结构。

2.CSS语法

CSS 的语法单元是样式，每个样式包含两部分内容：选择器和声明（或者称为规则）：

例子：

h1 {
  color: red;
}

注：上述例子中 h1 是选择器，color 是属性，red 是属性值。

CSS 语法结构为：选择器{属性：值;属性：值;...}

选择器：通常是你需要设置样式的 HTML 元素。

属性：是你需要设置的样式属性，比如宽高，颜色，大小等。

属性值：你需要设置的样式属性的具体值，比如宽高具体是多少 px，颜色具体是什么颜色。

3.CSS 注释

注释用来为部分 CSS 代码添加额外的解释，或者用来组织浏览器解析一部分区域内的 CSS 代码。

语法：

/* 这是一行单行注释 */

/*
这是
多行注释
*/

新建一个 test.html 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
        color: red;
        /*font-size:28px;
        font-weight:500;*/
      }

      div {
        width: 200px;
        height: 200px;
        /* background:blue;*/
        background: red;
      }
    </style>
  </head>

  <body>
    <div>小牛</div>
    <p>小马使我快乐！</p>
  </body>
</html>

4.CSS 数值与单位

你会在很多地方看到 CSS 单位中使用到数值。下面为大家介绍数值的最常用类别。

颜色值

在网页中的颜色设置是非常重要，有字体颜色，背景颜色，边框颜色等，设置颜色的方法也有很多：

1.英文命名颜色

p {
  color: pink;
}
/*给p标签的字体颜色设置为粉色*/

2.RGB 颜色

由 Red、Green、Blue 三种颜色的比例来配色，简称 RGB。

p {
  color: rgb(154, 32, 432);
}

每一项的值可以是 0~~255 之间的整数，也可以是 0~~100% 的百分数，如：

p {
  color: rgb(30%, 20%, 40%);
}

3.十六进制颜色

现在较为普遍的颜色使用法，其原理其实也是 RGB 设置，但是其每一项的值由 0~255 变成了十六进制 00-ff。

p {
  color: #00eeff;
}

长度值

长度单位总结了几种常用单位：px，em，%，这三种单位都是相对单位。

1.像素

px 像素（Pixel）。相对长度单位，像素 px 是相对于显示器屏幕分辨率而言的。

特点：

E 无法调整那些使用 px 作为单位的字体大小。

国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位。

2.em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px，那么 1em=14px。如果 font-size 为 18px，那么 1em=18px。

p {
  font-size: 14px;
  line-height: 2em;
}
/*在这里的line-height行高被设置成了14*2=28px*/

3.百分比

p {
  font-size: 14px;
  line-height: 120%;
}
/*行高为：14*1.2=16.8*/

5.CSS样式类型

CSS 样式类型分为三种：内联式、内嵌式、外链式。

内联式(行内式)

通过标签的 style 属性来设置元素的样式，语法格式为：

<标签名 style="属性1:属性值1; 属性2:属性值2; ..."> 内容 </标签名>

例子：

<p style="color:blue;">Hello World</p>

优点：十分灵活，书写方便，权重高（后面会提到）。缺点：只能操作某一个标签，没有实现样式和结构相分离。

内嵌式（内部样式表）

将 CSS 代码集中写在 HTML 文档的 head 头部标签中，并且用 style 标签定义。语法格式为：

<head>
<style type="text/css">
    选择器 {属性1:属性值1; 属性2:属性值2; ...}
</style>
</head>

例子：

<style type="text/css">
    p{color:blue;}
</style>

优点：可以通过一条语句操作多个标签或类。缺点：只能控制一个页面，没有彻底实现样式和结构分离。

外链式（外部样式表）

将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过 link 标签将外部样式表文件链接到 HTML 文档中。语法格式为：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

注：href 定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径。rel 定义当前文档与被链接文档之间的关系，在这里需要指定为 “stylesheet”，表示被链接的文档是一个样式表文件。

例子：

首先我们要创建一个 css 文件，比如：main.css。然后在里面就能直接写 css 代码了。比如:

p {
  color: blue;
}

其次我们在 html 文件中引入这个 css 文件。

<link rel="stylesheet" href="main.css" />

优点：一个单独的 CSS 文件，多个 HTML 文件可以引用一个 CSS 样式表文件。HTML 代码和 CSS 代码分离,要写什么就在哪个文件去找，修改方便。

注：这样写的前提是 HTML 页面与 CSS 文件在同一文件夹下。行内样式表一般写在标签头部，内嵌式样式表、外联式一般写在标签内。为了编码规范，希望大家尽量使用外联式来写我们的 CSS 代码。

三种方法的优先级

我三种 CSS 样式类型，如果对于同一个元素，同时使用了三种方法设置了 CSS 样式，这个时候，哪个方法是有效的呢？

可以记住一个优先级：

内联式 > 嵌入式 > 外链式

但是“嵌入式 > 外链式” 有一个前提：嵌入式 CSS 样式的位置一定在外链式后面

制作一个谷歌图标的小案例。

源码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <meta charset="utf-8" />
  </head>

  <body>
    <p style="font-size:60px">
      <span style="color:blue">G</span>
      <span style="color:red">o</span>
      <span style="color:orange">o</span>
      <span style="color:blue">g</span>
      <span style="color:green">l</span>
      <span style="color:red">e</span>
    </p>
  </body>
</html>

注：span 是一个行内标签，它能够不换行显示。

二.CSS基本样式

1.文字排版

字体

通过 font-family 属性设置字体种类，注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      body {
        font-family: 'yahei';
        /*微软雅黑*/
      }
    </style>
  </head>
  <body>
    <p>小牛</p>
  </body>
</html>

几种几乎所有系统都能够支持的几种字体：Arial，Courier New，Georgia，Times New Roman，Trebuchet MS，Verdana。

字体大小和颜色

字体大小通过 font-size 属性设置。字体的常用单位是：px，em。字体颜色通过 color 属性来设置。

<style>
  body {
    font-family: 'yahei';
    font-size: 40px;
    color: red;
  }
</style>
<body>
  <p>小牛</p>
</body>

注意：这里只展示标签和标签的内容，其他部分未改变的不做展示，接下来的例子都是这样。

字体样式-粗体

通过 font-weight 属性设置字体的粗细。常用的有 normal：字体正常，bold：文字加粗。

<style>
  body {
    font-size: 40px;
    color: red;
    font-weight: bold;
  }
</style>
<body>
  <p>小牛</p>
</body>

字体样式-斜体 通过 font-style 属性设置文字格式。

normal: 将文本设置为普通字体 (将存在的斜体关闭)。

italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。

oblique: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。

body {
  font-size: 40px;
  color: red;
  font-style: italic;
}

字体装饰

通过 text-decoration 属性设置或者取消字体上的文本装饰，我们一般会使用这个属性去掉链接上的默认下划线。

可用值为：

none: 取消已经存在的任何文本装饰。

underline: 文本下划线。

overline: 文本上划线。

line-through: 穿过文本的线（删除线）。

body {
  font-size: 40px;
  color: red;
  font-style: italic;
  text-decoration: underline;
}

段落排版

缩进

段落缩进使用 text-indent 属性，中文文字中的段前习惯空两个文字的空白。

<style>
  body {
    font-size: 14px;
    color: red;
    font-style: italic;
    text-decoration: underline;
    text-indent: 2em;
  }
</style>
<body>
  <p>小牛和小马是好朋友</p>
</body>

行高

可以使用 line-height 属性设置段落行高。

<style>
  body {
    font-size: 14px;
    color: red;
  }
</style>
<body>
  <p>小牛和小马是好朋友</p>
  <p style="line-height:30px">小牛和小马是好朋友</p>
</body>

当两个段落一个设置行高，一个未设置行高时的效果：

中文字间距、字母间距

可以使用 letter-spacing 属性设置文字间距或者字母间距。

  <style>
        body{
            font-size:14px;
            color:red;
            letter-spacing:2em;
        }
    </style>
  </head>
  <body>
       <p>小牛和小马是好朋友</p>
  </body>

对齐

如果想为块状元素中的文本、图片设置样式居中，可以使用text-align 属性。

  <style>
        body{
            font-size:14px;
            color:red;
            text-align:center;
        }
    </style>
  </head>
  <body>
      <p>小牛和小马是好朋友</p>
  </body>

同样也可以使用 text-align:left 设置左对齐，使用 text-align:right 设置右对齐。

2.样式化列表

list 列表大体上和其他文本一样，这里讲解一些特殊用在列表上的 CSS 属性。

列表特定样式

符号样式：用 list-style-type 设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。常见的取值有：

disc 无序列表的默认值，实心圆。

circle 空心圆。

square 实心方块。

decimal 有序列表的默认值阿拉伯数字。

lower-alpha 小写英文字母。

upper-alpha 大写英文字母。

栗子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      ul {
        list-style-type: circle;
      }
      ol {
        list-style-type: lower-alpha;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ul>

    <ol>
      <li>555</li>
      <li>666</li>
      <li>777</li>
    </ol>
  </body>
</html>

项目符号位置：通过 list-style-position 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。

默认值为 outside，这使项目符号位于列表项之外。

如果值设置为 inside，项目条目则位于行内。

我们把前面的例子设置为 inside 来看看效果,为了便于查看效果，我们为 ul 和 li 设置背景色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      ul {
        list-style-type: circle;
        list-style-position: inside;
        background-color: red;
      }

      ol {
        list-style-type: lower-alpha;
      }

      li {
        background-color: gold;
      }
    </style>
  </head>

  <body>
    <ul>
      <li>111</li>
      <li>222</li>
      <li>333</li>
    </ul>

    <ol>
      <li>555</li>
      <li>666</li>
      <li>777</li>
    </ol>
  </body>
</html>

2.样式化链接

选择器中有以下几种伪类 :link、 :hover、 :active、 :visited，我们也可以为伪类设置样式。

首先我们写一个链接，来看看它默认的一些样式：

<a href="#">我是链接</a>

我们发现以下特点：

链接具有下划线。

未访问过的 (Unvisited) 的链接是蓝色的。

访问过的 (Visited) 的链接是紫色的。

悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标。

激活 (Active) 链接的时候会变成红色 (用鼠标左键点击链接)。

知道链接的默认样式后，我们同样可以使用 color 属性改变链接不同状态的颜色，使用 text-decoration 属性去掉链接默认的下划线。一般来说对于链接的样式，掌握这两个就够了。

<style>
  a:hover {
    color: red;
    text-decoration: none;
    /*鼠标经过，字体颜色变成红色，并且去掉下划线*/
  }
</style>
<body>
  <a href="https://www.lanqiao.cn/">实验楼</a>
</body>

3.Web字体

对于字体的使用来说，有时候我们可能并不仅仅满足于使用自带的字体。而通过 Web 字体，我们可以使用更多的不同的文本样式。

首先我们通过 @font-face 指定要下载的字体文件。

@font-face {
  font-family: 'Bitstream Vera Serif Bold';
  src: url('http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf');
}

然后使用 @font-face 中指定的字体种类名称来将你的定制字体应用到你需要的地方，比如说：

body {
  font-family: 'Bitstream Vera Serif Bold', serif;
}

完整的代码为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      @font-face {
        font-family: 'Bitstream Vera Serif Bold';
        src: url('http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf');
      }

      body {
        font-family: 'Bitstream Vera Serif Bold', serif;
      }
    </style>
  </head>

  <body>
    <div>我爱学习，学习使我快乐！</div>
  </body>
</html>

三、CSS 样式化区块

1.元素分类

在 HTML 中的标签元素大体被分为三类：块级元素、行内元素、行内块元素。

常用的块级元素：

<div>
  <p></p>
  <h1>
    ...
    <h6>
      <ol>
        <ul>
          <table>
            <address>
              <blockquote>
                <form></form>
              </blockquote>
            </address>
          </table>
        </ul>
      </ol>
    </h6>
  </h1>
</div>

常见的行内元素：

<a>
  <span>
    <br />
    <i>
      <em>
        <strong> <label></label></strong></em></i></span
></a>

常见的行内块元素：

<img /> <input />

块级元素

块级元素，顾名思义，该元素呈现“块”状，所以它有自己的宽度和高度，也就是可以自定义 width 和 height，除此之外，块级元素独自占据一行高度（float 浮动除外），一般可以作为其他容器使用，可容纳块级元素和行内元素。

块级元素有以下特点：

每个块级元素都从新一行开始，并且其后的元素都另起一行。

元素的高度、宽度、行高以及顶和底边间距都可以设置。

元素宽度在不设置的情况下，是它本身父容器的 100%（和父元素宽度一致）。

行内元素

行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。

行内元素有以下特点：

和其他元素在一行上。

元素的高度、宽度、行高以及顶和底边间距都不可以设置。

元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块元素

行内块级元素，它既具有块级元素的特点，也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。比如 input、img 就是行内块级元素，它可以设置高宽以及一行多个。

具体特点如下：

和其他元素在一行上。

元素的高度、宽度、行高以及顶和底边间距都可以设置。

2.区块模型

区块模型也就是我们常说的盒子模型，而所谓盒子模型就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

盒模型的宽度和高度和我们平常所说的物体的宽度和高度是不一样的。CSS 定义的宽和高，指的是填充以里的内容范围。

因此盒子的宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距。

每个矩形都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。我们用一张图来表示：

padding（内边距）

padding 内边距位于内容框的外边缘与边界的内边缘之间。padding-top:上内边距，padding-right:右内边距，padding-bottom:下内边距，padding-left:左内边距。

设置内边距的写法：

padding:5px 10px 15px 20px;表示上内边距是 5 px，右内边距是 10 px，下内边距是 15 px，左内边距是 20 px。

padding:5px 10px 15px;表示上内边距是 5 px，右内边距和左内边距是 10 px，下内边距是 15 px。

padding:5px 10px;表示上内边距和下内边距是 5 px，右内边距和左内边距是 10 px。

padding:10px;表示所有 4 个内边距都是 10 px。

注：padding 属性接受长度值或百分比值，但不允许使用负值。如果使用百分比值，百分数值是相对于其父元素的 width 计算的。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      #box1 {
        width: 200px;
        height: 200px;
        background-color: red;
        padding: 20px 10px 10px 50px;
      }
      #box2 {
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div id="box1"></div>
    <div id="box2"></div>
  </body>
</html>

可以看到，同样是设置高宽为 200 像素的盒子，有 padding 的明显要大一些，padding 在边框里面。

border（边框）

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。你可以设置它的粗细，样式和颜色。

边框语法：

border: border-width||border-style||border-color;

例子：

div {
  border: 2px solid red;
}

这条代码能给 div 设置边框粗细为 2px、样式为实线、颜色为红色的边框。

注意：border-style（边框样式）的常用样式有：dashed（虚线）、dotted（点线）、solid（实线）.

你可以按照上右下左的格式，分别写出元素的各个边框的属性。

例子：

div {
  border-style: solid;
  border-width: 15px 5px 15px 5px;
}

也可以简写为：

div {
  border-style: solid;
  border-width: 15px 5px;
}

注：和前面 padding 的简写方式一样，有遗忘的可以往前面看看哟。

也可以单独设置一个方向的边框：

div {
  border-top: 1px solid red;
}
/*只给上边框设置一像素的红色实线*/

以此类推：

border-right：右边框
border-left：左边框
border-bottom：下边框

边框的颜色可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：

p {
  border-style: dashed;
  border-color: yellow rgb(25%, 35%, 45%) #909990 red;
}

注：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。

margin(外边距)

外边距（margin）代表 CSS 框周围的外部区域，称为外边距。和 padding 类似，也有 margin-top、margin-right、margin-bottom 和 margin-left。写法仿照 padding。

注：与 padding 不同的是 margin 可以是负值。

外边距合并问题：

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

外边距合并示例图：

高级的框操作

溢流: 当你使用绝对的值设置了一个框的大小（如，固定像素的宽/高），允许的大小可能不适合放置内容，这种情况下内容会从盒子溢流。我们使用 overflow 属性来控制这种情况的发生。

常用的值：

auto:当内容过多的时候溢流的内容被隐藏，然后出现滚动条，让我们滚动查看所有的内容。

hidden: 当内容过多，溢流的内容被隐藏。

visible: 当内容过多，溢流的内容被显示在盒子的外边。例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      p {
        width: 500px;
        height: 2.5em;
        padding: 1em 1em 1em 1em;
        border: 1px solid black;
      }

      .one {
        overflow: auto;
      }

      .two {
        overflow: hidden;
      }

      .three {
        overflow: visible;
      }
    </style>
  </head>

  <body>
    <p class="one">
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
    </p>

    <p class="two">
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
    </p>

    <p class="three">
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
      我爱学习，学习使我快乐！我爱学习，学习使我快乐！
    </p>
  </body>
</html>

3.背景

元素的背景是指，在元素内容、内边距和边界下层的区域。而在我们前面学习样式化列表的时候已经接触过 background 属性了。

背景颜色：通过 background-color 属性设置，首先，大多数元素的背景色是 transparent（透明色），而不是 white（白色），设置了背景颜色后，元素的内容依然是可读的，很多时候，我们需要都需要设置背景色来帮助我们，比如前面介绍样式化列表的 list-style-position 属性 inside 值的效果就使用到了背景色。

背景重复：background-repeat 允许您指定背景图像是如何重复的。默认值是 repeat，图像将在整个背景中水平和竖直地重复。但是大多数情况下我们是不需要重复的，因此经常在使用背景图片的时候设置为 no-repeat。此外还有两个值，repeat-x: 图像将在整个背景中水平地重复。repeat-y: 图像会在背景下垂直地重复。

背景位置：background-position 允许我们在背景中任意位置放置背景图像。除了上面图片所给的值，我们还可以自定义值，使用两个通过空格分格的值，指定图像的水平（x）和垂直（y）坐标，图像的左上角为原点（0,0），x 坐标从左到右，y 坐标从上到下。

background-image 还有一组可用的值：颜色渐变。通过 linear-gradient() 函数设置，函数至少需要用逗号分隔的三个参数——背景中渐变的方向，开始的颜色和结尾的颜色。

例如：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box {
        width: 100px;
        height: 100px;
        background-image: linear-gradient(to bottom, red, blue);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

运行效果：

注：这个渐变将从上到下，从顶部的红色开始，然后平稳过渡到底部的蓝色。渐变的方向可以通过关键字来指定方向（to bottom，to right， to bottom right 等）或者使用角度值 (0 deg 相当于 to top，90 deg 相当于 to right，直到 360 deg，它再次相当于 to top ）。

4.图片

我们在 HTML 模块中学习了 img 标签来添加图片，现在我们来了解它的一些常用的 CSS 属性。

height：定义图片的高度。

width：定义图片的宽度。

border：定义图片周围的边框。

例子：

<img src="/小牛马.jpg" width="px" height="200px" border="1" />

注：上述例子中图片引用地址为相对地址。

5.表格

我们前面已经学习了如何制作表格，现在我们来讲讲表格的一些样式，让我们的表格更加美观。

表格边框：同样的我们使用 border 属性为表格设置边框。

例子：

table,
th,
td {
  border: 2px solid red;
}

折叠边框：使用 border-collapse 属性设置是否将表格边框折叠为单一边框。

例子：

table {
  border-collapse: collapse;
}

表格的宽度和高度：正如你所预料的一样，我们使用 width 和 height 属性设置表格的高度和宽度。

例子：

table {
  width: 50%;
}

th {
  height: 50px;
}

表格文本对齐的方式：通过 text-align 属性设置水平对齐方式，取值有 left（左对齐）right（右对齐）和 center（居中对齐），通过 vertical-align 属性设置垂直对齐方式，取值有：top（顶端对齐）bottom（底部对齐）和 middle（居中对齐）。

例子：

td {
  height: 50px;
  vertical-align: top;
}

表格内边距：通过为 td 和 th 元素设置 padding 属性，控制表格中内容和边框的距离。

例子：

td {
  padding: 30px;
}

表格颜色：通过 color 设置表格文本颜色，通过 background-color 设置表格背景颜色。

例子：

table,
td,
th {
  border: 1px solid blue;
}

th {
  background-color: red;
  color: yellow;
}

表格标题位置：通过 caption-side 属性设置表格的标题位置，它的取值有：top（默认值。把表格标题定位在表格之上），bottom（把表格标题定位在表格之下）和 inherit（规定应该从父元素继承 caption-side 属性的值）。

表格综合案例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      table,
      td {
        border: 1px solid blue;
      }

      td {
        background-color: red;
        color: yellow;
        text-align: left;
        vertical-align: bottom;
        padding: 30px;
      }

      table {
        width: 200px;
        height: 100px;
        border-collapse: collapse;
      }

      caption {
        caption-side: bottom;
      }
    </style>
  </head>

  <body>
    <table>
      <caption>
        我是标题
      </caption>
      <tr>
        <td>one</td>
        <td>two</td>
      </tr>
      <tr>
        <td>three</td>
        <td>four</td>
      </tr>
    </table>
  </body>
</html>

6.轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline-color 设置轮廓的颜色。取值和其余颜色的取值一样。

outline-style 设置轮廓的样式。

取值如下：

outline-width 设置轮廓的宽度。它的值有：

thin 规定细轮廓。

medium 默认取值规定中等的轮廓。

thick 规定粗的轮廓。

length 允许你自定义轮廓粗细的值。

inherit 规定应该从父元素继承轮廓宽度的设置。

outline 上面三个属性的连写。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      p {
        outline: red dotted thick;
        width: 100px;
        height: 50px;
      }
    </style>
  </head>

  <body>
    <p>好嗨哟</p>
  </body>
</html>

7.盒子阴影

通过 box-shadow 属性设置盒子阴影。

box-shadow 有四个值:

第一个值是水平偏移量（水平阴影）：即向右的距离，阴影被从原始的框中偏移(如果值为负的话则为左)。

第二个值是垂直偏移量（垂直阴影）：即阴影从原始盒子中向下偏移的距离(或向上，如果值为负)。

第三个值是模糊半径（影子大小）：即在阴影中应用的模糊度。

第四个值是阴影的基本颜色。你可以使用任何长度和颜色单位来定义这些值。

例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      .shadow {
        box-shadow: 5px 5px 5px red;
        width: 200px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>

  <body>
    <div class="shadow">小牛马</div>
  </body>
</html>

例子：

box-shadow: 1px 1px 1px yellow, 2px 2px 1px yellow, 3px 3px 1px blue, 4px 4px
    1px blue, 5px 5px 1px black, 6px 6px 1px black;

使用 inset 关键字，把它放在一个影子声明的开始，使它变成一个内部阴影，而不是一个外部阴影。比如我们为前面的例子加上 inset 关键字，最后的运行效果就变成下面这样了：

源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        .shadow {
            box-shadow: inset 5px 5px 5px red;
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="shadow">大牛吗</div>
</body>
</html>

8.圆角边框

使用 border-radius 属性来创建圆角。

例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .radius {
        width: 200px;
        height: 200px;
        border: 1px;
        background-color: red;
        border-radius: 50%; /*将正方形变成圆*/
      }
    </style>
  </head>

  <body>
    <div class="radius"></div>
  </body>
</html>

注：border-radius 的值除了用百分号（%）还可以用 length，比如：border-radius:25px;。

「CSS」学习笔记｜ 青训营笔记