我终于来更新了，最近写APP策划要死了；
目录
1.了解CSS的作用和优点;
- 更多排版和页面布局控制：可控制字号、行间距、字间距、缩进、边距以及定位；
- 样式和结构分离：页面种使用的文本歌是和颜色可独立于网页主体（body部分）进行配置和存储；
- 样式可以存储：CSS允许将样式存储到单独的文档中并将其与网页关联。修改样式可以不用修改网页代码。
- 文档变得更小：由于歌是从文档中分离出来，因此实际文档会变得更小。
- 网站维护变得更容易：要是修改样式，修改样式表CSS系列就可以了。
配置css的方法：
- 内联样式：内联样式是指将代码直接写入网页的主体区域，作为HTML标签属性。只适合提供样式属性的特定元素。
- 嵌入样式：嵌入样式再网页的页头区域（<head></head>)进行定义。应用与整个网页文档。
- 外部样式：外部样式用单独文件编码。网页在页头区域使用link元素链接到文件。
- 导入样式：导入样式与外部样式相似，同样是将包含了样式定义的文本文件与网页文档链接。但是没用#import指令将尾部样式表导入嵌入样式，或导入另一个尾部样式表；
CSS语法基础：
- 样式表由规则构成，这些规则吗，描述了要应用的样式。每一条规则都包含一个选择符和一个声明 ；
- CSS样式规则选择符可以是HTML元素的名称、类名或者id；
- CSS样式规则声明是指你要设置的CSS属性极其值；
2.用CSS在网页上配置颜色;
background-color属性：配置元素背景颜色；
以下样式规则将网页背景配置成黄色：
<style> body{background-color: yellow;} </style>结果：
color属性：用于配置元素的文本颜色；
以下是CSS样式规则将网页上的文本的颜色变成蓝色；
结果：
配置背景颜色和文本色时；一个选择符要配置多个属性时，用分号（；）分隔不同的声明。
以下是CSS样式配置网页为黄底蓝字：
<style> body{color: blue; background-color: yellow; } </style>
CSS颜色语法：
CSS语法允许通过多种方式配置颜色：
- 颜色的英文名称（英文）；
p {color:red} - 十六进制颜色值： ‘#’ +六位十六进制 eg：#FF0000；
-
p{color:#FF0000} - 十六进制短颜色值：‘#’+三位十六进制 eg： #F00；
-
p{color:#F00} - 十进制颜色值 ： eg: rgb(225,0,0);
p{color:rgb(255, 0, 0)} - CSS3新增的HSL颜色值：色调/饱和度/亮度 eg：hsl（0， 100%， 50%）；
p{color:hsl(0, 100%, 50%);}CSS3 Color Modle不仅允许配置颜色,还允许配置颜色的透明度,这是使用RGBA(Red, Blue, Alpha)实现的.CSS3新增的还有HSLA(Hue, Saturation,Lightness, Alpha)颜色、opacity属性以及CSS渐变背景。
3.配置内联样式;
内联样式通过HTML标记的style属性来实现。属性值是样式规则声明。每个声明都是由属性和值构成 ；属性和值以冒号隔开。
以下是将<h1>标题文本设为红色，将背景设为灰色:
<h1 style="color:red; background-color: #cccccc;">这是标题1</h1>结果：
内联样式不常用。它效率不高，会为网页文档带来额外的代码，而且不便于维护。但内联样式在某些情况下好用，比如通过内容管理系统或博客发表一篇文章，并需要对默认样式进行少许调整，从而更好的表达自己的想法。
4.配置嵌入式样表;
嵌入样式应用与整个网页文档，这种样式要放到网页Head部分的<style>元素中。使用XHTML语法时<style>标记要求定义一个type属性。要向该属性赋值“text/css”来指定CSS MINE类型。HTML5语法中不需要type属性。
以下时用嵌入式来设置文本背景颜色和网页文本颜色：
<style> body{background-color: deepskyblue; color:palevioletred;} </style>结果：
嵌入式的优点：所有样式都位于网页的同一个位置，所以它比内联样式更容易维护。并且只需要为<h2>选择符进行一次样式编码，两个<h2>都会运用这个样式。
缺点：很少会有网站只有一个网页。在每个网页的Hesd部分重复编码CSS同样时无效率和难以维护的。
5.配置外部样式表;
外部样式表时包含CSS样式规则的文本文件，使用.css扩展名。这种.css文件通过link元素与网页关联。因此，多个网页可关联同一个.css文件。.css文件不包含任何HTML标记，它只包含CSS样式规则；
外部CSS的优点：只需要在一个文件中配置样式。这意味着以后维护和修改会更加方便。
link元素：
link元素将外部样式表与网页关联，位于网页Head部分。时独立标记（void标记）。link元素由三个属性：rel、href和type；
1.rel属性的值是“stylesheet”；
2.href属性的值是.css文件名；
3.type属性的值是“text/css”。 这是CSS 的MINE类型。type属性在HTML5中可选，在XHTML中必需。
eg:用link元素将css文件夹中的learn.css文件外联到index.html网页文件：
<!--index.html文件中的head部分--> <head> <title>Paragraph Example</title> <meta charset="utf-8" /> <link rel="stylesheet" href="css/learn.css" > </head><!--learn.css文件中的内容被外联--> body{ background-color: gray; color:blue; }结果：
6.CSS的class、ID和后代选择符
class选择符
class选择符配置某一类CSS规则，并将其应用与网页的一个或多个区域。配置一类样式时，要将选择符配置成类名。在类名前面添加句点符号（.）。类名必须以字母开头，可包含数字、连字符和下划线。不能有空格。
eg：将网页文本的段落文本的文字设置成红色：
.p{color:red}eg：也可以设计一个不是标识符的类名，然后样这个样式运用于你想运用的元素里：
.eg{color:blue;}一类样式应用与任何元素。这是使用class属性来做到的，例如class="eg'。 注意这时不要在类名前面添加句点。
eg：在<li>元素中运用eg类：
<li class="eg">我是测试</li>ID选择符
用id选择符向网页上的单个区域应用独特的CSS规则。class选择符可与在网页上多次应用，而id在每个网页上只能应用一次。为某个id配置属性样式时，要在id名称前添加#符号。id名称可以包含字母、数字、连字号和下划线。id名称不能有空格。
eg：在learn.css文件配置名为estart的id：
#estart {color:blue;}使用id属性，即id=“estart”，可用于所有你想运用的元素
eg：将id为estart运用于<div>中：
<div id="estart">这是一个测试呐</div>后代选择符
后代选择符在容器（父）元素的上下文中配置一个元素。它允许为网页上的特定区域配置CSS，同时减少class和id的数量。先列出容器选择符（可以是元素选择符、class、id），再列出要配置样式的选择符。
eg：nav中的<h2>配置成绿色：
nav h2{color:#00ff00}
为了获得最大的兼容性，要慎重选择class和id名称。随着越来越熟悉CSS，会逐渐体会到后代选择符的强大和高效，可以它配置特定上下文中的元素，同时不需要再HTML代码中编写额外的class或者id。
span元素
<span>元素再网页中定义一个上下不留空格的内敛区域。适合格式化一个包含在其他区域（比如<p>, <blockquote> , <div>）中的区域。
正常书写<h1>和<nav>的结果：
在加入<sapn>元素以后 在CSS元素中添加margin-bottom:0 （边距的意思）之后：
<h1><span class="companyname"> Trillium Media Design</span></h1>
<nav>
<b>
<a href="home.html">Home</a>
<a href="services.html">Services</a>
<a href="contast.html">Contact</a>
</b>
</nav>h1{
background-color: #191970;
color: #E6E6FA;
margin-bottom: 0;
}
7.理解CSSD优先顺序;
- 较局部的样式规则优先与较全局的元素（比如p和div）；
- 离要设计的元素越紧的样式优先级越高：
HTML属性 》 内联样式 》 嵌入式样式 》 外部样式 》 浏览器默认值