HTML基礎之CSS
阿新 • • 發佈：2020-06-27
使用CSS的三種方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 寫CSS第二種方式：在head中定義style標籤，在style標籤內部通過選擇器來為目標標籤配置css樣式-->
<style>
/*1、id選擇器,使用#id{}樣式*/
#i1{
background-color: blue;
height: 100px;
width: 100px;
}
</style>
<!-- 寫CSS第三種方式：引入css檔案，檔案內容為：選擇器{樣式表},通過link標籤在head中引入CSS檔案,href傳入檔名-->
<!-- demo.css檔案內容：-->
<!-- #i2{-->
<!-- background-color: green;-->
<!-- height: 100px;-->
<!-- width: 100px;-->
<!--}-->
<link rel="stylesheet" href="demo.css">
</head>
<body>
<!-- 寫CSS第一種方式：在標籤style屬性中寫，多個樣式使用分號分隔-->
<div style="background-color: red;height:100px;width:100px;">背景色</div>
<div id="i1">背景色1</div>
<div id="i2">背景色2</div>
</body>
CSS優先順序：使用同一個id 對應不同的背景色，然後採用上面三種方式來測試CSS優先順序
結論：標籤中的style優先順序最高，然後從下往上，距離目標標籤越近優先順序越高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1、id選擇器,使用#id{}樣式*/
#i1{
background-color: blue;
height: 100px;
width: 100px;
}
</style>
<!-- demo.css檔案內容：-->
<!-- #i1{-->
<!-- background-color: green;-->
<!-- height: 100px;-->
<!-- width: 100px;-->
<!--}-->
<link rel="stylesheet" href="demo.css">
</head>
<body>
id與class區別：
由於id只能在一個標籤中使用，多個標籤不能使用同一個id，但是能共用同一個class
選擇器：
id選擇器（#）
class選擇器（.）
標籤選擇器
層級選擇器（空格）
組合選擇器（逗號）
屬性選擇器（中括號）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 選擇器-->
<style>
/*id選擇器*/
#i1{
background-color: green;
width: 100px;
height: 100px;
}
/*#class選擇器*/
.c1{
background-color: blue;
width: 100px;
height: 100px;
}
/*標籤選擇器*/
span{
background-color: green;
}
/* 層級選擇器 組合選擇器 span標籤下面所有div標籤顏色改變 層級通過空格*/
span div {
color: aqua;
background-color: red;
}
/* class 層級選擇器 層級通過空格*/
.d1 div {
background-color: #336699;
height: 48px;
}
/* id 層級選擇器 層級通過空格*/
#i2 div {
background-color: black;
height: 48px;
}
/* 組合選擇器 id z1 z2 z3 共用一套css樣式 組合 通過逗號*/
#z1, #z2, #z3 {
background-color: chocolate;
height: 48px;
}
/* 組合選擇器 class s1 s2 s3 共用一套css樣式 組合 通過逗號*/
.s1, .s2, .s3 {
background-color: darkmagenta;
height: 48px;
}
/* 屬性選擇器 對選擇到的標籤 在通過屬性進行篩選 可以和層級選擇器連用*/
div[s='dsx'] {
background-color: darkred;
height: 48px;
}
/*寫一個不同顏色 相同寬高的正方形*/
.wh{
width: 100px;
height: 100px;
}
.bc-1{
background-color: red;
}
.bc-2{
background-color: blue;
}
</style>
</head>
<body>
<!-- id選擇器-->
<div id="i1"></div>
<!--class選擇器-->
<div class="c1"></div>
<!-- 標籤選擇器-->
<!-- 所有的span都是綠色-->
<span>我是標籤選擇器</span>
<!-- 層級選擇器 組合標籤選擇器 -->
<span>
<div>組合標籤選擇器</div>
</span>
<!--層級選擇器 class選擇器下的div標籤 -->
<div class="d1">
<div></div>
</div>
<!--層級選擇器 id選擇器下的div標籤-->
<div id="i2">
<div></div>
</div>
<!-- id組合選擇器 -->
<div id="z1"></div>
<div id="z2"></div>
<div id="z3"></div>
<!-- class組合選擇器 -->
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<!-- 屬性選擇器 -->
<div s="dsx">我是屬性選擇器</div>
<div name="nn">我不是屬性選擇器</div>
<!--寫一個不同顏色 相同寬高的正方形-->
<!-- class中可以運用多個css樣式，使用空格分割-->
<div class="wh bc-1"></div>
<div class="wh bc-2"></div>
</body>