试玩app平台

書名： Python高效開發(fā)實戰(zhàn)：Django、Tornado、Flask、Twisted（第3版）
作者名：劉長龍
本章字數(shù)： 1416字
更新時間： 2021-10-15 17:52:55

3.2　CSS

CSS（Cascading Style Sheet，層疊樣式表）是一種用來表現(xiàn)HTML等文件的顯示樣式的語言。通過CSS可以將頁面子元素與顯示效果分離，提高頁面的可復用性和可維護性。樣式使用屬性鍵值對的方式工作。CSS預定義了一系列的屬性鍵，開發(fā)者可以設置這些屬性的值以實現(xiàn)對頁面顯示的控制。

本書不提供CSS的完整參考，僅帶領讀者學習CSS的核心語法和作用，使讀者能夠讀懂CSS代碼，并具備掌握本書實戰(zhàn)部分內(nèi)容的能力。

3.2.1　樣式聲明方式

當瀏覽器解析顯示HTML頁面時，將使用4種樣式渲染頁面元素，按照優(yōu)先級由高到低分別為：元素內(nèi)聯(lián)樣式、頁面<head>中的內(nèi)聯(lián)樣式、外聯(lián)樣式、瀏覽器默認樣式。每個瀏覽器的默認樣式都不相同，且開發(fā)者無須關心，所以下面只講解前3種樣式的設置方法。

1. 元素內(nèi)聯(lián)樣式

通過向HTML元素提供style屬性的值，可以直接設置元素的內(nèi)聯(lián)樣式，比如：

本例中設置了樣式顏色（color）和左邊距（margin-left）。在一個style中可以設置多個樣式屬性，多個樣式之間以分號分隔，每個樣式通過冒號分隔鍵和值。

2. 頁面<head>中的內(nèi)聯(lián)樣式

【示例3-6】<head>中的樣式通過<style type="text/css">標簽實現(xiàn)，其中的樣式將在整個頁面中有效，比如：

3. 外聯(lián)樣式

外聯(lián)樣式是指把CSS數(shù)據(jù)放入一個單獨的文件中，在HTML中通過<link rel="stylesheet" type="text/css" >標簽引用該文件，比如：

外部樣式文件一般以*.css命名，其內(nèi)容與<head>中的內(nèi)聯(lián)樣式一樣，由選擇器和樣式組成。

不同樣式的表達方式之間的優(yōu)先級不同，當不同的樣式之間的設置發(fā)生沖突時（比如都設置了字體顏色，但是外聯(lián)樣式設置為紅色，內(nèi)聯(lián)樣式設置為綠色），首先以元素內(nèi)聯(lián)樣式為準，其次為頁面<head>中的內(nèi)聯(lián)樣式，再次為外聯(lián)樣式，最后為瀏覽器默認樣式。

3.2.2　CSS語法

樣式文件的語法規(guī)則很簡單，由選擇器和樣式屬性組成，即：

每個文件可以有若干條這樣的配置。選擇器用于指定要設置的HTML元素，CSS中基本的選擇器有4種，如表3.3所示。

表3.3　CSS中基本的選擇器

除了基本的選擇器，CSS還允許設置選擇器的組合，如表3.4所示。

表3.4　選擇器的組合

除了上述兩個表中的選擇器，CSS 2和CSS 3還規(guī)范了更豐富的選擇器，如屬性選擇器、鏈接已點擊選擇器等，開發(fā)者可以查閱相關資料。

【示例3-7】綜合運用兩個表中的選擇器的CSS示例如下：

將該CSS代碼保存為mysheet.css文件，編寫如下HTML代碼來應用該外聯(lián)樣式：

打開該HTML文件，瀏覽器的渲染效果如圖3.10所示。

圖3.10　瀏覽器的渲染效果

3.2.3　基于CSS+DIV的頁面布局

標簽<div>是HTML用于頁面分組的塊元素，是專門用來實現(xiàn)元素布局的標簽。通過用CSS設置<div>的一系列顯示屬性，可以很好地設計網(wǎng)頁的整體效果。CSS中與布局有關的常用屬性如表3.5所示。

表3.5　CSS中與布局有關的常用屬性

【示例3-8】應用表3.5中的屬性用CSS+DIV的布局示例如下：

為了能夠看清HTML塊劃分的結(jié)構，代碼中用background-color設置了3個塊的背景顏色，瀏覽器的顯示效果如圖3.11所示。對本例代碼的解析如下。

? 用標簽的class屬性連接HTML標簽和CSS設置。頁面的body部分由3個塊組成：container、leftframe、rightframe，其中container是另外兩個塊的父塊。

? 類container的CSS中用百分比的方法設置了塊的寬和高，百分比是相對于瀏覽器的可顯示區(qū)域而言的。

? 類leftframe用像素值的方法設置了高度，用百分比的方法設置了寬度。注意，這里的百分比是相對于其父塊的大小而言的。

? rightframe中除了設置了長和寬，還設置了塊的margin和padding。10像素的margin使得rightframe沒有緊挨著leftframe，并且在rightframe的上下左右都出現(xiàn)了相應的留白。

? 雖然leftframe和rightframe的高度都是200px，但rightframe中的50像素padding使得塊的高度明顯高于leftframe。雖然此時塊的實際高度是50px（上邊padding）+200px（塊高度）+50px（下邊padding）=300px，但其內(nèi)容只顯示在中間的區(qū)域。

圖3.11　CSS+DIV布局顯示效果

官术网_书友最值得收藏!

Python高效開發(fā)實戰(zhàn)：Django、Tornado、Flask、Twisted（第3版）

3.2 CSS

3.2.1 樣式聲明方式

3.2.2 CSS語法

3.2.3 基于CSS+DIV的頁面布局

3.2　CSS

3.2.1　樣式聲明方式

3.2.2　CSS語法

3.2.3　基于CSS+DIV的頁面布局