漂亮樣式表在XHTML+CSS網(wǎng)頁(yè)制作中的應(yīng)用
來(lái)源:易賢網(wǎng) 閱讀:715 次 日期:2016-06-23 10:51:31
溫馨提示:易賢網(wǎng)小編為您整理了“漂亮樣式表在XHTML+CSS網(wǎng)頁(yè)制作中的應(yīng)用”,方便廣大網(wǎng)友查閱!

這是一篇很久以前的文章了,現(xiàn)在看來(lái),其中的思想很值得大家學(xué)習(xí),在jb51.net學(xué)習(xí)案例的同時(shí),不仿學(xué)習(xí)一些理論的知識(shí),對(duì)您知識(shí)的突破會(huì)很有幫助。大家加油!

自從看了Zeldman先生的力作“Designing with Web Standards”中文版為《網(wǎng)站重構(gòu)》(第2版)一書(shū),感受頗深,堅(jiān)定了我用web標(biāo)準(zhǔn)的思想,去開(kāi)發(fā)實(shí)踐我們的項(xiàng)目。但是僅知道一些什么是web標(biāo)準(zhǔn)以及如何應(yīng)用到實(shí)際項(xiàng)目中,還是遠(yuǎn)遠(yuǎn)不夠的。必須對(duì)web標(biāo)準(zhǔn)中的每個(gè)組成部分,逐一學(xué)習(xí)應(yīng)用,各個(gè)擊破,方能發(fā)現(xiàn)它們的本質(zhì)!對(duì)于像我這樣的web開(kāi)發(fā)設(shè)計(jì)人員,懂得這個(gè)道理,進(jìn)行針對(duì)性的學(xué)習(xí)與實(shí)踐,我相信我們一定會(huì)收獲的更多,同時(shí)也算是為web標(biāo)準(zhǔn)在中國(guó)的應(yīng)用做一點(diǎn)貢獻(xiàn)?。ê呛?,這個(gè)可能有些吹牛,但是的確是我們大多數(shù)軟件從業(yè)人員的理想。)

現(xiàn)在是web2.0乃至3.0的時(shí)代,是XHTML,XML,CSS,ECMAScript和DOM的時(shí)代。雖然它們不是最終的技術(shù),但它們組合起來(lái)就成為一個(gè)解決方案——我們規(guī)劃建立一個(gè)向后兼容的網(wǎng)站的基礎(chǔ),同時(shí)也是做符合web標(biāo)準(zhǔn)的網(wǎng)站的必要的技術(shù)基礎(chǔ)。我們不僅要做到希望獲得更多的用戶(hù)支持與訪問(wèn),更要建立長(zhǎng)久的,漂亮的網(wǎng)站長(zhǎng)時(shí)間吸引他們的注意力。我相信學(xué)會(huì)使用CSS來(lái)改善我們的網(wǎng)站,是吸引他們注意力的好辦法,也是在web2.0時(shí)代中時(shí)髦的發(fā)展趨勢(shì)。下面我僅就CSS技術(shù)談一下我從中獲得到的經(jīng)驗(yàn)。

想成為一名CSS專(zhuān)家,僅僅熟練使用CSS選擇符(selectors)是遠(yuǎn)遠(yuǎn)不夠的。還在于對(duì)工作的整體規(guī)劃,工作流程的掌握以及提高樣式表的可維護(hù)性和效率。用CSS可以創(chuàng)建出我們想要的美妙絕倫的網(wǎng)站,而寫(xiě)CSS本身就是一種享受。 那么我們應(yīng)該如何創(chuàng)建更具吸引力的樣式表?你的樣式表應(yīng)該具有哪些特性呢?通過(guò)學(xué)習(xí)并結(jié)合我自己的工作經(jīng)驗(yàn),總結(jié)出一套制作精美樣式表的好方法。

一、不要讓CSS有過(guò)多的標(biāo)記

鏈接或者導(dǎo)入樣式表聽(tīng)起來(lái)好像是一種無(wú)頭緒的工作。我看過(guò)很多的網(wǎng)站開(kāi)發(fā)都有著整潔的、組織嚴(yán)密的css文檔,但是慢慢的,由于可能達(dá)不到在短期內(nèi)快速更新,或者懶得再去管理,這使得先前創(chuàng)建的精致的樣式表變成了垃圾。如果我們工作在需要發(fā)布上百條內(nèi)容的龐大網(wǎng)站上面。因?yàn)闀r(shí)間有限,所以你需要通過(guò)嵌套或者排列css來(lái)進(jìn)行快速修改或更新。隨著時(shí)間的推移,這種習(xí)慣維持著,直到有一天你被告知這個(gè)網(wǎng)站要完全推翻重新設(shè)計(jì)(但是內(nèi)容還是一樣)而且你只有一周的時(shí)間去創(chuàng)建(包括測(cè)試)。一般來(lái)說(shuō),更新樣式表還算是一個(gè)非常簡(jiǎn)單的方法,除非你長(zhǎng)時(shí)間對(duì)網(wǎng)站零散的區(qū)域做修改,你就不能對(duì)網(wǎng)站樣式表結(jié)構(gòu)有一個(gè)整體的把握。

