CSS教程 控制網頁檔案大小通過精簡CSS實現

2022-09-25 20:24:09 字數 1873 閱讀 6125

儘管對於現如今的頻寬來說,網頁檔案那僅以k來算的大小實在是微不足道,但如何將這以k來計算的網頁檔案精簡到最小還是網頁設計師們所應該考慮的問題之一。

眾所周之,在不影響整個網頁構架與功能的情況下,網頁檔案越小越好,因為更小的網頁檔案有利於瀏覽器對網頁的解釋時間縮到更短,自然訪客也就不用面臨等待網頁緩慢呈現的煩躁了,這一點對於那些頻寬少網速慢的使用者猶為明顯。試想一下,你會是希望開啟乙個**的時候整個站點馬上呈現在你面前呢?還是喜歡花上十幾秒甚至是幾分釧來看整個站點一點一點的被瀏覽器解發布來呢?

在table布局的時代,**無數次的隨著**在頁面裡重複,致使整個網頁檔案變得臃腫無比,**的可讀性也降到最低,瀏覽器的解釋時間自然也增加了不少。而自從div css的布局替代table布局之後,這一切都得到了極大的改善,讓table回歸到它原本用於顯示資料的位置上去,而布局就交給div css來做,這樣**的可讀性與復用性都得到了提高,而div css更為重要的一點就是將網頁檔案的表現與結構區分開來,再也不用為了表現而去改動整個網頁檔案的結構了。

即使div css的布局方式將以前table布局時**的臃腫降到了最低,但對於網頁設計師來說,如何將網頁檔案的大小控制到最小是永遠值得探索和追求的乙個問題。

看如下一段**:

#header

這樣的一段css**,在條理上很清晰,結構也很明了,可讀性很強,可是這樣的一段**卻沒有做精簡,也就是說它是最原始的css**,下面看精簡後的**:

#header

在css中有復合屬性這一說法,也就是說可以將很多屬性引數整合在一起的,比如說上面的「margin-top; margnbioggin-right; margin-bottom; margin-left;」可以整合成乙個「margin」屬性,然後為其配上引數。

通過這一點,我們就程式設計客棧可以在原始css**的基本上將**進一步的精簡。而且這樣寫的結構也合理,可讀性也同樣強。可是對於要精簡到徹底來說,這還不夠。為了讓這段css**的結構明了,我們用上了空格換行等占用空間的東西,如果將這些占用空間的去掉呢?

#header

只這一句就替代了上面的一段**,這樣**就已經精簡到了最大化,當然,並不推薦所有人都這樣寫,這程式設計客棧樣寫的css**在可讀性上要遠遠差於段落式的寫法,除非你對自己寫的**有完全掌握的信心。

在同乙個站點的css檔案中,不可避免的會出現不同的id或class卻有一部分相同的屬性,如果將這些id或class逐個分開來寫的話,在css檔案裡無疑會生成重複**,而我們要盡量的精簡css檔案的大小,那麼「消滅」這部分重複的**就變得勢在必行。

看下面一段css**:

#header

#content

#copyright

在上面的三個id中都有乙個相同的屬性「margin:10px 15px;」,如果就這樣分開來寫的話,這三個id之間將保持各自獨立的關係,但卻生成了重複的**,而我們可以將其寫成如下格式:

#header,#content,#copyright

#header

#content

#copyright

將上面的id換成class也是一樣的。這樣寫我們就成功的將重複**「消滅」掉了。但是如果這裡具有相同的屬性的id或class過多的話,難免會造成**可讀性降到很低很低,所以除此之外當具有相同屬性的都是class時還有另外的一種寫法:

.main

.header

.content

.copyright

當然這種寫法時,呼叫時的寫法也與平常不一樣。

程式設計客棧t;

這樣的寫法同樣可以達到效果,並且也不會再怕具有相同屬性的class多而造成**可讀性差的問題,但值得注意的一點就是,這種寫法對於id是無效的,不管其中是存在乙個id或者全部都是id,都將造成這段**的無效。

本文標題: css教程:控制網頁檔案大小通過精簡css實現

本文位址:

python requests儲存網頁檔案引數總結

一 r requests.get url,headers headers,stream true 官方文件 如果你在請求中把 stream 設為 true,requests 無法將連線釋放回連線池,除非你 消耗了所有的資料,或者呼叫了 response.close。這樣會帶來連線效率低下的問題。如果...

網頁檔案命名規範

資訊反饋 feedback 產品 product 所有單英文單詞檔名都必須為小寫,如檔名為兩個或兩個以上單詞組成,檔名稱第二個單詞起的第乙個字母要大寫 滑鼠感應效果命名規範為 名 on off 所有檔名字母間連線都為下劃線 例如 menu1 on.gifmenu1 off.gif 1.js的命名原則...

字元編碼和網頁檔案

1 字元編碼是怎麼回事?資訊是抽象的,而用來記錄資訊的資料是具體的。比如你腦子裡有個想法,這個想法就是個抽象的東西。雖然它得得確確是存在的,但如果你不把它表達出來,那它事實上等於沒有。怎麼表達呢?說話或寫字,可以用漢語 英語 日語。在c 中,string就是資訊,抽像的。string本身是沒有編碼的...