Wikibooks zhwikibooks https://zh.wikibooks.org/wiki/Wikibooks:%E9%A6%96%E9%A1%B5 MediaWiki 1.39.0-wmf.25 first-letter Media Special Talk User User talk Wikibooks Wikibooks talk File File talk MediaWiki MediaWiki talk Template Template talk Help Help talk Category Category talk Transwiki Transwiki talk Wikijunior Wikijunior talk Subject Subject talk TimedText TimedText talk Module Module talk Gadget Gadget talk Gadget definition Gadget definition talk CSS 0 9938 168502 166758 2022-08-17T08:29:43Z Paho.mqtt 60409 wikitext text/x-wiki {{split}} {{noteTA |1 = zh-cn:块状元素; zh-tw:區塊標籤; |2 = zh-cn:内联元素; zh-tw:同軸標籤; }} {{ambox|text=本页面存在草稿子页面[[CSS/草稿]]。}} ==狀態== 備忘錄：正在寫書本的大綱階段。 ==本書的內容== 這本書唯一的主題就是 [[Wikipedia:CSS|CSS]]，因此，這本書不會告訴你 CSS 的歷史，也不會著墨於 CSS 的好處與優點，因為在網路上已經有很豐富的資料。然而我鼓勵讀者若是時間許可，應該花些時間了解為什麼網頁技術怎麼從 [[Wikipedia:HTML|HTML]] 開始，後來衍生出 CSS，而最後又冒出 [[Wikipedia:XHTML|XHTML]] 。關於 CSS 的歷史，你可參考 [http://virtuelvis.com/archives/2005/01/css-history Who created CSS? CSS Early History]，至於 CSS 的好處與優點，用了你就會了解。 雖然我會在適當的地方加入參考資料或是連結，但是基本上，沒有閱讀這些參考資料與連結並不會影響你學習 CSS。因此，除了自己動手作停下來之外，盡量別讓其他的事情中斷你的閱讀。 CSS 3 增加了对圆角<ref name="莫振杰_进阶_p172">见莫振杰《HTML与CSS进阶教程》第172页(位于第11章“CSS图形”第3节“圆”)。</ref>、阴影的直接支持，有助于简化开发。在以前要完成基本的边框圆角效果非常麻烦，需要自己提前制作好图片，无法仅借助CSS直接实现<ref name="莫振杰_进阶_p172" />。 ==先統一辭彙== Cascading Style Sheet (CSS) 的中文翻譯一直沒有定調，有人稱他為「层叠样式表」，也有稱「串接樣式表」，我想，我在這裡不為 CSS 的中文譯名正名，往後的文章中，中文一律用「樣式表」來稱呼 CSS，不過我寧可多用英文，以免造成誤解。 還有一個重要的詞彙「selector」，中文有「選擇器」與「選取項」兩種翻譯，本書我採用後者。 ==前言：一個網頁的構成== 底下的說明，對於任何數位的文件來說，都會成立，但是我仍然將數位文件侷限在網頁這個範圍，這樣會讓問題單純一些。 從產生（或是製作）的過程來看，網頁可以區分為： #內容（contents） #呈現（presentation） 兩大元素。簡單的說，我們會依照不同的重要性、不同的性質（屬性）與意圖，將網頁的內容結構化，之後，再依據這個架構，給予各個部份合適的呈現方式。這就是我們最後看到的網頁。 === 概述 === ===不同性質的內容=== 我們先試著從不同的角度來看一分網頁，先從瀏覽器呈現出來的畫面，再到原始碼，最後看看有沒有什麼遺漏的內容。 ====從瀏覽器看到的成品==== 大家可以回想一下你曾經看過或是作過的網頁，從瀏覽器前端看得到的組成元素不外乎底下的幾個要素： ;標題（heading） :網頁的第一級標題、第二級標題、第三級 ... 標題。 ;段落（paragraph） :指的是一段意義完整的圖、文。 ;表格（table） :例如價目表、行事曆等等，由行、列組成的資料。 ;清單（list） :有序的清單、無序清單與定義式清單。 ;圖片（image） :各種可以被瀏覽器讀取的格式的圖檔。 ;超連結（hyperlink） :超連結是網頁有別於一般文件的一個很重大的分野，因此，我也把它當作是網頁的一個要素。 ;表單（form） :有按鈕、單選選項（raido）、複選選項（check box）、輸入欄位（text field）、輸入文字區塊（text area）等等。 ;多媒體（multimedia） :影片、音樂或是 flash。 ====反觀網頁原始碼==== 若是你熟悉原始碼，上面我提到的每一個要素，你一定可以立刻對應到某個 HTML 的標籤（tag），但是在原始碼裡面，你會發現更多東西，例如： *Javascript *meta 標籤 *style 標籤 *... 事實上，在原始碼裡面，我們還要提供許多很關鍵的資訊給瀏覽器或是搜尋引擎，這些資訊並不會呈現在使用者眼前，但是卻與網頁的呈現正確與否息息相關。這些資訊包括： 利用 meta 標籤告訴瀏覽器你的網頁所使用的編碼，例如： <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ====其他==== 若是你細心一點，你一定會發現，一個網頁所包含的元素裡面，我們漏提了許多的東西，例如： ;關於整個版面的 *前景、背景顏色 *邊界 *間距 ;關於字體的 *字型、字級與顏色 *行高 ===HTML 與 CSS 的分工=== 談到這裡，我想你一定感覺到了，原來所謂的「標記語言（markup language）」確實是要替文件的內容加上註記，讓一個文件的結構清晰、層次分明。熟悉 HTML 的人會說，HTML 的標籤裡面還是有一些用來作格式化（也就是定義呈現方式）的標籤，如：&lt;b&gt;、&lt;i&gt;，但是，總體來說，HTML 最大的用途乃是用來描述文件的架構，讓文件本身在結構上具有意義，甚至更進一步的讓文件具有語義。 至於樣式表的角色呢？它是用來告訴瀏覽器，如何裝扮每一個 HTML 標籤所標示的內容。所以，任何談到樣式表與 HTML 的文章都會說：「藉由 CSS，我們讓文件的內容與呈現可以分離。」沒錯，這就是學習 CSS 的目的，你應該開始想像，在不更動任何 HTML 原始碼的狀況下，藉由修改樣式表，你的網頁將呈現各種風格迥異的面貌。 ==HTML 簡單介紹（A Brief of HTML）== 在真正提到 CSS 之前，弄清楚下列幾個 HTML 的基本觀念，可以讓你更快掌握 CSS，也可以幫助你將來比較容易閱讀其他相關文件，另外，用合適的術語表達概念，有助於與其他設計師的溝通。 ===標籤與元素 (Tags and Elements)=== [[Image:tag-n-element.png|thumb|標籤與元素]] ;標籤（tag） *介於左右三角括弧 (angled brackets) 的文字，如：<body> *通常標籤是成對的，分別成為「起始標籤（opening tag）」與「結束標籤（closing tag）」，我們將內容在兩個標籤之中。 *一般而言，標籤用來告訴瀏覽器採取什麼處理方式：起始標籤告訴瀏覽器開始某個處理方式，結束標籤告訴瀏覽器終止該處理方式。 ;元素 (elements) *由起始標籤、結束標籤和其間的內容所構成，例如：'''<nowiki><b>This is bold text</b></nowiki>''' ===屬性 (Attribute)=== 我們以實際的例子來說明： <pre> <img src="images/foo.gif" alt="範例" width="100" height="50" /> </pre> 這是一個 img 標籤，在原始碼中，標示這裡要放入一張圖，圖片來源（source, src）是 image/foo.gif 這個檔案，萬一圖片無法顯示時，替代的（alternative, alt）文字是 "範例"，而這張圖的寬度（width）是 100 像素（pixels），高度（height）是 50 像素。 我們稱呼： *src *alt *width *height 為 img 標籤的屬性，而等號（=）後面用雙引號括起來的稱為屬性的「值（value）」。 不同的標籤有不同的屬性，數量也不一樣。 ===區塊標籤（Block-level Tags）與同軸標籤（Inline Tags）=== 我們先看一個例子，再來解釋什麼是 block-level 什麼是 inline。 {|border="1" width="90%" cellpadding="5" !width="50%"|HTML 原始碼 !width="50%"|呈現 |- | <pre> <p> 這是用來說明 <b>區塊標籤（block-level tags）</b>與 <b>同軸標籤（inline tags）</b>的例子。 </p> <p> 你注意到例子中，兩個標籤一個會造成換行，一個卻沒有 </p> </pre> | <p>這是用來說明'''區塊標籤（block-level tags）'''與'''同軸標籤（inline tags）'''的例子。</p> <p>你注意到例子中，兩個標籤一個會造成換行，一個卻沒有</p> |} 在上面的例子當中，<nowiki><p></nowiki> 標籤所形成的元素，會自成一個區塊（也就是會換行），<nowiki><b></nowiki> 標籤所形成的元素，並不會這樣，它僅在同一行裡作用。在 HTML 裡面，常看到的 block-level 的標籤有： *blockquote - 引用的區塊 *center - 區塊置中 *div - 通用的 block-level 標籤 *h1 - 第一級標題 *h2 - 第二級標題 *h3 - 第三級標題 *h4 - 第四級標題 *h5 - 第五級標題 *h6 - 第六級標題 *hr - 水平線 *p - 段落 *pre - 保留文字格式 而 inline 的標籤有： *a - 錨點（超連結標籤） *br - 段行 *iframe - 同軸框架（Inline frame） *img - 圖片 *q - 簡短的引用 *script - 用戶端 script *span - 通用的 inline 標籤 *sub - 下標（subscript） *sup - 上標（superscript） ==格式化表單的位置(Where to place Style Sheet?)== {{main|CSS/Applying CSS to HTML and XHTML|l1=把CSS应用到HTML}} ===內部格式化表單(Internal Style Sheet)=== 又稱內嵌式格式化表單（Embedded style sheet） 例如： <syntaxhighlight lang="html5"> <style type="text/css"> /*CSS goes here...*/ </style> </syntaxhighlight> 其中 <code>style</code> 标签内为放置 CSS 代码的地方。 ===外部格式化表單(External Style Sheet)=== CSS 内可用 <code>@import</code> 语句，在一个 CSS 内引入其它 CSS： <syntaxhighlight lang="css"> @import url("mystyle.css"); </syntaxhighlight> 在html文件中，引入样式表的方法可用 <code>link</code> 标签，如下所示。 <syntaxhighlight lang="html5"> <link rel="stylesheet" href="mystyle.css" type="text/css" /> </syntaxhighlight> 外部样式表的好处是令结构和表现完全分离。 ===内联样式表 (Inline Style Sheet)=== 如下所示是一个使用内联样式表的示例。通过 <code>style</code> '''属性'''，可以为元素添加样式。它无法做到结构与表现的分离，但在无法引入外部样式表或 <code>style</code> '''标签'''时（如[[维基百科]]）时仍然有用。 <syntaxhighlight lang="html5"> <div style="color:red; background:yellow; font-weight:bold;"> 這個段落會被顯示為黃底紅字粗體。 </div> </syntaxhighlight> 显示为 <div style="color:red; background:yellow; font-weight:bold;"> 這個段落會被顯示為黃底紅字粗體。 </div> ==CSS结构== ===语法=== {{main|CSS/Syntax|l1=语法}} <syntaxhighlight lang="css"> @rule argument(s) { selector { property: argument(s); another-property: argument(s); property-the-third: argument(s); fourth-property: argument(s); } } </syntaxhighlight> ===規則(Rules)=== CSS规则以@符号为前缀。至少1个实参（argument）。例如：@charset定义了文档字符集。@media设置了媒体的属性，常为all, screen与print。@font定义了网页字体。 ===註解符號 (Commenting)=== <syntaxhighlight lang="css"> /* comment contents */ </syntaxhighlight> ===規則的形式 (Form of rules)=== ===樣式的優先順序(Priority rules)=== CSS不同定义方式的样式，其优先级为：内联指定的style > 通过id指定的style > 通过class指定的style > 通过html tag指定的style 故得名Cascading ===繼承的問題(Inheritance)=== == 瀏覽器如何工作？( How browsers work?) == == 選取項(Selector) == === 選取項的語法(Syntax of selector) === *一般選取項（Universal） *型態選取項（Type） *群組選取項（Grouped） *子孫選取項（Descendant） *子選取項（Child） *比鄰選取項 (Adjacent) *屬性選取項（Attribute）：语法为<code>E[Attribute="value"]</code>. Attribute支持多种不同的匹配运算符，如 <code>=</code>, <code>!=</code>, <code>~=</code>, <code>^=</code> and <code>$=</code>. *類別選取項（Class）：语法为<code>E.classname</code>. *ID 選取項（ID）：语法为<code>E#IDname</code>. *擬元素選取項（Pseudo-element） *擬類別選取項（Pseudo-classes）：伪类是特殊的类，基于元素的状态，使用<code>:</code>运算符。语法为<code>E:pseudo-class</code>. 常见的有<code>:hover</code>, <code>:link</code> and <code>:visited</code> In CSS, a '''selector''' is the part of a rule that comes before the first "{", such as "p" in the rule "<code> p { font-weight:bold; } </code>". A selector specifies to which elements a rule should apply, by naming the type of the element, such as "div", the class of the element, or the id of the element. Selectors can only be used in linked and embedded CSS, not in inlined one. The following table provides an overview of selectors. The sections that follow discuss each type of selector in detail. {| class="wikitable" |+ Overview of selectors ! Type of Selector ! Example Selector ! Example Rule |- | type | div | div { margin:7px; padding:7px; } |- | class | .important | .important { font-weight:bold; color:red; } |- | id | #onlyThisOne | #onlyThisOne { font-family:courier; } |- | universal | * | * { color:green; } |- | pseudo-class | a:link | a:link { color:blue; } |- | pseudo-element | p:first-letter | p:first-letter { color:red } |- | descendant | td span | td span { font-weight:bold; } |- | grouped | h1, h2, h3 | h1, h2, h3 { text-align:center; } |} ==Type== These selectors match elements based on the name of their element type. The example above is using a type selector to make every instance of <code>p</code> have bold text. You can use the type selector with any element. Here are a few examples: <syntaxhighlight lang = "css"> div{ margin:7px; padding:7px; } </syntaxhighlight> <syntaxhighlight lang = "css"> body{ background-image:url("image.gif"); font-size:.9em; } </syntaxhighlight> ==Class== <strong>The class selector works with (X)HTML documents. It does not work with general XML documents unless the User Agent (web browser or other document reader) can determine which attribute is the class attribute for elements in the document. In (X)HTML documents <code>class</code> is defined to be the class attribute.</strong> HTML permits the <code>class</code> attribute for all elements that are valid in the body section of an HTML document, including the <code>body</code> element itself. This allows the web designer to distinguish between elements of the same type used in different contexts. For example, the designer could differentiate between HTML elements and HTML attributes in a technical document on HTML. <syntaxhighlight lang = "html"> The <code class="attribute">alt</code> attribute of the <code class="element">img</code> </syntaxhighlight> The class selector allows you to apply CSS rules based on the class of an element. The first way is to make a global class, which can be added to any element. You do that like this: <syntaxhighlight lang = "css"> .important { font-weight:bold; color:red; } </syntaxhighlight> That will make any element that has the class of '''important''' be bold and red. Sample HTML: <syntaxhighlight lang = "html"> <p class="important">Important Text</p> <p>Ordinary Text</p> <div class="important">Important Footnote</div> </syntaxhighlight> Example rendering: {{CSS:rendered|1=<p style="font-weight:bold; color:red;" title="This text is red.">Important Text</p> <p>Ordinary Text</p> <p style="font-weight:bold; color:red;" title="This text is red.">Important Footnote</div> }} The second way is to attach it to a type selector. The rule is only applied to elements of the given type which are of the specified class. CSS rule: <syntaxhighlight lang = "css"> p.right { float:right; clear:both } </syntaxhighlight> Sample HTML: <syntaxhighlight lang = "html"> <p class="right">Righty Righty</p> </syntaxhighlight> Example rendering (look right): {{CSS:rendered|1=<p style="float:right;">Righty Righty</p> <br style="clear:both"> }} An element may belong to more than one class, e.g. <syntaxhighlight lang = "html"> <p class="right">This paragraph belongs to the class 'right'.</p> <p class="important">This paragraph belongs to the class 'important'.</p> <p class="right important">This paragraph belongs to both classes.</p> </syntaxhighlight> Example rendering: {{CSS:rendered|1=<p style="clear:both;float:right;">This paragraph belongs to the class 'right'.</p> <p style="font-weight:bold;color:red;" title="This text is red.">This paragraph belongs to the class 'important'.</p> <p style="clear:both;float:right;font-weight:bold;color:red;" title="This text is red.">This paragraph belongs to both classes.</p> <br style="clear:both"> }} Class names should describe the purpose of the class, e.g. important, not the effect of the class, e.g. red. If you name classes by effect and then change your mind about the appearance you want you can end up with rules like: <syntaxhighlight lang = "css"> .red {color:blue} </syntaxhighlight> If necessary multiple class selectors can be used to select only elements that belong to all the specified classes, e.g. <syntaxhighlight lang = "css"> p.important.right { border: 2px dashed #666 } </syntaxhighlight> Example rendering: {{CSS:rendered|1=<p style="clear:both;float:right;">This paragraph belongs to the class 'right'.</p> <p style="font-weight:bold;color:red;" title="This text is red.">This paragraph belongs to the class 'important'.</p> <p style="clear:both;float:right;font-weight:bold;color:red;border: 2px dashed #666" title="This text is red and bordered.">This paragraph belongs to both classes.</p> <br style="clear:both"> }} === Internet Explorer 6 bug === Multiple class selectors as shown in the previous example do not work in Internet Explorer version 6. It treats the selector as though only the last class selector was present, e.g. <code>p.important.right</code> is treated as equivalent to <code>p.right</code>. Previous example rendered in Internet Explorer 6: {{CSS:rendered|1=<p style="clear:both;float:right;border: 2px dashed #666" title="This text is bordered.">This paragraph belongs to the class 'right'.</p> <p style="font-weight:bold;color:red;" title="This text is red.">This paragraph belongs to the class 'important'.</p> <p style="clear:both;float:right;font-weight:bold;color:red;border: 2px dashed #666" title="This text is red and bordered.">This paragraph belongs to both classes.</p> <br style="clear:both"> }} The complete HTML document and CSS stylesheet to test this bug are given below. classBug.css: <syntaxhighlight lang = "css"> .important { font-weight:bold; color:red; } p.right { float:right; clear:both } p.important.right { border: 2px dashed #666 } </syntaxhighlight> classBug.htm: <syntaxhighlight lang = "html"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>IE6 multiple class bug</title> <link rel="stylesheet" type="text/css" href="classBug.css"> </head> <body> <p class="right">This paragraph belongs to the class 'right'.</p> <p class="important">This paragraph belongs to the class 'important'.</p> <p class="right important">This paragraph belongs to both classes.</p> </body> </html> </syntaxhighlight> ==ID== <strong>The ID selector works with (X)HTML documents. It does not work with general XML documents unless the User Agent (web browser or other document reader) can determine which attribute is the ID attribute for elements in the document. In (X)HTML documents <code>id</code> is defined to be the ID attribute.</strong> The ID selector is used to select a single item on a page. It matches the <code>id</code> attribute of an element. Two elements on the same page must not have the same <code>id</code> attribute. However, several different webpages within the same site might reuse an <code>id</code>. It is commonly used for the major divisions of a page, e.g. mainContent, navigationBar. It is often used in conjunction with descendant selectors, e.g. to style all list items in the navigation bar whilst not affecting lists in the main content. CSS rule: <syntaxhighlight lang = "css"> #onlyThisOne { font-family:courier; } </syntaxhighlight> Sample HTML: <syntaxhighlight lang = "html"> <p id="onlyThisOne">Courier</p> </syntaxhighlight> Example rendering: {{CSS:rendered|1=<p style="font-family:courier;">Courier</p>}} ==Universal== These selectors apply a style to all the items on the page. For example to make all the text on the page green use the rule: <syntaxhighlight lang = "css"> * { color:green; } </syntaxhighlight> ==Pseudo-Classes== Pseudo-classes and pseudo-elements allow elements to be formatted on the basis of information other than the position of the element in the document tree. Pseudo-class and pseudo-element selectors are prefixed by a colon, <code>:</code>, in CSS1 and CSS2.1. In CSS3 pseudo-elements are prefixed by <code>::</code>. CSS level 1 defines three pseudo-classes: ;<code>link</code> : unvisited links ;<code>visited</code> : visited links ;<code>active</code> : active links These can only be applied to the anchor (<code>a</code>) elements. <syntaxhighlight lang = "css"> a:link{ color:blue; } a:visited{ color:purple; } a:active{ color:red; } </syntaxhighlight> CSS level 2.1 introduces several additional pseudo-classes, including <code>hover</code>. <code>hover</code> can be used to create rollover effects without resorting to Javascript. CSS2.1 also allows <code>active</code> to apply to any element that can be active, e.g. a button. The additional CSS 2.1 pseudo-classes are: ;<code>first-child</code> : matches any element that is the first child of its parent. ;<code>lang(...)</code> : matches the language of the element. The language may be set directly on the element or inherited from an ancestor element. A valid language code must appear in the parentheses, e.g. <code>en</code> for any variant of English or <code>en-gb</code> for British English. ;<code>hover</code> : applies whilst the user hovers over the element with the mouse. ;<code>active</code> : now allowed on any element capable of being 'active' &#8211; applies whilst the element is active. ;<code>focus</code> : applies whilst the element has the keyboard focus. Although CSS2.1 allows <code>hover</code> on any element Internet Explorer only allows it on anchor elements. Examples: <syntaxhighlight lang = "css"> p:first-child { font-size:120% } span:lang(la) { /* render Latin text, e.g. per se, in italics */ font-style:italic } li:hover { /* doesn't work in Internet Explorer */ background-color:blue } input:active { color:red } input:focus { background-color:yellow } </syntaxhighlight> An example of the <code>first-child</code> pseudo-class is given at the end of the [[#Descendant|descendant]] selector section. Multiple pseudo-classes may be specified, e.g. to warn the user that they are hovering over a link they have already visited: <syntaxhighlight lang = "css"> a:visited:hover { background-color:red } </syntaxhighlight> Care should be taken over the order of rules using pseudo-classes. For example, if you want visited links to be green except whilst the user hovers over them, when they should be yellow, the rules must be in the following order: <syntaxhighlight lang = "css"> a:visited{ color:green } a:hover{ color:yellow } </syntaxhighlight> If the rules were reversed the [[CSS Programming/Important|cascade]] would mean that the visited color would take precedence over the hover color. Visited links would remain green even when the user hovered over them. ==Pseudo-Elements== Pseudo-classes and pseudo-elements allow elements to be formatted on the basis of information other than the position of the element in the document tree. Pseudo-class and pseudo-element selectors are prefixed by a colon, <code>:</code>, in CSS1 and CSS2.1. In CSS3 pseudo-elements are prefixed by <code>::</code>. CSS level 1 defines two pseudo-elements, <code>first-letter</code> and <code>first-line</code>, which select the first letter and line of the rendered element respectively. These can be used to apply typographic effects, e.g. to create a drop cap at the start of a paragraph. <syntaxhighlight lang = "css"> p:first-letter { color:red } </syntaxhighlight> Only one pseudo-element selector may be used and it must be the last part of the selector chain. The <code>first-line</code> selector may only be applied to block-level elements, inline-blocks, table captions and table cells. CSS2.1 adds two more pseudo-elements, <code>before</code> and <code>after</code>. Starting in CSS3 pseudo-elements are prefixed with <code>::</code> rather than <code>:</code>. ==Simple selectors== The selectors described above (type, class, ID, universal, pseudo-class and pseudo-element) are all examples of simple selectors. The full syntax for a simple selector is: * a type selector or the universal selector * zero, one or more class, ID and pseudo-class selectors (CSS2.1 also allows attribute selectors) * zero or one pseudo-element selectors The following are all examples of simple selectors: <syntaxhighlight lang = "css"> p p.important p#navigation a:link p:first-line a:visited#homePage.menu2:first-letter * *#footer *.content.abstract *#mainArticle:first-letter </syntaxhighlight> As a shorthand notation the universal selector, <code>*</code>, may be omitted if it is not the only component of the simple selector. For example, <code>#footer</code> is equivalent to <code>*#footer</code> and <code>:first-line</code> is equivalent to <code>*:first-line</code>. Combining simple selectors: Simple selectors can be combined to take the context of the element in to account. For example you might want to apply a rule only to list elements in the navigation bar. ==Descendant== Descendant selectors allow you to apply style to elements that are nested within another specified element. For example, you could have every <code>span</code> element inside of every <code>p</code> element be bold. The <code>span</code> can be a child element of the <code>p</code> element, or a grandchild, or a great-grandchild, etc. CSS rule: <syntaxhighlight lang = "css"> p span{ font-weight:bold; } </syntaxhighlight> Sample HTML: <syntaxhighlight lang = "html"> <p>Start of paragraph. <span>This span is bold.</span> Rest of paragraph.</p> <div>Start of division. <span>This span is normal.</span> Rest of division.</div> </syntaxhighlight> Example rendering: {{CSS:rendered|1=<p>Start of paragraph. <span style="font-weight:bold;" title="This text is bold.">This span is bold.</span> Rest of paragraph.</p> <div>Start of division. <span>This span is normal.</span> Rest of division.</div> }} The next example changes the color of visited links in the navigation section. Visited links in other parts of the document would be unaffected. CSS rule: <syntaxhighlight lang = "css"> ul#navigation a:visited { color:red } </syntaxhighlight> Sample HTML: <syntaxhighlight lang = "html"> <ul id="navigation"> <li><a href="HomePage">Home</a></li> <li><a href="AnotherPage">A page you haven't visited yet.</a></li> </ul> </syntaxhighlight> Example rendering: {{CSS:rendered|1=<ul> <li style="color:red" title="This text is red.">Home</li> <li style="color:blue">A page you haven't visited yet.</li> </ul> }} An example using the <code>first-child</code> selector. CSS rule: <syntaxhighlight lang = "css"> div.content strong:first-child { color:red } </syntaxhighlight> Sample HTML: <syntaxhighlight lang = "css"> <div class="content"> <p>Some <em>emphasized</em> text and some <strong>strongly emphasized</strong> text.</p> <p>Some <strong>strongly emphasized</strong> text and some <em>emphasized</em> text.</p> </div> </syntaxhighlight> Example rendering: {{CSS:rendered|1=<p>Some <em>emphasized</em> text and some <strong>strongly emphasized</strong> text.</p> <p>Some <strong style="color:red" title="This text is red.">strongly emphasized</strong> text and some <em>emphasized</em> text.</p> }} Two important points to note: * an element is still the first child if it is preceded by text, so the <code>em</code> element in the first paragraph and the <code>strong</code> element in the second paragraph are the first children of their respective paragraphs. * a rule is only applied to an element if it matches all parts of the selector. The <code>strong</code> element in the first paragraph is a second child, so it is not matched by the <code>strong:first-child</code> selector. ==Grouping selectors== Selectors can be grouped into comma separated lists. <syntaxhighlight lang = "css"> h1, h2, h3 { text-align:center; } </syntaxhighlight> is equivalent to <syntaxhighlight lang = "css"> h1 { text-align:center; } h2 { text-align:center; } h3 { text-align:center; } </syntaxhighlight> An element may be selected by more than one rule: <syntaxhighlight lang = "css"> h1, h2, h3, h4, h5, h6 { color: white; background-color: red; } h1 { color: yellow; } </syntaxhighlight> All headings will have a red background. Level 2&#8211;6 headings will have white text. Level 1 headings will have yellow text. The order of the rules is significant. In the following example all headings would have white text. <syntaxhighlight lang = "css"> h1 { color: yellow; } h1, h2, h3, h4, h5, h6 { color: white; background-color: red; } </syntaxhighlight> When more than one rule applies to an element the [[CSS Programming/Important|cascade]] is used to determine the resulting style applied to the element. ==Later CSS versions== Additional selectors in CSS 2.1: * Child selectors * Adjacent sibling selectors * Attribute selectors * More pseudo-classes and pseudo-elements. Additional selectors in CSS 3: * More sibling selectors * More attribute selectors * More pseudo-classes and pseudo-elements. {{BookCat}} [[fr:Le langage CSS/Les sélecteurs]] [[it:CSS/Selettori]] === 一般選取項(Universal) === 所謂的廣域選擇器指的是以星號（*）的方式來決定選取的範圍，實際上，*通常代表的是不特定範圍的選取，因此在CSS中以*設定廣域選取器時，將交由瀏覽器來自行決定範圍 <syntaxhighlight lang="css"> * { color: #FF0000; } </syntaxhighlight> === 型態選取項(Type) === 型態選擇器會是大家最常用到的選擇器之一，所指定的型態名稱會找尋文件中相同的實體元素配合，實際上，我們所使用的『標籤』語法就是一種型態選擇器。 <syntaxhighlight lang="css" style="border:1px dashed #aaa;padding:10px;margin:10px;background:#f9f9f9"> body { background-color: #999999; color: #FFFFFF; } </syntaxhighlight> 如果有一樣的樣式想要同時作用在好幾個標籤上的話，可以使用逗號（,）作分隔。 <syntaxhighlight lang="css" style="border:1px dashed #aaa;padding:10px;margin:10px;background:#f9f9f9"> a, p, h1 { font-size: 10 pt; color: #0000AA; } </syntaxhighlight> === 群組選取項(Grouped) === === 子孫選取項(Descendant) === 子孙选择器的形式为空格，水平制表符，换行等任何 ASCII 空白字符。例如在下面示例里，给 <code>class</code> 为 test 的任何 <code>span</code> 子元素设置 consolas 的字体： <syntaxhighlight lang="css" style="border:1px dashed #aaa;padding:10px;margin:10px;background:#f9f9f9"> .test span { font-family:consolas; } </syntaxhighlight> === 子選取項(Child)=== === 比鄰選取項 (Adjacent) === === 屬性選取項(Attribute) === === 類別選取項(Class) === === ID 選取項(ID) === 在網頁中指定元件的id屬性之後，就可以使用井字號（#）來設定ID選擇器，在語法中ID選擇器前可以指定網頁元素，但在實際使用時，因為建議網頁中不要有重複ID的元素，因此就沒有指定的必要了。舉例來說，有個識別選擇器p#example，然後在網頁中有兩個物件<code><nowiki><p id="example"></nowiki></code>以及<code><nowiki><table id="example"></nowiki></code>，則只有前者會起作用，但如果選擇器的名稱為#example，擇兩者均會起作用。 <syntaxhighlight lang="css" style="border:1px dashed #aaa;padding:10px;margin:10px;background:#f9f9f9"> #example { font-size: 10 pt; color: #0000AA; } </syntaxhighlight> === 擬元素選取項(Pseudo-element) === '''伪元素选择器'''指的是一种以双冒号 (<code>::</code>) ，或有时也使用单冒号分隔开，后连所选取的伪元素的选择器。是於CSS裡製造出來的假HTML元素。<ref>[[w:CSS]]</ref>目前共有 5 种 <syntaxhighlight lang="css" style="border:1px dashed #aaa;padding:10px;margin:10px;background:#f9f9f9"> :after /*或*/ ::after :before /*或*/ ::before :first-letter /*或*/ ::first-letter :first-line /*或*/ ::first-line ::selection </syntaxhighlight> === 擬類別選取項(Pseudo-classes) === == 方框的基本介紹 (Introduce to Box) == 在CSS中，瀏覽器將每個標籤用Box方式呈現，並分為行內Box以及區塊Box。 每個Box區塊使用Box模式（Box model）呈現，以外距、邊線、內距、內容四種屬性（由外而內）的順序組成一個Box。 == 幾個特別的性質(properties) == == 注意 == 有時一個網頁的作者會濫用CSS。有些習慣於只使用HTML的作者可能會忽視CSS提供的可能性。比如有些習慣於使用HTML的顯示元素的作者可能會在所有的HTML文件內加入CSS樣式。這比將HTML顯示和結構指令混在一起是一個進步，但它還是有許多同樣的缺點，而且維護時的工作量與混合使用差不多。 CSS與其他程式語言有著一些共同的陷阱。尤其在命名CSS的id和class時，CSS作者常選擇一個比較有說明性的名稱而使用顯示特徵作為它們的名稱。比如一個作者可能使用「big-red」來命名一個用大紅字體的突出顯示的字節。在當時，對作者來說這個名稱可能是很直覺的，但假如後來作者決定突出顯示的字節應該使用綠色，而不是紅色的話，他的命名就有毛病了。在上面這個例子中，一個更合適的名稱應該是「emphasized」（強調），它描寫的是這個「class」的用意，而不是它是如何被顯示的。 另一個毛病是未記錄的、未定義的和往往會被遺忘的名稱。一個網頁作者可能會選擇上百個名稱。名稱如footer、footnote或者explanation、note、info、more可能是指同一回事。這樣許多重複的名稱就出現了。有時一個複雜的網站的設計者可能會結合HTML和CSS來解決這個問題，但這樣一來他又把內容與顯示黏有一起了，而且這樣一來這個文件就只適合於某一媒體了。（外部樣式表的一個大優點就是它是跨媒體的，因為不同的樣式可以特別適用於不同的輸出媒體。） HTML本身的複雜性是另一個困難處。雖然大部分使用CSS的文件比傳統的使用表格的文件要整潔，但過分使用class和過於細膩的結構層次同樣使HTML變得繁庸。此外有的作者過分使用div元素。 另一個陷阱是為了解決常見的瀏覽器錯誤而引入特別的CSS樣式，這些樣式當然是為了除錯而引入的，但它們使一個CSS文件的維護性能降低，有時這樣的CSS文件的維護量甚至比過去的HTML文件的維護量還大。常見的特別CSS樣式多是針對Internet Explorer（尤其IE 6、IE 7等舊版本）的顯示錯誤而額外編寫。 有時一個作者可能會過度地使用CSS來決定他的文件應該怎樣被顯示，如：一個作者會決定隱藏超連結底下的橫線，這很容易做到，但對瀏覽者來說這可能會帶來不便。 有些新的CSS3樣式尚未成為標準，因此在使用時需要加上前綴（Prefix），使其可以在採用不同排版引擎的瀏覽器中正確顯示。但于[[Internet Explorer 10]] Release Preview起, transform, transition, [[CSS Animations|animation]]和gradient渐变等属性均可不加前缀。<ref>[http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx Unprefixed CSS3 Gradients in IE10]</ref><ref>[http://blogs.msdn.com/b/ie/archive/2012/06/06/moving-the-stable-web-forward-in-ie10-release-preview.aspx Moving the Stable Web Forward in IE10 Release Preview]</ref>例如使用transition時，需要額外撰寫四行編碼： <syntaxhighlight lang="css" style="overflow-x:auto"> -webkit-transition: height 0.2s linear;　/* 針對使用WebKit排版引擎的瀏覽器，如Google Chrome、Apple Safari */ -moz-transition: height 0.2s linear;　/* 針對使用Gecko排版引擎的瀏覽器，如Mozilla Firefox */ -o-transition: height 0.2s linear;　/* 針對使用Presto排版引擎的瀏覽器，如Opera */ -ms-transition: height 0.2s linear;　/* MSIE，但Release Preview起可以不用前缀*/ transition: height 0.2s linear;　/* CSS3標準，放最後*/ </syntaxhighlight> CSS的大小因此增大，到這些CSS樣式不需前綴時，又需要額外花時間把它們刪除。 == 參考資料 == === 文内引用 === <references/> === 补充来源 === * {{cite book |title=HTML与CSS进阶教程 |author=莫振杰 |publisher=人民邮电出版社 |location=中国北京 |edition=1 |series= |ISBN=978-7-115-43295-7 |language=zh-cn |year=2016年}} === 其它资料 === * Cascading Style Sheets, Level 2 * Code Style Media monitor * CSS - Cascading Style Sheets * CSS Bugs and Workarounds * CSS Panic Guide * CSS Reference Table * css-bug info * glish.com CSS layout techniques * glish.com * Guide to Cascading Style Sheets * Little Boxes * Pixellated! DesignDevelopDeliver * RichInStyle.com - Style sheet master class part 1 - writing perfect style sheets * Tableless layout HOWTO * The Layout Reservoir - BlueRobot * Web Nouveau Table-less sites list-1 * Webmonkey Reference Stylesheets Guide * Working with CSS - Introduction to CSS Layout {{Wikipedia}} {{DEFAULTSORT:Cascading Style Sheets}} [[Category:电脑]] {{bookCat}} 2kwqblwtmjdy4fcnyueglldxkosyrnq 168504 168502 2022-08-17T08:50:13Z Paho.mqtt 60409 wikitext text/x-wiki {{split}} {{noteTA |1 = zh-cn:块状元素; zh-tw:區塊標籤; |2 = zh-cn:内联元素; zh-tw:同軸標籤; }} {{ambox|text=本页面存在草稿子页面[[CSS/草稿]]。}} ==狀態== 備忘錄：正在寫書本的大綱階段。 ==本書的內容== 這本書唯一的主題就是 [[Wikipedia:CSS|CSS]]，因此，這本書不會告訴你 CSS 的歷史，也不會著墨於 CSS 的好處與優點，因為在網路上已經有很豐富的資料。然而我鼓勵讀者若是時間許可，應該花些時間了解為什麼網頁技術怎麼從 [[Wikipedia:HTML|HTML]] 開始，後來衍生出 CSS，而最後又冒出 [[Wikipedia:XHTML|XHTML]] 。關於 CSS 的歷史，你可參考 [http://virtuelvis.com/archives/2005/01/css-history Who created CSS? CSS Early History]，至於 CSS 的好處與優點，用了你就會了解。 雖然我會在適當的地方加入參考資料或是連結，但是基本上，沒有閱讀這些參考資料與連結並不會影響你學習 CSS。因此，除了自己動手作停下來之外，盡量別讓其他的事情中斷你的閱讀。 CSS 3 增加了对圆角<ref name="莫振杰_进阶_p172">见莫振杰《HTML与CSS进阶教程》第172页(位于第11章“CSS图形”第3节“圆”)。</ref>、阴影的直接支持，有助于简化开发。在以前要完成基本的边框圆角效果非常麻烦，需要自己提前制作好图片，无法仅借助CSS直接实现<ref name="莫振杰_进阶_p172" />。 ==先統一辭彙== Cascading Style Sheet (CSS) 的中文翻譯一直沒有定調，有人稱他為「层叠样式表」，也有稱「串接樣式表」，我想，我在這裡不為 CSS 的中文譯名正名，往後的文章中，中文一律用「樣式表」來稱呼 CSS，不過我寧可多用英文，以免造成誤解。 還有一個重要的詞彙「selector」，中文有「選擇器」與「選取項」兩種翻譯，本書我採用後者。 ==前言：一個網頁的構成== 底下的說明，對於任何數位的文件來說，都會成立，但是我仍然將數位文件侷限在網頁這個範圍，這樣會讓問題單純一些。 從產生（或是製作）的過程來看，網頁可以區分為： #內容（contents） #呈現（presentation） 兩大元素。簡單的說，我們會依照不同的重要性、不同的性質（屬性）與意圖，將網頁的內容結構化，之後，再依據這個架構，給予各個部份合適的呈現方式。這就是我們最後看到的網頁。 === 概述 === ===不同性質的內容=== 我們先試著從不同的角度來看一分網頁，先從瀏覽器呈現出來的畫面，再到原始碼，最後看看有沒有什麼遺漏的內容。 ====從瀏覽器看到的成品==== 大家可以回想一下你曾經看過或是作過的網頁，從瀏覽器前端看得到的組成元素不外乎底下的幾個要素： ;標題（heading） :網頁的第一級標題、第二級標題、第三級 ... 標題。 ;段落（paragraph） :指的是一段意義完整的圖、文。 ;表格（table） :例如價目表、行事曆等等，由行、列組成的資料。 ;清單（list） :有序的清單、無序清單與定義式清單。 ;圖片（image） :各種可以被瀏覽器讀取的格式的圖檔。 ;超連結（hyperlink） :超連結是網頁有別於一般文件的一個很重大的分野，因此，我也把它當作是網頁的一個要素。 ;表單（form） :有按鈕、單選選項（raido）、複選選項（check box）、輸入欄位（text field）、輸入文字區塊（text area）等等。 ;多媒體（multimedia） :影片、音樂或是 flash。 ====反觀網頁原始碼==== 若是你熟悉原始碼，上面我提到的每一個要素，你一定可以立刻對應到某個 HTML 的標籤（tag），但是在原始碼裡面，你會發現更多東西，例如： *Javascript *meta 標籤 *style 標籤 *... 事實上，在原始碼裡面，我們還要提供許多很關鍵的資訊給瀏覽器或是搜尋引擎，這些資訊並不會呈現在使用者眼前，但是卻與網頁的呈現正確與否息息相關。這些資訊包括： 利用 meta 標籤告訴瀏覽器你的網頁所使用的編碼，例如： <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ====其他==== 若是你細心一點，你一定會發現，一個網頁所包含的元素裡面，我們漏提了許多的東西，例如： ;關於整個版面的 *前景、背景顏色 *邊界 *間距 ;關於字體的 *字型、字級與顏色 *行高 ===HTML 與 CSS 的分工=== 談到這裡，我想你一定感覺到了，原來所謂的「標記語言（markup language）」確實是要替文件的內容加上註記，讓一個文件的結構清晰、層次分明。熟悉 HTML 的人會說，HTML 的標籤裡面還是有一些用來作格式化（也就是定義呈現方式）的標籤，如：&lt;b&gt;、&lt;i&gt;，但是，總體來說，HTML 最大的用途乃是用來描述文件的架構，讓文件本身在結構上具有意義，甚至更進一步的讓文件具有語義。 至於樣式表的角色呢？它是用來告訴瀏覽器，如何裝扮每一個 HTML 標籤所標示的內容。所以，任何談到樣式表與 HTML 的文章都會說：「藉由 CSS，我們讓文件的內容與呈現可以分離。」沒錯，這就是學習 CSS 的目的，你應該開始想像，在不更動任何 HTML 原始碼的狀況下，藉由修改樣式表，你的網頁將呈現各種風格迥異的面貌。 ==HTML 簡單介紹（A Brief of HTML）== 在真正提到 CSS 之前，弄清楚下列幾個 HTML 的基本觀念，可以讓你更快掌握 CSS，也可以幫助你將來比較容易閱讀其他相關文件，另外，用合適的術語表達概念，有助於與其他設計師的溝通。 ===標籤與元素 (Tags and Elements)=== [[Image:tag-n-element.png|thumb|標籤與元素]] ;標籤（tag） *介於左右三角括弧 (angled brackets) 的文字，如：<body> *通常標籤是成對的，分別成為「起始標籤（opening tag）」與「結束標籤（closing tag）」，我們將內容在兩個標籤之中。 *一般而言，標籤用來告訴瀏覽器採取什麼處理方式：起始標籤告訴瀏覽器開始某個處理方式，結束標籤告訴瀏覽器終止該處理方式。 ;元素 (elements) *由起始標籤、結束標籤和其間的內容所構成，例如：'''<nowiki><b>This is bold text</b></nowiki>''' ===屬性 (Attribute)=== 我們以實際的例子來說明： <pre> <img src="images/foo.gif" alt="範例" width="100" height="50" /> </pre> 這是一個 img 標籤，在原始碼中，標示這裡要放入一張圖，圖片來源（source, src）是 image/foo.gif 這個檔案，萬一圖片無法顯示時，替代的（alternative, alt）文字是 "範例"，而這張圖的寬度（width）是 100 像素（pixels），高度（height）是 50 像素。 我們稱呼： *src *alt *width *height 為 img 標籤的屬性，而等號（=）後面用雙引號括起來的稱為屬性的「值（value）」。 不同的標籤有不同的屬性，數量也不一樣。 ===區塊標籤（Block-level Tags）與同軸標籤（Inline Tags）=== 我們先看一個例子，再來解釋什麼是 block-level 什麼是 inline。 {|border="1" width="90%" cellpadding="5" !width="50%"|HTML 原始碼 !width="50%"|呈現 |- | <pre> <p> 這是用來說明 <b>區塊標籤（block-level tags）</b>與 <b>同軸標籤（inline tags）</b>的例子。 </p> <p> 你注意到例子中，兩個標籤一個會造成換行，一個卻沒有 </p> </pre> | <p>這是用來說明'''區塊標籤（block-level tags）'''與'''同軸標籤（inline tags）'''的例子。</p> <p>你注意到例子中，兩個標籤一個會造成換行，一個卻沒有</p> |} 在上面的例子當中，<nowiki><p></nowiki> 標籤所形成的元素，會自成一個區塊（也就是會換行），<nowiki><b></nowiki> 標籤所形成的元素，並不會這樣，它僅在同一行裡作用。在 HTML 裡面，常看到的 block-level 的標籤有： *blockquote - 引用的區塊 *center - 區塊置中 *div - 通用的 block-level 標籤 *h1 - 第一級標題 *h2 - 第二級標題 *h3 - 第三級標題 *h4 - 第四級標題 *h5 - 第五級標題 *h6 - 第六級標題 *hr - 水平線 *p - 段落 *pre - 保留文字格式 而 inline 的標籤有： *a - 錨點（超連結標籤） *br - 段行 *iframe - 同軸框架（Inline frame） *img - 圖片 *q - 簡短的引用 *script - 用戶端 script *span - 通用的 inline 標籤 *sub - 下標（subscript） *sup - 上標（superscript） ==格式化表單的位置(Where to place Style Sheet?)== {{main|CSS/Applying CSS to HTML and XHTML|l1=把CSS应用到HTML}} ===內部格式化表單(Internal Style Sheet)=== 又稱內嵌式格式化表單（Embedded style sheet） 例如： <syntaxhighlight lang="html5"> <style type="text/css"> /*CSS goes here...*/ </style> </syntaxhighlight> 其中 <code>style</code> 标签内为放置 CSS 代码的地方。 ===外部格式化表單(External Style Sheet)=== CSS 内可用 <code>@import</code> 语句，在一个 CSS 内引入其它 CSS： <syntaxhighlight lang="css"> @import url("mystyle.css"); </syntaxhighlight> 在html文件中，引入样式表的方法可用 <code>link</code> 标签，如下所示。 <syntaxhighlight lang="html5"> <link rel="stylesheet" href="mystyle.css" type="text/css" /> </syntaxhighlight> 外部样式表的好处是令结构和表现完全分离。 ===内联样式表 (Inline Style Sheet)=== 如下所示是一个使用内联样式表的示例。通过 <code>style</code> '''属性'''，可以为元素添加样式。它无法做到结构与表现的分离，但在无法引入外部样式表或 <code>style</code> '''标签'''时（如[[维基百科]]）时仍然有用。 <syntaxhighlight lang="html5"> <div style="color:red; background:yellow; font-weight:bold;"> 這個段落會被顯示為黃底紅字粗體。 </div> </syntaxhighlight> 显示为 <div style="color:red; background:yellow; font-weight:bold;"> 這個段落會被顯示為黃底紅字粗體。 </div> ==CSS结构== ===语法=== {{main|CSS/Syntax|l1=语法}} <syntaxhighlight lang="css"> @rule argument(s) { selector { property: argument(s); another-property: argument(s); property-the-third: argument(s); fourth-property: argument(s); } } </syntaxhighlight> ===規則(Rules)=== {{main|CSS/Rules|l1=定义样式规则}} CSS规则以@符号为前缀。至少1个实参（argument）。例如：@charset定义了文档字符集。@media设置了媒体的属性，常为all, screen与print。@font定义了网页字体。 ===长度和单位=== {{main|CSS/Lengths and Units|l1=长度和单位}} === 選取項(Selector) === {{main|CSS/选择器}} ===繼承的問題(Inheritance)=== {{main|Inheritance Rules|l1=继承规则}} ===关键字Important=== {{main|CSS/Important}} ===註解符號 (Commenting)=== <syntaxhighlight lang="css"> /* comment contents */ </syntaxhighlight> ===樣式的優先順序(Priority rules)=== CSS不同定义方式的样式，其优先级为：内联指定的style > 通过id指定的style > 通过class指定的style > 通过html tag指定的style 故得名Cascading == 瀏覽器如何工作？( How browsers work?) == == 方框的基本介紹 (Introduce to Box) == 在CSS中，瀏覽器將每個標籤用Box方式呈現，並分為行內Box以及區塊Box。 每個Box區塊使用Box模式（Box model）呈現，以外距、邊線、內距、內容四種屬性（由外而內）的順序組成一個Box。 == 幾個特別的性質(properties) == == 注意 == 有時一個網頁的作者會濫用CSS。有些習慣於只使用HTML的作者可能會忽視CSS提供的可能性。比如有些習慣於使用HTML的顯示元素的作者可能會在所有的HTML文件內加入CSS樣式。這比將HTML顯示和結構指令混在一起是一個進步，但它還是有許多同樣的缺點，而且維護時的工作量與混合使用差不多。 CSS與其他程式語言有著一些共同的陷阱。尤其在命名CSS的id和class時，CSS作者常選擇一個比較有說明性的名稱而使用顯示特徵作為它們的名稱。比如一個作者可能使用「big-red」來命名一個用大紅字體的突出顯示的字節。在當時，對作者來說這個名稱可能是很直覺的，但假如後來作者決定突出顯示的字節應該使用綠色，而不是紅色的話，他的命名就有毛病了。在上面這個例子中，一個更合適的名稱應該是「emphasized」（強調），它描寫的是這個「class」的用意，而不是它是如何被顯示的。 另一個毛病是未記錄的、未定義的和往往會被遺忘的名稱。一個網頁作者可能會選擇上百個名稱。名稱如footer、footnote或者explanation、note、info、more可能是指同一回事。這樣許多重複的名稱就出現了。有時一個複雜的網站的設計者可能會結合HTML和CSS來解決這個問題，但這樣一來他又把內容與顯示黏有一起了，而且這樣一來這個文件就只適合於某一媒體了。（外部樣式表的一個大優點就是它是跨媒體的，因為不同的樣式可以特別適用於不同的輸出媒體。） HTML本身的複雜性是另一個困難處。雖然大部分使用CSS的文件比傳統的使用表格的文件要整潔，但過分使用class和過於細膩的結構層次同樣使HTML變得繁庸。此外有的作者過分使用div元素。 另一個陷阱是為了解決常見的瀏覽器錯誤而引入特別的CSS樣式，這些樣式當然是為了除錯而引入的，但它們使一個CSS文件的維護性能降低，有時這樣的CSS文件的維護量甚至比過去的HTML文件的維護量還大。常見的特別CSS樣式多是針對Internet Explorer（尤其IE 6、IE 7等舊版本）的顯示錯誤而額外編寫。 有時一個作者可能會過度地使用CSS來決定他的文件應該怎樣被顯示，如：一個作者會決定隱藏超連結底下的橫線，這很容易做到，但對瀏覽者來說這可能會帶來不便。 有些新的CSS3樣式尚未成為標準，因此在使用時需要加上前綴（Prefix），使其可以在採用不同排版引擎的瀏覽器中正確顯示。但于[[Internet Explorer 10]] Release Preview起, transform, transition, [[CSS Animations|animation]]和gradient渐变等属性均可不加前缀。<ref>[http://blogs.msdn.com/b/ie/archive/2012/06/25/unprefixed-css3-gradients-in-ie10.aspx Unprefixed CSS3 Gradients in IE10]</ref><ref>[http://blogs.msdn.com/b/ie/archive/2012/06/06/moving-the-stable-web-forward-in-ie10-release-preview.aspx Moving the Stable Web Forward in IE10 Release Preview]</ref>例如使用transition時，需要額外撰寫四行編碼： <syntaxhighlight lang="css" style="overflow-x:auto"> -webkit-transition: height 0.2s linear;　/* 針對使用WebKit排版引擎的瀏覽器，如Google Chrome、Apple Safari */ -moz-transition: height 0.2s linear;　/* 針對使用Gecko排版引擎的瀏覽器，如Mozilla Firefox */ -o-transition: height 0.2s linear;　/* 針對使用Presto排版引擎的瀏覽器，如Opera */ -ms-transition: height 0.2s linear;　/* MSIE，但Release Preview起可以不用前缀*/ transition: height 0.2s linear;　/* CSS3標準，放最後*/ </syntaxhighlight> CSS的大小因此增大，到這些CSS樣式不需前綴時，又需要額外花時間把它們刪除。 == 參考資料 == === 文内引用 === <references/> === 补充来源 === * {{cite book |title=HTML与CSS进阶教程 |author=莫振杰 |publisher=人民邮电出版社 |location=中国北京 |edition=1 |series= |ISBN=978-7-115-43295-7 |language=zh-cn |year=2016年}} === 其它资料 === * Cascading Style Sheets, Level 2 * Code Style Media monitor * CSS - Cascading Style Sheets * CSS Bugs and Workarounds * CSS Panic Guide * CSS Reference Table * css-bug info * glish.com CSS layout techniques * glish.com * Guide to Cascading Style Sheets * Little Boxes * Pixellated! DesignDevelopDeliver * RichInStyle.com - Style sheet master class part 1 - writing perfect style sheets * Tableless layout HOWTO * The Layout Reservoir - BlueRobot * Web Nouveau Table-less sites list-1 * Webmonkey Reference Stylesheets Guide * Working with CSS - Introduction to CSS Layout {{Wikipedia}} {{DEFAULTSORT:Cascading Style Sheets}} [[Category:电脑]] {{bookCat}} pvmqoe465cwqk8jl6nxsevy4i8ukuxu 中国朝代简表 0 22140 168506 167135 2022-08-17T10:31:46Z 2404:0:822F:53A9:8E6:5D28:698A:DF8F 劉玄名字錯位 wikitext text/x-wiki {| class="wikitable" border="1" | |- !朝代!!起止时间!!都城!!都城今址!!建立者 |- |夏朝||约前2029年-约前1559年||阳城、阳翟、老丘、斟鄩、西河||河南登封、陈留、偃师、安阳等||禹(姒文命) |- |商朝||约前1559年-约前1046年||亳、西毫、奄、殷||河南商丘、偃师、郑州、安阳||汤(子天乙) |- | colspan="5" style="text-align: center;"|周朝 约前1046年-前256年 |- |西周||约前1046年-前771年||镐京||陕西西安||周武王姬发 |- |东周(分为春秋、战国两个时期)||前770年-前256年||洛邑||河南洛阳||周平王姬宜臼 |- |秦朝||前221年-前207年||咸阳||陕西咸阳||秦始皇帝嬴政 |- |西楚||前206年-前202年||彭城||江苏徐州||西楚霸王项羽 |- |西汉||前202年-公元8年11月||长安||陕西西安||汉高祖刘邦 |- |新朝||公元8年12月1日-公元23年10月6日||长安||陕西西安||建兴帝王莽 |- |玄汉||23年-25年||长安||陕西西安||更始帝刘玄 |- |东汉||25年-220年||洛阳||河南洛阳||光武帝刘秀 |- | colspan="5" style="text-align: center;"|三国 220年-280年 |- |魏||220年-266年||洛阳||河南洛阳||魏文帝曹丕 |- |蜀||221年-263年||成都||四川成都||昭烈帝刘备 |- |吴||222年-280年||建业||江苏南京||吴大帝孙权 |- |西晋||266年-316年||洛阳、长安||河南洛阳、陕西西安||晋武帝司马炎 |- |东晋||317年-420年||建康||江苏南京||晋元帝司马睿 |- |十六国||304年-439年||平阳等||山西临汾||石勒、刘渊等 |- | colspan="5" style="text-align: center;"|南朝 420年-589年 |- |宋||420年-479年||建康||江苏南京||宋武帝刘裕 |- |齐||479年-502年||建康||江苏南京||齐高帝萧道成 |- |梁||502年-557年||建康||江苏南京||梁武帝萧衍 |- |陈||557年-589年||建康||江苏南京||陈武帝陈霸先 |- | colspan="5" style="text-align: center;"|北朝 386年-581年 |- |北魏||386年-557年||平城、洛阳||山西大同、河南洛阳||道武帝拓跋珪 |- |东魏||534年-550年||邺城||河南安阳||魏静帝元善见 |- |北齐||550年-577年||邺城||河南安阳||齐文宣帝高洋 |- |西魏||535年-557年||长安||陕西西安||魏文帝元宝炬 |- |北周||557年-581年||长安||陕西西安||周明帝宇文毓 |- |隋朝||581年-618年||大兴||陕西西安||隋文帝杨坚 |- |唐朝||618年-690年、705年-907年||长安||陕西西安||唐高祖李渊 |- |武周||690年-705年||神都、长安||陕西西安、河南洛阳||圣神皇帝武则天 |- | colspan="5" style="text-align: center;"|五代十国 891年-979年 |- | colspan="5" style="text-align: center;"|五代 907年-960年 |- |后梁||907年-923年||开封||河南开封||梁太祖朱温 |- |后唐||923年-936年||洛阳||河南洛阳||唐庄宗李存勖 |- |后晋||936年-947年||开封||河南开封||晋高祖石敬瑭 |- |后汉||947年-951年||开封||河南开封||汉高祖刘知远 |- |后周||951年-960年||开封||河南开封||周太祖郭威 |- |十国||891年-979年||江宁、广州等||唐烈宗李昪等 | |- | colspan="5" style="text-align: center;"|宋朝 960年-1279年 |- |北宋||960年-1127年||开封||河南开封||宋太祖赵匡胤 |- |南宋||1127年-1279年||应天、临安||江苏南京、浙江杭州||宋高宗赵构 |- |辽朝||907年-1125年||上京||巴林左旗||耶律阿保机 |- |西夏||1038年-1227年||兴庆府||宁夏银川市||李元昊 |- |金朝||1115年-1234年||中都、汴京||山东省汶上县||完颜阿骨打 |- |元朝||1271年-1368年||大都||北京||元太祖铁木真 |- |明朝||1368年-1644年||应天府、顺天府||江苏南京、北京||明太祖朱元璋 |- |清朝||1636年-1911年||奉天府、顺天府||辽宁沈阳、北京||清太祖努尔哈赤 |- |中华民国大陸時期||1912年-1949年 ||北平、江苏南京||北京、江苏南京 |孙中山 |- |中华人民共和国||1949年-至今||北京||北京||毛泽东 |} 75j5k6ka2b9zhy09b1keh2udlgmrwvu CSS/Defining Style Rules 0 31995 168505 166764 2022-08-17T08:52:05Z Paho.mqtt 60409 /* 语法 */ wikitext text/x-wiki 网页内容风格化的指令定义在CSS的规则中。 ==语法== 每条规则包含2部分：1个选择器，由大括号包起来的1条或多条声明组成的块: ::selector { declaration; declaration2; ...} 每条申明的格式为： ::property: value HTML元素的可由CSS修改的属性，见[http://www.w3.org/ w3.org]列出的[http://www.w3.org/TR/REC-CSS2/propidx.html CSS属性清单]. ==基本用法== 下述例子为让所有的<code>span</code>元素显示为黑体： <syntaxhighlight lang="css"> span { font-weight: bold; } </syntaxhighlight> <code>font-weight: bold;</code>声明，有一个属性<code>font-weight</code>，指定值为<code>bold</code>，这将使用黑体字。 效果为: {{CSS:rendered|1=<span style="font-weight:bold;">Bold Text</span>}} 一个稍微复杂一点的例子： <syntaxhighlight lang="css"> span { font-weight: bold; color: yellow; background-color: black; } </syntaxhighlight> 效果为: {{CSS:rendered|1=<span style="font-weight: bold; color: yellow; background-color: black;">Yellow Bold Text</span> }} {{BookCat}} 0apn2ub3palbz6sre3glir1t5eyu3xp Wikibooks:互助客棧/topic list 4 32161 168497 168485 2022-08-16T21:59:15Z Cewbot 42738 [[User:Cewbot/log/20170915/configuration|生成議題列表：28個議題]] wikitext text/x-wiki <!-- 本頁面由機器人自動更新。若要改進，請聯繫機器人操作者。 --> {| class="wikitable sortable mw-collapsible" style="float:left;" |- ! data-sort-type="number" style="font-weight: normal;" | <small>#</small> !! 💭 話題 !! <span title="發言數/發言人次 (實際上為計算簽名數)">💬</span> !! <span title="參與討論人數/發言人數">👥</span> !! 🙋 最新發言 !! data-sort-type="isoDate" | <span title="最後更新">🕒 <small>(UTC+8)</small></span> |- | style="text-align: right;" | 1 | [[:Wikibooks:互助客棧#中國歷史/皇帝全表的多個問題|中國歷史/皇帝全表的多個問題]] | style="text-align: right;" | 3 | style="text-align: right;" | 2 | style="background-color: #bbb;" | [[User:Ericliu1912|Ericliu1912]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2021-11-02T03:03:00.000Z" | 2021-11-02 <span style="color: blue;">11:03</span> |- | style="text-align: right;" | 2 | [[:Wikibooks:互助客棧#贵站有无收录游戏攻略的意向？|贵站有无收录游戏攻略的意向？]] | style="text-align: right;background-color: #ffe;" | 21 | style="text-align: right;" | 8 | style="background-color: #bbb;" | [[User:夏瑾凉安|夏瑾凉安]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-01-23T07:13:00.000Z" | 2022-01-23 <span style="color: blue;">15:13</span> |- | style="text-align: right;" | 3 | [[:Wikibooks:互助客棧#关于新logo的提议|关于新logo的提议]] | style="text-align: right;" | 9 | style="text-align: right;" | 4 | style="background-color: #bbb;" | [[User:SugaryMegmin|SugaryMegmin]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2021-10-16T11:15:00.000Z" | 2021-10-16 <span style="color: blue;">19:15</span> |- | style="text-align: right;" | 4 | [[:Wikibooks:互助客棧#為互助客棧引入topic list|為互助客棧引入topic list]] | style="text-align: right;" | 7 | style="text-align: right;" | 3 | style="background-color: #bbb;" | [[User:Kanashimi|Kanashimi]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-05-13T03:24:00.000Z" | 2022-05-13 <span style="color: blue;">11:24</span> |- | style="text-align: right;" | 5 | [[:Wikibooks:互助客棧#MediaWiki:Viewinguserrights|MediaWiki:Viewinguserrights]] | style="text-align: right;" | 2 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:Ericliu1912|Ericliu1912]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2021-11-15T13:14:00.000Z" | 2021-11-15 <span style="color: blue;">21:14</span> |- | style="text-align: right;" | 6 | [[:Wikibooks:互助客棧#是否可以增加过滤器|是否可以增加过滤器]] | style="text-align: right;" | 3 | style="text-align: right;" | 2 | [[User:桐生ここ|桐生ここ]] | data-sort-type="isoDate" data-sort-value="2022-08-15T00:59:00.000Z" | 2022-08-15 <span style="color: blue;">08:59</span> |- | style="text-align: right;" | 7 | style="max-width: 24em" | <small>[[:Wikibooks:互助客棧#邀請您與維基媒體基金會執行長Maryana Iskander一同討論基金會的年度計劃|邀請您與維基媒體基金會執行長Maryana Iskander一同討論基金會的年度計劃]]</small> | style="text-align: right;" | 2 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:VChang (WMF)|VChang (WMF)]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-04-21T16:58:00.000Z" | 2022-04-22 <span style="color: blue;">00:58</span> |- | style="text-align: right;" | 8 | style="max-width: 24em" | <small>[[:Wikibooks:互助客棧#2022年維基媒體基金會理事會選舉：徵求候選人|2022年維基媒體基金會理事會選舉：徵求候選人]]</small> | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:VChang (WMF)|VChang (WMF)]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-04-25T17:33:00.000Z" | 2022-04-26 <span style="color: blue;">01:33</span> |- | style="text-align: right;" | 9 | [[:Wikibooks:互助客棧#通用行為準則執行規範投票結束後的進展|通用行為準則執行規範投票結束後的進展]] | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:VChang (WMF)|VChang (WMF)]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-04-26T09:01:00.000Z" | 2022-04-26 <span style="color: blue;">17:01</span> |- | style="text-align: right;" | 10 | style="max-width: 24em" | <small>[[:Wikibooks:互助客棧#m:Requests for comment/Global de-adminship for Jusjih|m:Requests for comment/Global de-adminship for Jusjih]]</small> | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:Liuxinyu970226|Liuxinyu970226]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-04-29T09:58:00.000Z" | 2022-04-29 <span style="color: blue;">17:58</span> |- | style="text-align: right;" | 11 | [[:Wikibooks:互助客棧#Coming soon: Improvements for templates|Coming soon: Improvements for templates]] | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:Johanna Strodt (WMDE)|<small style="word-wrap: break-word; word-break: break-all;">Johanna Strodt (WMDE)</small>]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-04-29T11:14:00.000Z" | 2022-04-29 <span style="color: blue;">19:14</span> |- | style="text-align: right;" | 12 | [[:Wikibooks:互助客棧#Editing news 2022 #1|Editing news 2022 #1]] | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:Whatamidoing (WMF)|<small style="word-wrap: break-word; word-break: break-all;">Whatamidoing (WMF)</small>]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-05-02T18:55:00.000Z" | 2022-05-03 <span style="color: blue;">02:55</span> |- | style="text-align: right;" | 13 | style="max-width: 24em" | <small>[[:Wikibooks:互助客棧#2022年維基媒體基金會理事會選舉：徵求選舉志願者和候選人|2022年維基媒體基金會理事會選舉：徵求選舉志願者和候選人]]</small> | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:VChang (WMF)|VChang (WMF)]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-05-06T17:36:00.000Z" | 2022-05-07 <span style="color: blue;">01:36</span> |- | style="text-align: right;" | 14 | [[:Wikibooks:互助客棧#有关本站的logo|有关本站的logo]] | style="text-align: right;" | 2 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:Stang|Stang]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-05-18T23:41:00.000Z" | 2022-05-19 <span style="color: blue;">07:41</span> |- | style="text-align: right;" | 15 | [[:Wikibooks:互助客棧#ns!=0的淡蓝色背景|ns!=0的淡蓝色背景]] | style="text-align: right;" | 2 | style="text-align: right;" | 2 | style="background-color: #bbb;" | [[User:WhitePhosphorus|WhitePhosphorus]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-05-31T14:42:00.000Z" | 2022-05-31 <span style="color: blue;">22:42</span> |- | style="text-align: right;" | 16 | [[:Wikibooks:互助客棧#運動策略論壇：邀請您使用並分享意見|運動策略論壇：邀請您使用並分享意見]] | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:VChang (WMF)|VChang (WMF)]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-05-24T10:19:00.000Z" | 2022-05-24 <span style="color: blue;">18:19</span> |- | style="text-align: right;" | 17 | [[:Wikibooks:互助客棧#希望本地可以有合理使用内容相关方针|希望本地可以有合理使用内容相关方针]] | style="text-align: right;" | 2 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:Stang|Stang]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-06-30T20:24:00.000Z" | 2022-07-01 <span style="color: blue;">04:24</span> |- | style="text-align: right;" | 18 | style="max-width: 24em" | <small>[[:Wikibooks:互助客棧#通用行為準則執行規範投票的選民反饋報告以及執行規範的修訂討論|通用行為準則執行規範投票的選民反饋報告以及執行規範的修訂討論]]</small> | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:VChang (WMF)|VChang (WMF)]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-05-30T16:43:00.000Z" | 2022-05-31 <span style="color: blue;">00:43</span> |- | style="text-align: right;" | 19 | [[:Wikibooks:互助客棧#通用行為準則執行規範：修訂討論進行中|通用行為準則執行規範：修訂討論進行中]] | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:VChang (WMF)|VChang (WMF)]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-06-16T13:05:00.000Z" | 2022-06-16 <span style="color: blue;">21:05</span> |- | style="text-align: right;" | 20 | [[:Wikibooks:互助客棧#User:蛇守护的苹果堆大规模侵权|User:蛇守护的苹果堆大规模侵权]] | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:沈澄心|沈澄心]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-06-17T15:37:00.000Z" | 2022-06-17 <span style="color: blue;">23:37</span> |- | style="text-align: right;" | 21 | style="max-width: 24em" | <small>[[:Wikibooks:互助客棧#Results of Wiki Loves Folklore 2022 is out!|Results of Wiki Loves Folklore 2022 is out!]]</small> | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:MediaWiki message delivery|<small style="word-wrap: break-word; word-break: break-all;">MediaWiki message delivery</small>]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-07-04T16:13:00.000Z" | 2022-07-05 <span style="color: blue;">00:13</span> |- | style="text-align: right;" | 22 | [[:Wikibooks:互助客棧#提出能用於2022年選舉指南針的聲明|提出能用於2022年選舉指南針的聲明]] | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #bbb;" | [[User:VChang (WMF)|VChang (WMF)]] | style="background-color: #bbb;" data-sort-type="isoDate" data-sort-value="2022-07-08T17:02:00.000Z" | 2022-07-09 <span style="color: blue;">01:02</span> |- | style="text-align: right;" | 23 | [[:Wikibooks:互助客棧#关于跨维基导入者(transwiki)的建议|关于跨维基导入者(transwiki)的建议]] | style="text-align: right;" | 2 | style="text-align: right;" | 2 | [[User:Ericliu1912|Ericliu1912]] | data-sort-type="isoDate" data-sort-value="2022-08-14T12:42:00.000Z" | 2022-08-14 <span style="color: blue;">20:42</span> |- | style="text-align: right;" | 24 | [[:Wikibooks:互助客棧#公布進入社群投票階段的六名理事會候選人|公布進入社群投票階段的六名理事會候選人]] | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #ddd;" | [[User:VChang (WMF)|VChang (WMF)]] | style="background-color: #ddd;" data-sort-type="isoDate" data-sort-value="2022-07-20T10:57:00.000Z" | 2022-07-20 <span style="color: blue;">18:57</span> |- | style="text-align: right;" | 25 | [[:Wikibooks:互助客棧#投票選出用於選舉指南針的聲明|投票選出用於選舉指南針的聲明]] | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #ddd;" | [[User:VChang (WMF)|VChang (WMF)]] | style="background-color: #ddd;" data-sort-type="isoDate" data-sort-value="2022-07-26T17:38:00.000Z" | 2022-07-27 <span style="color: blue;">01:38</span> |- | style="text-align: right;" | 26 | [[:Wikibooks:互助客棧#運動策略與治理通訊第七期|運動策略與治理通訊第七期]] | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #ddd;" | [[User:VChang (WMF)|VChang (WMF)]] | style="background-color: #ddd;" data-sort-type="isoDate" data-sort-value="2022-07-28T15:38:00.000Z" | 2022-07-28 <span style="color: blue;">23:38</span> |- | style="text-align: right;" | 27 | [[:Wikibooks:互助客棧#民國臺灣國立編譯舘曾主編的課本版權|民國臺灣國立編譯舘曾主編的課本版權]] | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | [[User:Jusjih|Jusjih]] | data-sort-type="isoDate" data-sort-value="2022-08-15T01:30:00.000Z" | 2022-08-15 <span style="color: blue;">09:30</span> |- | style="text-align: right;" | 28 | [[:Wikibooks:互助客棧#2022年維基媒體基金會理事會選舉延期|2022年維基媒體基金會理事會選舉延期]] | style="text-align: right;background-color: #fcc;" | 1 | style="text-align: right;background-color: #fcc;" | 1 | style="background-color: #eef;" | [[User:VChang (WMF)|VChang (WMF)]] | style="background-color: #eef;" data-sort-type="isoDate" data-sort-value="2022-08-16T08:53:00.000Z" | 2022-08-16 <span style="color: blue;">16:53</span> |} {| class="wikitable mw-collapsible mw-collapsed" style="float: left; margin-left: .5em;;{{#if:{{{no_time_legend|}}}|display:none;|}}" ! title="From the latest bot edit" | 發言更新圖例 |- | style="background-color: #efe;" | * 最近一小時內 |- | style="background-color: #eef;" | * 最近一日內 |- | | * 一週內 |- | style="background-color: #ddd;" | * 一個月內 |- | style="background-color: #bbb;" | * 逾一個月 |- ! 特殊狀態 |- | style="text-decoration: line-through" | 已移動至其他頁面<br />或完成討論之議題 |- ! 手動設定 |- | style="max-width: 12em;" | <small>當列表出現異常時，<br />請先檢查[[User:Cewbot/log/20170915/configuration|設定]]是否有誤</small> |- |} {{Clear}} c10laevfiwtkerq2ezkzert698e1x4a User:米沙鄢 2 32214 168498 168074 2022-08-17T05:09:54Z QueerEcofeminist 50950 QueerEcofeminist移动页面[[User:角色扮演对话]]至[[User:米沙鄢]]：​当重命名用户“[[Special:CentralAuth/角色扮演对话|角色扮演对话]]”至“[[Special:CentralAuth/米沙鄢|米沙鄢]]”时自动移动页面 wikitext text/x-wiki #REDIRECT [[w:角色扮演对话]] 975b5q9asur627qp6dqij9rqskj38dp CSS/选择器 0 32331 168500 168494 2022-08-17T08:25:04Z Paho.mqtt 60409 wikitext text/x-wiki CSS的'''selector'''可翻译为'''选择器'''或'''选取项'''，是出现在样式规则的左大括号之前的部分。如"<code> p { font-weight:bold; } </code>"的p。选择器指出样式规则可用于哪个元素，可根据元素的类别type，如"div"；元素的类class；元素的id。选择器只能用于链接或嵌入CSS，不能用于内联CSS。 {| class="wikitable" |+ 选择器概述 ! 选择器的分类 ! 选择器例子 ! 规则例子 ! 注释 |- | 类别选择器 type | div | div { margin:7px; padding:7px; } |- | 类选择器 class | .important | .important { font-weight:bold; color:red; } |- | id选择器 | #onlyThisOne | #onlyThisOne { font-family:courier; } |- | 一般选择器 universal | * | * { color:green; } |- | 拟类选择器 pseudo-class | a:link | a:link { color:blue; } | 伪类是特殊的类，基于元素的状态，使用:运算符。语法为E:pseudo-class. 常见的有:hover, :link and :visited |- | 拟元素选择器 pseudo-element | p:first-letter | p:first-letter { color:red } |- | 后代选择器 descendant | td span | td span { font-weight:bold; } |- | 群组选择器 grouped | h1, h2, h3 | h1, h2, h3 { text-align:center; } |- |子选择器（Child） | | |- | 比邻选择器 (Adjacent) | | |- | 属性选择器（Attribute） | E[Attribute="value"] | |Attribute支持多种不同的匹配运算符，如 =, !=, ~=, ^= and $= |} ==选择器语法== '''选择器'''是用'''组合器'''(combinator)分隔的一个或多个'''简单选择器序列'''组成的序列。一个'''拟元素'''（pseudo-element）可以出现在该序列的最后一个简单选择器中。 简单选择器序列（sequence of simple selectors）是不用组合器分隔的一个简单选择器链（chain of simple selectors）。它总是以类别选择器或通用选择器开始；链中不能再出现别的类别选择器或通用选择器。 简单选择器可以是：类别选择器、通用选择器、特性选择器、类选择器、id选择器、拟类选择器。 组合器（Combinator）可以是：空白符、大于号、加号、波浪号~。 选择器从文档树中选择匹配的元素。 ==群组选择器== 群组选择器Grouping selectors是一个用逗号分割的选择器的列表。 <syntaxhighlight lang = "css"> h1, h2, h3 { text-align:center; } </syntaxhighlight> 等价于 <syntaxhighlight lang = "css"> h1 { text-align:center; } h2 { text-align:center; } h3 { text-align:center; } </syntaxhighlight> 一个元素可以被多条规则选中： <syntaxhighlight lang = "css"> h1, h2, h3, h4, h5, h6 { color: white; background-color: red; } h1 { color: yellow; } </syntaxhighlight> 所有标题有红色背景。Level 2&#8211;6 标题有白色文字。Level 1标题是黄色文字。 规则的顺序非常重要。下例中所有标题都是白色文字： <syntaxhighlight lang = "css"> h1 { color: yellow; } h1, h2, h3, h4, h5, h6 { color: white; background-color: red; } </syntaxhighlight> ==简单选择器== 选择器(type, class, ID, universal, 拟类和拟元素)都是简单选择器。完整语法从左至右为： * 类别选择器或通用选择器 * 零个或多个类选择器、id选择器、伪类选择器(CSS2.1也允许特性选择器) * 零个或多个拟元素选择器 下属都是简单选择器例子： <syntaxhighlight lang = "css"> p p.important p#navigation a:link p:first-line a:visited#homePage.menu2:first-letter * *#footer *.content.abstract *#mainArticle:first-letter </syntaxhighlight> 通用选择器<code>*</code>如果不是唯一的选择器，则可以省略不写。如<code>#footer</code>等价于<code>*#footer</code>；<code>:first-line</code>等价于<code>*:first-line</code>。 ===类别选取项 type=== 基于元素的基本类别type匹配元素。 <syntaxhighlight lang = "css"> div{ margin:7px; padding:7px; } </syntaxhighlight> <syntaxhighlight lang = "css"> body{ background-image:url("image.gif"); font-size:.9em; } </syntaxhighlight> ===通用选择器Universal=== 适用于页面全部元素： <syntaxhighlight lang = "css"> * { color:green; } </syntaxhighlight> ==特性Attribute 选择器== [attribute]选择器用于选取带有指定特性的元素。 *特性存在和值的选择器 ** [att] 特性存在 ** [att=val] 特性的值等于"val". ** [att~=val] 特性的值是空白符分隔的列表，列表中的一项等于"val". 如果"val"包含空格符或者为空，则不选择任何元素 ** [att|=val] 特性的值或者就是"val"或者以"val"开头后跟连字符"-" (U+002D)。这本来用于语言的subcode匹配。参见 :lang 拟类 *匹配子字符串的特性选择器 ** [att^=val] 以val开头的字符串 ** [att$=val] 以val结尾的字符串 ** [att*=val] 包含val字符串的特性的值 选择同时具有多个特性的元素，例如： span[hello="Cleveland"][goodbye="Columbus"] 选择多个不同特性中具有任意一个特性的元素，例如：span[hello="Cleveland"], span[goodbye="Columbus"] 下例选择所有带有 target 特性的 <a> 元素； <syntaxhighlight lang = "css"> a[target] { background-color: yellow; } </syntaxhighlight> [attribute="value"] 选择器用于选取带有指定属性和值的元素。下例选取所有带有 target="_blank" 属性的 <a> 元素： <syntaxhighlight lang = "css"> a[target="_blank"] { background-color: yellow; } </syntaxhighlight> [attribute~="value"] 选择器选取属性值包含指定词的元素。值必须是完整或单独的单词；即必须是空格分隔的清单中的每个完整的词。它匹配attribute="a value b"；但不匹配attribute="a valueb"。下例选取 title 属性包含 "flower" 单词的所有元素： <syntaxhighlight lang = "css"> [title~="flower"] { border: 5px solid yellow; } </syntaxhighlight> [attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。值必须是空格符分割开的完整或单独的单词。下例选取 class 属性以 "top" 开头的所有元素： <syntaxhighlight lang = "css"> [class|="top"] { background: yellow; } </syntaxhighlight> [attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。值不必是完整单词。下例选取 class 属性以 "top" 开头的所有元素： <syntaxhighlight lang = "css"> [class^="top"] { background: yellow; } </syntaxhighlight> [attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。值不必是完整单词。下例选取 class 属性以 "test" 结尾的所有元素： <syntaxhighlight lang = "css"> [class$="test"] { background: yellow; } </syntaxhighlight> [attribute*="value"] 选择器选取属性值包含指定子字符串的元素。值不必是完整的子字符串。它匹配attribute="a value b" 且匹配 attribute="a valueb"。下例选取 class 属性包含 "te" 的所有元素： <syntaxhighlight lang = "css"> [class*="te"] { background: yellow; } </syntaxhighlight> 特性名字（attribute name）可以给出一个CSS限定名，即已经声明的命名空间前缀后跟竖杠符(|)。无命名空间的特性名字等效于"|attr"。一个星号用于表示无论是否有命名空间。例如： <syntaxhighlight lang = "css"> @namespace foo "http://www.example.com"; [foo|att=val] { color: blue } [*|att] { color: yellow } [|att] { color: green } [att] { color: green } /* The first rule will match only elements with the attribute att in the "http://www.example.com" namespace with the value "val". The second rule will match only elements with the attribute att regardless of the namespace of the attribute (including no namespace). The last two rules are equivalent and will match only elements with the attribute att where the attribute is not in a namespace. */ </syntaxhighlight> ===类选择器Class=== HTML文档的body中的所有元素都可具有<code>class</code>特性。这可用于辨识同一类别的元素。在HTML中，div.value 等效于 div[class~=value]。例如： <syntaxhighlight lang = "html"> The <code class="attribute">alt</code> attribute of the <code class="element">img</code> </syntaxhighlight> 可建立一个全局类： <syntaxhighlight lang = "css"> .important { font-weight:bold; color:red; } </syntaxhighlight> HTML例子: <syntaxhighlight lang = "html"> <p class="important">Important Text</p> <p>Ordinary Text</p> <div class="important">Important Footnote</div> </syntaxhighlight> 绘制为: {{CSS:rendered|1=<p style="font-weight:bold; color:red;" title="This text is red.">Important Text</p> <p>Ordinary Text</p> <p style="font-weight:bold; color:red;" title="This text is red.">Important Footnote</div> }} 第二种使用方式是和类别选择器一起使用： <syntaxhighlight lang = "css"> p.right { float:right; clear:both } </syntaxhighlight> HTML例子: <syntaxhighlight lang = "html"> <p class="right">Righty Righty</p> </syntaxhighlight> 绘制结果: {{CSS:rendered|1=<p style="float:right;">Righty Righty</p> <br style="clear:both"> }} 一个元素可以属于多个类： <syntaxhighlight lang = "html"> <p class="right">This paragraph belongs to the class 'right'.</p> <p class="important">This paragraph belongs to the class 'important'.</p> <p class="right important">This paragraph belongs to both classes.</p> </syntaxhighlight> 绘制效果： {{CSS:rendered|1=<p style="clear:both;float:right;">This paragraph belongs to the class 'right'.</p> <p style="font-weight:bold;color:red;" title="This text is red.">This paragraph belongs to the class 'important'.</p> <p style="clear:both;float:right;font-weight:bold;color:red;" title="This text is red.">This paragraph belongs to both classes.</p> <br style="clear:both"> }} 类名应该描述类的目的，而不是绘制效果。因为设计者可能改变其绘制的想法。 <syntaxhighlight lang = "css"> .red {color:blue} </syntaxhighlight> 多个类选择器可用于选择具有所有指定类的元素： <syntaxhighlight lang = "css"> p.important.right { border: 2px dashed #666 } </syntaxhighlight> 绘制例子： {{CSS:rendered|1=<p style="clear:both;float:right;">This paragraph belongs to the class 'right'.</p> <p style="font-weight:bold;color:red;" title="This text is red.">This paragraph belongs to the class 'important'.</p> <p style="clear:both;float:right;font-weight:bold;color:red;border: 2px dashed #666" title="This text is red and bordered.">This paragraph belongs to both classes.</p> <br style="clear:both"> }} ===ID选择器 === ID选择器用于选择一个页面中的唯一元素。也可以多个页面有同名的元素，或者与后代选择器并用。 CSS rule: <syntaxhighlight lang = "css"> #onlyThisOne { font-family:courier; } </syntaxhighlight> HTML例子: <syntaxhighlight lang = "html"> <p id="onlyThisOne">Courier</p> </syntaxhighlight> 绘制为： {{CSS:rendered|1=<p style="font-family:courier;">Courier</p>}} ===拟类选择器Pseudo-Classes=== CSS1 和 CSS2.1的拟类选择器以单个冒号<code>:</code>开始。其名字是大小写不敏感的，可以跟随括号中的值。 拟类选择器允许选择文档树之外的信息或者其它简单选择器不能表达的信息。 拟类选择器可以在简单选择器序列中使用多次。一些拟类选择器是互斥的。 动态的拟类选择器是指不能从文档树推导出的一些特性(characteristics )，这些特性随着用户访问文档，拟类可以获得或者失去，如visited CSS level 1 定义了3个拟类: ;<code>link</code> : unvisited links ;<code>visited</code> : visited links ;<code>active</code> : active links。当你点击一个链接时，它是active 可用于anchor (<code>a</code>) 元素. <syntaxhighlight lang = "css"> a:link{ color:blue; } a:visited{ color:purple; } a:active{ color:red; } </syntaxhighlight> CSS level 2.1引入了一批新的拟类选择器： ;<code>first-child</code> : 匹配元素是父元素的第一个子元素 ;<code>lang(C)</code> : 匹配元素的自然语言特性等于C或者在连字号-左边等于C。C的大小写不敏感。lang特性自动继承到后代元素中；而用特性选择器|=就不适用这些后代元素。 *用户动作拟类选择器： ;<code>hover</code> : 当用户的鼠标悬浮在元素之上 ;<code>active</code> : 任何能够是 'active' ，例如button &#8211; 当元素是active时应用该样式. ;<code>focus</code> : 具有键盘输入焦点的元素可用该样式 例如： <syntaxhighlight lang = "css"> p:first-child { font-size:120% } span:lang(la) { /* render Latin text, e.g. per se, in italics */ font-style:italic } li:hover { /* doesn't work in Internet Explorer */ background-color:blue } input:active { color:red } input:focus { background-color:yellow } </syntaxhighlight> <code>first-child</code>拟类例子在下文的[[#后代选取项 Descendant|descendant]]中给出. 可以同时指定多个拟类： <syntaxhighlight lang = "css"> a:visited:hover { background-color:red } </syntaxhighlight> 需要注意拟类应用的顺序。例如，如需要已访问过的链接为绿色除非用户鼠标悬浮其上时为黄色，则规则必须为如下顺序： <syntaxhighlight lang = "css"> a:visited{ color:green } a:hover{ color:yellow } </syntaxhighlight> 如果上述顺序翻转过来，则已访问的颜色比悬浮的颜色有更高优先级。 一些新的拟类选择器： * :target 当前页面的URL的#号之后的锚名称元素自动具有target特性 * UI元素状态拟类： ** :enabled ** :disabled ** :checked 适用于Radio 和 checkbox 元素 ** :indeterminate 既不是checked 也不是 unchecked，未来会实现。 * 结构的拟类选择器structural pseudo-classes。text或非元素的node都不参与以下的结构计数。 ** :root 在HTML 4，这总是HTML元素 ** :nth-child(an+b) 注意这里的n相当于关键字，表示任意的非负整数。a和b指明为整数，表示把兄弟元素分组，每组|a|个元素，每组第一个元素的index为1，每组的第b个元素被选择。此外， :nth-child()可用‘odd’和‘even’作为实参。‘odd’等效于 2n+1, ‘even’等效于 2n。 ** :nth-last-child(an+b) 从尾部算起。 ** :nth-of-type(an+b) 在sibling元素中以指定类别计数的选择。 ** :nth-last-of-type(an+b) ** :first-child pseudo-class 等价于 :nth-child(1) 表示在sibling元素中为第一个。 ** :last-child pseudo-class 等价于 :nth-last-child(1) ** :first-of-type pseudo-class 表示在它的类别中是sibling元素的第一个。等价于:nth-of-type(1) ** :last-of-type pseudo-class 等价于 :nth-last-of-type(1) ** :only-child 没有sibling。等价于:first-child:last-child 或:nth-child(1):nth-last-child(1) ** :only-of-type 同一类别没有sibling ** :empty 没有子节点。 <syntaxhighlight lang = "css"> tr:nth-child(2n+1) /* represents every odd row of an HTML table */ tr:nth-child(odd) /* same */ tr:nth-child(2n+0) /* represents every even row of an HTML table */ tr:nth-child(even) /* same */ /* Alternate paragraph colours in CSS */ p:nth-child(4n+1) { color: navy; } p:nth-child(4n+2) { color: green; } p:nth-child(4n+3) { color: maroon; } p:nth-child(4n+4) { color: purple; } :nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */ :nth-child(10n+9) /* Same */ :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */ /* When a=0, 'an'部分不需要，除非b部分已经忽略。这可简化为 :nth-child(b) */ foo:nth-child(0n+5) /* represents an element foo that is the 5th child of its parent element */ foo:nth-child(5) /* same */ /*当a=1, 或 a=-1, 1可从规则忽略。下述4例等效： */ bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */ bar:nth-child(n+0) /* same */ bar:nth-child(n) /* same */ bar /* same but lower specificity (0,0,1) */ /*如果b=0, 则第a个元素被选择： */ tr:nth-child(2n+0) /* represents every even row of an HTML table */ tr:nth-child(2n) /* same */ /*下述例子展示了空格符的有效使用： */ :nth-child( 3n + 1 ) :nth-child( +3n - 2 ) :nth-child( -n+ 6) :nth-child( +6 ) /*下述例子展示了空格符的无效使用： */ :nth-child(3 n) :nth-child(+ 2n) :nth-child(+ 2) /*如果a和b均为0，则拟类表示无元素。*/ /*a和b可以为负值。但只有正值表示元素选择：*/ html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */ tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */ foo:nth-last-child(odd) /* represents all odd foo elements in their parent element, counting from the last one */ /* To represent all h2 children of an XHTML body except the first and last, one could use the following selector:*/ body > h2:nth-of-type(n+2):nth-last-of-type(n+2) /*In this case, one could also use :not(), although the selector ends up being just as long:*/ body > h2:not(:first-of-type):not(:last-of-type) /*The following selector represents a p element that is the first child of a div element:*/ div > p:first-child /*This selector can represent the p inside the div of the following fragment:*/ <p> The last P before the note.</p> <div class="note"> <p> The first P inside the note.</p> </div> /*but cannot represent the second p in the following fragment:*/ <p> The last P before the note.</p> <div class="note"> <h2> Note </h2> <p> The first P inside the note.</p> </div> /*下述二者等价*/ * > a:first-child /* a is first child of any element */ a:first-child /* Same (assuming a is not the root element) */ /*p:empty is a valid representation of the following fragment:*/ <p></p> /*foo:empty is not a valid representation for the following fragments:*/ <foo>bar</foo> <foo><bar>bla</bar></foo> <foo>this is not <bar>:empty</bar></foo> </syntaxhighlight> :not(X)是否定伪类，其参数X是一个简单选择器（不含:not自身，即不可以递归）。拟元素也不可以作为其参数。 ==拟元素选择器== 拟元素选择器用于挑选出文档树中没有的结构（如块元素的第一行、第一个字符）或者没有的内容（如before或after）。 CSS1 和 CSS2.1的拟元素选择器以单个冒号<code>:</code>开始，CSS3的拟元素选择器以2个冒号<code>::</code>开始。 CSS3规定：拟元素选择器只能在组合器(combinator)的最后出现且至多出现一次。 CSS level 1定义了2个逆元素：<code>first-letter</code> 和 <code>first-line</code>，分别选择要绘制元素的第一个字母和第一行。 <syntaxhighlight lang = "css"> p:first-letter { color:red } </syntaxhighlight> 只能用一个拟元素选择器且必须是选择器链上的最后一个。<code>first-line</code>选择器只能用于块级元素、内联块、table标题和table的单元格. <code>first-child</code>选择器要求元素是其父元素的第一个子元素。 下例使用<code>first-child</code>选择器。 CSS规则: <syntaxhighlight lang = "css"> div.content strong:first-child { color:red } </syntaxhighlight> HTML例子: <syntaxhighlight lang = "css"> <div class="content"> <p>Some <em>emphasized</em> text and some <strong>strongly emphasized</strong> text.</p> <p>Some <strong>strongly emphasized</strong> text and some <em>emphasized</em> text.</p> </div> </syntaxhighlight> 绘制效果: {{CSS:rendered|1=<p>Some <em>emphasized</em> text and some <strong>strongly emphasized</strong> text.</p> <p>Some <strong style="color:red" title="This text is red.">strongly emphasized</strong> text and some <em>emphasized</em> text.</p> }} 上例需要注意2点： * 元素的前面即使有text，不影响它是first-child。因此第一段落的<code>em</code>元素和第二段落<code>strong</code>元素分别是相应段落的第一个子元素。 * 只有元素满足选择器的所有部分，才会应用该风格规则。第一段落的<code>strong</code>元素是第二个子节点，因此不匹配<code>strong:first-child</code>选择器。 CSS2.1增加了2个拟元素，<code>before</code> 和 <code>after</code>。即在指定元素之前或之后添加一些内容。 ==组合器Combinator== 由多个简单选择器组合而成。 ===后代组合器Descendant combinator=== 语法为： Element Element 即以空白符分隔。空白符可以是：空格符(U+0020), "tab" (U+0009), "换行符" (U+000A), "回车符" (U+000D), "form feed" (U+000C)。 允许在指定元素内部任何深度的另一个指定元素。可以列出大于2个元素组成的祖先后代树。这时出现的星号*代表任意类别的元素。 例如：<code>p</code>元素内部任何深度后代元素<code>span</code>为黑体，则CSS规则： <syntaxhighlight lang = "css"> p span{ font-weight:bold; } </syntaxhighlight> HTML例子: <syntaxhighlight lang = "html"> <p>Start of paragraph. <span>This span is bold.</span> Rest of paragraph.</p> <div>Start of division. <span>This span is normal.</span> Rest of division.</div> </syntaxhighlight> 绘制效果： {{CSS:rendered|1=<p>Start of paragraph. <span style="font-weight:bold;" title="This text is bold.">This span is bold.</span> Rest of paragraph.</p> <div>Start of division. <span>This span is normal.</span> Rest of division.</div> }} 下例改变"navigation"列表中已经访问过的链接的颜色。 CSS规则: <syntaxhighlight lang = "css"> ul#navigation a:visited { color:red } </syntaxhighlight> HTML例子: <syntaxhighlight lang = "html"> <ul id="navigation"> <li><a href="HomePage">Home</a></li> <li><a href="AnotherPage">A page you haven't visited yet.</a></li> </ul> </syntaxhighlight> 绘制效果: {{CSS:rendered|1=<ul> <li style="color:red" title="This text is red.">Home</li> <li style="color:blue">A page you haven't visited yet.</li> </ul> }} ===子元素组合器Child combinator=== Element>Element 指定类别的元素内的所有指定类别的直接子元素 例如： <syntaxhighlight lang = "css"> body > p div ol>li p <!-- 表示p是li的后代，li是ol的子元素, ol是div的后代。 --> </syntaxhighlight> ===兄弟元素组合器Sibling combinators=== 非元素的node，如元素之间的text都被忽略不计数。 ====直接后继兄弟组合器 Next-sibling combinator==== Element+Element 指定类别的元素的符合指定类别的'''直接'''后继兄弟元素适用相应风格 ====所有后续兄弟组合器Subsequent-sibling combinator==== Element~Element 指定类别的元素的符合指定类别的'''所有'''后继兄弟元素适用相应风格 {{BookCat}} t33ayd88gk6lu4efdh6u0uu060lu46d 168501 168500 2022-08-17T08:25:44Z Paho.mqtt 60409 /* 特性Attribute 选择器 */ wikitext text/x-wiki CSS的'''selector'''可翻译为'''选择器'''或'''选取项'''，是出现在样式规则的左大括号之前的部分。如"<code> p { font-weight:bold; } </code>"的p。选择器指出样式规则可用于哪个元素，可根据元素的类别type，如"div"；元素的类class；元素的id。选择器只能用于链接或嵌入CSS，不能用于内联CSS。 {| class="wikitable" |+ 选择器概述 ! 选择器的分类 ! 选择器例子 ! 规则例子 ! 注释 |- | 类别选择器 type | div | div { margin:7px; padding:7px; } |- | 类选择器 class | .important | .important { font-weight:bold; color:red; } |- | id选择器 | #onlyThisOne | #onlyThisOne { font-family:courier; } |- | 一般选择器 universal | * | * { color:green; } |- | 拟类选择器 pseudo-class | a:link | a:link { color:blue; } | 伪类是特殊的类，基于元素的状态，使用:运算符。语法为E:pseudo-class. 常见的有:hover, :link and :visited |- | 拟元素选择器 pseudo-element | p:first-letter | p:first-letter { color:red } |- | 后代选择器 descendant | td span | td span { font-weight:bold; } |- | 群组选择器 grouped | h1, h2, h3 | h1, h2, h3 { text-align:center; } |- |子选择器（Child） | | |- | 比邻选择器 (Adjacent) | | |- | 属性选择器（Attribute） | E[Attribute="value"] | |Attribute支持多种不同的匹配运算符，如 =, !=, ~=, ^= and $= |} ==选择器语法== '''选择器'''是用'''组合器'''(combinator)分隔的一个或多个'''简单选择器序列'''组成的序列。一个'''拟元素'''（pseudo-element）可以出现在该序列的最后一个简单选择器中。 简单选择器序列（sequence of simple selectors）是不用组合器分隔的一个简单选择器链（chain of simple selectors）。它总是以类别选择器或通用选择器开始；链中不能再出现别的类别选择器或通用选择器。 简单选择器可以是：类别选择器、通用选择器、特性选择器、类选择器、id选择器、拟类选择器。 组合器（Combinator）可以是：空白符、大于号、加号、波浪号~。 选择器从文档树中选择匹配的元素。 ==群组选择器== 群组选择器Grouping selectors是一个用逗号分割的选择器的列表。 <syntaxhighlight lang = "css"> h1, h2, h3 { text-align:center; } </syntaxhighlight> 等价于 <syntaxhighlight lang = "css"> h1 { text-align:center; } h2 { text-align:center; } h3 { text-align:center; } </syntaxhighlight> 一个元素可以被多条规则选中： <syntaxhighlight lang = "css"> h1, h2, h3, h4, h5, h6 { color: white; background-color: red; } h1 { color: yellow; } </syntaxhighlight> 所有标题有红色背景。Level 2&#8211;6 标题有白色文字。Level 1标题是黄色文字。 规则的顺序非常重要。下例中所有标题都是白色文字： <syntaxhighlight lang = "css"> h1 { color: yellow; } h1, h2, h3, h4, h5, h6 { color: white; background-color: red; } </syntaxhighlight> ==简单选择器== 选择器(type, class, ID, universal, 拟类和拟元素)都是简单选择器。完整语法从左至右为： * 类别选择器或通用选择器 * 零个或多个类选择器、id选择器、伪类选择器(CSS2.1也允许特性选择器) * 零个或多个拟元素选择器 下属都是简单选择器例子： <syntaxhighlight lang = "css"> p p.important p#navigation a:link p:first-line a:visited#homePage.menu2:first-letter * *#footer *.content.abstract *#mainArticle:first-letter </syntaxhighlight> 通用选择器<code>*</code>如果不是唯一的选择器，则可以省略不写。如<code>#footer</code>等价于<code>*#footer</code>；<code>:first-line</code>等价于<code>*:first-line</code>。 ===类别选取项 type=== 基于元素的基本类别type匹配元素。 <syntaxhighlight lang = "css"> div{ margin:7px; padding:7px; } </syntaxhighlight> <syntaxhighlight lang = "css"> body{ background-image:url("image.gif"); font-size:.9em; } </syntaxhighlight> ===通用选择器Universal=== 适用于页面全部元素： <syntaxhighlight lang = "css"> * { color:green; } </syntaxhighlight> ===特性Attribute 选择器=== [attribute]选择器用于选取带有指定特性的元素。 *特性存在和值的选择器 ** [att] 特性存在 ** [att=val] 特性的值等于"val". ** [att~=val] 特性的值是空白符分隔的列表，列表中的一项等于"val". 如果"val"包含空格符或者为空，则不选择任何元素 ** [att|=val] 特性的值或者就是"val"或者以"val"开头后跟连字符"-" (U+002D)。这本来用于语言的subcode匹配。参见 :lang 拟类 *匹配子字符串的特性选择器 ** [att^=val] 以val开头的字符串 ** [att$=val] 以val结尾的字符串 ** [att*=val] 包含val字符串的特性的值 选择同时具有多个特性的元素，例如： span[hello="Cleveland"][goodbye="Columbus"] 选择多个不同特性中具有任意一个特性的元素，例如：span[hello="Cleveland"], span[goodbye="Columbus"] 下例选择所有带有 target 特性的 <a> 元素； <syntaxhighlight lang = "css"> a[target] { background-color: yellow; } </syntaxhighlight> [attribute="value"] 选择器用于选取带有指定属性和值的元素。下例选取所有带有 target="_blank" 属性的 <a> 元素： <syntaxhighlight lang = "css"> a[target="_blank"] { background-color: yellow; } </syntaxhighlight> [attribute~="value"] 选择器选取属性值包含指定词的元素。值必须是完整或单独的单词；即必须是空格分隔的清单中的每个完整的词。它匹配attribute="a value b"；但不匹配attribute="a valueb"。下例选取 title 属性包含 "flower" 单词的所有元素： <syntaxhighlight lang = "css"> [title~="flower"] { border: 5px solid yellow; } </syntaxhighlight> [attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。值必须是空格符分割开的完整或单独的单词。下例选取 class 属性以 "top" 开头的所有元素： <syntaxhighlight lang = "css"> [class|="top"] { background: yellow; } </syntaxhighlight> [attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。值不必是完整单词。下例选取 class 属性以 "top" 开头的所有元素： <syntaxhighlight lang = "css"> [class^="top"] { background: yellow; } </syntaxhighlight> [attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。值不必是完整单词。下例选取 class 属性以 "test" 结尾的所有元素： <syntaxhighlight lang = "css"> [class$="test"] { background: yellow; } </syntaxhighlight> [attribute*="value"] 选择器选取属性值包含指定子字符串的元素。值不必是完整的子字符串。它匹配attribute="a value b" 且匹配 attribute="a valueb"。下例选取 class 属性包含 "te" 的所有元素： <syntaxhighlight lang = "css"> [class*="te"] { background: yellow; } </syntaxhighlight> 特性名字（attribute name）可以给出一个CSS限定名，即已经声明的命名空间前缀后跟竖杠符(|)。无命名空间的特性名字等效于"|attr"。一个星号用于表示无论是否有命名空间。例如： <syntaxhighlight lang = "css"> @namespace foo "http://www.example.com"; [foo|att=val] { color: blue } [*|att] { color: yellow } [|att] { color: green } [att] { color: green } /* The first rule will match only elements with the attribute att in the "http://www.example.com" namespace with the value "val". The second rule will match only elements with the attribute att regardless of the namespace of the attribute (including no namespace). The last two rules are equivalent and will match only elements with the attribute att where the attribute is not in a namespace. */ </syntaxhighlight> ===类选择器Class=== HTML文档的body中的所有元素都可具有<code>class</code>特性。这可用于辨识同一类别的元素。在HTML中，div.value 等效于 div[class~=value]。例如： <syntaxhighlight lang = "html"> The <code class="attribute">alt</code> attribute of the <code class="element">img</code> </syntaxhighlight> 可建立一个全局类： <syntaxhighlight lang = "css"> .important { font-weight:bold; color:red; } </syntaxhighlight> HTML例子: <syntaxhighlight lang = "html"> <p class="important">Important Text</p> <p>Ordinary Text</p> <div class="important">Important Footnote</div> </syntaxhighlight> 绘制为: {{CSS:rendered|1=<p style="font-weight:bold; color:red;" title="This text is red.">Important Text</p> <p>Ordinary Text</p> <p style="font-weight:bold; color:red;" title="This text is red.">Important Footnote</div> }} 第二种使用方式是和类别选择器一起使用： <syntaxhighlight lang = "css"> p.right { float:right; clear:both } </syntaxhighlight> HTML例子: <syntaxhighlight lang = "html"> <p class="right">Righty Righty</p> </syntaxhighlight> 绘制结果: {{CSS:rendered|1=<p style="float:right;">Righty Righty</p> <br style="clear:both"> }} 一个元素可以属于多个类： <syntaxhighlight lang = "html"> <p class="right">This paragraph belongs to the class 'right'.</p> <p class="important">This paragraph belongs to the class 'important'.</p> <p class="right important">This paragraph belongs to both classes.</p> </syntaxhighlight> 绘制效果： {{CSS:rendered|1=<p style="clear:both;float:right;">This paragraph belongs to the class 'right'.</p> <p style="font-weight:bold;color:red;" title="This text is red.">This paragraph belongs to the class 'important'.</p> <p style="clear:both;float:right;font-weight:bold;color:red;" title="This text is red.">This paragraph belongs to both classes.</p> <br style="clear:both"> }} 类名应该描述类的目的，而不是绘制效果。因为设计者可能改变其绘制的想法。 <syntaxhighlight lang = "css"> .red {color:blue} </syntaxhighlight> 多个类选择器可用于选择具有所有指定类的元素： <syntaxhighlight lang = "css"> p.important.right { border: 2px dashed #666 } </syntaxhighlight> 绘制例子： {{CSS:rendered|1=<p style="clear:both;float:right;">This paragraph belongs to the class 'right'.</p> <p style="font-weight:bold;color:red;" title="This text is red.">This paragraph belongs to the class 'important'.</p> <p style="clear:both;float:right;font-weight:bold;color:red;border: 2px dashed #666" title="This text is red and bordered.">This paragraph belongs to both classes.</p> <br style="clear:both"> }} ===ID选择器 === ID选择器用于选择一个页面中的唯一元素。也可以多个页面有同名的元素，或者与后代选择器并用。 CSS rule: <syntaxhighlight lang = "css"> #onlyThisOne { font-family:courier; } </syntaxhighlight> HTML例子: <syntaxhighlight lang = "html"> <p id="onlyThisOne">Courier</p> </syntaxhighlight> 绘制为： {{CSS:rendered|1=<p style="font-family:courier;">Courier</p>}} ===拟类选择器Pseudo-Classes=== CSS1 和 CSS2.1的拟类选择器以单个冒号<code>:</code>开始。其名字是大小写不敏感的，可以跟随括号中的值。 拟类选择器允许选择文档树之外的信息或者其它简单选择器不能表达的信息。 拟类选择器可以在简单选择器序列中使用多次。一些拟类选择器是互斥的。 动态的拟类选择器是指不能从文档树推导出的一些特性(characteristics )，这些特性随着用户访问文档，拟类可以获得或者失去，如visited CSS level 1 定义了3个拟类: ;<code>link</code> : unvisited links ;<code>visited</code> : visited links ;<code>active</code> : active links。当你点击一个链接时，它是active 可用于anchor (<code>a</code>) 元素. <syntaxhighlight lang = "css"> a:link{ color:blue; } a:visited{ color:purple; } a:active{ color:red; } </syntaxhighlight> CSS level 2.1引入了一批新的拟类选择器： ;<code>first-child</code> : 匹配元素是父元素的第一个子元素 ;<code>lang(C)</code> : 匹配元素的自然语言特性等于C或者在连字号-左边等于C。C的大小写不敏感。lang特性自动继承到后代元素中；而用特性选择器|=就不适用这些后代元素。 *用户动作拟类选择器： ;<code>hover</code> : 当用户的鼠标悬浮在元素之上 ;<code>active</code> : 任何能够是 'active' ，例如button &#8211; 当元素是active时应用该样式. ;<code>focus</code> : 具有键盘输入焦点的元素可用该样式 例如： <syntaxhighlight lang = "css"> p:first-child { font-size:120% } span:lang(la) { /* render Latin text, e.g. per se, in italics */ font-style:italic } li:hover { /* doesn't work in Internet Explorer */ background-color:blue } input:active { color:red } input:focus { background-color:yellow } </syntaxhighlight> <code>first-child</code>拟类例子在下文的[[#后代选取项 Descendant|descendant]]中给出. 可以同时指定多个拟类： <syntaxhighlight lang = "css"> a:visited:hover { background-color:red } </syntaxhighlight> 需要注意拟类应用的顺序。例如，如需要已访问过的链接为绿色除非用户鼠标悬浮其上时为黄色，则规则必须为如下顺序： <syntaxhighlight lang = "css"> a:visited{ color:green } a:hover{ color:yellow } </syntaxhighlight> 如果上述顺序翻转过来，则已访问的颜色比悬浮的颜色有更高优先级。 一些新的拟类选择器： * :target 当前页面的URL的#号之后的锚名称元素自动具有target特性 * UI元素状态拟类： ** :enabled ** :disabled ** :checked 适用于Radio 和 checkbox 元素 ** :indeterminate 既不是checked 也不是 unchecked，未来会实现。 * 结构的拟类选择器structural pseudo-classes。text或非元素的node都不参与以下的结构计数。 ** :root 在HTML 4，这总是HTML元素 ** :nth-child(an+b) 注意这里的n相当于关键字，表示任意的非负整数。a和b指明为整数，表示把兄弟元素分组，每组|a|个元素，每组第一个元素的index为1，每组的第b个元素被选择。此外， :nth-child()可用‘odd’和‘even’作为实参。‘odd’等效于 2n+1, ‘even’等效于 2n。 ** :nth-last-child(an+b) 从尾部算起。 ** :nth-of-type(an+b) 在sibling元素中以指定类别计数的选择。 ** :nth-last-of-type(an+b) ** :first-child pseudo-class 等价于 :nth-child(1) 表示在sibling元素中为第一个。 ** :last-child pseudo-class 等价于 :nth-last-child(1) ** :first-of-type pseudo-class 表示在它的类别中是sibling元素的第一个。等价于:nth-of-type(1) ** :last-of-type pseudo-class 等价于 :nth-last-of-type(1) ** :only-child 没有sibling。等价于:first-child:last-child 或:nth-child(1):nth-last-child(1) ** :only-of-type 同一类别没有sibling ** :empty 没有子节点。 <syntaxhighlight lang = "css"> tr:nth-child(2n+1) /* represents every odd row of an HTML table */ tr:nth-child(odd) /* same */ tr:nth-child(2n+0) /* represents every even row of an HTML table */ tr:nth-child(even) /* same */ /* Alternate paragraph colours in CSS */ p:nth-child(4n+1) { color: navy; } p:nth-child(4n+2) { color: green; } p:nth-child(4n+3) { color: maroon; } p:nth-child(4n+4) { color: purple; } :nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */ :nth-child(10n+9) /* Same */ :nth-child(10n+-1) /* Syntactically invalid, and would be ignored */ /* When a=0, 'an'部分不需要，除非b部分已经忽略。这可简化为 :nth-child(b) */ foo:nth-child(0n+5) /* represents an element foo that is the 5th child of its parent element */ foo:nth-child(5) /* same */ /*当a=1, 或 a=-1, 1可从规则忽略。下述4例等效： */ bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */ bar:nth-child(n+0) /* same */ bar:nth-child(n) /* same */ bar /* same but lower specificity (0,0,1) */ /*如果b=0, 则第a个元素被选择： */ tr:nth-child(2n+0) /* represents every even row of an HTML table */ tr:nth-child(2n) /* same */ /*下述例子展示了空格符的有效使用： */ :nth-child( 3n + 1 ) :nth-child( +3n - 2 ) :nth-child( -n+ 6) :nth-child( +6 ) /*下述例子展示了空格符的无效使用： */ :nth-child(3 n) :nth-child(+ 2n) :nth-child(+ 2) /*如果a和b均为0，则拟类表示无元素。*/ /*a和b可以为负值。但只有正值表示元素选择：*/ html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */ tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */ foo:nth-last-child(odd) /* represents all odd foo elements in their parent element, counting from the last one */ /* To represent all h2 children of an XHTML body except the first and last, one could use the following selector:*/ body > h2:nth-of-type(n+2):nth-last-of-type(n+2) /*In this case, one could also use :not(), although the selector ends up being just as long:*/ body > h2:not(:first-of-type):not(:last-of-type) /*The following selector represents a p element that is the first child of a div element:*/ div > p:first-child /*This selector can represent the p inside the div of the following fragment:*/ <p> The last P before the note.</p> <div class="note"> <p> The first P inside the note.</p> </div> /*but cannot represent the second p in the following fragment:*/ <p> The last P before the note.</p> <div class="note"> <h2> Note </h2> <p> The first P inside the note.</p> </div> /*下述二者等价*/ * > a:first-child /* a is first child of any element */ a:first-child /* Same (assuming a is not the root element) */ /*p:empty is a valid representation of the following fragment:*/ <p></p> /*foo:empty is not a valid representation for the following fragments:*/ <foo>bar</foo> <foo><bar>bla</bar></foo> <foo>this is not <bar>:empty</bar></foo> </syntaxhighlight> :not(X)是否定伪类，其参数X是一个简单选择器（不含:not自身，即不可以递归）。拟元素也不可以作为其参数。 ==拟元素选择器== 拟元素选择器用于挑选出文档树中没有的结构（如块元素的第一行、第一个字符）或者没有的内容（如before或after）。 CSS1 和 CSS2.1的拟元素选择器以单个冒号<code>:</code>开始，CSS3的拟元素选择器以2个冒号<code>::</code>开始。 CSS3规定：拟元素选择器只能在组合器(combinator)的最后出现且至多出现一次。 CSS level 1定义了2个逆元素：<code>first-letter</code> 和 <code>first-line</code>，分别选择要绘制元素的第一个字母和第一行。 <syntaxhighlight lang = "css"> p:first-letter { color:red } </syntaxhighlight> 只能用一个拟元素选择器且必须是选择器链上的最后一个。<code>first-line</code>选择器只能用于块级元素、内联块、table标题和table的单元格. <code>first-child</code>选择器要求元素是其父元素的第一个子元素。 下例使用<code>first-child</code>选择器。 CSS规则: <syntaxhighlight lang = "css"> div.content strong:first-child { color:red } </syntaxhighlight> HTML例子: <syntaxhighlight lang = "css"> <div class="content"> <p>Some <em>emphasized</em> text and some <strong>strongly emphasized</strong> text.</p> <p>Some <strong>strongly emphasized</strong> text and some <em>emphasized</em> text.</p> </div> </syntaxhighlight> 绘制效果: {{CSS:rendered|1=<p>Some <em>emphasized</em> text and some <strong>strongly emphasized</strong> text.</p> <p>Some <strong style="color:red" title="This text is red.">strongly emphasized</strong> text and some <em>emphasized</em> text.</p> }} 上例需要注意2点： * 元素的前面即使有text，不影响它是first-child。因此第一段落的<code>em</code>元素和第二段落<code>strong</code>元素分别是相应段落的第一个子元素。 * 只有元素满足选择器的所有部分，才会应用该风格规则。第一段落的<code>strong</code>元素是第二个子节点，因此不匹配<code>strong:first-child</code>选择器。 CSS2.1增加了2个拟元素，<code>before</code> 和 <code>after</code>。即在指定元素之前或之后添加一些内容。 ==组合器Combinator== 由多个简单选择器组合而成。 ===后代组合器Descendant combinator=== 语法为： Element Element 即以空白符分隔。空白符可以是：空格符(U+0020), "tab" (U+0009), "换行符" (U+000A), "回车符" (U+000D), "form feed" (U+000C)。 允许在指定元素内部任何深度的另一个指定元素。可以列出大于2个元素组成的祖先后代树。这时出现的星号*代表任意类别的元素。 例如：<code>p</code>元素内部任何深度后代元素<code>span</code>为黑体，则CSS规则： <syntaxhighlight lang = "css"> p span{ font-weight:bold; } </syntaxhighlight> HTML例子: <syntaxhighlight lang = "html"> <p>Start of paragraph. <span>This span is bold.</span> Rest of paragraph.</p> <div>Start of division. <span>This span is normal.</span> Rest of division.</div> </syntaxhighlight> 绘制效果： {{CSS:rendered|1=<p>Start of paragraph. <span style="font-weight:bold;" title="This text is bold.">This span is bold.</span> Rest of paragraph.</p> <div>Start of division. <span>This span is normal.</span> Rest of division.</div> }} 下例改变"navigation"列表中已经访问过的链接的颜色。 CSS规则: <syntaxhighlight lang = "css"> ul#navigation a:visited { color:red } </syntaxhighlight> HTML例子: <syntaxhighlight lang = "html"> <ul id="navigation"> <li><a href="HomePage">Home</a></li> <li><a href="AnotherPage">A page you haven't visited yet.</a></li> </ul> </syntaxhighlight> 绘制效果: {{CSS:rendered|1=<ul> <li style="color:red" title="This text is red.">Home</li> <li style="color:blue">A page you haven't visited yet.</li> </ul> }} ===子元素组合器Child combinator=== Element>Element 指定类别的元素内的所有指定类别的直接子元素 例如： <syntaxhighlight lang = "css"> body > p div ol>li p <!-- 表示p是li的后代，li是ol的子元素, ol是div的后代。 --> </syntaxhighlight> ===兄弟元素组合器Sibling combinators=== 非元素的node，如元素之间的text都被忽略不计数。 ====直接后继兄弟组合器 Next-sibling combinator==== Element+Element 指定类别的元素的符合指定类别的'''直接'''后继兄弟元素适用相应风格 ====所有后续兄弟组合器Subsequent-sibling combinator==== Element~Element 指定类别的元素的符合指定类别的'''所有'''后继兄弟元素适用相应风格 {{BookCat}} s1tb585jpl31ererlbn2y7rx1g9ph13 User:米哈伊尔.格里尔斯.盖伦 2 32332 168496 168492 2022-08-16T17:48:34Z 米哈伊尔.格里尔斯.盖伦 60984 wikitext text/x-wiki 哈哈哈 高中肄业的荷兰生物大佬 惹不起 pn95ykckmuq9jdet4eb7r8z2jvegodc User:角色扮演对话 2 32333 168499 2022-08-17T05:09:54Z QueerEcofeminist 50950 QueerEcofeminist移动页面[[User:角色扮演对话]]至[[User:米沙鄢]]：​当重命名用户“[[Special:CentralAuth/角色扮演对话|角色扮演对话]]”至“[[Special:CentralAuth/米沙鄢|米沙鄢]]”时自动移动页面 wikitext text/x-wiki #REDIRECT [[User:米沙鄢]] dnrxntv5iwtqbjull8en95xf3c5cqp9 CSS/Lengths and Units 0 32334 168503 2022-08-17T08:29:53Z Paho.mqtt 60409 创建页面，内容为“为指定宽度、高度或其他长度，可用的度量单位有： <!-- Note: percentage is not a unit. --> {| class="wikitable" |+ CSS的度量单位 ! Code ! 定义 ! 注释 |- | em | 元素的字体的高度 | |- | ex | 元素的字体的字母'x'的高度 | |- | px | 像素 | |- | mm | 毫米 | |- | cm | 厘米 | |- | pt | point (1/72 英寸) | |- | pc | pica (12 points, 即1/6英寸) | |- | in | 英寸 | |} 长度也可表示为另一个长度的百…” wikitext text/x-wiki 为指定宽度、高度或其他长度，可用的度量单位有： <!-- Note: percentage is not a unit. --> {| class="wikitable" |+ CSS的度量单位 ! Code ! 定义 ! 注释 |- | em | 元素的字体的高度 | |- | ex | 元素的字体的字母'x'的高度 | |- | px | 像素 | |- | mm | 毫米 | |- | cm | 厘米 | |- | pt | point (1/72 英寸) | |- | pc | pica (12 points, 即1/6英寸) | |- | in | 英寸 | |} 长度也可表示为另一个长度的百分比。这可能使情况复杂化，因为基线长度随着属性的不同而不同。例如，用属性{{CSS:property|margin}}计算百分比是基于包含块的宽度。用属性{{CSS:property|font-size}}计算百分比，是基于父元素的{{CSS:property|font-size}}。而用属性{{CSS:property|line-height}}计算百分比，是基于当前元素的{{CSS:property|font-size}}。 屏幕上的字体尺寸最好基于百分比或以<code>em</code>为度量单位。这意味着页面将跟着用户字体选择而变化。用像素(<code>px</code>)为单位指定字体尺寸会导致一些问题，应该尽量避免。 绝对度量单位<code>mm</code>, <code>cm</code>, <code>pt</code>, <code>pc</code>, <code>in</code>在屏幕上工作不好，在很多老浏览器上会引发问题。这些用在打印时更安全。但即使打印，使用这些度量单位也与用户的选择难以交互。 == 相对度量单位 == 3个度量单位：<code>em</code>, <code>ex</code>, <code>px</code>是相对度量单位。并不指出一个固定长度。而是随其他量的变化而变。对于<code>em</code>和<code>ex</code>，随某些元素的字体尺寸变化而变。 === 屏幕像素, 打印机像素和CSS像素 === The <code>px</code> unit specifies a length in ''CSS pixels''. These are not the same as the pixels on the screen that the document is rendered on or the dots on the printer that it is printed on. It is perfectly possible, for example, for there to be two screen pixels or five printer dots to one CSS pixel. Many web browsers use the rule that one screen pixel equals one CSS pixel for simplicity but you can not rely on this. Opera and Internet Explorer version 7 allow the user to change the number of screen pixels per CSS pixel. It is common for users with poor vision who use these browsers to choose to have five or six screen pixels to the CSS pixel. The [http://www.w3.org/TR/CSS21/syndata.html#value-def-length formal definition] of the CSS pixel is quite complicated but the basic idea is that a CSS pixel appears to be the same size when the document is at a comfortable reading distance. So a CSS pixel would be physically bigger on a monitor than on a mobile phone because the monitor would normally be further from the user's eyes than the mobile phone. === Calculations === Divide the desired margin width/height by the width/height of its container to convert it to ems. Multiply by 100 to convert that to percentages. Divide the desired container width by 1.62 to use the Golden Ratio as the size of the content block. Subtract the content width from the container width to use the Golden Ratio as the size of the sidebar {{BookCat}} 5e532h7jxm21rbift0vu56ya80wrtwl