鏈接或者導(dǎo)入你的樣式表不是隨意的事情。創(chuàng)建干凈整潔的樣式表并保持下去,工作就會(huì)更開(kāi)心。注意:如果你試圖在每次更新或者添加新內(nèi)容的時(shí)候創(chuàng)建新的樣式表,那你肯定是自找麻煩。過(guò)多的鏈接和導(dǎo)入樣式表會(huì)使消除bug變得異常困難,讓樣式表很難維持。大一點(diǎn)的網(wǎng)站分別建立不同部分的樣式表這是可以理解的。就是小心不要走極端。添加很多的樣式表,會(huì)增加更多的http請(qǐng)求,可能還會(huì)影響到后面的工作。

二、語(yǔ)義定義明確易懂

除了選擇最合適的,最有意義的元素來(lái)表述外,還要確定選擇class 和id屬性值。定義明確可以讓維護(hù)變得簡(jiǎn)單,小組里的成員都會(huì)看懂??催@個(gè)定義:

.l10k { color: #369; } ,.left-blue { color: #369; } ,如果是我做的我可能知道是啥意思,但是比人不一定就懂了。即使今天知道它的意思,但是能保證很多年后還知道它的意思嗎? 最好不要在類(lèi)屬性里面去加入顏色或者長(zhǎng)寬的尺寸。更恰當(dāng)?shù)拿?guī)范:. work-description { color: #369; }

三、知道什么時(shí)候添加有條件的注釋和運(yùn)用技巧

很多文章寫(xiě)過(guò)一些關(guān)于問(wèn)題解決的技巧,有條件的注釋是控制IE發(fā)布的一個(gè)好方法。我同意有條件的注釋比在你的css文檔里亂寫(xiě)要好得多,但是最近我開(kāi)始慢慢意識(shí)到,很多證據(jù)表明,這并不是最好的解決辦法。想在一個(gè)元素中設(shè)置它的最低高度,但是IE6瀏覽器卻不執(zhí)行它,所以你知道自己能夠使用的高度,也同樣會(huì)被同樣的處理。重新建一個(gè)樣式表,然后把有條件的注釋加入到你的標(biāo)識(shí)中,你所有的需要都是要遵循這個(gè)規(guī)定?保持最低的高度和高度的規(guī)則在一起,選擇一個(gè)小技巧在同樣的css文檔里,這樣會(huì)更好嗎?在這種情況下,我覺(jué)得用這種方法很難奏效。

四、應(yīng)用CSS到網(wǎng)頁(yè)中盡量使用外部樣式表

好處嗎?大家都比較清楚,當(dāng)然有一點(diǎn)是不可否認(rèn)的,可以最大限度的實(shí)現(xiàn)代碼的重用及最優(yōu)化配置網(wǎng)站文件。

好了,以上就是我的一些個(gè)人見(jiàn)解,希望各位朋友們多給提意見(jiàn),您的建議是我挑戰(zhàn)困難的動(dòng)力!謝謝!

更多信息請(qǐng)查看網(wǎng)頁(yè)制作
易賢網(wǎng)手機(jī)網(wǎng)站地址:漂亮樣式表在XHTML+CSS網(wǎng)頁(yè)制作中的應(yīng)用
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢(xún)回復(fù)僅供參考,敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢(xún)?yōu)闇?zhǔn)!
相關(guān)閱讀網(wǎng)頁(yè)制作

2025國(guó)考·省考課程試聽(tīng)報(bào)名

  • 報(bào)班類(lèi)型
  • 姓名
  • 手機(jī)號(hào)
  • 驗(yàn)證碼
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡(jiǎn)要咨詢(xún) | 簡(jiǎn)要咨詢(xún)須知 | 新媒體/短視頻平臺(tái) | 手機(jī)站點(diǎn) | 投訴建議
工業(yè)和信息化部備案號(hào):滇ICP備2023014141號(hào)-1 云南省教育廳備案號(hào):云教ICP備0901021 滇公網(wǎng)安備53010202001879號(hào) 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號(hào)
云南網(wǎng)警備案專(zhuān)用圖標(biāo)
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢(xún)關(guān)注公眾號(hào):hfpxwx
咨詢(xún)QQ:1093837350(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報(bào)警專(zhuān)用圖標(biāo)