介绍
CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
CSS 可以通过以下方式添加到HTML中：内联样式、内部样式、外部引用。
这三种方式下面会一一介绍
语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明：
（图片来自http://www.runoob.com/css/css-syntax.html）
如：
p {
color: #FFFFFF;
background: #27ad9a;
}
上面就是一个对<p>标签定义的样式，样式中申明了颜色和背景。
样式
CSS 可以通过以下方式添加到HTML中
- 内联样式 - 在HTML元素中使用"style" 属性
-
内部样式 - 在HTML文档头部
<head>区域使用<style>元素 来包含CSS - 外部引用 - 使用外部 CSS 文件
内联样式
写在标签的style中，当特殊的样式需要应用到个别元素时，就可以使用内联样式。
例
<p style="color: #FFFFFF; background: #27ad9a;">震惊</p>
效果：
内联样式
内部样式
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表。
例
<head>
<style type="text/css">
p {
color: #FFFFFF;
background: #27ad9a;
}
</style>
</head>
<p>我什么都没写</p>
效果：
内部样式
外部样式
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。（常用的写法）
例：在css文件夹下创建mystyle.css，并使用<link>引用
css
<head>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
</head>
<p>外部样式表</p>
效果：
外部样式
接下来有个疑问，如果这几种样式同时使用会怎么样？
写个例子，定义好：
外部样式：black；
内部样式：green；
内联样式：red；
p {
color: black;
}
<head>
<style>
p {
color: green;
}
</style>
</head>
<p style="color: red;">
场景1：外部样式 + 内部样式
结果：以内部样式为准
外部样式 + 内部样式
场景2：外部样式 + 内联样式
结果：以内联样式为准
外部样式 + 内联样式
场景3：内部样式 + 内联样式
结果：以内联样式为准
内部样式 + 内联样式
场景4：外部样式 + 内部样式 + 内联样式
结果：以内联样式为准
外部样式 + 内部样式 + 内联样式
可以下个结论：
优先级：内联样式>内部样式>外部样式
选择器
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
基本选择器
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
用#定义选择器的id，标签中的id与其对应即可
例：
#p1 {
color: #27ad9a;
}
<p id="p1">id选择器</p>
效果：
id选择器
注：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
用.（点）表示类选择器，标签中的class与其对应即可
例：
.class1 {
color: #27ad9a;
}
<p class="class1">class选择器-p</p>
<a class="class1">class选择器-a</a>
效果：
class选择器
当然，class选择器可以选择多个
例：
.class1 {
color: #27ad9a;
}
.class2 {
background: #000000;
}
<a class="class1 class2">class选择器-a</a>
效果
class1 class2
会发现，两个选择器的属性都会表现出来
疑问：如果两个选择器中有相同的属性会怎么样？试一下
例：
class2中也定义了color属性，两个相同的属性结果？
.class1 {
color: #27ad9a;
}
.class2 {
color: #FFFFFF;
background: #000000;
}
<a class="class1 class2">class选择器-a</a>
效果
猜想：后引用的选择器属性会覆盖前面引用的
为了验证这个猜想，把使用顺序调换一下
<a class="class2 class1">class选择器-a</a>
效果：
呃~~尴尬，猜想错误
继续猜想：后定义class选择器属性会覆盖前面定义的
带着这个想法再来验证一下：
调换class1、class2的顺序
.class2 {
color: #FFFFFF;
background: #000000;
}
.class1 {
color: #27ad9a;
}
<a class="class2 class1">class选择器-a</a>
效果：
结论：如果有相同属性，后定义的class选择器会覆盖之前定义的 （至于原因，有待指教）
标签选择器
class选择器还可以可以指定特定的HTML元素使用class
例：指定p元素颜色
p.class1 {
color: #27ad9a;
}
<p class="class1">class选择器-p</p>
<a class="class1">class选择器-a</a>
效果：这个选择器只能在<p>中生效
注：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用
疑问：id选择器和class选择器同时使用，会怎么样？
例：定义相同的属性color
#p1 {
color: #27ad9a;
}
.class2 {
color: #FFFFFF;
background: #000000;
}
<p id="p1" class="class2">class选择器-p</p>
效果：
id选择器和class选择器同时使用
结论
选择器优先级：id选择器>类选择器>标签选择器
疑问：外联样式和class选择器同时使用会怎么样？
例：
.class2 {
color: #FFFFFF;
background: #000000;
}
p {
color: yellow;
}
<p class="class2">class选择器-p</p>
效果：选择器覆盖了外部样式。
结论
样式、选择器优先级：内联样式>选择器>内部样式>外部样式
更多选择器用法
多个
同时作用于h1,h2,p
h1,h2,p
{
color:green;
}
嵌套
- p{ }: 为所有 p 元素指定一个样式。
- .marked{ }: 为所有 class="marked" 的元素指定一个样式。
- .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
- p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
例：
.class1 {
background: #27ad9a;
}
p {
color: #27ad9a;
}
.class1 p {
color: #FFFFFF;
}
p.class1 {
color: #FFFFFF;
}
<p>p标签 绿色文本</p>
<span class="class1">class1 绿色背景</span><br/>
<div class="class1"><p>class1中的p标签 绿色背景，白色文本</p></div>
<p class="class1">p标签 + class1 绿色背景，白色文本</p>
效果：
组合选择器
在 CSS3 中包含了四种组合方式:
- 后代选择器(以空格分隔)
- 子元素选择器(以大于号分隔）
- 相邻兄弟选择器（以加号分隔）
- 普通兄弟选择器（以破折号分隔）
后代选择器
用于选取某元素的后代元素
例：
div p {
background-color: #27ad9a;
color: #FFFFFF;
}
<div>
<p>在div中的p</p>
<span>
<p>在更div、span中的p</p>
</span>
</div>
<p>在外面的p</p>
效果：
后代选择器
子元素选择器
只能选择作为某元素子元素的元素
例：
div>p {
background-color: #27ad9a;
color: #FFFFFF;
}
html代码同上
效果：
子元素选择器
只有在div中的p有效果，而span中的p就没有了
相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素。
例：
div+p {
background-color: #27ad9a;
color: #FFFFFF;
}
<div>div</div>
<p>跟在div后面的p</p>
<p>跟在div、p后面的p</p>
效果：
相邻兄弟选择器
后续兄弟选择器
选取所有指定元素之后的相邻兄弟元素
例：
div~p {
background-color: #27ad9a;
color: #FFFFFF;
}
html代码同上
效果：
后续兄弟选择器
属性选择器
属性选择器是一种特殊类型的选择器，它根据元素的 属性 和属性值来匹配元素。它们的通用语法由方括号 ([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。 属性选择器可以根据其匹配属性值的方式分为两类： 存在和值属性选择器和子串值属性选择器。
例：
[food] {
background-color: #7FD0F3;
}
[food="vegetable"] {
color: #FFFFFF;
}
<div food="meat">meet</div>
<div food="vegetable">vegetable</div>
效果：
参考
runoob（部分内容来源）
相关阅读
CSS : display
CSS : position
CSS : float
CSS : 对齐、居中
有错误之处，感谢指出，接收批评
网友评论