什么是CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示HTML 元素
样式通常存储在样式表中
把样式添加到HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
为什么使用CSS？
CSS允许您针对HTML元素应用特定的样式。
CSS的主要好处在于，它允许你将样式与页面内容进行分离。
仅使用HTML，样式将和页面内容格式混杂在一起，这样的页面将会变得难以维护。
所有的web页面样式都可以（也应该）从HTML文档中分离出来，建立成一个单独的CSS 文件再进行引用。
内联CSS
在web文档中直接插入一个CSS是内联样式的使用方法之一。
使用内联样式，将CSS应用于单个元素。
为了使用内联样式，将CSS属性直接添加到相关标签中。
下面的例子展示了如何创建一个灰色背景和白色文本的段落：
外部引用CSS
通过这种方法将所有的CSS样式保存在同一个后缀名为.css的拓展文件中。
然后通过html标签<link>在HTML页面的<head>部分将CSS文件引入。
如下例子所示：
HTML部分：
CSS部分：
CSS语法
CSS是由浏览器解释的样式规则,然后应用于文档中相应的元素。
样式规则有三个部分：选择器，属性和值。
例如，标题颜色可以定义为：
详解：
选择器要指向需要设置样式的HTML元素。
声明块包含一个或多个用分号分隔的声明。
每个声明都包含一个由冒号分隔的属性名称和值。
例如：
类型选择器
最常见和易于理解的选择器是类型选择器。
该选择器以页面上的元素类型为目标。
例如，要定位页面上的所有段落：
CSS注释
注释用于解释您的代码，并可能在您稍后编辑源代码时为您提供帮助。
浏览器会自动忽略注释。
CSS的注释如下所示：
例子：（将原先设置红色背景色的CSS样式注释掉）
CSS级联
网页的最终外观是不同的样式结合的结果。
通过样式的三个主要来源形成一个级联：
由页面的作者创建的CSS样式
浏览器的默认CSS样式
浏览页面的用户自定义CSS样式
CSS继承
继承是指属性在页面中流动的方式。
除非另有定义，子元素通常会采用父元素的特征。
例子：
元素选择器
元素选择器：就是对已选中的HTML元素符号设置CSS样式（例如：div、p、a、ul、li等元素符号）。
如下图所示，就是为div元素设置CSS样式的width和height属性。
参考代码片段：
class选择器
class选择器（类型选择器）：是最常见和易于理解的。
该选择器通过绑定HTML
后代选择器
后代选择器：选中某个父级下对应的所有子级，并针对该子级设置CSS样式。
•后代选择器设置的CSS样式不会影响到父级。
•父级和子级之间需要用空格隔开。
•后代选择器可以存在多层级父级，并不局限在单一父子级之间，层级越深所设置的CSS样式优先级越高。
参考代码片段：
子元素选择器
子元素选择器：子元素选择器与后代选择器较为类似。
相对于后代选择器，子元素选择器所涉及的范围会更小。
•后代选择器可以跨层级影响，而子元素选择器要求父元素和子元素一定为上下级关系，中间如果隔着其他元素则会失效。
•父元素和子元素之间需要用> (子结合符) 隔开。
参考代码片段：
相邻选择器
相邻选择器：选中对应元素的下一个兄弟元素。
•所涉及的相邻兄弟元素必须是该元素的同级元素。
•所涉及的相邻兄弟元素必须是相邻兄弟元素，中间若有其他元素隔开也将导致失效。
•元素A和对应的相邻兄弟元素之间需要用+隔开。
参考代码片段：
属性选择器
属性选择器：检索HTML页面中符合所设置的属性条件的元素。
属性选择器通过[ ]设置被选元素的属性条件。
如下图所示，将选择HTML页面中所有包含了alt属性的img元素并为其设置CSS样式。
参考代码片段：
设置页面上所有含有class属性并且属性值的词列表的某个词等于w3cschool的div元素。
(适用于针对设置了多个class名称的元素使用)
选择器分组
选择器分组：当需要多个元素同时使用同一套CSS样式时，可以使用选择器分组，这样可以避免为每个元素单独设置样式而照成不必要的冗余。
选择器分组通过, （逗号）将需要复用同一套样式的多个元素进行分隔。
参考代码片段：
font-family属性
font-family属性指定元素的字体。
有两种字体系列名称：
•字体系列：特定的字体系列（如Times New Roman或Arial）
•通用族：一组具有相似外观的字体族（如Serif或Monospace）
以下是不同字体样式的示例：
HTML代码：
font-family属性
font-family属性应该包含几个字体名称作为备选。
在CSS样式中指定Web字体时，请添加多个字体名称，以避免意外的行为。
如果客户端计算机出于某种原因没有您选择的字体时，则会尝试下一个字体。
指定通用字体系列是一个很好的做法，如果没有其他字体可用，让浏览器在通用系列中选择相似的字体。
如果浏览器不支持Arial字体，则会尝试下一个字体（Helvetica Neue，Helvetica）。
如果浏览器没有任何一个，它会尝试通用的sans-serif。
font-size属性
font-size属性
font-size属性用于设置字体的大小。
设置网页字体大小的其中之一方法是使用关键字。
例如xx-small, small, medium, large, larger, etc等。
HTML代码：
CSS代码：
您还可以使用像素(px)或相对尺寸单位(em)数值来操纵字体大小。
当您需要像素精度时，以像素值(px)设置字体大小是一个不错的选择，它可以让您完全控制文本大小。
em尺寸单位是设置字体大小的另一种方式（em是相对尺寸单位）。
它允许所有主流浏览器调整文本的大小。
如果您没有在页面上的任何位置设置字体大小，那么这是浏览器的默认大小，即16px。
要计算em大小，只需使用以下公式：em = px / 16，即1em = 16px。
例如：
font-style属性
font-style属性通常用于指定斜体文本。
HTML代码：
CSS代码：
font-style属性有三个值：normal，italic和oblique。
oblique非常类似于italic，但浏览器的支持较少。
HTML代码：
CSS代码：
font-weight属性
font-weight控制文本的粗细。
值可以设置为normal (默认)，bold，bolder，和lighter。
HTML代码：
CSS代码：
根据文本的厚度，也可以使用从100（细）到900（粗）的数字来定义字体粗细。
400与normal相同，700与bold相同。
HTML代码：
CSS代码：
font-variant属性
font-variant属性允许您将字体转换为所有小型大写字母。
值可以设置为normal，small-caps，和inherit。
HTML代码：
CSS代码：
color属性
color属性用于指定文本的颜色。
指定文本颜色的其中一种方法是使用颜色名称：如red, green, blue等
以下是更改字体颜色的示例。
HTML代码：
CSS代码：
定义color的其他方法是使用十六进制值和RGB。
十六进制形式是一个井号(#)，最多6个十六进制值(0-F)。
RGB定义了红色，绿色和蓝色的各个值。
在下面的示例中，我们使用十六进制值将标题颜色设置为蓝色，使用RGB形式将段落设置为红色。
HTML代码：
CSS代码：。