CSS CSS簡述 CSS是什麼？有什麼作用？ CSS(Cascading Style Sheets)：層疊樣式表。 CSS通常稱為CSS樣式或層疊樣式表。主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬度、邊框樣式、邊距等）以及版式的佈局等外觀顯示樣式。 CSS可以使 ...
CSS
CSS簡述
CSS是什麼？有什麼作用？
CSS(Cascading Style Sheets)：層疊樣式表。CSS通常稱為CSS樣式或層疊樣式表。主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬度、邊框樣式、邊距等）以及版式的佈局等外觀顯示樣式。
CSS可以使HTML頁面更好看，CSS色系的搭配可以讓用戶更舒服，CSS+DIV佈局更加靈活，更容易繪製出用戶需要的結構。
CSS的代碼規範
- 放置規範
在<style>標簽內容體中書寫CSS樣式代碼，<style>標簽放置在標簽中。 格式規範
選擇器名稱 {屬性名:屬性值; 屬性名:屬性值;......}選擇器：即指定CSS樣式作用在哪些HTML標簽上。
代碼規範
- 屬性名和屬性值之間是鍵值對關係。
- 屬性名和屬性值之間用”:“連接，最後”;“結尾。（例如：font-size:10px）
- 如果一個屬性名有多個值，多個值之間用空格隔開。（例如：border:5px solid red;）
- CSS註釋：/*註釋內容*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span{
font-size:120px;
color:red;
border:1px solid blue;
}
</style>
</head>
<body>
<span>111</span>
<span>222</span>
</body>
</html>CSS選擇器
基本選擇器
元素選擇器
HTML標簽又名HTML元素。
元素選擇器：即以HTML標簽名作為選擇器名稱。
作用：選擇CSS樣式代碼，作用於對應標簽上。- 格式
標簽名{ /*CSS樣式代碼*/ } - 適用範圍：適用於將相同樣式作用在多個同名標簽上。
- 格式
類選擇器
每個HTML標簽都有一個class屬性，class屬性值即為類名。
類選擇器：即以HTML的類名（class屬性值）作為選擇器名稱。
作用：選擇CSS樣式作為代碼，作用於對應類名的HTML標簽上。- 格式：
.類名{ /*CSS樣式代碼*/ } - 使用範圍：適用於將樣式一次作用在相同類名的標簽上。
- 格式：
id選擇器
每個HTML標簽都有一個id屬性，id的屬性值必須在本頁面是唯一的。
id選擇器：即以HTML的id（id屬性值）作為選擇器名稱。
作用：選擇器CSS樣式代碼，作用於某個規定id值的HTML標簽上。- 格式：
#id值{ /*CSS樣式代碼*/ }
*適用範圍：適用於將樣式作用在某個標簽上（更有針對性）。
- 格式：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
span{
color:blue;
}
.div1{
border:1px solid red;
background-color:yellow;
}
#div2{
border:1px solid black;
background-color:green;
}
</style>
</head>
<body>
<span>行內標簽<span>
<div class="div1">塊級標簽1<div>
<div id="div2">塊級標簽2<div >
</body>
</html>基本選擇器的組合方式
層級關係
標簽和標簽之間有層級關係，例如<html>標簽中的子標簽為<body>標簽。
我們可以對基本選擇器進行組合，表現出層級關係，從而更加針對性地把樣式作用於某些標簽上。- 格式：
選擇器1 選擇器2 ......{ /*CSS樣式代碼*/ }
- 格式：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div font{
color:red;
}
</style>
</head>
<body>
<div>
<font>我想火</font>
</div>
<font>我想火火不了</font>
</body>
</html>CSS樣式
邊框屬性
border
設置邊框的樣式- 格式：寬度 樣式 顏色。
（例如：1px solid red -> 1像素粗 實線 紅色邊框）
- 格式：寬度 樣式 顏色。
- width
用於設置標簽的寬度。 - height
用於設置標簽的高度。 background-color
用於設置標簽的背景顏色。- 背景顏色設置的兩種主流方式：
1.英文單詞->例如：red;blue。yellow;
2.顏色代碼->例如：#fff。(格式：#紅綠藍，每個顏色用兩個16進位位數表示)
- 背景顏色設置的兩種主流方式：
佈局
float
通常預設的排版方式，將頁面中的元素從上到下一一羅列，而實際開發中，需要左右方向式進行排版，就需要使用浮動屬性。- 格式：
選擇器{float:屬性值;} - 常用屬性值：
none:元素不浮動（預設值）。
left：元素向左浮動。
right：元素向右浮動。
- 格式：
註意事項：因為元素設置浮動屬性後，會脫離原有文檔流（會脫離原有的版式），從而會影響其他元素的樣式，所以設置浮動後，頁面樣式需要重新調整。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#d1{
background-color:red;
width:100px;
height:100px;
float:left;
}
#d2{
background-color:green;
width:110px;
height:110px;
float:left;
}
#d3{
background-color:blue;
width:120px;
height:120px;
float:left;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
