- CSS3藝術：網頁設計案例實戰
- 張偶
- 856字
- 2020-04-29 16:20:31
1.2 在頁面中應用CSS
網頁中書寫CSS代碼的方法有以下3種。
1.2.1 內聯樣式
第1種方法稱為“內聯樣式”，它把樣式屬性寫在HTML標簽的style屬性里，也是“內聯”這個詞的含義。
例1-1 用CSS內聯樣式繪制圖1-1所示的字母i。
圖1-1
容器<figure>中包含兩個子元素：第1個<div>繪制一個橙色的圓形；第2個<div>繪制一個豎著的黃色矩形。
X:\實例代碼\第1章\demo-1-01.html
<figure>
<div style="width: 50px; height: 50px; background-color: orange; border-radius: 50%;
margin-bottom: 10px;"></div>
<div style="width: 50px; height: 100px; background-color: gold; border-radius: 10px;">
</div>
</figure>
這種方法的優點是不用定義選擇器（下一節會講到），但缺點是各元素的樣式分散在整個HTML文檔中，不方便集中管理，每個元素的樣式也不能太復雜，否則寫起來就很不方便了。這種方法我們不推薦。
1.2.2 style元素
第2種方法稱為“style元素”，它把網頁中所有元素的樣式都集中寫到一個名為<style>的標簽里，放在頁面的DOM結構之前。因為樣式不是寫在元素的屬性里，為了區分不同元素的樣式，就要分別為各元素指定名字，然后在<style>標簽里按元素的名稱逐個書寫樣式。
例1-2 用“style元素”法繪制圖1-1所示的字母i。
本例是對例1-1的重構。元素的class="div1"和class="div2"屬性定義了這兩個子元素的類名為div1和div2，然后在<style>中用.div1和.div2來引用它們。
X:\實例代碼\第1章\demo-1-02.html
<!DOCTYPE html>
<head>
<title>Document</title>
<style>
.div1 {
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
margin-bottom: 10px;
}
.div2 {
width: 50px;
height: 100px;
background-color: gold;
border-radius: 10px;
}
</style>
</head>
<body>
<figure>
<div class="div1"></div>
<div class="div2"></div>
</figure>
</body>
</html>
1.2.3 link標記
第3種方法稱為“link標記”，它在第2種方法的基礎上，把<style>標簽的內容單獨存放到擴展名為.css的文件中，然后在HTML文件中用<link rel="stylesheet" href="file-name.css">標記導入這個CSS文件。
例1-3 用“link標記”法繪制圖1-1所示的字母i。
例1-3是對例1-2的進一步重構，從1個HTML文件又分拆出了一個CSS文件，然后用<link>標記把它們關聯起來。
DOM結構如下。
X:\實例代碼\第1章\demo-1-03.html
<!DOCTYPE html>
<head>
<title>Document</title>
<link rel="stylesheet" href="demo-1-03.css">
</head>
<body>
<figure>
<div class="div1"></div>
<div class="div2"></div>
</figure>
</body>
</html>
CSS結構如下。
X:\實例代碼\第1章\demo-1-03.css
.div1 {
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
margin-bottom: 10px;
}
.div2 {
width: 50px;
height: 100px;
background-color: gold;
border-radius: 10px;
}
這種方法的好處是，從物理上分離了結構和樣式，HTML文件中只存儲文檔的DOM結構，CSS文件中只存儲樣式。在商業應用中多用這種方式，因為多個HTML文件可以引用同一個樣式表文件，達到復用的目的，節省開發和維護成本。
本書的示例有兩種：一種是伴隨理論知識部分的示例，因為示例的數量較多，為了避免文件太多，這種示例均采用第2種“style元素”方法，把頁面結構和樣式寫在一個文件中；另一種是項目實戰，樣式的代碼量大一些，項目也更正式一些，這種示例采用第3種“link標記”方法。