跳到主要內容

不同瀏覽器不一致的樣式表預設值

有許多 Browsers,不同 Browser 內定的樣式表都有其預設值,在設計網頁時,對於不同 Browsers 之間,可能就需要為不同 Browsers 設計不同的 CSS ,這樣讓網頁設計者相當困擾,一般的做法是將不同 Browsers 內定的樣式表預設值 Reset,Reset 之後才設計元件的 CSS,這樣設計出來的 CSS,使用不同 Browsers 觀看,就會有相同的效果。

目前網路上常被使用 Reset 樣式表預設值的套件有:
樣式表有優先順序,其寫法上的優先順序為:[1]

  1. Client user defined style
  2. Embedded or inline style sheet 
  3. Internal style sheet
  4. External style sheet
  5. Browser default style(Client User browser)
按照 CSS Selector 來區別優先順序,在 CSS 2.1 Section 6.4.3:[2]中寫道:
A selector's specificity is calculated as follows:
  • count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
  • count the number of ID attributes in the selector (= b)
  • count the number of other attributes and pseudo-classes in the selector (= c)
  • count the number of element names and pseudo-elements in the selector (= d)
  • The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
Some examples:
 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
 
<HEAD>
<STYLE type="text/css">
  #x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>
 
In the above example, the color of the P element would be green. The declaration in the "style" attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity.

------------------------------------------------
[1] http://www.plus2net.com/html_tutorial/css-types.php
[2] https://www.w3.org/TR/CSS2/cascade.html#specificity

留言

這個網誌中的熱門文章

CodeBlocks 多國語言的設定步驟

多年來一直都是使用 CodeBlocks 英文的介面,不曾想過要將 CodeBlocks 設定成多國語言的開發環境,對於不習慣於英文介面的國人,設定中文的使用介面是非常需要的環境,在 CodeBlocks 論壇有一篇文章提到 :Do you know http://wiki.codeblocks.org/index.php?title=Internationalization ?這個連結說明在 Windows 系統如何設定 CodeBlocks 成為 Internationalization 的環境,整個設定過程如下: 到 CodeBlocks 翻譯文件網站 下載 .mo 檔案:下載時需要 Ubuntu One 的帳號及密碼,登入後點選 .mo 檔案(不要下載 .po 檔是可編輯檔) 系統會傳送一封信件,點選信件的連結,將 .mo 檔案下載 將檔案複製到 C:\Codeblocks\share\CodeBlocks\locale\zh_TW 目錄(沒有這個目錄請自己建立) 開啟 CodeBlocks >> Setting >> Environment >> View >> Internationalization 選項打勾 >> 點選 Chinese 重新開啟 CodeBlocks 要加入其他語言的 .mo 檔案,則在 locale 目錄中新增其他語言的目錄名稱,例如: 德國 de_DE,這樣 CodeBlocks 就是多國語言的開發環境了。 當如果要恢復英文的介面,只要取消 Internationalization 的選項勾選,然後再次重新開啟 CodeBlocks 就回到英文的開發環境。 後記: CodeBlocks 翻譯文件網站 要下載 .mo or .po 檔案需要等待系統回復信件到 Email 信箱,無法及時處理,將這些檔案儲存在 Google Driver 的 src/CodeBlocks 目錄,以後可以從這裡直接取用。

輸入及轉換 Unicode 編碼

如何輸入羅馬數字?不管大寫的數字 ,或者小寫的數字,不知道 Unicode 編碼的人總是會以輸入英文字母 i or I 來替代,即輸入 i, ii, iii, or I, II, III,或許他們不會面臨要輸入 4 以上的羅馬數字,這樣的做法就可以在人類的視覺誤差中暫時瞞騙過關,然而,這樣的作法卻帶來資訊系統不可見的人為問題。這篇文章將描述如何輸入正確的羅馬數字?如何搜尋 Unicode 編碼?以及如何輸入 Unicode 編碼。關於 Unicode 編碼輸入與顯示是一個相當複雜的議題,這篇文章僅針對在 Windows 作業系統中的應用程式如何輸入與搜尋 Unicode 編碼?如何在 Unicode 編碼與對應字元之間做轉換?不會涉及其他的議題;若依照下面描述的輸入方式輸入 Unicode 編碼,不保證能完全符合你/妳所使用個人電腦系統的環境,請再參考相關的文章來解決輸入與顯示 Unicode 編碼的問題。 Unicode 編碼的輸入方式 在 Wiki 的文件 中說明如何在不同環境下輸入特殊字元的 Unicode 編碼,在 Windows 作業系統中輸入 Unicode 編碼的方式如下: Microsoft Word or Wordpad:先輸入 unicode 的編碼,再按下 Alt + x,例如,在 word 中輸入 1f370,然後按下 Alt+x,就會顯示 🍰( &#x1f370)的字元 其他 Microsoft 所有應用程式:應用程式包括 Microsoft PowerPoint, Excel, VS Code 等程式,且要支援 Unicode 編碼的版本,都可以使用注音輸入法來輸入 Unicode 編碼;首先切換到注音輸入法的中文輸入模式,然後按下~鍵(Esc 下方的鍵) + u + Unicode 編碼,特別要注意輸入的數字是鍵盤上方的數字鍵,不可以使用 Number Pad 的數字鍵。 查詢 Unicode 編碼 Unicode編碼的對應字元可以連結到 The Unicode Consortium 的 Code Charts 網站,在網站中輸入你/妳想要字元的 Unicode 編碼,如此就可以找到這個 Unicode 編碼的字元,問題是:我們通常是心中有字元的圖像,或者是要先看到字元的樣子,才知道我們要使用哪一個字

cmd 程式無法執行的解決步驟

因為要設定 cmd 的編碼方式為 Unicode 編碼( chcp 65001),可能不小心修改了編碼,而導致cmd 無法開啟,主要的原因是:「cmd 變成沒有編碼」,所以才造成 cmd 無法開啟。在 Windows 8 中要恢復 cmd 編碼的步驟如下: 1. 滑鼠移到左上角,會出現功能的選項,點選「搜尋」的圖示 2. 在輸入的格子中,輸入「cmd」但是不要按下 enter 3. 滑鼠移到「cmd 命令提示字元」,,按下「滑鼠右鍵」 4. 下面會出現一些選項,點選「開啟檔案位置」,如此可以找到 cmd 命令提示字元的位置 5. 在「 命令提示字元」檔案中按下滑鼠右鍵,並點選「內容」 6. 點選「選項」,把「950 - Big 5 繁體中文」的編碼加入