17. 为网页添加样式 {ignore}

[toc]

1. 术语解释

CSS规则

CSS规则 = 选择器 + 声明块

示例：以下面这条CSS规则为例，来认识一下选择器和声明块指的是什么。

h1 {
    color: red;
    background-color: lightblue;
    text-align: center;
}

• 选择器：h1

• 声明块：由一个个css声明组成

  • css声明：color: red;、background-color: lightblue;、text-align: center;

每一条声明具体表示什么含义先不用管，后面会讲解。

{
    color: red;
    background-color: lightblue;
    text-align: center;
}

选择器

选择器：用于选中元素。

先认识下面这3个最基本的选择器，后续会有专门的课来介绍CSS选择器。

• ID选择器：选中的是对应id值的元素

  • ID选择器 —— 特点：只能选中一个元素，选中的元素数量过少；

• 元素选择器：选中同名的所有html元素

  • 元素选择器 —— 特点：选中所有同名的元素，选中的元素数量过多；

• 类选择器：选中带有指定className的html元素

  • 类选择器 —— 特点：选中指定className的html元素，使用起来非常的灵活；【使用频率最高】

声明块

出现在大括号中

声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。

2. CSS代码书写位置

内部样式表

写在 style 元素内部。

style元素通常是写在head元素里面的，这么写的目的实际上是为了让浏览器最先读取到css样式，其实它也可以写在body元素里面；为什么通常都写在head元素内部呢？ —— 打个比方 —— 写在head元素里面，我们看到的是已经化好妆的妹子；而写在body元素内部，我们先看到的可能就是没化妆的妹子（一会儿后再补上妆）。

内部样式表 —— 推荐在css代码大约在200行以内时使用，如果css代码量过多，推荐使用能够外部样式表。 —— 因为在css代码相对比较少的情况下，直接将css代码写在html文件内部，这样可以让浏览器在第一次加载页面时，少读取一个文件，这反而会提高浏览器的响应速度。（有的网页就是这么干的）

内联样式表（元素样式表）

直接书写在元素的style属性中 —— 基本上都不会直接将样式写在html元素身上，一般这么写都是为了调试。

通常会打开浏览器的控制台，然后在里头调试，调试时，我们一般都是直接将样式写到元素身上的。

上面所说的是我们手写css的情况。但是，我们后面学习了js之后，借助js来控制样式的话，操作的大多都是元素身上的样式，即：将css直接写在元素身上。

外部样式表[推荐]

外部样式表是指：将样式书写到独立的css文件中。

目的：

1). 代码复用外部样式可以解决多页面样式重复的问题。
2). 响应优化有利于浏览器缓存，从而提高页面响应速度。
3). 维护有利于代码分离（HTML和CSS），更容易阅读和维护。

css文件也算是资源，引入css资源需要使用 link 标签。

<link rel="stylesheet" href="资源路径">

资源路径：

• 如果加载的是别人的css(网上找过来的) —— 绝对路径；
• 如果加载的本地的css —— 相对路径；

小结

• CSS规则 = 选择器 + 声明块

  • 声明块 = 声明 + 声明 + …
  • 声明 = css属性 = css属性值;

• css代码的书写位置

  • 写在 <style> 元素内部
  • 写在元素身上
  • 写在独立的css文件中