华南俳烁实业有限公司

考試首頁 | 考試用書 | 培訓(xùn)課程 | 模擬考場 | 考試論壇  
  當(dāng)前位置:設(shè)計(jì)制作 > CSS/HTML > 文章內(nèi)容
  

5日精通CSS層疊樣式表(第1日)

 [ 2016年10月7日 ] 【

  1.1 第1日

  用HTML制作網(wǎng)頁就象是用畫筆繪制一幅圖畫。只有那些對網(wǎng)頁制作癡迷而執(zhí)著的人才可能精確地實(shí)現(xiàn)預(yù)定的結(jié)果,這并不是正確的工具和靈活性就可以實(shí)現(xiàn)的。

  任何使用過HTML一個多星期的人都知道HTML是一種非常好的網(wǎng)頁制作工具。所以有時候我們不得不制作體積相當(dāng)大的GIF圖象以獲得想要的字體和布局。同樣,有時候也不得不使用各種表格標(biāo)簽和隱藏的空格GIF圖象以使頁面的布局能達(dá)到預(yù)想的目的。

  的確有些荒唐。我們的編碼實(shí)在是太復(fù)雜了,GIF用量越來越多,而我們的頁面變得比英吉利海峽還要寬,互聯(lián)網(wǎng)有限的帶寬怎么可能通過這么寬的信息呢?這種設(shè)計(jì)并不是網(wǎng)頁設(shè)計(jì)的最佳形式。

  但是,1996年底的時候悄悄誕生了一種叫做樣式表(stylesheets)的技術(shù)。全稱應(yīng)該是串接樣式表(Cascading

  Stylesheets-簡稱CSS)這位HTML的表弟向世人保證:

  將對布局、字體、顏色、背景和其它文圖效果實(shí)現(xiàn)更加精確的控制。

  只通過修改一個文件就改變頁數(shù)不定的網(wǎng)頁的外觀和格式。

  在所有瀏覽器和平臺之間的兼容性。

  更少的編碼、更少的頁數(shù)和更快的下載速度。

  除了還不能全面支持我們常用的大多數(shù)瀏器之外,CSS在實(shí)現(xiàn)其它承諾方面作得相當(dāng)出色。CSS在改變我們制作樣式表的方法。它為大部分的網(wǎng)頁創(chuàng)新奠定了基石。

  之后的5天,我們將漫游樣式表的世界。你將學(xué)到樣式表的基本知識并將其應(yīng)用于你的網(wǎng)頁中。你還將學(xué)到如何處理字體、圖文、色彩、背景及定位等的詳細(xì)技巧。

  今天,我們先瀏覽一下樣式表的基本內(nèi)容。第1個問題;樣式表能為我們做什么?

  1.2 樣式表能為我們做什么?

  那么樣式表有什么特別之處呢?簡而言之,它能幫你做以下事情:

  你可以將格式和結(jié)構(gòu)分離。

  你可以以前所未有的能力控制頁面布局。

  你可以制作體積更小下載更快的網(wǎng)頁。

  你可以將許多網(wǎng)頁同時更新,比以前快更容易。

  瀏覽器將成為你更友好的界面

  你可以將格式和結(jié)構(gòu)分離。

  HTML從來沒打算控制網(wǎng)頁的格式或外觀。這種語言定義了網(wǎng)頁的結(jié)構(gòu)和個要素的功能,而讓瀏覽器自己決定應(yīng)該讓各要素以何種模樣顯示。

  但是網(wǎng)頁設(shè)計(jì)者要求的更多。所以當(dāng)Netscape推出新的可以控制網(wǎng)頁外觀的HTML標(biāo)簽時,網(wǎng)頁設(shè)計(jì)者無不歡呼雀躍。我們可以用

  FACE>、包在

