CSS規(guī)則的結(jié)構(gòu)和Grouping、class和id
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:26:04 作者:佚名
我要評(píng)論

2.1 規(guī)則的結(jié)構(gòu)
<rules>::=<selector>
<左括號(hào)><declarations><右括號(hào)>
<declarations>::=
<declaration>{<SEMICOLON><declaration>}[SEMICO
LON]
<SEMICOLON>::=分號(hào)
<declaration>:
2.1 規(guī)則的結(jié)構(gòu)
<rules>::=<selector>
<左括號(hào)><declarations><右括號(hào)>
<declarations>::=
<declaration>{<SEMICOLON><declaration>}[SEMICO
LON]
<SEMICOLON>::=分號(hào)
<declaration>::=<property><COLON>
<value>
<COLON>::=冒號(hào)
<value>::=<keyword list>
<keyword list>::=<keyword>{<SPACE><keyword>}
<SPACE>::=空格
通常會(huì)用空格做為value之間的分隔符,有個(gè)例外:
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.1selector
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
將多個(gè)元素共用一個(gè)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: 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 就是同時(shí)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 最簡(jiǎn)單的selector是只針對(duì)文檔元素的element selecoter,還有兩種selecotrs:class selectors和id selectors。 這兩種selector可以獨(dú)立于文檔元素的,即不是于具體某個(gè)的文檔元素直接關(guān)聯(lián)的。這兩種selecoter可以單獨(dú)使用,也可以和element selector一起使用。但是這兩種selector的使用需要配合文檔編寫的規(guī)范性。 比如寫一個(gè)討論plutonium處理方式的文檔,文檔由很多段組成,包含很多警告信息,希望將警告的字體置為bold,以突出顯示。但是這些警告信息的格式很多,一段文字,列表式,一小節(jié)文本等。所以不能通過(guò) p {font-weight: bold;} 的形式來(lái)定義。這樣無(wú)法從全是文本的整個(gè)文檔中找到警告信息,并加粗。 因此,解決方式:使用class selectors給警告信息的部分加上標(biāo)記。

/* 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: 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 就是同時(shí)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 最簡(jiǎn)單的selector是只針對(duì)文檔元素的element selecoter,還有兩種selecotrs:class selectors和id selectors。 這兩種selector可以獨(dú)立于文檔元素的,即不是于具體某個(gè)的文檔元素直接關(guān)聯(lián)的。這兩種selecoter可以單獨(dú)使用,也可以和element selector一起使用。但是這兩種selector的使用需要配合文檔編寫的規(guī)范性。 比如寫一個(gè)討論plutonium處理方式的文檔,文檔由很多段組成,包含很多警告信息,希望將警告的字體置為bold,以突出顯示。但是這些警告信息的格式很多,一段文字,列表式,一小節(jié)文本等。所以不能通過(guò) p {font-weight: bold;} 的形式來(lái)定義。這樣無(wú)法從全是文本的整個(gè)文檔中找到警告信息,并加粗。 因此,解決方式:使用class selectors給警告信息的部分加上標(biāo)記。
相關(guān)文章
- 下面小編就為大家?guī)?lái)一篇css background 背景圖的設(shè)置方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-30
CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié)
這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié),背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下2016-06-13- 固定背景圖片的通常方法就是把background-attachment設(shè)成fix,進(jìn)一步的話自然則是用background-position,下面來(lái)詳解使用CSS固定頁(yè)面背景圖片及位置的方法:2016-05-17
- 在chrome,F(xiàn)F里調(diào)試完后,忽然想起ie來(lái),放到Ie里其它還好了,但是有個(gè)背景圖片顯示不出來(lái),具體的寫法如下,有類似情況的朋友可以參考下2013-11-25
使用css的background:url設(shè)置背景圖方法
設(shè)置背景圖的方法一般是使用css的background:url來(lái)實(shí)現(xiàn)的,下面有個(gè)示例,大家可以參考下2013-10-14利用CSS定位背景圖片 background-position
我們?cè)谘芯科渌木W(wǎng)站的樣式的時(shí)候經(jīng)常會(huì)發(fā)現(xiàn)一種情況,就是在很多background屬性里都調(diào)用同一張圖片,來(lái)滿足網(wǎng)頁(yè)各個(gè)部分的使用。打開這種圖片看一下,會(huì)發(fā)現(xiàn)這張圖片上包2009-12-17學(xué)習(xí)CSS的背景圖像屬性background-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
CSS的背景屬性“background”提供了眾多屬性值,如顏色、圖像、定位等,為網(wǎng)頁(yè)背景圖像的定義提供了極大的便利??纯碽ackground提供的屬性值: background2008-10-17通過(guò)css使用background-color為背景圖添加遮罩效果的兩種方法
這篇文章主要介紹了通過(guò)css使用background-color為背景圖添加遮罩效果的兩種方法,需要的朋友可以參考下2018-07-12