從設計中分離內容使網站管理更容易
CSS(層疊樣式表)已成為風格和佈局網站的事實上的方式。 設計師使用樣式表告訴瀏覽器應該如何在外觀和感覺方面顯示網站,涵蓋諸如顏色,間距,字體等諸多因素。
CSS樣式可以通過兩種方式進行部署:
- 內聯 - 在網頁本身的編碼中,以個人為單位逐個元素
- 在網站鏈接的獨立CSS文檔中
CSS的最佳實踐
“最佳做法”是設計和建設網站的方法,這些網站已被證明是最有效的,並為所涉及的工作帶來最大的回報。 在網頁設計中使用CSS跟隨他們,可以幫助網站看起來和功能盡可能好。 多年來,隨著其他Web語言和技術的發展,獨立的CSS樣式表已成為首選的使用方法。
遵循CSS的最佳實踐可以通過以下方式改進您的網站:
- 將內容與設計分開。 CSS的主要目標之一是從HTML中移除設計元素,並將它們放置在另一個位置供設計人員維護。 這也有助於將設計師與開發人員分開,以便每個人都可以專注於他們的專業領域。 設計師不必是一名開發人員來維護網站的外觀。
- 使維護容易。 網頁設計中最容易被忽視的元素之一就是維護。 與印刷材料不同,網站永遠不會“一勞永逸”。 內容,設計和功能可以並且應該隨著時間的推移而發展。 將CSS放在一個中心位置,而不是撒在整個網站上,使事情變得更容易維護。
- 保持您的網站可訪問。 使用CSS樣式有助於搜索引擎和殘疾人與您的網站進行交互。
- 讓您的網站保持更長時間。 通過使用CSS的最佳實踐,您將遵循已經證明穩定但足夠靈活的標準,以適應網頁設計環境的變化。
內聯樣式不是最佳實踐
內聯樣式雖然有目的,但通常不是維護網站的最佳方式。 他們違背每一種最佳實踐:
- 內聯樣式不會將內容與設計分開。 內聯樣式與現代開發人員所反對的嵌入式字體和其他笨重的設計標籤完全相同。 樣式只影響它們應用的特定的單獨元素; 雖然這可能會給你更細化的控制,但它也會使設計和開發的其他方面(如一致性)變得更加困難。
- 內聯樣式導致維護頭痛。 在處理樣式表時,確定樣式的設置可能很困難。 當你處理內嵌,嵌入和 外部樣式的混合時 ,你有很多位置需要檢查。 如果您在網頁設計團隊工作,或者需要重新設計或維護由其他人創建的網站,那麼您將遇到更多麻煩。 一旦找到樣式並對其進行更改,就必須對每個放置樣式的頁面上的每個元素執行此操作。 這大大增加了時間和工作預算的天文數字。
- 內聯樣式不可訪問。 雖然現代屏幕閱讀器或其他輔助設備可能能夠有效處理內聯屬性和標籤,但一些較舊的設備不能,這可能會導致一些奇怪的顯示網頁。 額外的字符和文字也會影響搜索引擎機器人瀏覽您的網頁的方式,因此您的網頁在搜索引擎優化(SEO)方面效果不佳。
- 內聯樣式使您的頁面變大。 如果您希望網站上的每個段落都以某種方式顯示,則可以在外部樣式表中使用六行左右的代碼執行一次。 但是,如果您使用內聯樣式進行此操作,則必須將這些樣式添加到網站的每個段落中。 如果您有五行CSS,那麼您的網站上的每個段落都會有五行。 帶寬和加載時間可以加快。
內聯樣式的替代方法:外部樣式表
而不是使用內聯樣式,請使用外部樣式表 。 它們為您提供CSS最佳實踐的所有好處,並且易於使用。 以這種方式使用,您網站上使用的所有樣式都存放在單獨的文檔中,然後通過一行代碼鏈接到Web文檔。 外部樣式表會影響它們附加到的任何文檔。 這意味著,如果你有一個20頁的網站,每個頁面使用相同的樣式表 - 這通常是如何完成的 - 你可以通過在一個地方編輯一次這些樣式來改變每一個頁面。 在一個地方更改樣式比在網站的每個頁面上搜索該編碼都方便得多。 這使得長期的網站管理變得更容易。