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

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

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

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

1、正式開始學習之前的幾句??嗦話：

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

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

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

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

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

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

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

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

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

注：

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

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

行為：通俗理解為人（用戶）與網(wǎng)頁的交互，比如：我在頁面的某個元素上單擊一下鼠標，頁面會給我什么反應——這就是一個簡單的人與網(wǎng)頁的交互，我們也可以大體理解為人與機器的交互，交流，溝通（這幾個詞可能不太準確，請原諒偶在漢語辭藻方面的貧乏）。目前主要表現(xiàn)行為的技術(shù)是各種所謂的腳本技術(shù)，比如：javascript（當前那是相當流行�。�

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

CSS

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

CSS

注：上面的代碼如果看不懂也沒關系，后面我們會深入的講解。

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

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

本新聞共2頁,當前在第1頁 1 2

【收藏】【打印】【進入論壇】

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