CSS 简明教程（一）

CSS 介绍

简介

CSS 表示层叠样式表，定义如何渲染 HTML 标签，设计网页显示效果。本节内容主要对 CSS 进行初步介绍，旨在理解 CSS 具体是什么，又是如何达到渲染文档，使网页看起来更美观。另外掌握一些 CSS 的基础概念，有助于后续内容的学习。

知识点

CSS 概述
CSS 语法
CSS 注释
CSS 数值与单位
CSS 样式类型

CSS 概述

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

注：定义来自维基百科。

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

CSS 语法

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

例子：

h1 {
  color: red;
}

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

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

选择器：通常是你需要设置样式的 HTML 元素。
属性：是你需要设置的样式属性，比如宽高，颜色，大小等。
属性值：你需要设置的样式属性的具体值，比如宽高具体是多少 px，颜色具体是什么颜色。

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 是相对于显示器屏幕分辨率而言的。

特点：

IE 无法调整那些使用 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*/

CSS 样式类型

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

内联式(行内式)

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

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

例子：

<p style="color:blue;">哈喽，要保持微笑哦。</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 文件在同一文件夹下。行内样式表一般写在标签头部，内嵌式样式表、外联式一般写在 <head></head> 标签内。为了编码规范，希望大家尽量使用外联式来写我们的 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 排错和调试代码

和 HTML 一样，在 CSS 中，如果选择器是无效的，那么它就不会选择任何东西，而整个规则也不会再做任何事情，浏览器只会继续执行下一个规则，而不是直接崩溃报错。

这使得就算我们的代码有错，但是依然能够运行显示给用户，只是显示的样式可能和我们预期的不一样。但是，当你想要去修改这个错误的时候，似乎会显得无从下手，因为我们甚至都不知道错在哪个地方，当代码量庞大的时候，一行一行去找显然是不可取的。

那么如何在浏览器中调试我们的 CSS 代码或者查看别人网站的 CSS 代码呢？下面将为大家一一讲解。

首先在浏览器中运行我们的前端代码，或者直接进去别人的网站，此处以实验楼为例。
然后我们点击 F12 或者点击鼠标右键再点检查，进入调试模式。如下图所示：

最右边 styles 里面的代码就是我们的 CSS 代码了。
如果是自己的项目，可以直接在 styles 里面修改我们的 CSS 代码，使得样式调到我们所需要的，最后再复制调试好的代码，到我们的本地。大大减少了我们本地改一次 CSS 代码，运行一次的时间，提高编程效率。
Elements 那一行最左边的这个图标用鼠标左键选中，直接点击页面，就能指定显示出那一块的样式。

styles 里面特别要注意有感叹号或者代码上面有一条线划掉的。这说明这些样式未成功生效。

总结

本节仅对 CSS 做了一些比较基础的介绍，主要包含以下知识点：

CSS 概述
CSS 语法
CSS 注释
CSS 数值与单位
CSS 样式类型

请大家务必认真理解相应概念，将 CSS 的基础知识扎实掌握。在后面的学习中，这些基础概念会起到很重要的作用。

CSS 基本样式

简介

本节主要介绍 CSS 基础样式，主要针对网页里面的文字、列表、链接等基本内容进行样式修改设置，使其呈现出不一样的效果。譬如更换颜色，改变大小等。

知识点

文字排版
样式化列表
样式化链接
Web 字体

文字排版

字体

通过 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>

注意：这里只展示 <style>标签和 <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 设置右对齐。

样式化列表

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>

效果为：

样式化链接

选择器中有以下几种伪类 :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>

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>

使用 Web 字体后在浏览器中运行的效果图为：

再来看看没有使用之前是什么样子的：

注：现在网上有很多免费可以使用的 web 字体，大家可以自行百度搜索下载使用在自己的网页当中。比如：Google Web Fonts。

总结

本节内容主要对一些基础样式做介绍，主要包含以下知识内容：

文字排版
样式化列表
样式化链接
Web 字体

针对本节内容的示例，请务必手动完成代码并运行结果查看效果。加深对 CSS 基础样式的理解。