一、CSS简介
网页分成三部分：
结构（HTML）
表现（CSS）
行为（JavaScript）
CSS
-层叠样式表
-网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层设置样式，而最终我们能看到的只是网页的最上层
-CSS用来设置网页中元素的样式
1、内联样式
-在标签内部通过style属性来设置元素的样式
问题：
使用内联样式，样式只能对一个标签生效
不方便维护
-注意：开发时不要使用内联样式！！！
<body>
<!--
使用CSS来修改元素的样式
第一种方式（内联样式、行内样式）:
-->
<p style="color:red; font-size:30px;">少小离家老大回，乡音无改鬓毛衰</p>
</body>
2、内部样式表
-将样式编写到head中的style标签里
通过CSS选择器来选中元素并为其设置各种样式
可以同时为多个标签设置样式，并且修改时只需要修改一处即可
-内部样式表更加方便对样式进行复用
问题：
内部样式表只能对一个网页起作用
<head>
/*
第二种方式（内部样式表）：
*/
<style>
p{
color:green;
font-size:50px;
}
</style>
</head>
3、外部样式表（最推荐的方式）
-可以将CSS样式编写到一个外部的CSS文件中,
然后通过link标签来引入外部的CSS文件
-外部样式表需要通过link标签进行引入
意味着只要想使用该样式的网页都可以对其进行引用
使样式可以在不同页面之间进行复用
-将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制
从而加快网页的加载速度，提高用户的体验
<head>
<!--
第三种方式（外部样式表）：
-->
<link rel="stylesheet" href="./style.css">
</head>
创建一个外部文件，如style.css
在里边直接写上需要的样式，如
p{
color:blue;
font-size:30px;
}
二、CSS语法
style 写在 head 里面，在 style 里必须遵循CSS语法
CSS中的注释：/* */
CSS的基本语法：
选择器：
-通过选择器可以选中页面中的指定元素
-比如p的作用就是选中页面中所有的p元素
声明块：
-通过声明块来指定为元素设置的样式
-声明块由一个个的声明组成（color:red;）
-声明是一个名值对结构
一个样式名对应一个样式值，名和值之间以:连接，以;结尾
<style>
/*
CSS中的注释：快捷键（ctrl+/）
*/
p{
color:red;
font-size:30px;
}
h1{
color:green;
}
</style>
1、元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{}
<style>
/*
将所有的段落设置为红色（字体）
*/
p{
color:red;
}
2、id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}
<style>
/*
将“儿童相见不相识”设置为红色
*/
#red{
color:red;
}
</style>
3、类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值
<style>
/*
将 秋水... 和 落霞... 设置为蓝色
*/
.blue{
color:blue;
}
.green{
color:green;
}
.abc{
font-size:20px;
}
</style>
<body>
<h1 class="green abc">我是标题</h1>
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
<p id="red">儿童相见不相识</p>
<p>笑问客从何处来</p>
<!--
class 是一个标签属性，它和id类似，不同的是class可以重复使用
可以通过class属性来为元素分组
可以同时为一个元素指定多个class属性
-->
<p class="blue">秋水共长天一色</p>
<p class="blue">落霞与孤鹜齐飞</p>
</body>
4、通配选择器
作用：选中页面中的所有元素
语法：*
<style>
*{
color:red；
}
</style>
5、交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1.选择器2.选择器n{}
注意：
交集选择器中如果有元素选择器，必须使用元素选择器开头
<style>
div.red{
font-size:30px;
}
</style>
6、并集选择器（选择器分组）
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器n{}
<style>
h1,span{
font-size:30px;
}
</style>
7、关系选择器
01子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
<style>
/*为div的子元素span设置一个字体颜色为红色
（为div直接包含的span设置一个字体颜色）
*/
div.box > span{
color:orange;
}
</style>
<body>
<!--
父元素：
-直接包含子元素的元素
子元素：
-直接被父元素包含的元素
祖先元素：
-直接或间接包含后代元素的元素
-一个元素的父元素也是其祖先元素
后代元素：
-直接或间接被祖先元素包含的元素
-子元素也是后代元素
兄弟元素：
-拥有相同父元素的元素
-->
<div class="box">
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span元素</span>
</p>
<span>我是div中的span元素</span>
</div>
<div>
<span>我是div外的span元素</span>
</div>
02后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代
<style>
div span{
color:skyblue;
}
</style>
03选择下一个兄弟
语法：前一个 + 下一个（紧挨着的）
<style>
p + span{
color:red;
}
</style>
04选择下边所有兄弟
语法：兄 ~ 弟
<style>
p ~ span{
color:red;
}
</style>
130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
