时间:2021-05-08
2.1 规则的结构<rules>::=<selector> <左括号><declarations><右括号><declarations>::= <declaration>{<SEMICOLON><declaration>}[SEMICOLON]<SEMICOLON>::=分号<declaration>::=<property><COLON><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.1selectorselector: defines which piece of the document will be affected.Selector通常是html元素,也可能是xml中允许任何元素。2.1.2 Declarations and Keywords2.2 Grouping2.2.1 grouping selectors将多个元素共用一个style,例子:
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;}h1, h2, h4 {color: silver;}h2, h3 {background: gray;}h1, h4, b {background: white;}h3 {color: white;}b {color: gray;}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: purplebackground: 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和declarationh1, 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给警告信息的部分加上标记。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
对于CSS来说,关于id和class属于选择器的问题。二者主要的区别在哪里呢?id具有唯一性,class具有普遍性。id是唯一的,所以尽量在结构外围使用,通常用
我们平常在用DIVCSS制作Xhtml网页页面时,常会用到class和id来选择调用CSS样式属性。对学习CSS的新手来说class和id可能比较模糊,同时不知
主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和
CSS3增加了大量的结构伪类,利用文档结构树来实现表现,从而可以减少页面内class属性和ID属性的定义,使得文档更加简洁。相关阅读文章:CSS3属性选择符介绍
dreamweaver可以创建一个CSS规则来自动完成HTML标签的格式设置或者class或ID属性所标识的文本范围的格式设置,该怎么设置css规则呢?下面我们