CSS介绍
样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。
我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
在继续学习之前，你需要对下面的知识有基本的了解：
HTML / XHTML
CSS语法
图示：
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
每条声明由一个属性和一个值组成。
属性和值被冒号分开。
CSS 注释
CSS注释以 /* 开始, 以 */ 结束
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
class 选择器（常用）
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
外部样式表（常用）
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
CSS 背景（常用）
CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
CSS 链接（常用）
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
CSS 表格
使用 CSS 可以使 HTML 表格更美观。
（重点）CSS 盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
CSS 边框属性
CSS边框属性允许你指定一个元素边框的样式和颜色。
CSS 轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
CSS margin(外边距)
CSS margin(外边距)属性定义元素周围的空间。
CSS padding（填充）
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距
CSS 尺寸 (Dimension)
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
CSS Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
（重点）CSS Position(定位)
position 属性指定了元素的定位类型。
标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。
定位高于浮动，浮动高于标准流。（高低和占不占位置无关）
相对定位元素经常被用来作为绝对定位元素的容器块。
CSS 布局 - Overflow
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
（重点）CSS Float(浮动)
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
（重点）清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
/* 清除浮动 */
form.example::after {
content: "";
clear: both;
display: table;
}CSS 布局 - 水平 & 垂直对齐
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
/* 如果文本有多行，添加以下代码: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}CSS 组合选择符
Note 组合选择符说明了两个选择器之间的关系。
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
后代选择器(以空格 分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号 ～ 分隔）
CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果。
CSS 伪元素
CSS 伪元素是用来添加一些选择器的特殊效果。
CSS3 边框
用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象
CSS3 圆角
使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。
CSS3 背景
CSS3 中包含几个新的背景属性，提供更大背景元素控制
使用多重背景图像
CSS3 渐变（Gradients）
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
CSS3 文本效果
CSS3中包含几个新的文本特征。
CSS3 字体
使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。
CSS3 转换
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。
3D 转换
CSS3 允许您使用 3D 转换来对元素进行格式化。
（重点）CSS3 过渡
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
CSS3 动画
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
CSS3 多列
CSS3 可以将文本内容设计成像报纸一样的多列布局
CSS3 弹性盒子(Flex Box)
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
（重点）CSS 网格布局
网格是一组相交的水平线和垂直线，它定义了网格的列和行。
CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位
（重点）网格容器
要使 HTML 元素变成一个网格容器，可以将 display 属性设置为 grid 或 inline-grid。
网格容器内放置着由列和行内组成的网格元素。
（重点）CSS 网格元素
网格容器包含了一个或多个网格元素。
默认情况下，网格容器的每一列和每一行都有一个网格元素，我们也可以设置网格元素跨越多个列或行，行和列为行号。
（需要动手敲代码）CSS实例
CSS 导航栏
CSS 下拉菜单
CSS 提示工具(Tooltip)
CSS 图片廊
CSS 图像透明/不透明
CSS 图像拼合技术
CSS 分页实例
CSS 网页布局
网页布局
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。
