當(dāng)前位置 : 首頁>軟件學(xué)院>程序開發(fā)>CSS>正文

初學(xué)CSS新手教程:在網(wǎng)頁中使用CSS

http://www.yibo1263.com　2009-12-5 11:12:31 　來源:東北IT網(wǎng) 　編輯:葉子

本教程系個(gè)人抽工作之余所作，按照我個(gè)人的想法我是想將一些基本的東西以較為輕松的語言描述出來，做成一個(gè)系列教程（這需要時(shí)間，我會(huì)努力抽空更新的），爭(zhēng)取讓每一個(gè)看這個(gè)東東的人都能有所收獲，但是因作者本人水平有限，不妥當(dāng)之處敬請(qǐng)留言批評(píng)指正。

本教程假設(shè)您沒有任何CSS樣式表語言的基礎(chǔ)，甚至，您可以完全不知道CSS是什么東東，但是，我們同樣假設(shè)您已經(jīng)掌握了基本的HTML/XHTML語法。比如，您肯定知道＜head>＜/head>是表明頁面的頭部，＜p>＜/p>是表示頁面的一個(gè)段落。

1、正式開始學(xué)習(xí)之前的幾句??嗦話：

CSS不是什么高深的東東，它的編寫環(huán)境也很簡(jiǎn)單，你只需要在WINDOWS自帶的記事本中編寫，然后在瀏覽器中查看效果就可以了，不要認(rèn)為你是在編程，實(shí)際上css唯一的作用是用來控制網(wǎng)頁中各種對(duì)象的表現(xiàn)形式而已，so…你要有充足的信心相信你一定可以學(xué)好。

雖然CSS學(xué)習(xí)起來并不困難，但是它也講究一個(gè)動(dòng)手能力和實(shí)際操作經(jīng)驗(yàn)。我認(rèn)為所有講究動(dòng)手能力和實(shí)際操作經(jīng)驗(yàn)的知識(shí)學(xué)習(xí)起來最好的方法就是動(dòng)手去實(shí)踐，所以，我們?yōu)槭裁床粚?shí)際練習(xí)一下呢？記住一點(diǎn)：看100頁書，不如動(dòng)手寫10行代碼。

2、本小結(jié)您將學(xué)習(xí)的內(nèi)容：

CSS到底是什么東東，它有何作用？

在網(wǎng)頁中加入CSS的方法。

第一個(gè)問題：CSS到底是什么東東，有何作用？

在解決這個(gè)問題之前，我們先來看看網(wǎng)站中一個(gè)頁面的基本組成：通常，一個(gè)頁面（前臺(tái)）由一下三個(gè)部分組成：結(jié)構(gòu)，表現(xiàn)和行為。

請(qǐng)?zhí)砑用枋?src="/Files/BeyondPic/2009-12/5/1259905715548.jpg"

請(qǐng)?zhí)砑用枋?src="/Files/BeyondPic/2009-12/5/1259905715548.jpg"

注：

結(jié)構(gòu)：通常指結(jié)構(gòu)化的文本，通俗點(diǎn)理解就是經(jīng)過結(jié)構(gòu)化了的頁面內(nèi)容。用于結(jié)構(gòu)化WEB標(biāo)準(zhǔn)技術(shù)有HTML、XHTML、XML等。

表現(xiàn)：指將頁面中的元素用什么樣的外觀展示出來，比如文字的字體，字號(hào)，顏色，大小，是否有下劃線，頁面的背景顏色（圖片），段落的對(duì)齊方式，元素在頁面的擺放位置等等。通常用于表現(xiàn)的標(biāo)準(zhǔn)技術(shù)就是我們這個(gè)教程要講的CSS（層疊樣式表）技術(shù)。

行為：通俗理解為人（用戶）與網(wǎng)頁的交互，比如：我在頁面的某個(gè)元素上單擊一下鼠標(biāo)，頁面會(huì)給我什么反應(yīng)——這就是一個(gè)簡(jiǎn)單的人與網(wǎng)頁的交互，我們也可以大體理解為人與機(jī)器的交互，交流，溝通（這幾個(gè)詞可能不太準(zhǔn)確，請(qǐng)?jiān)徟荚跐h語辭藻方面的貧乏）。目前主要表現(xiàn)行為的技術(shù)是各種所謂的腳本技術(shù)，比如：javascript（當(dāng)前那是相當(dāng)流行�。�。

有了上面的知識(shí)鋪墊，我們知道了CSS是用來控制頁面表現(xiàn)的，也就是說是用來控制網(wǎng)頁最終展示出來的外觀的。CSS的英文全稱是Cascading Style Sheets，翻譯過來就是層疊樣式表。我們?yōu)槭裁匆褂肅SS呢？先來看看不使用CSS的網(wǎng)頁頁面代碼：

CSS

從上面我們可以看出，用于控制內(nèi)容表現(xiàn)形式的代碼（紅色部分）是和內(nèi)容部分混雜在一起的，也就是說，二者互相混雜，不可分割。現(xiàn)在我們?cè)賮砜纯词褂胏ss后的代碼：

CSS

注：上面的代碼如果看不懂也沒關(guān)系，后面我們會(huì)深入的講解。

從上我們可以看出，使用CSS后可以將內(nèi)容（紅色部分）和表現(xiàn)（css部分）區(qū)分開來，只要你愿意，你甚至可以將CSS部分和HTML部分分別做成2個(gè)不同的文件，存放在不同的文件夾下。很顯然，使用CSS將結(jié)構(gòu)和表現(xiàn)分離后的代碼維護(hù)方便，邏輯清晰，有條理，而且，我們甚至還可以把一個(gè)CSS文件應(yīng)用給多個(gè)不同的HTML文件，來控制他們的外觀，可以有效減小站點(diǎn)的體積。

上面我們簡(jiǎn)單介紹了CSS是什么和它能用來干什么的問題，那么我們?nèi)绾尾拍茉诰W(wǎng)頁制作中使用CSS技術(shù)呢？

本新聞共2頁,當(dāng)前在第1頁 1 2

【收藏】【打印】【進(jìn)入論壇】

相關(guān)文章：

亚洲AV无码乱码在线观看不卡|最新大伊香蕉精品视频在线|亚洲不卡av一区二区|国产美女无遮挡免费