前端开发_HTML5_CSS部分(二)

本文主要是介绍前端开发_HTML5_CSS部分(二)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、CSS选择器(给页面指定的标签添加指定的样式)

1.引入

我们发现一个问题，使用内嵌样式和外部样式都可以进行样式的引入，但是也存在一个问题:页面上同一种类型的元素都被统一成了一个样式，这样就失去了页面元素的多样化。为了解决类似的问题,即既可以给标签添加统一的样式，又可以给单个标签添加特定的样式，就需要学习知识点:CSS选择器。

2.CSS选择器可以分为两类:基本选择器和扩展选择器，下面我们将会逐一的讲解两个大类中重点的选择器类型。

3.基本选择器

(1)、基本选择器主要有三个内容:标签选择器、类选择器、ID选择器

(2)、标签选择器

①:作用:使用了标签选择器之后，页面上这一类的标签都会被使用相同的样式。

②:标签选择器语法:

标签选择器语法:<style type="text/css">标签名称{样式属性1:属性值;样式属性2:属性值;...}	
</style>

③:标签选择器的代码使用以及效果

<style type="text/css">p{font-size: 28px;font-family: "宋体";color: red;}
</style><body><p>江雪</p><p>千山鸟飞绝，万径人踪灭。</p><p>孤舟蓑笠翁，独钓寒江雪。</p>
</body>

(2)、类选择器

①:作用:页面上的标签通过指定class属性获得相应的样式，并在定义样式的使用使用“.”来设置相应的样式信息。

②:标签选择器语法:

<style type="text/css">.类名{样式属性1:属性值;样式属性2:属性值;...}	
</style>

③:类选择器的代码使用以及效果

<style type="text/css">p{font-size: 28px;font-family: "宋体";color: red;}.test{font-size: 38px;font-family: "宋体";color: green;}
</style><body><p>江雪</p><p>千山鸟飞绝，万径人踪灭。</p><p class="test">孤舟蓑笠翁，独钓寒江雪。</p>
</body>

(3)、ID选择器

①:作用:页面上的标签通过指定ID属性获得相应的样式，并在定义样式的使用使用“#”来设置相应的样式信息。

②:ID器语法:

<style type="text/css">#ID标识名{样式属性1:属性值;样式属性2:属性值;...}	
</style>

③:ID选择器的代码使用以及效果

<style type="text/css">p{font-size: 28px;font-family: "宋体";color: red;}.test{font-size: 38px;font-family: "宋体";color: green;}#demo{font-size: 18px;font-family: "宋体";color: #aa00ff;}
</style><body><p>江雪</p><p id="demo">千山鸟飞绝，万径人踪灭。</p><p class="test">孤舟蓑笠翁，独钓寒江雪。</p>
</body>