1，什么是CSS3？
全称：Cascading Style Sheet
层叠：多层，说明可以通过多个样式去表现
可以理解成一个正方体，他中间穿插多层样式。
样式：具体的各种修改展示形式的表现。
表：表格
2，DIV
<style type="text/css">
div{
border:1px red soild;
}
spna{
border;1px red soild;
}
/*
div属于块级元素，每次出现的新的div标签会进行换行操作
span属于行内元素，它再出现新的span的时候不会进行换行操作
*/
</style>
<body>
<div>XXX</div>
<div>xxx</div>
<div>xxx</div>
<span>XXX</span>
<span>XXX</span>
<span>XXX</span>
</body>
效果图如下：
我们可以看到div是自带换行的元素，属于块级元素，而span是行内元素，自身是没有换行能力的
3，css基本语法结构
<style>
选择器{
声明1；
声明2；
·····
}
</style>选择器是很重要的东西，后面会慢慢介绍，声明就相当于内容。
4，三种引入css的样式
1，行内样式
<h2 style="font-size:20px;color=blue;"> 你好CSS3</h2>效果图如下：
即在html标签中，使用标签的style属性，直接在其中编写声明，不需要写选择器，因为我们只需要改变当前的这一行标签，上面代码的意思是，将文本变成20px大小 颜色为蓝色的文本。
2，内部样式表
<head>
<style>
h1{
font-size:22px;
color:brown;
}
</style>
</head>\
<body>
<h1>你好CSS3</h1>
</body>效果图如下：
内部样式表是新手学习中最常用也是最实用的方法，优点是便于查看与修改。
3，外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式
3，1
<link>链接式引入：
<link href="linkcss.css" rel="stylesheet" type="text/css"></link>href引入路径，以下内容需要写死，rel="stylesheet" type="text/css"
3，2
@import导入式引入
@import url("import.css");url指向路径
比较值得注意的是，link引入需要写在head标签的style标签里
而import引入则不需要，直接在head标签中写即可。
链接式与导入式的区别：
<link>标签属于HTML，<link>标签除了引入css标签，还可以引用其他资源，如RSS
@import是属于CSS2.1
使用<link>链接的css文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把css文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的。
5，css引入
行内样式>内部样式>外部样式表
就近原则
优先看权限最大的，按照权限大的样式来。
6，css选择器
什么是选择器，选择器有哪些，选择器是干嘛的，接下来将会告诉你这些。
6，1基本选择器
head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 类选择器 */
/* 当标签存在属性class并且该属性与我们写的class属性相同时，会被选择 */
/* 类选择器使用“"."+class的名称”这种形式 */
.redcolor{
font-size: 22px;
color: red;
}
.bluecolor{
font-size: 22px;
color: blue;
}
/* id选择器 */
/* 当标签存在属性id并且该属性与我们写的id属性相同时，会被选择 */
/* id选择器使用“"#"+id的名称”这种形式 */
#h1id1{
color: pink;
}
/* 标签选择器 */
h1{
color: yellow;
}
</style>
</head>
<body>
<h1 class="redcolor">你好css</h1>
<h2 class="bluecolor">你好css</h2>
<h3>你好css</h3>
<h1 id="h1id1" class="redcolor">你好css</h1>
<h2>你好css</h2>
<h3>你好css</h3>
</body>无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
color: red;
}
.ye{
color:yellow;
}
#d6h{
color:blue;
}
</style>
</head>
<body>
<div>
制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
制作影视简介，<span class="ye">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
制作影视简介，<span class="ye">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
制作影视简介，<span class="ye" id="d6h">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
制作影视简介，<span class="ye">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
</div>
</body>
<style>
span {
color: red;
}
.ye{
font-size: 30px;
}
#d6h{
font-family: "宋体";
}
</style>
</head>
<body>
<div>
制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
制作影视简介，<span class="ye">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
制作影视简介，<span class="ye">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
制作影视简介，<span class="ye" id="d6h">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
制作影视简介，<span>标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
制作影视简介，<span class="ye">标题使用标签</span>，其他文本均放在段落标签中，超链接使用，图片使用<br/>
</div>
</body>
6.2高级选择器
第一种：后代选择器
<style>
div h1{
color：red；
}
</style>
<body>
<h1>test123123</h1>
<div><h1>test123123</h1></div>
</body>
注意上面的第一行h1没有变色，因为他就是正常的标签标签，但第二行变色是因为他被div包裹了，他是div的后代，所以他变色了
第二种：子类选择器
<style>
body>h1{
color:red;
}
</style>
<body>
<h1>text123123</h1>
<div><h1>text123123</h1></div>
</body>
必须要上一级的标签是指定的第一个元素。此时只有第一个变成红色，因为第二个中间还有一层<div>
"他不是body的儿子，他是body的孙子"
所以不会被选中
第三种：兄弟选择器
<style>
.active+h1{
color: red;
}
</style>
</head>
<body>
<h1 class="active">test123123</h1>
<div>
<h1 class="active">
test1
</h1>
<h1 class="active">
test2变色
</h1>
<h1>
test3变色
</h1>
<h1 class="active">
test4
</h1>
<h1>
test5变色
</h1>
<h1>
test6
</h1>
</div>
</body>
首先自身需要满足第二个条件（条件可以是任何的基本选择器），其次要求他紧贴着上面的那个元素是满足第一个条件（要求为同一个”辈分“）。
第四种：通用兄弟选择器
<style>
.active~h1{
color: red;
}
</style>
</head>
<body>
<h1 class="active">test123123</h1>
<div>
<h1 class="active">
test1
</h1>
<h1 class="active">
test2变色
</h1>
<h1>
test3变色
</h1>
<h1 class="active">
test4
</h1>
<h2>
test5他是h2标签
</h2>
<h1>
test6
</h1>
</div>
</body>
和相邻兄弟选择器不同，只要满足第一个条件之后的并且自身满足第二个条件，就会被选择
为什么第五个没有变色，因为h2标签哈哈，被骗了吧！
6，3伪类选择器
首元素选择器：
<style>
h1:first-child{
color:red;
}
</style>
<!--
只有test01变色了，因为只有test01包裹的h1
同是满足即使当前包裹情况的第一个元素，又是h1标签
所以只有他变色
-->
</head>
<body>
<div>
<h1>test01</h1>
<h1>test02</h1>
<h1>test03</h1>
<h1>test04</h1>
<h1>test05</h1>
</div>
<h1>test01</h1>
<div>
<h2>test06</h2>
<h1>test07</h1>
</div>
</body>最后一个元素选择器：
<style>
h1:last-child{
color:blue;
}
</style>
</head>
<body>
<div>
<h1>test01</h1>
<h1>test02</h1>
<h1>test03</h1>
<h1>test04</h1>
<h1>test05</h1>
</div>
<h1>test01</h1>
<div>
<h2>test06</h2>
<h1>test07</h1>
</div>
</body>
只有5和7在各自包裹的div中都是属于最后一个元素
注意：<body>标签中的最后一个元素不会被选中
first-child与first-of-type的区别
E:first-child是找到第一个元素，是否是满足的类型（E）。
E:first-of-type是优先寻找所有的E类型，之后去将找到的第一个给渲染。
6，4属性选择器
这个说实话用的真的很少，并且我也不是专业的前端哈，感兴趣的可以去详细了解，说实话平时除了特定的一些题目要求那么做，我一般都不用。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
