1、css是什麼？
CSS的含義：層疊樣式表，一個網頁是由一個個的方塊組成的，其實做網頁就是畫方塊，然後往方塊之中填充內容。
層疊樣式表：width:200px;height:300px;background:red;這些東西層疊在一起組成了一個樣式
因此HTML是房子的結構，而CSS(層疊樣式表)是房子的樣子，因此CSS依託於HTML
2、css的發展史
CSS1.0
CSS2.0 DIV（塊） + CSS，HTML 與 CSS 結構分離的思想，網頁變得簡單，SEO
CSS2.1 浮動，定位
CSS3.0 圓角，陰影，動畫…. 瀏覽器兼容性~
3、css基礎
3.1 規範語法：
選擇器 {
聲明1;
聲明2;
聲明3;
}
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是標題</h1>
</body>
</html>
3.2css導入的三種方式
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--1.內部樣式-->
<style>
h1{
color: green;
}
</style>
<!--2.外部樣式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--優先級：就近原則 -->
<!--3.行內樣式：在標籤元素中，編寫一個style屬性，編寫樣式即可 -->
<h1 style="color:orange;">我是標題</h1>
</body>
</html>
小結：內部樣式、行內樣式、外部樣式三者之間的優先級是就近選擇。
拓展 ：外部樣式兩種寫法
-
鏈接式：
html
<!--外部樣式--> <link rel="stylesheet" href="css/style.css"> -
導入式：
@import 是CSS 2.1 特有的！
<!--導入式--> <style> @import url("css/style.css"); </style>4、選擇器
作用：選擇頁面上的某一個或者某一類元素
4.1基本選擇器
1、標籤選擇器 ：選擇一類標籤 標籤{} ;
標籤選擇器，會選擇到頁面上所有的這個標籤的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*標籤選擇器，會選擇到頁面上所有的這個標籤的元素*/
h1{
color: #a13d30;
background: #3cbda6;
border-radius: 24px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>學Java</h1>
<h1>學Java1</h1>
<p>好好學習</p>
</body>
</html>
2、類 選擇器 class ： 選擇所有class 屬性一致的標籤，跨標籤 .類名{}
類選擇器的格式 .class的名稱{}
好處:可以多個標籤歸類，是同一個 class，可以複用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*類選擇器的格式 .class的名稱{}
好處，可以多個標籤歸類，是同一個 class，可以複用
*/
.haha{
color: #3748ff;
}
.hehe{
color: #a24fff;
}
</style>
</head>
<body>
<h1 class="haha">標題1</h1>
<h1 class="hehe">標題2</h1>
<h1 class="haha">標題3</h1>
<p class="hehe">P標籤</p>
</body>
</html>
3、Id 選擇器：全局唯一！ #id名{}
注意：#不可以使用數字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* id選擇器 : id必須保證全局唯一！
#id名稱{}
*/
#hehe{
color: #ff008a;
}
.style1{
color: #02ff00;
}
h1{
color: #2d1dc1;
}
</style>
</head>
<body>
<h1 class="style1" id="hehe">標題1</h1>
<h1 class="style1">標題2</h1>
<h1 class="style1">標題3</h1>
<h1>標題4</h1>
<h1>標題5</h1>
</body>
</html>
小結：優先級不遵循就近原則，固定的 id選擇器> class 選擇器 > 標籤選擇器
4.2、層次選擇器
1、後代選擇器 ：在某個元素的後面 祖爺爺 爺爺 爸爸 你
/*後代選則器*/
body p{
background: red;
}
2、子選擇器，一代，兒子
/*子選擇器*/
body>p{
background: #3cbda6;
}
3、相鄰兄弟選擇器 同輩
/*相鄰弟選擇器： 只有一個，相鄰（向下） */
.active + p{
background: #a13d30;
}
4、通用選擇器
/*通用兄弟選則器，當前選中元素的向下的所有兄弟元素*/
.active~p{
background: #02ff00;
}
4.3、結構僞類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用，class，id選擇器-->
<style>
/*ul的第一個子元素*/
ul li:first-child{
background: #02ff00;
}
/*ul的最後一子元素*/
ul li:last-child{
background: #ff4832;
}
/* 選中 p1 : 定位到父元素，選擇當前的第一個元素
選擇當前p元素的父級元素，選中父級元素的第一個，並且是當前元素才生效！ ，順序
*/
p:nth-child(1){
background: #2700ff;
}
/*選中父元素，下的p元素的第二個，類型 */
p:nth-of-type(2){
background: yellow;
}
/*選中超鏈接，當鼠標放在超鏈接的位置時變成深藍色*/
a:hover{
background: #000b3e;
}
</style>
</head>
<body>
<a href="">31231</a>
<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2.4、屬性選擇器
id + class 結合~
/* 屬性名， 屬性名 = 屬性值（正則）
= 絕對等於
*= 包含這個元素
^= 以這個開頭
$= 以這個結尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: inline-block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #2700ff;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font: bold 20px Arial;
line-height: 50px;
}
/* 屬性名， 屬性名 = 屬性值（正則）
= 絕對等於
*= 包含這個元素
^= 以這個開頭
$= 以這個結尾
*/
/*存在id屬性的元素 a[]{}*/
a[id]{
background: yellow;
}
/* id=first的元素*/
a[id=first]{
background: #63ff23;
}
/*class 中有 links的元素*/
a[class*="links"]{
background: yellow;
}
/*/*選中href中以http開頭的元素*/*/
a[href^=http]{
background: yellow;
}
a[href$=jpg]{
background: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="http://123.com" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
存在id屬性的元素
id=first的元素
class 中有 links的元素
