引言

最近刚好在学CSS，所以这篇博客主要是记录我跟着《CSS权威指南》学习CSS过程中的一些知识点。这样，学完之后，把一些知识点记录下来，除了加深记忆，也方便以后复习。

一、认识CSS

首先，先简单的描述一下CSS。CSS 语言是一种标记语言,因此不需要编译，可以直接由浏览器执行 ( 属于浏览器解释型语言 )。CSS 全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等，它有着以下的优点：

内容与表现分离 ：使用CSS+HTML，网页的内容(HTML)与表现(CSS)就可以分开了。CSS独立于HTML文件，可以方便维护与复用。
表现的统一 ：使用CSS来控制网页的内容，可以使网页的表现非常的统一，并且容易修改。
良好的扩展性 ：CSS可以支持多种设备，比如手机、PAD、打印机、游戏机等。
缩减文件大小 ：使用CSS可以减少网页的代码量，增加网页的浏览速度，减少硬盘容量。
二、CSS基础知识
2.1 一些基本术语
在开始学习CSS之前，我们首先需要理解以下的概念：
元素 是文档结构的基础。在HTML中，元素就是标签。例如，p、div 、span 。文档中的每个元素都对文档的表现起一定的作用。而在CSS中，元素分为两类：块级元素 、行内元素。

替换和非替换元素 ：

替换元素 ：指元素的具体显示内容是由浏览器根据元素的标签和属性来决定。例如，img标签是通过src属性的值来读取相应的图片信息并显示图片。
非替换元素 ：指直接将要显示的内容告诉浏览器，将其显示出来。例如，p标签，浏览器会将标签中的内容直接显示出来。

块级和行内元素 ：

块级元素 ：在HTML中, <div> 、<p> 、<h1> 、<form> 、<ul> 、 <li> 就是块级元素。

块级元素的特点：

每个块级元素都从新的一行开始，并且其后的元素也另起一行。（也就是说，一个块级元素独占一行）；
元素的高度、宽度、行高以及顶和底边距都可设置；
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素 ：在HTML中，<span> 、<a> 、<strong> 和 <em> 就是典型的 内联元素(行内元素)。

说明：
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 a 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

行内元素的特点：

和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。

块级元素和行内元素被称为CSS的显示元素。显示元素也可被分为三类，即：

块级元素
内联元素(行内元素)
内联块状元素 (inline-block) ：就是同时具备内联元素、块状元素的特点。

内联块状元素的特点：

和其他元素都在一行上；

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

2.2 CSS语法

CSS规则由 选择器 和声明组成，而声明又由属性和值组成，如下图所示：

选择器： 又称选择符，通常是网页中你要应用样式规则的元素。

声明： 在英文大括号“｛｝”中的的就是声明，每条声明由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。如下所示：

1	p {font-size:14px;color:blue;}

在这个例子中，p是选择器，font-size和color是属性，14px和blue是值。

注意：
图片所示的CSS规则，最后一条属性结尾没有添加分号，这种做法是可行的。但是为了以后修改方便，一般都会加上分号。
为了使样式更加容易阅读，在一条规则有多重声明时，可以将每条代码写在一个新行内，如下所示：
1
2
3
4
p{
  font-size: 14px;
  color: red;
}

关键字： 一条声明中，属性的后面，用空格分隔的这些词就是关键字，这些关键字在一起构成了属性的值。大多数情况下，属性的值要么是一个关键字，要么是该属性可取关键字的一个列表(包含一个或多个关键字)，关键字之间用空格分隔。

注意：
如果声明中使用了不正确的属性或者不正确的值，整个声明都会被忽略。

2.3 CSS样式表基本知识

既然已经知道了CSS在网页内容表现中的作用，那在HTML页面中，到底CSS样式是写在哪里的呢？从CSS样式代码插入的形式来看，基本上可以分为以下三种：内联式、嵌入式、外部式。接下来，我们分别来了解着三种形式，以及CSS中的多重样式。

2.3.1 CSS样式

1. 内联式CSS样式

内联式CSS样式表 就是把CSS代码直接写在现有的HTML标签中，即在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。如下面的代码所示：

1
2
3

<p style="color:red;margin-left:20px">
  You can do best.
</p>

注意：
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

2. 嵌入式CSS样式

嵌入式CSS样式表 就是把CSS代码写在标签之间，如下所示：

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/hello.png");}
</style>
</head>

注意：
嵌入式CSS样式一般是当单个文档需要特殊的样式时使用，并且包含CSS样式的 <style> 标签一般是写在文档的头部 <head> 标签之间。

除了在 <style> 标记之间包含多个CSS规则，也可以通过 @import 指令来引入多个外部式样式表，如下所示：

<style type="text/css">
  @import url(style.css);  /*这条指令必须在其他的CSS规则前，否则将不起作用*/
  h1 {color: gray;}
  p {font-size: 12px;color: red;}
</style>

注意：
@import 指令与 link 类似，其用于Web浏览器加载一个外部样式表，并在表现HTML文档时应用这个外部样式。唯一的区别在于指令的具体语法和位置。@import 指令出现在 style 容器中，而且必须要位于其他CSS规则之前，否则，指令所引入的样式表将不起作用。

3. 外部式CSS样式

外部式CSS样式表 也称为(外联式)，就是把CSS代码写在一个单独的外部CSS文件中，这个CSS文件以 .css 为扩展名，在 <head> 内（不是在 <style> 标签内）使用 <link> 标签将CSS样式文件链接到HTMl文件内。如下面的代码所示：

1	<link href="base.css" rel="stylesheet" type="text/css" />

在 link 标记中，有三个常用的属性 href、rel、type。其中，href 的值是样式表的 URL，可以是绝对 URL，也可以是相对 URL；rel 代表“关系（relation）”，在这里它的值是 stylesheet；type 表明了使用link标签加载的数据的类型，它的值总是设置为“text/css”。

浏览器会加载外部CSS文件 base.css，从中读到样式声明，并根据它来格式文档。

注意：

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。

外部CSS文件不能包含任何的 html 标签，只能有CSS规则和CSS注释。因为如果一个外部样式表中出现了 html 标签，会导致其中一部分或全部被忽略。

不要在属性值与单位之间留有空格。例如：“font-size:14px;”，而不能写成“font-size:14 px”。

2.3.2 多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。例如，外部式样式表 “base.css” 针对h3选择器有如下规则：

h3 {
  color: red;
  text-align: left;
  font-size: 14px;
}

而嵌入式样式表中针对h3选择器的规则是：

h3 {
  text-align: right;
  font-size: 20px;
}

假如一个页面同时应用了外部式样式表和嵌入式样式表，那么，h3最后的样式是：

h3 {
  color: red;
  text-align: right;
  font-size: 20px;
}

即最终，h3选择器的颜色属性将应用外部式样式表中的规则，而文字排列和字体尺寸会应用嵌入式样式表中的规则。

引言