在CSS中,我們可以通過多種方式定義樣式規則,如內聯樣式、內部樣式和外部樣式表。其中,內部樣式和外部樣式表最為常用,下面我們就介紹一下這兩種樣式規則的定義方法。
內部樣式:內部樣式通常可以在標簽中使用
標簽來定義,其基本格式如下:
<style> 選擇器 { 屬性1: 值1; 屬性2: 值2; ... } </style>
其中,選擇器用于指定需要應用該規則的HTML元素,屬性/值對用于定義該元素的樣式。可以通過選擇元素的標簽名、id、類名或屬性進行選擇。
例如:
<style> h1 { color: red; font-size: 24px; } .intro { font-weight: bold; } </style>
上面的代碼給所有元素設置了紅色字體和24像素的字號,以及所有
class
為intro
的元素設置了加粗的字體。
外部樣式表:當我們需要在多個頁面中使用相同的樣式規則時,可以使用外部樣式表。我們只需在一個文件中定義樣式規則,然后在需要應用該規則的HTML頁面中引入該文件即可。
外部樣式表的文件擴展名為.css
,其格式如下:
/* 這是注釋 */ 選擇器 { 屬性1: 值1; 屬性2: 值2; ... }
同樣,選擇器用于指定需要應用該規則的HTML元素,屬性/值對用于定義該元素的樣式。多個樣式規則之間可以用注釋進行區分。
例如:
/* test.css */ h1 { color: red; font-size: 24px; } .intro { font-weight: bold; }
<!-- index.html --> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="test.css"> </head> <body> <h1>Welcome</h1> <p class="intro">This is a test page.</p> </body> </html>
上面的代碼中,test.css
文件定義了兩個樣式規則,index.html
頁面通過標簽引入了該文件,并在
標簽和
標簽中應用了相應的樣式規則。