一、引入css的方式，一共有4种，我们只需要掌握三种就可以了，@import的方法我们不做掌握
1、第一种引入的方法
<!--1、第一种引入css的方法-->
<h1 style="color: greenyellow;background-color: black">这是一个h1标签</h1>
2、第二种引入的方法
<style>
/*2、第二种引入css的方法*/
h3{
color: red;
background-color: black;
}
h4{
color: green;
background-color: blue;
}
</style>
3、第三种引入的方法，也是推荐的方法，这种方法需要新建一个stylesheet文件，也就是css文件
<!--3、第三种引入css的方法，这个是最好的，也是推荐大家使用-->
<link type="text/css" href="css.css" rel="stylesheet">
二、标签选择器，作用就是通过各种方法找到到我们修饰的标签
1、简单选择器，通过标签的id属性，标签的名称，标签的class值选择标签
/*1、通用型的标签选择器，对所有标签生效*/
*{
font-size: 45px;
}
/*2、标签选择器，根据标签的名称选择，对所有的p标签生效*/
p{
background-color: red;
}
/*3、id选择器，通过标签的id查找标签，id是唯一的*/
#id{
color: black;
}
/*3、通过class选择一类的标签，class不是唯一的,是一类标签都可以有的属性*/
.c1{
font-style: inherit;
}
2、组合选择器，通过标签之间的位置关系来选择标签，比如后代，毗邻，相邻，子代
/*1、后代选择器，选择div下的p标签,无论儿子还是孙子，只要是后代就都会被选中*/
div p{
font-size: 40px;
}
/*选择div下的class为c1的所有的标签*/
div .c1{
color: blue;
}
/*2、子代选择器，用大于号，只选择子代的选择器,只有在儿子这一层在起作用，孙子就不起作用了*/
#outer>.c1{
color: green;
}
/*3、并行选择器，只选择兄弟的标签*/
a,div{
color: greenyellow;
}
/*4、毗邻选择器，只选择完全相邻或者说紧挨着的标签*/
a+div{
font-size: 34px;
}
3、属性选择器，通过标签的属性或者属性+属性的值来选择标签
<!--/*1、如果标签有属性的名称为id的标签，就会被选中*/-->
[id]{
color: red;
}
<!--/*2、属性+值的选择器，属性id的值为div1的标签将会被选中*/-->
[id="div1"]{
color: blue;
}
<!--/*3、选择div标签中有属性id，且属性id的值是div的标签*/-->
div[id="div"]{
color: blue;
}
<!--4、选择div的标签中有属性class且class属性的值中有div2的标签就会选中,一个属性的值可以有多个-->
div[class~="div2"]{
color: blue;
}
<!--5、选择div标签中有属性id的切id属性的值以div2开头的标签就会选中-->
div[id^="div2"]{
color: blue;
}
<!--6、选择div标签中有属性id的切id属性的值以div2结尾的标签就会选中-->
div[id$="div2"]{
color: blue;
}
<!--7、选择div标签中有属性id的切id属性的值有div2这个字符的的标签就会选中-->
div[id*="div2"]{
color: blue;
}