Web程序設(shè)計-2

ID:40228176

大?。?99.92 KB

頁數(shù):28頁

時間:2019-07-27

Web程序設(shè)計-2_第1頁
Web程序設(shè)計-2_第2頁
Web程序設(shè)計-2_第3頁
Web程序設(shè)計-2_第4頁
Web程序設(shè)計-2_第5頁
資源描述:

《Web程序設(shè)計-2》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、內(nèi)容和呈現(xiàn)的分離-CSS樣式CSS基礎(chǔ)知識以下是樣式的一個例子:p{color:red;font-size:1.5em}以上的樣式告訴瀏覽器:讓頁面上所有段落中的文本(位于p的開閉標(biāo)簽之間),字體變?yōu)榧t色,字號為1.5em高。CSS基礎(chǔ)知識讓我們來分析下以上樣式的組成:p{color:red;font-size:1.5em}選擇器樣式聲明樣式聲明樣式聲明塊屬性屬性值值CSS基礎(chǔ)知識從圖示中可以看出,一個樣式由兩個主要部分組成:1、選擇器選擇起用來告訴瀏覽器:需要對網(wǎng)頁上哪個或者哪些元素應(yīng)用樣式。2、聲明塊聲明塊用一對{}包含,其中列出了用來給選擇器所指定的元素

2、定義樣式的樣式指令。聲明塊由多個聲明構(gòu)成,聲明和聲明之間用;分隔開。每一個聲明又包括兩個部分:屬性和值。屬性即CSS提供的格式化選項。如font-size,對字號進行格式化。需要通過對CSS屬性賦值,從而使頁面上的元素應(yīng)用呈現(xiàn)多彩的樣式。CSS基礎(chǔ)知識在頁面中使用樣式可以有三種方式:內(nèi)部樣式、行內(nèi)樣式和外部樣式。大多數(shù)情況下,建議使用外部樣式。外部樣式使得頁面的呈現(xiàn)就如同衣服一樣。使用不同的樣式表,會得到風(fēng)格迥異的頁面效果。同時,外部樣式表利于瀏覽器打開網(wǎng)頁。使用外部樣式表的頁面可以只包含基本的HTML。此外瀏覽器下載一個外部樣式表后,會在訪問者的計算機上緩存

3、。CSS基礎(chǔ)知識1、內(nèi)部樣式表內(nèi)部樣式表總是處在網(wǎng)頁的元素部分。由head元素的style子元素定義。如;p{color:red;font-size:1.5em;}h1{color:#ff7643;font:Arial;}CSS基礎(chǔ)知識內(nèi)部樣式表易于被添加到頁面上,并給HTML提供了一個即時的視覺呈現(xiàn)。但不適合用來設(shè)計包含多頁面的整個網(wǎng)站的樣式。一方面,需要將內(nèi)部樣式復(fù)制到網(wǎng)站的每一個頁面,這是一項費時的瑣事,同時給頁面增加了占用帶寬的代碼。另一方面,當(dāng)需要更新網(wǎng)站的效果時,使用內(nèi)部樣式必

4、須編輯每一張網(wǎng)頁。以上兩個缺點都可以通過使用外部樣式表克服。CSS基礎(chǔ)知識2、行內(nèi)樣式行內(nèi)樣式通常是把樣式塊寫在元素開標(biāo)簽的style屬性中,作為style元素的值。不需要再寫選擇器,也不需要{}來把樣式塊括起來。它表示只對當(dāng)前所在的元素應(yīng)用樣式。……

*如果使用選擇器p則表示對樣式所作用的網(wǎng)頁中的所有p元素而行內(nèi)樣式只作用于當(dāng)前p元素。行內(nèi)樣式的優(yōu)先級最高。CSS基礎(chǔ)知識3、外部樣式表外部樣式表是只包含所有CSS規(guī)則的一個文本文件。它總是以.css作為擴展名。如一般可以用glob

5、al.css表示該網(wǎng)站的每一張頁面都會用到的一個樣式表。可以把內(nèi)部樣式style元素中的內(nèi)容復(fù)制到一個單獨的css文件中(不包括style標(biāo)簽本身),從而創(chuàng)建該內(nèi)部樣式等價的外部樣式。(通常開發(fā)時也是先把樣式寫在內(nèi)部,最后整理到外部樣式中)一旦創(chuàng)建了一個外部樣式表,就必須將它和想要進行格式設(shè)置的網(wǎng)頁關(guān)聯(lián)起來。這可以經(jīng)由link元素或css自己的@import指令來達成。CSS基礎(chǔ)知識使用HTML鏈接一個樣式表:使用css的@import指令:

6、xt/css”>@importurl(“css文件路徑”)如果一個頁面使用多個樣式表,可以通過使用多個link元素或@import指令來完成CSS基礎(chǔ)知識使用練習(xí)文件basic.html和linked_page.html練習(xí)創(chuàng)建行內(nèi)樣式,內(nèi)部樣式表,以及外部樣式表CSS基礎(chǔ)知識選擇器基礎(chǔ)選擇器用來告訴瀏覽器對誰應(yīng)用樣式。1、標(biāo)簽選擇器直接使用HTML標(biāo)簽作為選擇器,其含義即給頁面上所有由這個標(biāo)簽所定義的元素應(yīng)用標(biāo)簽選擇器后樣式塊中的樣式。eg:觀察global.css中標(biāo)簽選擇器h2對linked_page.html頁中所有h2元素的影響,p標(biāo)

7、簽選擇器對linked_page.html中所有p元素的影響問題:如果很多段落中有一個段落要設(shè)置和其他段落不同的特殊格式怎么辦?CSS基礎(chǔ)知識2、類選擇器.類名類選擇器通常與元素的class屬性配合,當(dāng)二者吻合時類選擇器后緊跟的樣式塊就用來給關(guān)聯(lián)的元素設(shè)置樣式。3、ID選擇器#ID名ID選擇器通常與元素的id屬性配合,由于id屬性值在文檔中的唯一性,因此ID選擇器用于對網(wǎng)頁上只出現(xiàn)一次的部分設(shè)定樣式。CSS基礎(chǔ)知識4、派生選擇器派生選擇器用來定位出現(xiàn)在其他標(biāo)簽或者樣式內(nèi)部的標(biāo)簽設(shè)置樣式。eg:h1strong{color:red;}其含義是只有出現(xiàn)在h1元素內(nèi)

8、部的strong元素,才設(shè)置其字體顏色

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動畫的文件,查看預(yù)覽時可能會顯示錯亂或異常,文件下載后無此問題,請放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫負責(zé)整理代發(fā)布。如果您對本文檔版權(quán)有爭議請及時聯(lián)系客服。
3. 下載前請仔細閱讀文檔內(nèi)容,確認文檔內(nèi)容符合您的需求后進行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時可能由于網(wǎng)絡(luò)波動等原因無法下載或下載錯誤,付費完成后未能成功下載的用戶請聯(lián)系客服處理。
关闭