CSS 設計理念,css

來源:互聯網
上載者:User

CSS 設計理念,css

今天整理CSS2.1的規範,發現這個,分享給大家。

CSS2.1 作為 CSS2 和 CSS1 的後序版本,基於一下一組設計理念:

  • 向前和向後相容。CSS2.1 的使用者代理程式能夠理解 CSS1 的樣式表。 CSS1 的使用者代理程式能夠讀取 CSS2.1 的樣式表,並且丟棄他們不能理解的部分。同時,對於不支援 CSS 的使用者代理程式可以顯示樣式增強文檔。當然通過 CSS 增強樣式將不被渲染,但所有的內容可以被表現。
  • 作為結構化文檔的補充。樣式表補充結構化文檔(例如,HTML 和 XML應用程式),為標記文本提供樣式資訊。樣式表應該非常容易修改,並對標記的影像甚微或沒有。
  • 供應商,平台和裝置無關。樣式表使文檔保持供應商,平台和裝置無關。樣式表本身也是供應商和平台無關的,但CSS2.1允許你為一組裝置指定一個樣式表(例如,印表機)。
  • 可維護性。通過在文檔中指向樣式表,網站管理員能簡化網站的維護和保持整個網站的一致外觀和感覺。例如,如果組織的背景色發生改變,僅需更改一個檔案。
  • 簡單。CSS 是一門簡單的樣式語言,是對人類讀寫友好的。CSS的屬性保持最大程度上的相互獨立,一般實現一個效果只有一種方法。
  • 網路效能。CSS為內容的呈現方式提供了緊湊的編碼。圖片或音頻檔案常被作者用來實現某種特定的渲染效果,樣式表和其比起來體積要小的多。同時,減少網路連結的次數,進一步提高網路效能。
  • 靈活性。有幾種方法可以將CSS應用到內容。關鍵特徵是不同位置的樣式資訊能夠層疊,包括預設(使用者代理程式)樣式表,使用者樣式表,連結樣式表,內嵌樣式,和元素屬性中的樣式資訊。渴求的某些渲染效果和裝置無關相衝突,但CSS2.1
  • 豐富的。為作者提供一組豐富的渲染效果,增加網站作為表達媒介的豐富性。設計師們已經對案頭版和投影片應用中的常見功能渴望許久。但 CSS2.1 為滿足設計師的要求,向前邁了一大步。
  • 可選的語言綁定。規範中描述的一組 CSS 屬性使視覺和聽覺格式化模型表現一致。其格式化模型可以通過CSS語言訪問,但也可以綁定到其他語言。例如,在JavaScript程式中可以動態改變某個元素的‘color’屬性值。
  • 可訪問性。一些CSS功能將使網路更方便殘障使用者:
    • 控制字型外觀屬性允許作者消除不可訪問的文圖圖片。
    • 位置屬性允許作者消除強制布局的標記技巧(例如,不可見圖片)。
    •  !improtan 規則的意義在於有特別示範要求的使用者可以覆蓋作者的樣式表。
    • 所有屬性的‘inherit’值用來提升層疊的通用性,和更容易產生一致的風格。
    • 改進媒體支援,包括媒體分組和 braille,embossed,和 tty 媒體類型,允許使用者或作者為這些裝置定製頁面。

原文:http://www.w3.org/TR/CSS2/intro.html#design-principles


跪 div+CSS 布局設計理念的書籍,有好的資源給建議,基本都會 但是運用起來書其實人認沒必要看既已經會了部分了
對於說幾問題:
代碼混亂:看書沒用去看別人寫看別人原始碼
布局顏色好像設計師問題(知道篇設計還偏製作)
css命名實想出來下有道把文翻譯成英文行
每公司規範樣CSS我般會分成好幾來寫比全域樣式、廣告樣式、特殊樣式等等都單獨寫
再墨跡句多做多看div+css沒有太多技術含量裡面做多了自明白了
DIV+CSS的概念DIV+CSS網站標準(或稱WEB標準)常用術語之通常了說明與HTML網頁設計語言表格(table)定位方式區別因XHTML網站設計標準再使用表格定位技術而採用DIV+CSS方式實現各種定位

CSS英語Cascading Style Sheets(層疊樣式表單)縮寫種用來表現 HTML 或 XML 等檔案式樣電腦語言

DIV元素用來HTML文檔內大塊(block-level)內容提供結構和背景元素DIV起始標籤和結束標籤之間所有內容都用來構成塊其所包含元素特性由DIV標籤屬性來控制或者通過使用樣式表格式化塊來進行控制

採用CSS+DIV進行網頁重構相對與傳統TABLE網頁布局而具有下4顯著優勢:

1:表現和內容相分離

設計部分剝離出來放獨立樣式檔案HTML檔案只存放文本資訊

2:提高搜尋引擎對網頁索引效率

用只包含結構化內容HTML代替嵌套標籤搜尋引擎更有效地搜尋網頁內容並能給較高評價

3:提高頁面瀏覽速度

DIV+CSS布局較Table布局減少了頁面代碼載入速度得大提高spider爬行時非常有利過多頁面代碼能造成爬行逾時spider會認頁面無法訪問影響收錄及權重

另方面真正網站最佳化只了追求收錄、排名快速響應速度提高使用者體驗度基礎對整搜尋引擎最佳化及營銷都非常有利

4:易於維護和改版

只要簡單修改幾CSS檔案重新設計整網站頁面

5:代碼精簡

使用DIV+CSS布局頁面代碼精簡點相信對XHTML有所瞭解都知道代碼精簡所帶來直接好處有兩點:提高spider爬行效率能短時間內爬完整頁面樣對收錄品質有定好處;二由於能高效爬行會受spider喜歡樣對收錄數量有定好處

6:表格嵌套問題

多網站何推廣文章稱搜尋引擎般抓取三層上表格嵌套點直沒有得搜尋引擎官方證實根據目前掌握情況來看spider爬行Table布局頁面遇多層表格嵌套時會跳過嵌套內容或直接放棄整頁面

使用Table布局了達定視覺效得套用多表格巢狀表格格核心內容spider爬行時跳過了段沒有抓取頁面核心頁面成了相似頁面網站過多相似頁面會影響排名及網域名稱信任度

而DIV+CSS布局基本上會存樣問題從技術角度來說XHTML控制樣式時也需要過多嵌套

雖沒有得確認還建議使用Table布局朋友們設計時盡能要使用多層表格嵌套SEOer們文章說明了點相信們也沒有依據

7:對網站Alexa排名影響

基於XTHML標準DIV+CSS布局般設計完成會盡能完善能通過W3C驗證截止目前沒有搜尋引擎表示排名規則會傾向於符合W3C標準網站或頁面事實證明使用XTHML架構網站排名狀況般都錯

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.