css的三种引入方式、各种选择器的介绍、分组与嵌套、选择器的优先级
css 的三种引入方式：
1、从外部引入css文件，用到link标签（最规范，推荐使用）
2、在head标签内使用style标签来引入css样式
3、行内引入：在标签内使用style属性来设置css样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--head中设置-->
<!--<style>p{-->
<!--color: brown;}</style>-->
<!--从外部引入css文件-->
<link rel="stylesheet" href="css_test.css">
</head>
<body>
<!--行内设置-->
<!--<p style="color: aqua">唱！跳！rap!篮球！</p>-->
<p>唱！跳！rap!篮球！</p>
</body>
</html>
基本选择器：
标签选择器：
p {color: "red";}
类选择器：
.c1 { font-size: 14px; }
p.c1 {
color: red;
}
id选择器：
#d1 { background-color: red; }
全局选择器：
* { color: white; }
组合选择器：
后代选择器：
div span {
color: red;
}
作用于div中的所有span标签。
儿子选择器：
div>span{color:bule;}
作用于div里面的span标签
毗邻选择器：
div+span{color:orange;}
作用于紧挨着div下面的一个
弟弟选择器：作用于同级别下面所有的标签
div~span{color:red}
属性选择器:
1、具有某个属性名：
[hobby]{background-color:red}
具有hobby属性的所有标签
2、具有某个属性名和属性值
[hobby='read']{color = red;}
作用于具有属性名hobby和属性值read的所有标签
3、具有某个属性名和属性值以及某个标签
input[hobby='read']{back-ground:red:}
作用于具有属性名hobby和属性值read的input标签
分组：
当多个标签具有相同的样式时，没必要重复为他们进行设置样式，
这是可以通过在多个选择器之间使用逗号分隔的分组选择器进行统一样式。
div,p{color:red:}
表示作用于div标签和p标签
嵌套：
多种选择器可以组合使用：
.c1 p{color:red;}
表示c1类内部的p标签都设置为红色。
伪类选择器：
未访问的连接：
a:link{color:red:}
鼠标悬浮状态：
a:hover{color:red}
鼠标点击态：
a:active{color:red:}
鼠标访问之后的状态：
a:visited{color:red;}
input框点击输入时，获取焦点：
input:focus{background-color:bule;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*连接态*/
a:link {
color: pink;
}
/*鼠标悬浮态*/
a:hover {
color: red;
}
/*鼠标点击态*/
a:active {
color: purple;
}
/*访问过后的状态*/
a:visited {
color: dimgrey;
}
/* input框被点击的状态 称之为获取焦点*/
input:focus {
background-color: orange;
}
input:hover {
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.chouti.com">click me!</a>
<input type="text">
</body>
</html>
伪元素选择器：
给首字母设置样式：
p:first-letter{
font-size:48px;
color:red:}
在标签内容之前添加内容：
p:before{
content:"$$";
color:bule;}
在元素内容之后添加内容:
p:after{
content:"##";
color:green;}
before和after多用于清除浮动！！！
类选择器的优先级：
1、选择器相同时：就近原则
2、行内>id选择器>类选择器>元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="mycss.css">
<style>
/*
1.选择器相同的情况下:就近原则
2.选择器不同的情况下:
行内 > id选择器 > 类选择器 > 标签选择器
*/
#d1 {
color: red;
}
/*.c1 {*/
/* color: orange;*/
/*}*/
/*p {*/
/* color: greenyellow;*/
/*}*/
</style>
</head>
<body>
<p id="d1" class="c1" style="color: green">快要下课了,我想吃饭了!</p>
</body>
</html>
