CSS 之設(shè)計代碼的結(jié)構(gòu)（1）
時間：2023-08-29 23:06:01 | 來源：網(wǎng)站運營
時間：2023-08-29 23:06:01 來源：網(wǎng)站運營
CSS 之設(shè)計代碼的結(jié)構(gòu)（1）：
CSS 之設(shè)計代碼的結(jié)構(gòu)（1）
學(xué)習(xí)CSS最好的方式就是使用它。
html有意義的元素
h1、h1ul、ol、dlstrong、emblockquote、citeabbr、acronym、codefieldset、legend、labelcaption、thead、tbody、tfootID和類名
id名標(biāo)識頁面上的單獨元素、ID必須是唯一的。
id可以用來標(biāo)識持久性的元素、一次性的元素（例如：鏈接、表單元素）。
一個id名只能應(yīng)用于頁面上的一個元素，而同一個類名可以應(yīng)用于頁面上任意數(shù)量的元素。
類名非常適合標(biāo)識內(nèi)容的類型或相識的條目。
在寫類名和id名時，需注意區(qū)分大小寫，CSS是不區(qū)分大小寫的語言。
建議使用駝峰式大小寫，HTML與CSS相同。
我們常常只在不適合使用id的情況下對元素應(yīng)用類，而且盡可能少使用類。
大多數(shù)文檔只需要添加幾個類，如果添加太多，意味著你的HTML文檔結(jié)構(gòu)有問題。
div 和 span
div元素有助于在文檔中添加結(jié)構(gòu)，div（division）代表“部分”，它提供了將文檔分割為有意義區(qū)域的方法。
通過將主要的內(nèi)容區(qū)域包圍在div中并分配ID mainContent，就可以在文檔中添加結(jié)構(gòu)和意義。
將不必要的標(biāo)記減到最少，只在沒有現(xiàn)有元素能夠?qū)崿F(xiàn)區(qū)域分割的情況下使用div元素。
<div id="mainNav"> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul></div>可以完全刪除div，直接在列表上應(yīng)用 id
<ul id="mainNav"> <li>Home</li> <li>About</li> <li>Contact</li></ul>過度使用div = “多div癥”，這是代碼結(jié)構(gòu)不合理且過分復(fù)雜的一個信號。
應(yīng)該使用div 根據(jù)條目的意義或功能對相關(guān)條目進行分組。
div可以對塊級元素進行分組，而span可用來對行內(nèi)元素進行分組與比標(biāo)識。
<h2>Where's Cloudbility?</h2><p>Published on <span class="date">March 22nd,2018</span>by <span class="author">Andy Budd</span></p>一般無需對行內(nèi)元素進行分組或標(biāo)識，所以用sapn比div少。
在實現(xiàn)圖像替換等效果時會看到span，可將它用做額外的鉤子，可以應(yīng)用額外的樣式。
文檔類型、DOCTYPE 切換和瀏覽器模式
文件類型
DTD（文檔類型定義）是一組機器可讀的規(guī)則，定義XML、HTML的特定版本中允許有什么，不允許有什么。
瀏覽器會通過分析頁面的DOCTYPE聲明來了解要使用哪個DTD。
DOCTYPE 通常包含指定DTD文件的URL，瀏覽器一般不讀這些文件，而只是識別常見的DOCTYPE聲明。
有效性檢驗
瀏覽器需要知道DTD才能正確處理頁面，所以對頁面進行有效檢驗要求有DOCTYPE聲明。
有效性檢驗很重要，因為它有助于找到代碼中的bug。
瀏覽器模式
標(biāo)準(zhǔn)模式和怪異模式。
- Standards(標(biāo)準(zhǔn))模式：遵循最新標(biāo)準(zhǔn)。
- Quirks（怪癖/兼容）模式：幫助處理所有奇怪的渲染和非瀏覽器兼容及不符合標(biāo)準(zhǔn)的網(wǎng)頁。
瀏覽器會根據(jù)
DOCTYPE 聲明進入正確的呈現(xiàn)模式，但有時候它也并不那么聽話，以下情況會觸發(fā)兼容模式：
未指定URL或者指定的是一個相對的路徑（而不是完全限定的Internet地址），大多數(shù)瀏覽器會進入兼容模式而不管當(dāng)初聲明的是什么模式。
瀏覽器如果不能識別一個錯誤的DOCTYPE，那么也會強制進入兼容模式，建議直接復(fù)制拷貝DOCTYPE聲明而不是親自輸入。
不同瀏覽器在處理過渡型DOCTYPE時是有差異的。有可能進入標(biāo)準(zhǔn)模式，也有可能進入兼容模式。
DOCTYPE切換
瀏覽器根據(jù)DOCTYPE是否存在以及使用的DTD來選擇要使用的表現(xiàn)方法。
DOCTYPE切換是瀏覽器用來區(qū)分遺留文檔和符合標(biāo)準(zhǔn)的文檔手段。
如編寫了有效的CSS，選擇了錯誤的DOCTYPE，那么頁面就將以怪異模式表現(xiàn)，其表現(xiàn)就可能會有錯誤或不可預(yù)測。
一定要在站點的每個頁面上包含形式完整的DOCTYPE 聲明，并在使用HTML時選擇嚴(yán)格的DTD。
DTD中包含了一系列標(biāo)記、屬性，用于標(biāo)記Web文檔中能出現(xiàn)哪些元素和元素之間的包含關(guān)系。
如果沒有指定有效的DOCTYPE聲明，瀏覽器可能會使用內(nèi)置的默認(rèn)DTD。我們也可以自定義DTD，但一般不推薦這樣。常見的DOCTYPE聲明如下：
HTML 2：<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">HTML 3.2：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">HTML 4.01 Strict：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Frameset：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0 Strict：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transitional：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML 1.0 Frameset：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">XHTML 1.1 plus MathML plus SVG：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">注意：DOCTYPE聲明這一條指令必須在
<html>標(biāo)記之前定義。
語法：<!DOCTYPE 根元素 可用性 "注冊//組織//類型 標(biāo)簽 定義//語言" "URL"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 指定 DTD 中聲明的頂級元素類型，這與聲明的 SGML 文檔類型相對應(yīng)，默認(rèn)HTML 。
指定正式公開標(biāo)識符(FPI)是可公開訪問的對象還是系統(tǒng)資源。 默認(rèn) PUBLIC 可公開訪問的對象。 SYSTEM 系統(tǒng)資源，如本地文件或 URL。
指定組織是否由國際標(biāo)準(zhǔn)化組織(ISO)注冊。默認(rèn) + ，組織名稱已注冊。 - 組織名稱未注冊，Internet 工程任務(wù)組(IETF)和萬維網(wǎng)協(xié)會(W3C)并非注冊的 ISO 組織。
指定表明負(fù)責(zé)由 !DOCTYPE 聲明引用的 DTD 的創(chuàng)建和維護的團體或組織的名稱，即 OwnderID。 IETF 或 W3C。
指定公開文本類，即所引用的對象類型。默認(rèn) DTD。
指定公開文本描述，即對所引用的公開文本的唯一描述性名稱，后面可附帶版本號。默認(rèn) HTML 。
指定文檔類型定義。 Frameset 框架集文檔。 Strict 排除所有 W3C 專家希望逐步淘汰的代表性屬性和元素，因為樣式表已經(jīng)很完善了。Transitional 包含除 frameSet 元素的全部內(nèi)容。
指定公開文本語言，即用于創(chuàng)建所引用對象的自然語言編碼系統(tǒng)。該語言定義已編寫為 ISO 639 語言代碼(大寫兩個字母)。 默認(rèn) EN。
指定所引用對象的位置。
下一篇《CSS 之為樣式找到目標(biāo)（2）》
運維之路（Opsroad）—— 年輕人的運維社區(qū)
關(guān)鍵詞：結(jié)構(gòu),設(shè)計
在線咨詢
