htmlcss基础知识，CSS样式表及基本选择器的使用
htmlcss基础知识，CSS样式表及基本选择器的使用√ CSS的选择器分类√ CSS的样式表的优先级√ CSS的发展史√ CSS的样式的定义方式√ CSS的样式表
大家都知道我们前两章的课程中，我们在写标签时候，在浏览器中显示的效果跟我们需要的效果有很大差距，比如我们要改变一下文字的颜色，改变一下背景颜色，改变一下字体等，那应该办呢？我们天天说HTML是结构，css是表现，应该怎么解释这两个概念呢？html是结构，也就是如是需要写一个网页了，得先看看要生成这个网页需要那些标签，也就是搭建一下页面结构，结构搭好了，就像我们买了房子一样，房子就是结构，如果房子搭建好了但不装修，觉得还是不美观，那应该怎么办呢？那就得用CSS来修饰一下我们HTML标签，所以CSS的主要作用就是修饰HTML标签的。那我们一起来了解一下什么是CSS吧！
通过以下几方面了解CSS：
√ CSS的概念
√ CSS的作用
√ CSS的发展史
√ CSS的样式的定义方式
√ CSS的样式表
√ CSS的样式表的优先级
√ CSS的选择器分类
√ CSS的基本选择器
√ CSS选择器的优先级及权重
CSS3每个时间段又发布了那些属性呢，我们看一下下面的介绍。
说了这么多，CSS到底是怎么定义的呢？
四、 CSS的样式的定义方式
CSS样式定义在样式表中 然后再定义样式：
选择器{样式1：样式值1；样式2：样式值2；……}
写到这里大家应该猜到我们接下来要讲什么了吧，猜对了，就是要讲CSS样式表了！我们一起来看吧！
五、 CSS的样式表
CSS的样式表有那些呢？
1、行内样式表：在HTML标记内，使用style属性定义CSS样式。
语法：<p style=”color:red;”></p>
style=” ” 这句话就是行内样式表，双引号里面写的就CSS样式（或者叫CSS属性）及样式值（CSS属性值），这里的color是CSS属性，red是CSS属性值。这种样式表用的比较少，因为没有实现结构与表现的分离。
代码：
<h3 style="color:red;">行内样式表实现我变了颜色！</h3>
<p style="color:red;">行内样式表实现我变了颜色！</p>
页面显示效果
2. 内嵌式样式表：就是将CSS添加到<head>与</head>之间，并用<style></style>标记声明的一种样式表。这种样式表用的比较少，因为没有实现结构与表现的分离。
语法：<style>
/*这里写css内容*/
</style>
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式表</title>
<style type="text/css">
h3{
color:red;/*这里color是CSS属性，red是CSS属性值*/
}
p{
color:red;
}
</style>
</head>
<body>
<h3>内部样式表实现我变了颜色！</h3>
<p>内部样式表实现我变了颜色！</p>
</body>
</html>
页面效果：
3. 外部链接式样式表：在外部定义CSS样式表，通过<link/>链接标记链接到页面中的一种样式表。经常使用，这种样式表非常常用，不仅实现了结构与表现的分离，而且易于维护和改版。
语法： <link href="style.css" rel="stylesheet" type="text/css" />
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式表</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<h3>外部链接式样式表实现我变了颜色！</h3>
<p>外部链接式样式表实现我变了颜色！</p>
</body>
</html>
CSS代码：
h3 {
color: red;/*这里color是CSS属性，red是CSS属性值*/
}
p {
color: red;
}
页面显示效果
4. 外部导入式样式表：在外部定义css样式表，通过导入方式链接到页面中的一种样式表，使用不多，因为语法不如链接式样式表简单。
语法：
<style>
@import url(CSS路径);
</style>
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式表</title>
<style>
@import url("css/style.css");
</style>
</head>
<body>
<h3>外部导入式样式表实现我变了颜色！</h3>
<p>外部导入式样式表实现我变了颜色！</p>
</body>
</html>
CSS代码
h3 {
color: red;/*这里color是CSS属性，red是CSS属性值*/
}
p {
color: red;
}
页面效果
通过以上四种样式表的比较，以后我们最常用的样式表就是链接式样式表，另外假如几种样式表如果同时存在的话，那就应该识别谁的样式呢？我们一起来看一下CSS样式表的优先级。
六CSS样式表的优先级
假如行内样式表和内部样式表同时存在时，应该识别是谁的样式呢？当然是行内样式表了！
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式表</title>
<style>
h3{color: blue;}
</style>
</head>
<body>
<h3 style="color: red;">行内样式表和内部样式表，行内的优先级高！</h3>
</body>
</html>
页面显示效果
内部样式表和链接式样式同时存在时，谁的高呢？当然是谁离所修饰的HTML标签近，谁就高。（遵循的原则就是就近原则）
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式表</title>
<style>
h3{color: blue;}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<h3>内部样式表和外部样式表，谁离我近我识别谁的颜色！</h3>
</body>
</html>
CSS代码
h3 {
color: red;/*这里color是CSS属性，red是CSS属性值*/
}
页面显示效果
仔细看看上面的代码，再来看看下面的代码
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式表</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<style>
h3{color: blue;}
</style>
</head>
<body>
<h3>内部样式表和外部样式表，谁离我近我识别谁的颜色！</h3>
</body>
</html>
CSS代码
h3 {
color: red;/*这里color是CSS属性，red是CSS属性值*/
}
页面显示效果
总之一句话样式表的优先级遵循的原则就是：就近原则！
好了， 我们掌握了样式表，我们知道样式是写在样式表里的，我们大家还记得样式的语法吗？回顾一下：
样式的写法：
选择器{样式1：样式值1；样式2：样式值2；……}
那CSS的选择器有哪些呢？明天，我们将继续学习选择器。
