CSS法则的布局和Grouping、class和id

<value> <COLON>::=冒号 <value>::=<keyword list> <keyword list>::=<keyword>{<SPACE><keyword>} <SPACE>::=空格   凡是会用空格做为value之间的脱离符，有个破例： As we've seen, CSS keywords are separated by spaces—except in one instance. In the CSS property font, there is exactly one place where a forward-slash (/) can be used to separate two specific keywords. Here's an example: h2 {font: large/150% sans-serif;} The slash separates the keywords that set the element's font size and line height. This is the only place the slash is allowed to appear in the font declaration. All of the other keywords allowed for font are separated by spaces.     2.1.1 selector selector: defines which piece of the document will be affected. Selector凡是是html元素，也也许是xml中应承任何元素。 2.1.2 Declarations and Keywords 2．2 Grouping 2.2.1 grouping selectors 将多个元素共用一个style，例子：

/* group 1 */

h1 {color: silver; background: white;}   h2 {color: silver; background: gray;}   h3 {color: white; background: gray;}   h4 {color: silver; background: white;}   b {color: gray; background: white;}     /* group 2 */   h1, h2, h4 {color: silver;}   h2, h3 {background: gray;}   h1, h4, b {background: white;}   h3 {color: white;}   b {color: gray;}     /* group 3 */   h1, h4 {color: silver; background: white;}   h2 {color: silver;}   h3 {color: white;}   h2, h3 {background: gray;}   b {color: gray; background: white;} 2.2.1.1 The universal selector * {color: red;} 2.2.2 grouping declarations 例子： h1 {font: 18px Helvetica;}   h1 {color: purple;}   h1 {background: aqua;} h1 {    font: 18px Helvetica;    color: purple;    background: aqua;   } If the second semicolon is omitted, however, the user agent will interpret the style sheet as follows: h1 {    font: 18px Helvetica;    color: purple background: aqua;   } Since background: is not a valid value for color, and also since color can be given only one keyword, a user agent will ignore the color declaration (including the background: aqua part) entirely. It might render h1s as purple text without an aqua background, but more likely, you won't even get purple h1s. Instead, they'll be the default color (usually black) with no background at all. (The declaration font: 18px Helvetica will still take effect since it was correctly terminated with a semicolon.) 2.2.3 Grouping Everything 就是同时group selector和declaration h1, h2, h3, h4, h5, h6 {color: gray; background: white; padding: 0.5em;    border: 1px solid black;}   You've grouped the selectors, so the styles on the right side of the rule will be applied to all the headings listed, and grouping the declarations means that all of the listed styles will be applied to the selectors on the left side of the rule. 2.3 class and id selectors 最简朴的selector是只针对文档元素的element selecoter，尚有两种selecotrs：class selectors和id selectors。 这两种selector可以独立于文档元素的，即不是于详细某个的文档元素直接关联的。这两种selecoter可以单独行使，也可以和element selector一路行使。可是这两种selector的行使必要共同文档编写的类型性。 好比写一个接头plutonium处理赏罚方法的文档，文档由许多段构成，包括许多告诫信息，但愿将告诫的字体置为bold，以突出表现。可是这些告诫信息的名目许多，一段笔墨，列表式，一末节文本等。以是不能通过 p {font-weight: bold;} 的情势来界说。这样无法从满是文本的整个文档中找到告诫信息，并加粗。 因此，办理方法：行使class selectors给告诫信息的部门加上标志。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!