CSS基本知识

CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
1、浏览器缺省设置
2、外部样式表
3、内部样式表（位于 标签内部）
4、内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }

CSS 选择器

元素选择器：html/boyd/p/li/...
元素选择器又称为类型选择器（type selector）。
类型选择器匹配文档语言元素类型的名称，类型选择器匹配文档树中该元素类型的每一个实例。
h1 {color:blue;}
h2, p {color:gray;} （选择器分组）
h1, h4 {color:silver; background:white;} （选择器和声明分组）
* {color:red;} （通配符选择器）

类选择器：class=""
类选择器允许以一种"独立于文档元素"的方式来指定样式。
要"应用样式"而"不考虑具体设计"的元素，最常用的方法就是使用类选择器.
.important {color:red;}
p.important {color:red;}（元素和类选择器的结合）
.important.warning {background:silver;}（多类选择器）
例：

ID 选择器：id=""
ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
*#intro {font-weight:bold;}

属性选择器：
选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
[title] {color:red;}
[title="W3School"] {color: red;}（指定属性的值）更多用法W3C
a[href][title] {color:red;}（元素和属性选择器的结合）

后代元素选择器：" "
后代选择器可以选择作为某元素后代的元素。不论嵌套层次深度。
h1 em {color:red;}

子元素选择器：">"
作为某元素子元素的元素。
h1 > strong {color:red;}

相邻兄弟元素选择器："+"
紧接在另一元素后的元素，且二者有相同父元素。
h1 + p {margin-top:50px;}

伪类：
向某些选择器添加特殊的效果。
:link、:first-child、:hover 更多伪类W3C

伪元素：
某些选择器设置特殊效果。
:first-letter、:first-line、:before、:after

CSS创建

外部样式表

内部样式表

内联样式表

This is a paragraph