由于css的内容偏多，所以笔者分开几个章节来总结，今天的第一个章节主要是总结css的基本定义，使用方法，和选择器介绍。
1.css的定义
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML元素在浏览器内的显示样式，如大小，字体，背景，边框等等。如：
p{
font-size:12px;
color:red;
font-weight:bold;
}
//定义了p标签的字体大小为12像素，字体的颜色是红色，字体的粗细是加粗
2.CSS代码语法
css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：
- 选择符：又叫做选择器，主要是指明哪些标签会应用声明中的样式。如上图的选择符为“p”，则说明页面内的所有p标签都会应用这个样式。选择符有多钟，例如标签选择符，类选择符，id选择符，子选择符，后代选择符...上面的“p”就是标签选择符。
- 声明：在英文"{ }"中的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{font-size:12px;color:red;}
- 注释：css注释的添加方式和html的一样如下所示：
/*这里是注释*/
3.怎么应用CSS
将CSS应用的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。
-
内嵌式：
内嵌式，顾名思义，就是直接将css样式写在html标签里面。因为直接写在了要修饰的标签里面了，所以不需要所谓的选择符，也不需要上面2中所说的“{}”包裹，直接在标签的style属性里面写样式和对应的值即可，其他的不变。如：
<p style="color:red">这里文字是红色。</p>
-
嵌入式：
嵌入式css样式，就是可以把css样式代码写在html文件的<style type="text/css"></style>标签之间，这个时候就需要2中所说的选择符和“{}”了，具体如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这里是标题</title>
/*这里是嵌入式css样式表*/
<style type="text/css">
span{
color:red;
}
</style>
</head>
<body>
<span>这里的字体是红色的</span>
<span>这里的字体是红色的</span>
<span>这里的字体是红色的</span>
</body>
</html>
(1)嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
-
外部式：
外部式顾名思义就是将所以的css样式写外一个后缀名为css的外部文件(***.css)中,然后通过<link>标签链接到html文件内。如下面代码：
/*这个是html文件*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这里是标题</title>
/*通过这条语句将外部样式表引入*/
<link href="base.css" rel="stylesheet" type="text/css" />
</head>
<body>
<span>这里的字体是红色的</span>
<span>这里的字体是红色的</span>
<span>这里的字体是红色的</span>
</body>
</html>
/*这个是css文件*/
span{
color:red;
}
(1)css样式文件名称以有意义的英文字母命名，如 main.css；通过<link>标签的href属性对应你要引进的css文件的地址来链接。
(2)rel="stylesheet" type="text/css" 是固定写法不可修改。
(3)<link>标签位置一般写在<head>标签之内。
注：这三种样式是有优先级的，记住他们的优先级：内联式 > 嵌入式 > 外部式，就是当我们同时使用三中方式的样式去修饰一个html文件的时候，就会按照上面的优先级去执行。
4.选择器
我们在写样式的时候，通?；嵊龅揭桓鑫侍猓颐切枰范囊桓?，或者哪一类标签使用某一个样式。而选择器就是为了满足这种需求。所以，选择器就是为了选择页面内的特定的标签，让其执行想要的样式。
-
标签选择器
标签选择器其实就是通过标签名来选择html代码中的标签。如p标签，img标签，body标签。例如下面代码：
p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。
-
类选择器
通过class属性来选择html代码中的标签。步骤如下：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>我是标签</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class=“aaa”>我是标签（加了类名aaa）</span>
第三步：设置类选器css样式，格式是：.类名{属性:值}，如下：
.aaa {font-size:12px;line-height:1.6em;}
/*前面有个点??！*/
(1)英文圆点开头
(2)其中类选器名称可以任意起名（但不要起中文噢）
-
ID选择器
通过id属性来选择html代码中的标签,这个选择器和类选择器有点相似。步骤如下：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>我是标签</span>
第二步：使用id="id选择器名称"为标签设置一个id，如下：
<span id=“bbb”>我是标签（加了id名bbb）</span>
第三步：设置id选器css样式，格式是：#id名{属性:值}，如下：
#bbb{font-size:12px;line-height:1.6em;}
(1)为标签设置id="ID名称"
(2)ID选择符的前面是井号（#）号
注* id选择器和类选择器看起来非常像，用法也好像差不多，但是两者有个很根本的区别：id选择器不可以重复，class类选择器可以重复；就是说id是唯一标识一个标签元素的，就是一个id只能用在一个标签里面，但是同一个class可以应用在多个不同的标签里面；如：
<span id=“bbb”>我是标签1（加了id名bbb）</span>
<span id=“bbb”>我是标签2（加了id名bbb）</span>
<span id=“bbb”>我是标签3（加了id名bbb）</span>
这里三个span标签都使用了同一个id“bbb”，这样是不合法的。
<span class=“aaa”>我是标签1（加了类名aaa）</span>
<span class=“aaa”>我是标签2（加了类名aaa）</span>
<span class=“aaa”>我是标签3（加了类名aaa）</span>
这里三个span标签都使用了同一个class“ aaa”，这样是合法的。
-
子选择器
子选择器，就是通过大于符号(>),用于选择指定标签元素的第一代子元素，如：
.food>li{border:1px solid red;}
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
</ul>
以上代码通过子选择器会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
-
包含(后代)选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素
.food li{border:1px solid red;}
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
</ul>
请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>
”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
-
通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
*{color:red;}
-
分组选择符
分组选择符（，），即是为html中多个标签元素设置同一个样式，如下所示，则是同时给span和h1标签设置了样式：
h1,span{color:red;}
它相当于下面两行代码：
h1{color:red;}
span{color:red;}
-
伪类选择符
更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。
关于伪选择符：
关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了，其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的，在后面的文章里，笔者会专门有一章总结伪类选择符。
