簡單使用方式
方式1，在html頁面裏的style標籤中添加樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--規範，<style>可以編寫css代碼，每一個聲明最好使用分號結尾
語法：
選擇器{
聲明1；
聲明2；
聲明3；
} -->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>我是標題</h1>
</body>
</html>
style中的h1是選擇器，選擇下方的h1標籤
方式2：css文件引用
…/ 表示當前文件所在的目錄的上一級目錄
./ 表示當前文件所在的目錄(可以省略)
/ 表示當前站點的根目錄(域名映射的硬盤目錄)
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--規範，<style>可以編寫css代碼，每一個聲明最好使用分號結尾
語法：
選擇器{
聲明1；
聲明2；
聲明3；
} -->
<link rel="stylesheet" href="../css/demo01.css">
</head>
<body>
<h1>我是標題</h1>
</body>
</html>
css文件
h1{
color:red;
}
css的導入方式
1.行內樣式
<body>
<!--行內樣式：在標籤元素中編寫一個style屬性-->
<h1 style="color:red">我是標題</h1>
</body>
2.內部樣式
<body>
<!--內部樣式-->
<style>
h1{
color:green;
}
</style>
</body>
↑似乎寫在head還是body裏還是外面都無所謂
3.外部樣式
css文件
h1{
color:yellow;
}
優先級：就近原則，行內樣式最優先，內部/外部誰離tag的代碼近誰生效
選擇器
作用：選擇頁面上某一個或某一類元素
2.1基本選擇器
1.標籤選擇器
2.類 選擇器
3.id選擇器
1.標籤選擇器
可以在網頁裏瞎改然後把改好的格式複製粘貼進style標籤
選擇一類標籤
p {
background: yellow;
border-radius: 24px;
}
2.類選擇器
同樣標籤的可以通過設置類來分別給於樣式
<body>
<style>
/*類選擇器的格式 .class的名稱 {}*/
.test1{
color: #14f212;
}
.test2{
color: #f53667
}
</style>
<h1 class="test1">標題1</h1>
<h1 class="test2">標題2</h1>
<h1 class="test1">標題3</h1>
</body>
類選擇器可複用，多個標籤可使用同一個類
3.ID選擇器
ID選擇器不可複用，一個ID只能被一個標籤使用
<style>
/* id選擇器：
#id 名稱{}
*/
#test1{
color: #f53667;
}
</style>
<h1 id="test1">標題1</h1>
<h1 id="test2">標題2</h1>
<h1>標題3</h1>
標題2使用test1會報錯。
id和class可以一起使用
<style>
/* id選擇器：
#id 名稱{}
*/
#test1{
color: #f53667;
}
.test2{
color:#14f212;
}
</style>
<h1 id="test1">標題1</h1>
<h1 class="test2">標題2</h1>
<h1>標題3</h1>
優先級不遵循就近原則，固定id>類>標籤選擇器
<h1 id="test1" class="test2">標題1</h1>
<h1 class="test2">標題2</h1>
<h1>標題3</h1>
標題1生效的是id選擇器