外邊控制文章主體的外觀等等。然后我們將所有東西都放入表格,用隱式GIF空格產(chǎn)生一個20象素的邊距。一切都變得亂七八糟。編碼變得越來越臃腫不堪,要想將什么內(nèi)容迅速加到網(wǎng)頁中變得越來越難。

  串接樣式表通過將定義結(jié)構(gòu)的部分和定義格式的部分分離使我們能夠?qū)撁娴牟季质┘痈嗟目刂啤TML仍可以保持簡單明了的初衷。CSS代碼獨(dú)立出來從另一角度控制頁面外觀。

  你可以以前所未有的能力控制頁面的布局。

  能使我們調(diào)整字號,表格標(biāo)簽幫助我們生成邊距,這都沒錯。但是,我們對HTML總體上的控制卻很有限。我們不可能精確地生成80象素的高度,不可能控制行間距或字間距,我們不能在屏幕上精確定位圖象的位置。

  但是現(xiàn)在,樣式表使這一切都成為可能。而即將推出的新的CSS功能更令人興奮。以后4天內(nèi),你將會明白我所說的意味著什么。

  你可以制作出體積更小下載更快的網(wǎng)頁

  還有更好的消息:樣式表只是簡單的文本,就象HTML那樣。它不需要圖象,不需要執(zhí)行程序,不需要插件,不需要流式。它就象HTML指令那樣快。

  有了CSS之后,以前必須求助于GIF的事情現(xiàn)在通過CSS就可以實(shí)現(xiàn)。還有,正如我先前提到的,使用串接樣式表可以減少表格標(biāo)簽及其它加大HTML體積的代碼,減少圖象用量從而減少文件尺寸。

  你可以更快更容易地維護(hù)及更新大量的網(wǎng)頁。

  沒有樣式表時,如果我想更新整個站點(diǎn)中所有主體文本的字體,我必須一頁一頁地修改每張網(wǎng)頁。即便站點(diǎn)用數(shù)據(jù)庫提供服務(wù),我仍然需要更新所有的模板,而且更新每一模板中每一個實(shí)例實(shí)例的

  FACE>。

  樣式表的主旨就是將格式和結(jié)構(gòu)分離。利于樣式表,我可以將站點(diǎn)上所有的網(wǎng)頁都指向單一的一個CSS文件,我只要修改CSS文件中某一行,那么整個站點(diǎn)都會隨之發(fā)生變動。

  瀏覽器將成為你更友好的界面。

  不象其它的的網(wǎng)絡(luò)技術(shù),樣式表的代碼有很好的兼容性,也就是說,如果用戶丟失了某個插件時不會發(fā)生中斷,或者使用老版本的瀏覽器時代碼不會出現(xiàn)雜亂無章的情況。

  只要是可以識別串接樣式表的瀏覽器就可以應(yīng)用它。

  怎么樣,樣式表的確是一個很不錯的注意吧?

  那么,現(xiàn)在我們就開始制作一份樣式表。

  zzz1.3 你的第1張樣式表

  現(xiàn)在我們就開始制作樣式表。

  打開你最喜歡的HTML編輯器生成基本的網(wǎng)頁:

本文糾錯】【告訴好友】【打印此文】【返回頂部
將考試網(wǎng)添加到收藏夾 | 每次上網(wǎng)自動訪問考試網(wǎng) | 復(fù)制本頁地址,傳給QQ/MSN上的好友 | 申請鏈接 | 意見留言 TOP
關(guān)于本站  網(wǎng)站聲明  廣告服務(wù)  聯(lián)系方式  站內(nèi)導(dǎo)航  考試論壇
Copyright © 2007-2013 中華考試網(wǎng)(Examw.com) All Rights Reserved
丹东市| 汨罗市| 太保市| 金门县| 阳东县| 会同县| 星子县| 涪陵区| 辽源市| 枞阳县| 溧阳市| 文化| 九江县| 乌兰察布市| 通辽市| 漯河市| 泽库县| 逊克县| 桂平市| 永德县| 株洲市| 中超| 阳朔县| 昌黎县| 杭锦后旗| 卓资县| 清水河县| 波密县| 临沂市| 内黄县| 兴国县| 左云县| 邮箱| 东阳市| 达孜县| 许昌市| 崇明县| 黑水县| 枞阳县| 南宁市| 瑞丽市|