二.CSS基本语法
1.引入css的三种方式
(1).行内样式
就是直接在标签的开始标签中，使用style属性，如图：
------------------------------------------------------------------------------------------------------------------------------------------------------------
(2).内部样式
直接使用style标签来完成，注意，style标签要写在head部分，不要写到body里面了。
在heed部分，添加style标签，如下：
------------------------------------------------------------------------------------------------------------------------------------------------------------
(3).外部样式
分两步，
a.将css作为一个独立的文件来保存，一般后缀.css
b.使用link标签引入
link标签其实还有一个属性，告诉浏览器我们的引入的文件类型是css文件。
rel:relation的缩写，关联的意思
说明：
在实际开发的时候，通常使用外部方式
在学习的时候，我们通常使用内部的方式
------------------------------------------------------------------------------------------------------------------------------------------------------------
2.CSS基本语法
CSS样式(或规则)都必须由两部分组成：
选择器(selector)
声明块(declaration)，包括属性(property)和属性值(value)
注意：
声明块是由{ }来构成的，
声明之间必须有一个分号，所以在写单个声明的时候，尽量加上最后的分号，
声明的属性和属性值之间使用冒号隔开，
在写这些符号的时候，要注意必须是英文的。
CSS有一个特性，如果写错了，它不会报错，只是不起作用而言。
其中selector，翻译为选择器或选择符。
------------------------------------------------------------------------------------------------------------------------------------------------------------
3.CSS选择器
通过前面的一个分析，我们发现在一条css规则中，真正重要的有三个东西：
选择器
属性
属性值
CSS非常强大，其中的一个表现就是他提供了灵活好用的选择器。
作用：用于选中我们需要处理的标签或内容。
(1).基本选择器
a.类型选择器
也叫标签选择器，或叫元素选择器。
元素是什么意思？
元素 = 标签 + 属性 + 内容
比如 <h1 title=’标题而已’>标题1</h1>
标签 ：h1
属性：title=’标题而已’
内容：标题1
------------------------------------------------------------------------------------------------------------------------------------------------------------
b.id选择器
要使用id选择器，需要分成两个步骤：
第一步，需要在对应的标签中增加一个id属性
第二步，需要在css中，使用#+id属性值
基本使用：
需要注意的细节：
id是一个通用属性，所有的标签都可以设置id属性
id通常是唯一的，所以不要在同一个页面中设置相同的id属性（尽管浏览器可以去解析）。
identify：唯一的意思
------------------------------------------------------------------------------------------------------------------------------------------------------------
c.class选择器
class是班级的意思，在计算机领域中还可以理解为类、类别。
叫类选择器，使用也是分为两步：
第一步，需要在对应的标签中设置class属性，并设置对应值
第二步，在css的规则中，使用 .+class属性值
注意：对于class的使用
所有的标签都可以添加class属性；
对于不同的标签，他们需要有相同的样式，此时使用class比较合适；
对于相同的标签，但是在页面中，特别的多，我只需要某一部分标签有额外的样式，也应该使用class；
class属性的值，可以有多个，如果有多个，使用空格隔开，如图：
实际上，在开发的时候，class使用的频率是非常高的。
------------------------------------------------------------------------------------------------------------------------------------------------------------
(2).选择器用法
a.通配选择器
使用通配符，*，表示所有的标签（元素）。
实际上，统配选择器在开发时很少使用。
经典应用：
使用*来去掉所有标签的margin和padding。
------------------------------------------------------------------------------------------------------------------------------------------------------------
b.分组选择器
在书写css的时候，有可能对两个不同的标签、class、id，设置相同的css。
在css中，使用逗号来实现分组。两个选择器之间使用逗号进行分隔。
如图所示：
再进一步：在实际开发时，往往会出现如下情况
这些元素有相同的样式，也有不同的样式，可以利用分组设置相同样式部分，然后再针对各个元素设置不同的样式，如下：
------------------------------------------------------------------------------------------------------------------------------------------------------------
c.后代选择器
肯定会涉及到标签的一个嵌套（包含）。
[友情提示]：不要把逗号和空格混淆。有逗号的表示是分组，有空格的才表示后代。
注意：后代的层次是没有限制的，
------------------------------------------------------------------------------------------------------------------------------------------------------------
d.伪类选择器
目前我们就掌握一个，最常用的，就是a标签的hover伪类。
hover，表示将鼠标放到a上面的这个状态。
a:hover
使用如下：
注意：
并不存在一个class=”hover”这么一个属性，所以才叫伪类。
对于hover，目前只需要掌握在a标签的用法就可以了
---------------------------------------------------------------------------------------------------------------
补充一个用法----组合
在使用class选择器的时候，可以将标签和class组合到一起，从而缩小范围。
如何理解：
将二者拆分，一分为二，分为类型选择器p，和class选择器.red
二者之间是并且的关系，既满足是p标签，同时又满足具备class=‘red’这么一个条件
而且要注意，p.red不能写成.redp 或者.red p，它们都表示不同的含义。
------------------------------------------------------------------------------------------------------------------------------------------------------------4.css属性
CSS属性本身是挺多的，但真正常用的，核心的也就20多个
------------------------------------------------------------------------------------------------------------------------------------------------------------
5.css属性值
不同的属性，有不同的值。首先需要找出这些属性值的共性。
(1).颜色值
颜色名，就是英文名字，如red，green，blue等
使用rgb函数，使用不多
使用十六进制
rgb：三原色，三基色，分别就是红绿蓝，red，green，blue
三种颜色的取值范围都是0~255
使用十六进制：
十进制：0,1,2,3,4,5,6,7,8,9，10个符号构成，10个数字，如9999
十六进制：0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F，十六个符号构成的，其中数字有10个，字母有6个。
如：
#000000表示黑色
#FFFFFF 表示白色
#FF0000 表示红色
#00FF00表示绿色
#0000FF表示蓝色
注意事项：
在CSS2中，很好使用rgb函数。
对于颜色名，它的值是有限的，在使用的时候要小心，不要想着什么就是什么，
具体可以参考：http://www.cnblogs.com/markli/p/3883534.html
对于十六进制的写法，大小写都可以。而且一般必须是6位。只有一种情况下，位数可以减半，
如果表示三基色的三个部分，其值分别相等，可以使用3位表示。如#FFFF00可以简写为#ff0.
------------------------------------------------------------------------------------------------------------------------------------------------------------
(2).长度单位
在css中，主要有如下两个：
px，表示像素，大部分都是使用px
em，表示字体的高度，一般在设置text-indent时会用到
------------------------------------------------------------------------------------------------------------------------------------------------------------
(3).URL
统一资源定位，uniform resource location
绝对url：在线的某个资源，是以http打头的一个完整的路径，如http://www.baidu.com/abc/def
相对：使用比较多，相对当前文件的路径 ，如./images/bg.jpg
------------------------------------------------------------------------------------------------------------------------------------------------------------
(4).百分比
使用n%这种形式来设置的，在CSS中，一般有如下两处：
表示长度（包括宽和高），
表示位置的，如背景定位以及层定位的时候会用到
使用百分比的时候，一般都有参考的对象，这个对象通常就是父元素。
在css中，还有很多的属性值，在讲到具体属性的时候，再来解释说明。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
