在網頁中，CSS是用來定義網頁樣式的一種語言。CSS的樣式定義可以在HTML中直接通過style屬性進行寫入，也可以在外置樣式表文件中定義，文件后綴為.css。當網頁被瀏覽器加載后，在渲染HTML文檔時，瀏覽器將同時解析CSS文件，將其中的樣式應用于HTML元素上。
假設我們有一個簡單的網頁結構：
<html> <head> <title>我的網頁</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>歡迎來到我的網頁！</h1> <p>這是我的第一篇博客。</p> <div id="content"> <p>這是我的第一篇博客正文內容。</p> </div> </body> </html>
在上面的HTML代碼中，我們引用了一個名為“style.css”的文件作為網頁的樣式文件。在style.css中，可以定義如下的CSS樣式：
h1 {
color: red;
}
p {
font-size: 16px;
line-height: 1.5;
}
#content p {
font-weight: bold;
color: blue;
}在使用CSS樣式時，我們需要遵循一些規則，例如：
- 選擇器用來指定要應用樣式的HTML元素，比如h1和p。
- 屬性用來定義元素的外觀，比如color、font-size、line-height和font-weight。
- 值用來定義屬性的具體取值，比如red、16px、1.5和bold。
- 多個屬性之間用分號隔開，而多個選擇器之間則用逗號隔開。
- 使用“#”符號可以指定ID選擇器，使用“.”符號可以指定類選擇器。
當瀏覽器解析CSS文件時，它會通過選擇器來匹配HTML元素，然后將定義的樣式應用到匹配的元素上。例如，當瀏覽器解析上面的CSS樣式文件時，它會將h1元素的字體顏色設置為紅色，將p元素的字體大小設置為16像素，行高設置為1.5倍，將#content內的所有p元素設置為粗體并且字體顏色為藍色。
通過CSS樣式文件，我們可以快速地改變網頁的外觀，讓網頁更加美觀。當我們需要修改網頁樣式時，只需要修改CSS文件即可，而不需要修改HTML文件本身，從而讓我們的工作更加高效。
上一篇css元素轉動
下一篇css元素放在最右邊