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>