第2課 CSS的工作原理

2022-03-22 13:23:32 字數 2186 閱讀 1597

在這一課,你將學習如何製作自己的第乙個樣式表。你將了解基本的css模型,以及在html文件裡使用css所必需的**。

級聯樣式表(css)裡用到的許多css屬性都與html屬性相似,所以,假如你熟悉採用html進行布局的話,那麼這裡的許多**你都不會感到陌 生。我們先來看乙個具體的例子。

比方說,我們要用紅色作為網頁的背景色:

html的話,我們可以這樣:

css的話,我們可以這樣獲得同樣的效果:

body

你會注意到,html和css的**頗有幾分相似。上例也向你展示了基本的css模型:

但是把css**放在**呢?這正是我們下面要講的。

為html文件應用css,有三種方法可供選擇。下面對這三種方法進行了概括。我們建議你對第三種方法(即外部樣式表)予以關注。

為html應用css的一種方法是使用html屬性style。我們在上例的基礎之上,通過行內樣式表將頁面背景設為紅 色:

這個頁面是紅色的

為html應用css的另一種方法是採用html元素style。比如像這樣:

這個頁面是紅色的

我們推薦採用這種引用外部樣式表的方法。在本教程之後的例子中,我們將全部採用該方法。

外部樣式表就是乙個擴充套件名為css的文字檔案。跟其他檔案一樣,你可以把樣式表檔案放在web伺服器上或者本地 硬碟上。

例如,比方說你的樣式表檔名為style.css,它通常被存放於名為style的 目錄中。就像下面這樣:

注意要在href屬性裡給出樣式表檔案的位址。

這行**必須被插入html**的頭部(header),即放在標籤之 間。就像這樣:

...

這個鏈結告訴瀏覽器:在顯示該html檔案時,應使用給出的css檔案進行布局。

這種方法的優越之處在於:多個html文件可以同時引用一 個樣式表。換句話說,可以用乙個css檔案來控制多個html文件的布局。

這一方法可以令你省去許多任務作。例如,假設你要修改某**的所有網頁(比方說有100個網頁)的背景顏色,採用外部樣式表可以避免你手工一一修改這 100個html文件的工作。採用外部樣式表,這樣的修改只需幾秒鐘即可搞定——修改外部樣式表檔案裡的**即可。

讓我們來實踐剛剛所學到的知識。

body

然後,把這兩個檔案放在同一目錄下。記得在儲存檔案時使用正確的副檔名(分別為「htm」和「css」)。

用瀏覽器開啟default.htm,你所看到的頁面應該具有紅色背景。恭喜!你已經完成了自己的第乙個樣式 表!

CSS工作原理

當乙個瀏覽器在顯示文件的時候,需要將文件內容和樣式內容結合到一起,以此在 處理文件的時候包含兩個階段 1 瀏覽器將html和css裝換為dom document object model dom在計算機內 存中表示文件,使得文件和css結合。2 瀏覽器顯示dom的內容。這也可解釋在編譯css採用外部...

css讀書筆記2 css工作原理

css就是一種先選擇html元素,然後設定選中元素css屬性的機制。css選擇符合要應用的樣式構成一條css規則。1.行內樣式,直接寫在特定標籤的style屬性中 2.嵌入樣式,在head元素中嵌入,將css規則放入中 3.鏈結樣式,在元素中使用外部的樣式表,如 3種css樣式的優先順序 行內樣式 ...

Hadoop的使用(第2課)

前言 在第1課,我們已經成功安裝了 hadoop 下面來測試一下 hadoop 統計分析資料的功能。1 在 home sa file下面分別建立 file1.txt 和 file2.txt 兩個檔案 file1.txt 的內容 what s your name my name is li mingf...