CSS快速上手
第一章 CSS基础
首先来回答2个问题。
1.CSS是什么？
CSS是用来控制网页外观的一门技术。
2.前端最核心的技术是什么？他们分别是用来干吗的？
前端最核心的技术有：HTML、CSS、JavaScript。
HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript控制的是网页的行为。
CSS引入方式
有三种方式：外部样式表、内部样式表、行内样式表。
1.外部样式表
把CSS代码和HTML代码单独放在不同文件中，然后在HTML文件中使用link标签来引用CSS文件。
当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用外部样式表，就可以通过更改一个CSS文件来改变整个网站的外观。
外部样式表在单独文件中定义，然后在HTML文件的<head></head>标签对中使用link标签来引用。
语法：
<link rel="stylesheet" type="text/css" href="文件路径" />解释：
rel（relative）取值是固定的，即stylesheet，表示引入的是一个样式表文件（CSS文件）。
type属性的取值也是固定的，即"text/css"，表示这是标准的CSS。
href属性表示CSS文件的路径。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
</body>
</html>注意：外部样式表必须用link标签来引入，link标签放在head标签内。
2.内部样式表
把HTML代码和CSS代码放到同一个HTML文件中。其中，CSS代码放在style标签对之间，style标签放在head标签内部。
语法：
<style type="text/css">
……
</style>type="text/css"是必须添加的，表示这是标准的CSS
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
div{color:green;}
</style>
</head>
<body>
<div>绿叶，给你初恋般的感觉。</div>
<div>绿叶，给你初恋般的感觉。</div>
<div>绿叶，给你初恋般的感觉。</div>
</body>
</html>div{clolr:green}这句中的div属于CSS中的选择器，后续会学到。
注意：内部样式表CSS样式必须在style标签内定义，而style标签放在head标签内。
3.行内样式表
把HTML代码和CSS代码放到同一个HTML文件。行内样式表的CSS是“标签的style属性”中定义的。（注意和内部样式表style区分，这里的style是属性，不是标签。）
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div style="color:red;">绿叶，给你初恋般的感觉。</div>
<div style="color:red;">绿叶，给你初恋般的感觉。</div>
<div style="color:red;">绿叶，给你初恋般的感觉。</div>
</body>
</html>
章节测试
下面说法中，正确的是（ C）。
A．现在已经是CSS3时代了，没必要再去学CSS2
B．一般使用script标签来引用外部样式表
C．在实际开发中，一般使用外部样式表的多
D．内部样式表和行内样式表在实际开发中一点用处都没有
第二章 CSS选择器
在HTML中，id和class是元素最基本的两个属性。id和class都可以用来选择元素。
1.元素的id和class
id属性
id属性具有唯一性，在一个页面中相同的id只能出现一次。如果出现了多个相同的id，那么CSS或者JavaScript就无法识别这个id对应的是哪一个元素。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div id="content">存在即合理</div>
<p id="content">存在即合理</p>
</body>
</html>这段代码有问题，因为出现了多个相同的id
class属性
可以为同一个页面的相同元素或者不同元素设置相同的class，然后使相同class的元素具有相同的CSS样式。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div class="content">存在即合理</div>
<p class="content">存在即合理</p>
</body>
</html>这段代码是正确的。
对于id和class的理解：
id就像你的身份证号，而class就像你的名字。身份证号是唯一的，但是两个人的名字却有可能是一样的。
2.CSS选择器
先来看一段代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<div>绿叶学习网</div>
<div>绿叶学习网</div>
<div>绿叶学习网</div>
</body>
</html>
对于这个例子，如果我们只想将第2个div文本颜色变为红色，该怎么实现呢？
我们肯定要通过一种方式来“选中”第2个div，只有选中了才可以为其改变颜色 。
像上面这种选中你想要的元素的方式，我们称之为“选择器”。
选择器，就是指用一种方式把你想要的那个元素选中，只有把它选中了，你才可以为这个元素添加CSS样式。
CSS选择器非常多，这里只讲最实用的5种：
元素选择器、id选择器、class选择器、后代选择器、群组选择器。
CSS选择器的格式是怎样的？
选择器
{
属性1 : 取值1;
……
属性n : 取值n;
}1.元素选择器
元素选择器，就是选中相同的元素，然后对相同的元素定义同一个CSS样式。
语法：
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
div{color:red;}
</style>
</head>
<body>
<div>绿叶学习网</div>
<p>绿叶学习网</p>
<span>绿叶学习网</span>
<div>绿叶学习网</div>
</body>
</html>
2.id选择器
选中id相同的元素进行同一种操作。
语法：
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#lvye{color:red;}
</style>
</head>
<body>
<div>绿叶学习网</div>
<div id="lvye">绿叶学习网</div>
<div>绿叶学习网</div>
</body>
</html>
3.class选择器
我们可以对“相同的元素”或者“不同的元素”定义相同的class属性，然后针对拥有同一个class的元素进行CSS样式操作。
class名前面必须要加上前缀英文句号（.），否则该选择器无法生效。类名前面加上英文句号，表明这是一个class选择器。
语法：
举例：（为相同元素定义class）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.lv{color:red;}
</style>
</head>
<body>
<div>绿叶学习网</div>
<div class="lv">绿叶学习网</div>
<div class="lv">绿叶学习网</div>
</body>
</html>
.lv{color:red;}表示选中class="lv"的所有元素，然后定义它们的文本颜色为红色。
举例：（为不同元素定义class）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.lv{color:red;}
</style>
</head>
<body>
<div>绿叶学习网</div>
<p class="lv">绿叶学习网</p>
<span class="lv">绿叶学习网</span>
<div>绿叶学习网</div>
</body>
</html>p和span是两个不同的元素，我们为这两个不同的元素设置相同的class，这样就可以同时为p和span定义相同的CSS样式了。
注意：如果要为两个或多个元素定义相同的样式，建议使用class选择器，因为这样可以减少大量重复代码
4.后代选择器
后代选择器，就是选择元素内部中某一种元素的所有元素：包括子元素和其他后代元素（如“孙元素”）。
语法：
父元素和后代元素必须要用空格隔开，表示选中某个元素内部的后代元素
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#father1 div {color:red;}
#father2 span{color:blue;}
</style>
</head>
<body>
<div id="father1">
<div>绿叶学习网</div>
<div>绿叶学习网</div>
</div>
<div id="father2">
<p>绿叶学习网</p>
<p>绿叶学习网</p>
<span>绿叶学习网</span>
</div>
</body>
</html>
5.群组选择器
群组选择器，指的是同时对几个选择器进行相同的操作
语法：
对于群组选择器，两个选择器之间必须要用英文逗号（,）隔开，不然群组选择器就无法生效
举例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h3,div,p,span {color:red;}
</style>
</head>
<body>
<h3>绿叶学习网</h3>
<div>绿叶学习网</div>
<p>绿叶学习网</p>
<span>绿叶学习网</span>
</body>
</html> 
举例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#lvye,.lv,span{color:red;}
</style>
</head>
<body>
<div id="lvye">绿叶学习网</div>
<div>绿叶学习网</div>
<p>绿叶学习网</p>
<p class="lv">绿叶学习网</p>
<span>绿叶学习网</span>
</body>
</html>
章节测试
一、单选题
1．每一个样式声明之后，要用（ ）表示一个声明的结束。
A．逗号 B．分号 C．句号 D．顿号
2．下面哪一项是CSS正确的语法结构？（ ）
A．body:color=black
B．{body;color:black}
C．{body:color=black;}
D．body{color:black;}
3．下面有关id和class的说法中，正确的是（ ）。
A．id是唯一的，不同页面中不允许出现相同的id
B．id就像你的名字，class就像你的身份证号
C．同一个页面中，不允许出现两个相同的class
D．可以为不同的元素设置相同的class来为他们定义相同的CSS样式
4．下面有关选择器的说法中，不正确的是（ ）。
A．在class选择器中，我们只能对相同的元素定义相同的class属性
B．后代选择器选择的不仅是子元素，还包括它的其他后代元素（如“孙元素”）
C．群组选择器可以对几个选择器进行相同的操作
D．想要为某一个元素定义样式，我们可以使用不同的选择器来实现
二、编程题下面有一段代码，如果我们想要选中所有的div和p，请用至少两种不同的选择器方式来实现，并且选出最简单的一种。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div></div>
<p></p>
<p></p>
<strong></strong>
<span></span>
</body>
</html>答案：
一、BDDA
二、示例代码
<!--class选择器-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.a{color: blue;}
</style>
</head>
<body>
<div class="a">HELLO!</div>
<p class="a">你好</p>
<p class="a">hello</p>
<strong>nice</strong>
<span>today</span>
</body>
</html>
<!--id选择器-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#a{color: red;}
</style>
</head>
<body>
<div id="a">HELLO!</div>
<p id="a">你好</p>
<p id="a">hello</p>
<strong>nice</strong>
<span>today</span>
</body>
</html>
<!--群组选择器-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div,p{color: red;}
</style>
</head>
<body>
<div>HELLO!</div>
<p>你好</p>
<p>hello</p>
<strong>nice</strong>
<span>today</span>
</body>
</html>群组选择器最简单！