CSS樣式規則和加載方式 · Web前端(打印用)

### CSS樣式規則 CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明: ![](https://box.kancloud.cn/2b07a7a024f4c1fd23db0c07d6119ea5_569x119.png) 選擇器通常是您需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成。屬性（property）希望設置的樣式屬性（style attribute）。 ### CSS加載的方式 **1.引入外部文件** ```html <link href="outer.css" rel="stylesheet" type="text/css"></link> ``` HTML文檔中使用`<link>`元素引入外部樣式文件，引入外部樣式文件應在`<head>`元素中增加`<link>`子元素。 **2.導入外部樣式單** ```html <style type="text/css"> @import "../outer.css"; @import url('outer.css'); </style> ``` 導入外部樣式表單需要在`<style>`元素中執行`@import`進行導入。 **3.使用內部CSS樣式** 一般來說我們不建議使用內部 CSS 樣式： * 復用性小。 * 導致HTML文檔過大，會導致網絡負載嚴重。 * 修改整站風格時，需要對每個網頁文件進行樣式修改。 ```html <style type="text/css"> 樣式單文件定義 </style> ``` **4.使用內聯CSS樣式** 內聯樣式只對單個標簽有效，不會影響整個文件。在 HTML 元素中使用 style 屬性定義內聯樣式。 ```html <div style="property1:value1;property2:value2;"/> ```