CSS層疊樣式表(基礎(chǔ)篇)

《CSS層疊樣式表(基礎(chǔ)篇)》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、第一章CSS層疊樣式表（基礎(chǔ)篇）就是“層疊樣式表”。將CSS引入到網(wǎng)頁中是網(wǎng)頁編輯的一大革命吧~通過設(shè)置CSS，我們可以隨意地控制網(wǎng)頁中字體的大小、顏色等，便于統(tǒng)一網(wǎng)站的整體風(fēng)格；可以方便地為網(wǎng)頁中的各個元素設(shè)置背景顏色和圖片并進(jìn)行精確的定位控制；可以為網(wǎng)頁中的元素設(shè)置各種濾鏡，從而產(chǎn)生諸如陰影、輝光、模糊等只有在圖象處理軟件中才能實現(xiàn)的效果；可以與腳本語言相結(jié)核，在網(wǎng)頁中實現(xiàn)很多動態(tài)濾鏡效果。下面我們就來詳細(xì)說明CSS的語法和在網(wǎng)頁中的編輯。由于這篇內(nèi)容較多，就分為兩篇講解。本篇的主要內(nèi)容是：CSS的語法如何將CSS添加到頁面中用DW的CSS編輯器編輯css文件CSS的語法在使用CS

2、S前，我們先要對CSS的基本語法有所了解。如果你安裝了Frontpage，不妨用*.css搜索一下你的硬盤，你會找到很多CSS文件。這都是FP自帶的模板的CSS。你可以打開其中一個研究一下~用DW和FP都能打開css文件，當(dāng)然最簡單的還是用記事本打開。下面我們來看一段CSS代碼：p{font-family:"宋體";font-size:12px;line-height:12pt;color:#000000}td{font-family:"宋體";font-size:12px;color:#000000}a:link{color:#0000FF;text-decoration:none}

3、a:visited{color:#666666;text-decoration:none}a:active{color:green;text-decoration:none;}a:hover{color:#FF0000;background-color:#ff9900;text-decoration:underline}第一行和第二行的p、td標(biāo)簽，分別定義了網(wǎng)頁中文字和表格中文字的字體、大小和顏色。由于網(wǎng)頁中的文字基本上都放置在表格中，所以需要定義表格中的文字屬性。font-family:"宋體"——指定網(wǎng)頁中的字體。font-size:12px——制定字體的大小?？梢杂?2px或者

4、是9pt。這兩種字體大小在800和1024的分辨率下都比較好看。line-height:12pt——行與行之間的距離。color:#000000——字體的顏色。#000000表示的是黑色。在網(wǎng)頁編輯中，顏色是用十六進(jìn)制數(shù)來表示的。你也可以用顏色的英文名稱來表示，如紅色的代碼寫成#ff0000，也可以寫成red。第三行——第六行的a標(biāo)簽，指定的是鏈接文本的變化控制。link表示超鏈接的文本在鏈接未被訪問時的顏色，代碼中指定顏色為0000ff（藍(lán)色）。visited表示鏈接被訪問過后的顏色為灰色（#666666）。active表示鼠標(biāo)點擊鏈接時鏈接的文本顏色為綠色。hover表示鼠標(biāo)指向鏈

5、接但未點擊時的鏈接顏色為紅色，背景顏色為橙色。text-decoration:none表示鏈接文本沒有下劃線。text-decoration:underline則表示鏈接文本有下劃線。請大家仔細(xì)看這段代碼，在下面的教程中，我們都將以這段代碼作為例子。如何將CSS添加到頁面中在講解如何編輯CSS前，我們先來說一下怎么把CSS添加到頁面中，即怎么才能讓編輯好的CSS對頁面元素起作用呢？一般來說，有兩種方法。一種方法是直接把CSS代碼粘貼到html中。比如我們把下面一段代碼粘貼入HTML代碼的之間就可以了。不過這樣做，我們只是定義了這個頁面的CSS。如果一個網(wǎng)站有很多頁面的話，一個一個頁面粘貼代碼是不大可能的。所以我還是建議大家用第二種辦法~第二種辦法就是將css代碼生成一個*.css的文件，然后將這個文件鏈接到所需的頁面上。這樣做一個很大的好處就是，你可以把網(wǎng)站上所有頁面都鏈接到一個css文件，一旦這個css文件修改，那么所有的頁面風(fēng)格也隨之改變。這就是css的好處之一。在DW里，鏈接CS