CSS基础
CSS 是指层叠样式表 (Cascading Style Sheets)用于控制网页样式，将HTML的样式渲染职责独立出来，降低了样式和内容的耦合性同时实现了样式表的可重用性。层叠样式是指样式表可以以多种嵌入方式来规定样式信息，如在一个外部的CSS文件中、HTML的头部元素中设定style标签、在单个HTML元素中直接设定（在层叠次序上重要性递增，若对同个内容都进行了样式设定以优先级高的为准）。
CSS基础语法
CSS样式规范指明语法由选择器和一条或多条声明两个部分组成，选择器指定改变样式的HTML元素而声明则是具体样式，每条声明包括属性和值用:来隔开，下面的示意图表现了CSS语法的组成及顺序：
CSS语法
语法注意点：
- 多重声明需要用
;来个隔开，最后一个声明最好也加上，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。- CSS本身是大小写不敏感的，但是在class和id选择器上和HTML文件绑定是敏感的。
- 分组选择器：当你需要对多个标签选择器设置同一种样式时，可以在多个选择器间加上
,，这样所有的选择器都会应用同一种样式。h1,h2,h3,h4,h5,h6 { color: green; }
- 子元素从父元素继承属性。
各种选择器
选择器就是用于指定应用样式的标签，起到选择的作用。
派生选择器
通过依据元素在其位置的上下文关系来定义样式，比如你想让在li标签内的strong标签内的内容以某种样式展示，而并非全部strong标签都应用上，那么就可以使用以下的派生选择器：
li strong {
font-style: italic;
font-weight: normal;
}
id选择器
id 选择器可以为标有特定 id 属性的 HTML 元素指定特定的样式，id 选择器以 "#" 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}
下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
注意：id 属性只能在每个 HTML 文档中被指派一次。但是以下在和标签组成派生选择器时id虽然只用一次但却应用样式多次。
在现代布局中，id 选择器常常用于建立派生选择器。
#test span {
color：red
}
应用两次：
<p id="test">
<span >
666
</span>
<span >
6665555
</span>
</p>
类选择器
与仅可以被指派一次的id选择器相比，类选择器可以被多次指派，在 CSS 中，类选择器以一个点号显示：
.center {
text-align: center
}
指定HTML标签，所有拥有 center 类的 HTML 元素均为居中。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
类选择器像id选择器一样也可以用作派生选择器。
.center p{
text-align: center
}
元素也可以基于它们的类而被选择：
p.test{
color:red;
}
分别对两个不同的HTML标签进行测试,只有第二个有效果：
<span class="test">
666
</span>
<p class="test">
555
</p>
属性(和值)选择器
在[ ]中写明拥有就可以应用样式的属性，如以下为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}
在[ ]中写明拥有就可以应用样式的属性和对应值，如以下为title="W3School" 的所有元素设置样式：
[title="666"]
{
color:red;
}
在[ ]中写明拥有就可以应用样式的属性和对应部分值，如下为title属性的对应值中拥有666子字符串就可以应用样式：
[title~="666"] { color:red; }
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
效果
应用CSS样式表
正如CSS的本意是层叠样式表，意味着某个内容在被多个样式重复应用修饰时，将会在继承低优先级样式表的基础上对被高优先级样式表复写的属性进行叠加应用，层叠样式表的嵌入优先级如下：
外部样式表 < 内部样式表 < 标签内联样式
- 外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
注意：文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
- 内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。
<head>
<meta charset="UTF-8">
<title>hello</title>
<style>
div.test {
align: center;
}
</style>
</head>
- 内联样式
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
层叠样式举例
若外部样式表拥有针对 h3 选择器的三个属性：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3 {
text-align: right;
font-size: 20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color: red;
text-align: right;
font-size: 20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代，这便是之前说的对单一标签有多个样式表修饰时对浅层继承和深层覆盖。
网友评论