一、Css基本語法 1.Html和Css沒分開時 點擊查看代碼 <!DOCTYPE html> <html lang="en"> <head> <!--規範，<style>可以編寫css的代碼，每一個聲明，最好使用分號隔開 語法： 選擇器{ 聲明1； 聲明2； 聲明3； } --> <meta ch ...
一、Css基本語法
1.Html和Css沒分開時
點擊查看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<!--規範，<style>可以編寫css的代碼，每一個聲明，最好使用分號隔開
語法：
選擇器{
聲明1；
聲明2；
聲明3；
}
-->
<meta charset="UTF-8">
<title>MyFirstss頁面</title>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>TWQ標題</h1>
</body>
</html>
2.Html和Css分開後
依然可以達到上圖的效果
3.Css三種導入方式
點擊查看代碼
<head>
<meta charset="UTF-8">
<title>MyFirstss頁面</title>
<!--規範，<style>可以編寫css的代碼，每一個聲明，最好使用分號隔開
語法：
選擇器{
聲明1；
聲明2；
聲明3；
}
-->
<!-- 方式二：外部樣式-->
<link rel="stylesheet" href="../css/style.css">
<!-- 方式三：內部樣式 -->
<style>
h1{
color: aqua;
}
</style>
</head>
<body>
<!--優先順序：就近原則：若沒寫方式一，則方式二和方式三誰離h1最近就採用誰的樣式-->
<!--方式一：行內樣式：在標簽元素中，編寫一個style屬性，編寫樣式即可-->
<h1 style="color: red">TWQ標題</h1>
</body>
二、選擇器
1.基本選擇器
(1)標簽選擇器
(2)類 選擇器 class
點擊查看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*類選擇器的格式：.class的名稱{}
好處：可以多個標簽歸類，是同一個class，可以復用*/
.title1{
color: aqua;
}
.title2{
color: red;
}
</style>
</head>
<body>
<h1 class="title1">我是標t</h1>
<h1 class="title2">我是標t</h1>
<!-- 由於p標簽的class名和標題1的class名相同，因此會有相同的樣式-->
<p class="title1">我是段落</p>
</body>
</html>
(3)id 選擇器 class
點擊查看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
id選擇器：id必須要保證全局唯一
#id名稱{}
優先順序：不遵循就近原則，固定的
id選擇器 > class選擇器 > 標簽選擇器
-->
<style>
#title3{
color: aqua;
}
.title1{
color: red;
}
.title2{
color: green;
}
h1{
color: yellow;
}
</style>
</head>
<body>
<h1 class="title1" id="title3">標題2</h1>
<h1 class="title2">標題3</h1>
<h1>標題1</h1>
</body>
</html>
2.高級選擇器
(1)層次選擇器
①後代選擇器
點擊查看代碼
<style>
body p{
background: green;
}
</style>
②子代選擇器 一代 兒子
點擊查看代碼
body>p{
background: aqua;
}
③相鄰兄弟選擇器
作用於相鄰兄弟，只有一個（向下）點擊查看代碼
.twq +P{
background: red;
}
④通用選擇器
作用於當前選中元素向下的所有兄弟元素點擊查看代碼
.twq~p{
background: yellow;
}
運行結果圖
(2)結構 偽類選擇器
點擊查看代碼
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*ul中的第一個子元素*/
ul li:first-child{
background: yellow;
}
/*ul中的最後一個子元素*/
ul li:last-child{
background: red;
}
/*選中p1:定位到父元素，選擇當前的第一個元素
選擇當前p元素的父級元素，當選中父級元素的第一個時，只有第一個元素是p標簽類型時才會生效
*/
p:nth-child(2){
background: aqua;
}
/*選中父元素，下的p元素的第二個，類型*/
p:nth-of-type(1){
background: green;
}
/*當滑鼠放到該標簽上時可以讓其背景顏色變成黑色*/
a:hover{
background: black;
}
</style>
</head>
<body>
<a href="">123</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
