设为首页 - 加入收藏 湛江站长网 (http://www.aseasononthemountain.com)- 国内知名站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 网站 站长之家 什么 平台
当前位置: 金亚洲官网 > 创业 > 正文

CSS规则的结构和Grouping、class和id

发布时间:2018-08-22 08:41 所属栏目:[创业] 来源:站长网
导读:2.1 规则的结构 rules::=selector 左括号declarations右括号declarations::= declaration{SEMICOLONdeclaration}[SEMICOLON]SEMICOLON::=分号declaration::=propertyCOLON valueCOLON::=冒号value::=keyword listkeyword list::=keyword{SPACEkeyword}SPAC
2.1 规则的结构 CSS规则的结构和Grouping、class和id <rules>::=<selector>         <左括号><declarations><右括号> <declarations>::=
<declaration>{<SEMICOLON><declaration>}[SEMICO LON] <SEMICOLON>::=分号 <declaration>::=<property><COLON>
<value> <COLON>::=冒号 <value>::=<keyword list> <keyword list>::=<keyword>{<SPACE><keyword>} <SPACE>::=空格   通?;嵊每崭褡鑫獀alue之间的分隔符,有个例外: 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,例子:
 金亚洲官网 www.aseasononthemountain.com /* 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给警告信息的部分加上标记。

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章