前端基礎-CSS層疊樣式表
阿新 • • 發佈：2021-08-17
CSS
CSS被用來同時控制多重網頁的樣式和佈局。
通過使用 CSS，所有的格式化均可從 HTML 中剝離出來，並存儲於一個獨立的檔案中。
CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>標題</title> <style> body { background-color:#d0e4fe; } h1 //h1是選擇器 { //大括號裡是一條或多條宣告 color:orange; //每一條宣告由屬性和值組成 ：分開 text-align:center; } p { font-family:"Times New Roman"; font-size:20px; } </style> //style元素在head元素裡 </head> <body> <h1>CSS 例項!</h1> <p>這是一個段落。</p> </body> </html>
1.語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條宣告:
選擇器通常是您需要改變樣式的 HTML 元素。
每條宣告由一個屬性和一個值組成。
屬性（property）是您希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
css中，也就是<style>中，註釋是 /* */
2.id選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設定id選擇器,CSS 中 id 選擇器以 "#" 來定義。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>標題</title> <style> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>這個段落不受該樣式的影響。</p> </body> </html>
不要以數字開頭
3.class選擇器
class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>標題</title> <style> .center { text-align:center; } </style> </head> <body> <h1 class="center">標題居中</h1> <p class="center">段落居中。</p> </body> </html>
你也可以指定特定的HTML元素使用class。比如p.center 就只有標了類屬性的段落起作用
4.如何建立
（1）內聯模式
<p style="color:sienna;margin-left:20px">這是一個段落。</p>
(2) 內部樣式表
上面的示例都是，<head>裡的<style>
（3）外部樣式表
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。可以通過改變一個檔案來改變整個站點的外觀。
使用 <link> 標籤連結到樣式表。
html中：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
css：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}