欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS 分組

選擇器分組

假設(shè)希望 h2 元素和段落都有灰色。為達(dá)到這個目的,最容易的做法是使用以下聲明:

h2, p {color:gray;}

將 h2 和 p 選擇器放在規(guī)則左邊,然后用逗號分隔,就定義了一個規(guī)則。其右邊的樣式(color:gray;)將應(yīng)用到這兩個選擇器所引用的元素。逗號告訴瀏覽器,規(guī)則中包含兩個不同的選擇器。如果沒有這個逗號,那么規(guī)則的含義將完全不同。參見后代選擇器。

可以將任意多個選擇器分組在一起,對此沒有任何限制。

例如,如果您想把很多元素顯示為灰色,可以使用類似如下的規(guī)則:

body, h2, p, table, th, td, pre, strong, em {color:gray;}

提示:通過分組,創(chuàng)作者可以將某些類型的樣式“壓縮”在一起,這樣就可以得到更簡潔的樣式表。

以下的兩組規(guī)則能得到同樣的結(jié)果,不過可以很清楚地看出哪一個寫起來更容易:

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}

/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

親自試一試

分組提供了一些有意思的選擇。例如,下例中的所有規(guī)則分組都是等價的,每個組只是展示了對選擇器和聲明分組的不同方法:

/* 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;}

親自試一試:

請注意,group 3 中使用了“聲明分組”。稍后我們會為您介紹“聲明分組”。

通配符選擇器

CSS2 引入了一種新的簡單選擇器 - 通配選擇器(universal selector),顯示為一個星號(*)。該選擇器可以與任何元素匹配,就像是一個通配符。

例如,下面的規(guī)則可以使文檔中的每個元素都為紅色:

* {color:red;}

親自試一試

這個聲明等價于列出了文檔中所有元素的一個分組選擇器。利用通配選擇器,只需敲一次鍵(僅一個星號)就能使文檔中所有元素的 color 屬性值指定為 red。

聲明分組

我們既可以對選擇器進(jìn)行分組,也可以對聲明分組。

假設(shè)您希望所有 h1 元素都有紅色背景,并使用 28 像素高的 Verdana 字體顯示為藍(lán)色文本,可以寫以下樣式:

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

但是上面這種做法的效率并不高。尤其是當(dāng)我們?yōu)橐粋有多個樣式的元素創(chuàng)建這樣一個列表時會很麻煩。相反,我們可以將聲明分組在一起:

h1 {font: 28px Verdana; color: white; background: black;}

這與前面的 3 行樣式表的效果完全相同。

注意,對聲明分組,一定要在各個聲明的最后使用分號,這很重要。瀏覽器會忽略樣式表中的空白符。只要加了分號,就可以毫無顧忌地采用以下格式建立樣式:

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

親自試一試

怎么樣,上面這種寫法的可讀性是不是更強(qiáng)。

不過,如果忽略了第二個分號,用戶代理就會把這個樣式表解釋如下:

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

親自試一試

因?yàn)?background 對 color 來說不是一個合法值,而且由于只能為 color 指定一個關(guān)鍵字,所以用戶代理會完全忽略這個 color 聲明(包括 background: black 部分)。這樣 h1 標(biāo)題只會顯示為藍(lán)色,而沒有紅色背景,不過更有可能根本得不到藍(lán)色的 h1。相反,這些標(biāo)題只會顯示為默認(rèn)顏色(通常是黑色),而且根本沒有背景色。font: 28px Verdana 聲明仍能正常發(fā)揮作用,因?yàn)樗_實(shí)正確地以一個分號結(jié)尾。

與選擇器分組一樣,聲明分組也是一種便利的方法,可以縮短樣式表,使之更清晰,也更易維護(hù)。

提示:在規(guī)則的最后一個聲明后也加上分號是一個好習(xí)慣。在向規(guī)則增加另一個聲明時,就不必?fù)?dān)心忘記再插入一個分號。

結(jié)合選擇器和聲明的分組

我們可以在一個規(guī)則中結(jié)合選擇器分組和聲明分組,就可以使用很少的語句定義相對復(fù)雜的樣式。

下面的規(guī)則為所有標(biāo)題指定了一種復(fù)雜的樣式:

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

親自試一試

上面這條規(guī)則將所有標(biāo)題的樣式定義為帶有白色背景的灰色文本,其內(nèi)邊距是 10 像素,并帶有 1 像素的實(shí)心邊框,文本字體是 Verdana。