• <ins id="pjuwb"></ins>
    <blockquote id="pjuwb"><pre id="pjuwb"></pre></blockquote>
    <noscript id="pjuwb"></noscript>
          <sup id="pjuwb"><pre id="pjuwb"></pre></sup>
            <dd id="pjuwb"></dd>
            <abbr id="pjuwb"></abbr>
            posts - 319, comments - 22, trackbacks - 0, articles - 11
              C++博客 :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理

            尺寸

            單位描述
            %百分比
            in英寸
            cm厘米
            mm毫米
            em

            1em 等于當(dāng)前的字體尺寸。

            2em 等于當(dāng)前字體尺寸的兩倍。

            例如,如果某元素以 12pt 顯示,那么 2em 是24pt。

            在 CSS 中,em 是非常有用的單位,因?yàn)樗梢宰詣舆m應(yīng)用戶所使用的字體。

            ex一個(gè) ex 是一個(gè)字體的 x-height。 (x-height 通常是字體尺寸的一半。)
            pt磅 (1 pt 等于 1/72 英寸)
            pc12 點(diǎn)活字 (1 pc 等于 12 點(diǎn))
            px像素 (計(jì)算機(jī)屏幕上的一個(gè)點(diǎn))

            顏色

            單位描述
            (顏色名)顏色名稱 (比如 red)
            rgb(x,x,x)RGB 值 (比如 #ff0000)
            rgb(x%, x%, x%)RGB 百分比值 (比如 rgb(100%,0%,0%))
            #rrggbb十六進(jìn)制數(shù) (比如 #ff0000)

            posted @ 2011-05-28 21:24 RTY 閱讀(173) | 評論 (0)編輯 收藏

                 摘要: 聽覺樣式表聽覺樣式表可把語音合成與音響效果相組合,使用戶可以聽到信息,而無需進(jìn)行閱讀。聽覺呈現(xiàn)可用于:視覺能力低弱的人士幫助用戶學(xué)習(xí)閱讀幫助有閱讀障礙的用戶家庭娛樂在汽車中使用聽覺呈現(xiàn)通常會把文檔轉(zhuǎn)化為純文本,然后傳給屏幕閱讀器(可讀出屏幕上所有字符的一種程序)。聽覺樣式表的一個(gè)例子:h1, h2, h3, h4 { voice-family: male; richness: 80; cue-be...  閱讀全文

            posted @ 2011-05-28 21:24 RTY 閱讀(219) | 評論 (0)編輯 收藏

            媒介類型(Media Types)允許你定義以何種媒介來提交文檔。文檔可以被顯示在顯示器、紙媒介或者聽覺瀏覽器等等。

            媒介類型

            某些 CSS 屬性僅僅被設(shè)計(jì)為針對某些媒介。比方說 "voice-family" 屬性被設(shè)計(jì)為針對聽覺用戶終端。其他的屬性可被用于不同的媒介。例如,"font-size" 屬性可被用于顯示器以及印刷媒介,但是也許會帶有不同的值。顯示器上面的顯示的文檔通常會需要比紙媒介文檔更大的字號,同時(shí),在顯示器上,sans-serif 字體更易閱讀,而在紙媒介上,serif 字體更易閱讀。

            @media規(guī)則

            @media 規(guī)則使你有能力在相同的樣式表中,使用不同的樣式規(guī)則來針對不同的媒介。

            下面這個(gè)例子中的樣式告知瀏覽器在顯示器上顯示 14 像素的 Verdana 字體。但是假如頁面需要被打印,將使用 10 個(gè)像素的 Times 字體。注意:font-weight 被設(shè)置為粗體,不論顯示器還是紙媒介:

            <html> <head>  <style> @media screen { p.test {font-family:verdana,sans-serif; font-size:14px} }  @media print { p.test {font-family:times,serif; font-size:10px} }  @media screen,print { p.test {font-weight:bold} } </style>  </head>  <body>....</body>  </html>

            不同的媒介類型

            注釋:媒介類型名稱對大小寫不敏感。

            媒介類型描述
            all用于所有的媒介設(shè)備。
            aural用于語音和音頻合成器。
            braille用于盲人用點(diǎn)字法觸覺回饋設(shè)備。
            embossed用于分頁的盲人用點(diǎn)字法打印機(jī)。
            handheld用于小的手持的設(shè)備。
            print用于打印機(jī)。
            projection用于方案展示,比如幻燈片。
            screen用于電腦顯示器。
            tty用于使用固定密度字母柵格的媒介,比如電傳打字機(jī)和終端。
            tv用于電視機(jī)類型的設(shè)備。

            posted @ 2011-05-28 21:22 RTY 閱讀(164) | 評論 (0)編輯 收藏

            CSS 尺寸 (Dimension) 屬性允許你控制元素的高度和寬度。同樣,它允許你增加行間距。

            CSS 尺寸實(shí)例:

            使用像素值設(shè)置圖像的高度
            本例演示如何使用像素值設(shè)置元素的高度。
            使用百分比設(shè)置圖像的高度
            本例演示如何使用百分比值來設(shè)置元素的高度。
            使用像素值來設(shè)置元素的寬度
            本例演示如何使用像素值來設(shè)置元素的寬度。
            使用百分比來設(shè)置元素的寬度
            本例演示如何使用百分比值來設(shè)置元素的寬度。
            設(shè)置元素的最大高度
            本例演示如何設(shè)置一個(gè)元素的最大高度。
            使用像素值來設(shè)置元素的最大寬度
            本例演示如何使用像素值來設(shè)置元素的最大高度。
            使用百分比來設(shè)置元素的最大寬度
            本例演示如何使用百分比值來設(shè)置元素的最大高度。
            使用像素值來設(shè)置元素的最小高度
            本例演示如何使用像素值來設(shè)置元素的最小高度。
            使用像素值來設(shè)置元素的最小寬度
            本例演示如何使用像素值來設(shè)置元素的最小寬度。
            使用百分比來設(shè)置元素的最小寬度
            本例演示如何使用百分比值來設(shè)置元素的最小寬度。
            使用百分比設(shè)置行間距
            本例演示如何使用百分比值來設(shè)置段落中的行間距。
            使用像素值設(shè)置行間距
            本例演示如何使用像素值來設(shè)置段落中的行間距。
            使用數(shù)值來設(shè)置行間距
            本例演示如何使用一個(gè)數(shù)值來設(shè)置段落中的行間距。

            CSS 尺寸屬性

            CSS 尺寸屬性允許你控制元素的高度和寬度。同樣,還允許你增加行間距。

            屬性描述
            height設(shè)置元素的高度。
            line-height設(shè)置行高。
            max-height設(shè)置元素的最大高度。
            max-width設(shè)置元素的最大寬度。
            min-height設(shè)置元素的最小高度。
            min-width設(shè)置元素的最小寬度。
            width設(shè)置元素的寬度。

            posted @ 2011-05-28 21:21 RTY 閱讀(202) | 評論 (0)編輯 收藏

            CSS 分類屬性允許你規(guī)定如何以及在何處顯示元素。

            CSS分類(Classification)實(shí)例:

            如何把元素顯示為內(nèi)聯(lián)元素
            本例演示如何把元素顯示為內(nèi)聯(lián)元素。
            如何把元素顯示為塊級元素
            本例演示如何把元素顯示為塊級元素。
            float 屬性的簡單應(yīng)用
            使圖像浮動于一個(gè)段落的右側(cè)。
            將帶有邊框和邊界的圖像浮動于段落的右側(cè)
            使圖像浮動于段落的右側(cè)。向圖像添加邊框和邊界。
            帶標(biāo)題的圖像浮動于右側(cè)
            使帶有標(biāo)題的圖像浮動于右側(cè)
            使段落的首字母浮動于左側(cè)
            使段落的首字母浮動于左側(cè),并向這個(gè)字母添加樣式。
            創(chuàng)建水平菜單
            使用具有一欄超鏈接的浮動來創(chuàng)建水平菜單。
            創(chuàng)建無表格的首頁
            使用浮動來創(chuàng)建擁有頁眉、頁腳、左側(cè)目錄和主體內(nèi)容的首頁。
            定位:相對定位
            本例演示如何相對于一個(gè)元素的正常位置來對其定位。
            定位:絕對定位
            本例演示如何使用絕對值來對元素進(jìn)行定位。
            定位:固定定位
            本例演示如何相對于瀏覽器窗口來對元素進(jìn)行定位。
            如何使元素不可見
            本例演示如何使元素不可見。你希望元素被顯示出來,還是不呢?
            把表格元素設(shè)置為 collapse(請?jiān)诜?IE 的瀏覽器中查看)
            本例演示如何使表格元素疊加?
            改變光標(biāo)
            本例演示如何改變光標(biāo)。
            清除元素的側(cè)面
            本例演示如何使用清除元素側(cè)面的浮動元素。

            CSS 分類屬性 (Classification)

            CSS 分類屬性允許你控制如何顯示元素,設(shè)置圖像顯示于另一元素中的何處,相對于其正常位置來定位元素,使用絕對值來定位元素,以及元素的可見度。

            屬性描述
            clear設(shè)置一個(gè)元素的側(cè)面是否允許其他的浮動元素。
            cursor規(guī)定當(dāng)指向某元素之上時(shí)顯示的指針類型。
            display設(shè)置是否及如何顯示元素。
            float定義元素在哪個(gè)方向浮動。
            position把元素放置到一個(gè)靜態(tài)的、相對的、絕對的、或固定的位置中。
            visibility設(shè)置元素是否可見或不可見。

            posted @ 2011-05-28 21:21 RTY 閱讀(181) | 評論 (0)編輯 收藏

            CSS 偽元素用于向某些選擇器設(shè)置特殊效果。

            語法

            偽元素的語法:

            selector:pseudo-element {property:value;}

            CSS 類也可以與偽元素配合使用:

            selector.class:pseudo-element {property:value;}

            :first-line 偽元素

            "first-line" 偽元素用于向文本的首行設(shè)置特殊樣式。

            在下面的例子中,瀏覽器會根據(jù) "first-line" 偽元素中的樣式對 p 元素的第一行文本進(jìn)行格式化:

            實(shí)例

            p:first-line   {   color:#ff0000;   font-variant:small-caps;   } 

            親自試一試

            注釋:"first-line" 偽元素只能用于塊級元素。

            注釋:下面的屬性可應(yīng)用于 "first-line" 偽元素:

            • font
            • color
            • background
            • word-spacing
            • letter-spacing
            • text-decoration
            • vertical-align
            • text-transform
            • line-height
            • clear

            :first-letter 偽元素

            "first-letter" 偽元素用于向文本的首字母設(shè)置特殊樣式:

            p:first-letter   {   color:#ff0000;   font-size:xx-large;   } 

            親自試一試

            注釋:"first-letter" 偽元素只能用于塊級元素。

            注釋:下面的屬性可應(yīng)用于 "first-letter" 偽元素:

            • font
            • color
            • background
            • margin
            • padding
            • border
            • text-decoration
            • vertical-align (僅當(dāng) float 為 none 時(shí))
            • text-transform
            • line-height
            • float
            • clear

            偽元素和 CSS 類

            偽元素可以與 CSS 類配合使用:

            p.article:first-letter   {   color: #FF0000;   }  <p class="article">This is a paragraph in an article。</p> 

            上面的例子會使所有 class 為 article 的段落的首字母變?yōu)榧t色。

            多重偽元素

            可以結(jié)合多個(gè)偽元素來使用。

            在下面的例子中,段落的第一個(gè)字母將顯示為紅色,其字體大小為 xx-large。第一行中的其余文本將為藍(lán)色,并以小型大寫字母顯示。段落中的其余文本將以默認(rèn)字體大小和顏色來顯示:

            p:first-letter   {   color:#ff0000;   font-size:xx-large;   }  p:first-line   {   color:#0000ff;   font-variant:small-caps;   } 

            親自試一試

            CSS2 - :before 偽元素

            ":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容。

            下面的例子在每個(gè) <h1> 元素前面插入一幅圖片:

            h1:before   {   content:url(logo.gif);   } 

            親自試一試

            CSS2 - :after 偽元素

            ":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。

            下面的例子在每個(gè) <h1> 元素后面插入一幅圖片:

            h1:after   {   content:url(logo.gif);   } 

            親自試一試

            偽元素

            W3C:"W3C" 列指示出該屬性在哪個(gè) CSS 版本中定義(CSS1 還是 CSS2)。

            屬性描述CSS
            :first-letter向文本的第一個(gè)字母添加特殊樣式。1
            :first-line向文本的首行添加特殊樣式。1
            :before在元素之前添加內(nèi)容。2
            :after在元素之后添加內(nèi)容。2

            posted @ 2011-05-28 21:20 RTY 閱讀(198) | 評論 (0)編輯 收藏

            CSS 偽類用于向某些選擇器添加特殊的效果。

            CSS 偽類 (Pseudo-classes)實(shí)例:

            超鏈接
            本例演示如何向文檔中的超鏈接添加不同的顏色。
            超鏈接 2
            本例演示如何向超鏈接添加其他樣式。
            超鏈接 - :focus 的使用
            本例演示如何對超鏈接應(yīng)用 :focus 偽類(無法在 IE 中工作)。
            :first-child(首個(gè)子對象)
            本例演示 :first-child 偽類的用法。
            :lang(語言)
            本例演示 :lang 偽類的用法。

            語法

            偽類的語法:

            selector : pseudo-class {property: value}

            CSS 類也可與偽類搭配使用。

            selector.class : pseudo-class {property: value}

            錨偽類

            在支持 CSS 的瀏覽器中,鏈接的不同狀態(tài)都可以不同的方式顯示,這些狀態(tài)包括:活動狀態(tài),已被訪問狀態(tài),未被訪問狀態(tài),和鼠標(biāo)懸停狀態(tài)。

            a:link {color: #FF0000}		/* 未訪問的鏈接 */ a:visited {color: #00FF00}	/* 已訪問的鏈接 */ a:hover {color: #FF00FF}	/* 鼠標(biāo)移動到鏈接上 */ a:active {color: #0000FF}	/* 選定的鏈接 */ 

            親自試一試

            提示:在 CSS 定義中,a:hover 必須被置于 a:link 和 a:visited 之后,才是有效的。

            提示:在 CSS 定義中,a:active 必須被置于 a:hover 之后,才是有效的。

            提示:偽類名稱對大小寫不敏感。

            偽類與 CSS 類

            偽類可以與 CSS 類配合使用:

            a.red : visited {color: #FF0000}  <a class="red" href="css_syntax.asp">CSS Syntax</a>

            假如上面的例子中的鏈接被訪問過,那么它將顯示為紅色。

            CSS2 - :first-child 偽類

            您可以使用 :first-child 偽類來選擇元素的第一個(gè)子元素。這個(gè)特定偽類很容易遭到誤解,所以有必要舉例來說明。考慮以下標(biāo)記:

            <div> <p>These are the necessary steps:</p> <ul> <li>Intert Key</li> <li>Turn key <strong>clockwise</strong></li> <li>Push accelerator</li> </ul> <p>Do <em>not</em> push the brake at the same time as the accelerator.</p> </div> 

            在上面的例子中,作為第一個(gè)元素的元素包括第一個(gè) p、第一個(gè) li 和 strong 和 em 元素。

            給定以下規(guī)則:

            p:first-child {font-weight: bold;} li:first-child {text-transform:uppercase;} 

            第一個(gè)規(guī)則將作為某元素第一個(gè)子元素的所有 p 元素設(shè)置為粗體。第二個(gè)規(guī)則將作為某個(gè)元素(在 HTML 中,這肯定是 ol 或 ul 元素)第一個(gè)子元素的所有 li 元素變成大寫。

            請?jiān)L問該鏈接,來查看這個(gè) :first-child 實(shí)例的效果。

            提示:最常見的錯(cuò)誤是認(rèn)為 p:first-child 之類的選擇器會選擇 p 元素的第一個(gè)子元素。

            注釋:必須聲明 <!DOCTYPE>,這樣 :first-child 才能在 IE 中生效。

            為了使您更透徹地理解 :first-child 偽類,我們另外提供了 3 個(gè)例子:

            例子 1 - 匹配第一個(gè) <p> 元素

            在下面的例子中,選擇器匹配作為任何元素的第一個(gè)子元素的 p 元素:

            <html> <head> <style type="text/css"> p:first-child {   color: red;   }  </style> </head>  <body> <p>some text</p> <p>some text</p> </body> </html>

            TIY

            例子 2 - 匹配所有 <p> 元素中的第一個(gè) <i> 元素

            在下面的例子中,選擇器匹配所有 <p> 元素中的第一個(gè) <i> 元素:

            <html> <head> <style type="text/css"> p > i:first-child {   font-weight:bold;   }  </style> </head>  <body> <p>some <i>text</i>. some <i>text</i>.</p> <p>some <i>text</i>. some <i>text</i>.</p> </body> </html>

            TIY

            例子 3 - 匹配所有作為第一個(gè)子元素的 <p> 元素中的所有 <i> 元素

            在下面的例子中,選擇器匹配所有作為元素的第一個(gè)子元素的 <p> 元素中的所有 <i> 元素:

            <html> <head> <style type="text/css"> p:first-child i {   color:blue;   }  </style> </head>  <body> <p>some <i>text</i>. some <i>text</i>.</p> <p>some <i>text</i>. some <i>text</i>.</p> </body> </html>

            TIY

            CSS2 - :lang 偽類

            :lang 偽類使你有能力為不同的語言定義特殊的規(guī)則。在下面的例子中,:lang 類為屬性值為 no 的 q 元素定義引號的類型:

            <html> <head>  <style type="text/css"> q:lang(no)    {    quotes: "~" "~"    } </style>  </head>  <body> <p>文字<q lang="no">段落中的引用的文字</q>文字</p> </body></html>

            偽類

            W3C:"W3C" 列指示出該屬性在哪個(gè) CSS 版本中定義(CSS1 還是 CSS2)。

            屬性描述CSS
            :active向被激活的元素添加樣式。1
            :focus向擁有鍵盤輸入焦點(diǎn)的元素添加樣式。2
            :hover當(dāng)鼠標(biāo)懸浮在元素上方時(shí),向元素添加樣式。1
            :link向未被訪問的鏈接添加樣式。1
            :visited向已被訪問的鏈接添加樣式。1
            :first-child向元素的第一個(gè)子元素添加樣式。2
            :lang向帶有指定 lang 屬性的元素添加樣式。2

            posted @ 2011-05-28 21:19 RTY 閱讀(226) | 評論 (0)編輯 收藏

            上海裝修公司http://www.zhixian.com.cn/裝修公司

            與后代選擇器相比,子元素選擇器(Child selectors)只能選擇作為某元素子元素的元素。

            選擇子元素

            如果您不希望選擇任意的后代元素,而是希望縮小范圍,只選擇某個(gè)元素的子元素,請使用子元素選擇器(Child selector)。

            例如,如果您希望選擇只作為 h1 元素子元素的 strong 元素,可以這樣寫:

            h1 > strong {color:red;}

            這個(gè)規(guī)則會把第一個(gè) h1 下面的 strong 元素變?yōu)榧t色,但是第二個(gè) strong 不受影響:

            <h1>This is <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> 

            親自試一試

            語法解釋

            您應(yīng)該已經(jīng)注意到了,子選擇器使用了大于號(子結(jié)合符)。

            子結(jié)合符兩邊可以有空白符,這是可選的。因此,以下寫法都沒有問題:

            h1 > strong h1> strong h1 >strong h1>strong 

            如果從右向左讀,選擇器 h1 > strong 可以解釋為“選擇作為 h1 元素子元素的所有 strong 元素”。

            結(jié)合后代選擇器和子選擇器

            請看下面這個(gè)選擇器:

            table.company td > p

            下面的選擇器會選擇作為 td 元素子元素的所有 p 元素,這個(gè) td 元素本身從 table 元素繼承,該 table 元素有一個(gè)包含 company 的 class 屬性。


            posted @ 2011-05-28 21:18 RTY 閱讀(246) | 評論 (0)編輯 收藏

            相鄰兄弟選擇器(Adjacent sibling selector)可選擇緊接在另一元素后的元素,且二者有相同父元素。

            選擇相鄰兄弟

            如果需要選擇緊接在另一個(gè)元素后的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器(Adjacent sibling selector)。

            例如,如果要增加緊接在 h1 元素后出現(xiàn)的段落的上邊距,可以這樣寫:

            h1 + p {margin-top:50px;}

            這個(gè)選擇器讀作:“選擇緊接在 h1 元素后出現(xiàn)的段落,h1 和 p 元素?fù)碛泄餐母冈?#8221;。

            親自試一試

            語法解釋

            相鄰兄弟選擇器使用了加號(+),即相鄰兄弟結(jié)合符(Adjacent sibling combinator)。

            注釋:與子結(jié)合符一樣,相鄰兄弟結(jié)合符旁邊可以有空白符。

            請看下面這個(gè)文檔樹片段:

            <div>   <ul>     <li>List item 1</li>     <li>List item 2</li>     <li>List item 3</li>   </ul>   <ol>     <li>List item 1</li>     <li>List item 2</li>     <li>List item 3</li>   </ol> </div> 

            在上面的片段中,div 元素中包含兩個(gè)列表:一個(gè)無序列表,一個(gè)有序列表,每個(gè)列表都包含三個(gè)列表項(xiàng)。這兩個(gè)列表是相鄰兄弟,列表項(xiàng)本身也是相鄰兄弟。不過,第一個(gè)列表中的列表項(xiàng)與第二個(gè)列表中的列表項(xiàng)不是相鄰兄弟,因?yàn)檫@兩組列表項(xiàng)不屬于同一父元素(最多只能算堂兄弟)。

            請記住,用一個(gè)結(jié)合符只能選擇兩個(gè)相鄰兄弟中的第二個(gè)元素。請看下面的選擇器:

            li + li {font-weight:bold;}

            上面這個(gè)選擇器只會把列表中的第二個(gè)和第三個(gè)列表項(xiàng)變?yōu)榇煮w。第一個(gè)列表項(xiàng)不受影響。

            親自試一試

            結(jié)合其他選擇器

            相鄰兄弟結(jié)合符還可以結(jié)合其他結(jié)合符:

            html > body table + ul {margin-top:20px;}

            這個(gè)選擇器解釋為:選擇緊接在 table 元素后出現(xiàn)的所有兄弟 ul 元素,該 table 元素包含在一個(gè) body 元素中,body 元素本身是 html 元素的子元素。

            posted @ 2011-05-28 21:18 RTY 閱讀(212) | 評論 (0)編輯 收藏

            CSS 2 引入了屬性選擇器。

            屬性選擇器可以根據(jù)元素的屬性及屬性值來選擇元素。

            簡單屬性選擇

            如果希望選擇有某個(gè)屬性的元素,而不論屬性值是什么,可以使用簡單屬性選擇器。

            例子 1

            如果您希望把包含標(biāo)題(title)的所有元素變?yōu)榧t色,可以寫作:

            *[title] {color:red;}

            親自試一試

            例子 2

            與上面類似,可以只對有 href 屬性的錨(a 元素)應(yīng)用樣式:

            a[href] {color:red;}

            親自試一試

            例子 3

            還可以根據(jù)多個(gè)屬性進(jìn)行選擇,只需將屬性選擇器鏈接在一起即可。

            例如,為了將同時(shí)有 href 和 title 屬性的 HTML 超鏈接的文本設(shè)置為紅色,可以這樣寫:

            a[href][title] {color:red;}

            親自試一試

            例子 4

            可以采用一些創(chuàng)造性的方法使用這個(gè)特性。

            例如,可以對所有帶有 alt 屬性的圖像應(yīng)用樣式,從而突出顯示這些有效的圖像:

            img[alt] {border: 5px solid red;}

            親自試一試

            提示:上面這個(gè)特例更適合用來診斷而不是設(shè)計(jì),即用來確定圖像是否確實(shí)有效。

            例子 5:為 XML 文檔使用屬性選擇器

            屬性選擇器在 XML 文檔中相當(dāng)有用,因?yàn)?XML 語言主張要針對元素和屬性的用途指定元素名和屬性名。

            假設(shè)我們?yōu)槊枋鎏栂敌行窃O(shè)計(jì)了一個(gè) XML 文檔。如果我們想選擇有 moons 屬性的所有 planet 元素,使之顯示為紅色,以便能更關(guān)注有 moons 的行星,就可以這樣寫:

            planet[moons] {color:red;}

            這會讓以下標(biāo)記片段中的第二個(gè)和第三個(gè)元素的文本顯示為紅色,但第一個(gè)元素的文本不是紅色:

            <planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet> 

            查看效果

            根據(jù)具體屬性值選擇

            除了選擇擁有某些屬性的元素,還可以進(jìn)一步縮小選擇范圍,只選擇有特定屬性值的元素。

            例子 1

            例如,假設(shè)希望將指向 Web 服務(wù)器上某個(gè)指定文檔的超鏈接變成紅色,可以這樣寫:

            a[] {color: red;}

            親自試一試

            例子 2

            與簡單屬性選擇器類似,可以把多個(gè)屬性-值選擇器鏈接在一起來選擇一個(gè)文檔。

            a[] {color: red;}

            這會把以下標(biāo)記中的第一個(gè)超鏈接的文本大小加倍,但是第二個(gè)或第三個(gè)鏈接不受影響:

            <a  title="W3School">W3School</a> <a  title="CSS">CSS</a> <a  title="HTML">HTML</a> 

            親自試一試

            例子 3

            同樣地,XML 語言也可以利用這種方法來設(shè)置樣式。

            下面我們再回到行星那個(gè)例子中。假設(shè)只希望選擇 moons 屬性值為 1 的那些 planet 元素:

            planet[moons="1"] {color: red;}

            上面的代碼會把以下標(biāo)記中的第二個(gè)元素變成紅色,但第一個(gè)和第三個(gè)元素不受影響:

            <planet>Venus</planet> <planet moons="1">Earth</planet> <planet moons="2">Mars</planet> 

            查看效果

            屬性與屬性值必須完全匹配

            請注意,這種格式要求必須與屬性值完全匹配。

            如果屬性值包含用空格分隔的值列表,匹配就可能出問題。

            請考慮一下的標(biāo)記片段:

            <p class="important warning">This paragraph is a very important warning.</p> 

            如果寫成 p[class="important"],那么這個(gè)規(guī)則不能匹配示例標(biāo)記。

            要根據(jù)具體屬性值來選擇該元素,必須這樣寫:

            p[class="important warning"] {color: red;}

            親自試一試

            根據(jù)部分屬性值選擇

            如果需要根據(jù)屬性值中的詞列表的某個(gè)詞進(jìn)行選擇,則需要使用波浪號(~)。

            假設(shè)您想選擇 class 屬性中包含 important 的元素,可以用下面這個(gè)選擇器做到這一點(diǎn):

            p[class~="important"] {color: red;}

            親自試一試

            如果忽略了波浪號,則說明需要完成完全值匹配。

            部分值屬性選擇器與點(diǎn)號類名記法的區(qū)別

            該選擇器等價(jià)于我們在類選擇器中討論過的點(diǎn)號類名記法。

            也就是說,p.important 和 p["important"] 應(yīng)用到 HTML 文檔時(shí)是等價(jià)的。

            那么,為什么還要有 "~=" 屬性選擇器呢?因?yàn)樗苡糜谌魏螌傩裕恢皇?class。

            例如,可以有一個(gè)包含大量圖像的文檔,其中只有一部分是圖片。對此,可以使用一個(gè)基于 title 文檔的部分屬性選擇器,只選擇這些圖片:

            img[title~="Figure"] {border: 1px solid gray;}

            這個(gè)規(guī)則會選擇 title 文本包含 "Figure" 的所有圖像。沒有 title 屬性或者 title 屬性中不包含 "Figure" 的圖像都不會匹配。

            親自試一試

            子串匹配屬性選擇器

            下面為您介紹一個(gè)更高級的選擇器模塊,它是 CSS2 完成之后發(fā)布的,其中包含了更多的部分值屬性選擇器。按照規(guī)范的說法,應(yīng)該稱之為“子串匹配屬性選擇器”。

            很多現(xiàn)代瀏覽器都支持這些選擇器,包括 IE7。

            下表是對這些選擇器的簡單總結(jié):

            類型描述
            [abd^="def"]選擇 abc 屬性值以 "def" 開頭的所有元素
            [abd$="def"]選擇 abc 屬性值以 "def" 結(jié)尾的所有元素
            [abd*="def"]選擇 abc 屬性值中包含子串 "def" 的所有元素

            可以想到,這些選擇有很多用途。

            舉例來說,如果希望對指向 W3School 的所有鏈接應(yīng)用樣式,不必為所有這些鏈接指定 class,再根據(jù)這個(gè)類編寫樣式,而只需編寫以下規(guī)則:

            a[href*="w3school.com.cn"] {color: red;}

            親自試一試

            提示:任何屬性都可以使用這些選擇器。

            特定屬性選擇類型

            最后為您介紹特定屬性選擇器。請看下面的例子:

            *[lang|="en"] {color: red;}

            上面這個(gè)規(guī)則會選擇 lang 屬性等于 en 或以 en- 開頭的所有元素。因此,以下示例標(biāo)記中的前三個(gè)元素將被選中,而不會選擇后兩個(gè)元素:

            <p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G'day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p> 

            親自試一試

            一般來說,[att|="val"] 可以用于任何屬性及其值。

            假設(shè)一個(gè) HTML 文檔中有一系列圖片,其中每個(gè)圖片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下選擇器匹配所有這些圖像:

            img[src|="figure"] {border: 1px solid gray;}

            親自試一試

            當(dāng)然,這種屬性選擇器最常見的用途還是匹配語言值。

            posted @ 2011-05-28 21:17 RTY 閱讀(213) | 評論 (0)編輯 收藏

            僅列出標(biāo)題
            共31頁: First 16 17 18 19 20 21 22 23 24 Last 
            丰满少妇人妻久久久久久4| 亚洲伊人久久大香线蕉苏妲己| 久久久久一本毛久久久| 欧美日韩精品久久久免费观看| 久久笫一福利免费导航| 亚洲国产精品无码久久久久久曰| 久久精品国产久精国产果冻传媒| 狠狠色婷婷久久一区二区| 91精品国产综合久久婷婷| 亚洲欧洲精品成人久久奇米网| 嫩草伊人久久精品少妇AV| 久久精品成人影院| 久久99国产综合精品| 久久黄色视频| 99久久99这里只有免费的精品| 欧美一级久久久久久久大片| 99久久婷婷免费国产综合精品| 久久精品成人| 热99re久久国超精品首页| 日韩人妻无码精品久久免费一| 久久久免费观成人影院| 久久国产精品-国产精品| 无码伊人66久久大杳蕉网站谷歌 | 91久久精品国产免费直播| 一本色综合网久久| 久久只这里是精品66| 99久久www免费人成精品| 99久久无码一区人妻a黑| 久久久久国产精品人妻| 亚洲欧美国产日韩综合久久| 久久91精品综合国产首页| 久久久久久久99精品免费观看| 久久综合给合久久国产免费| 怡红院日本一道日本久久| 97热久久免费频精品99| 精品熟女少妇a∨免费久久| 亚洲国产美女精品久久久久∴ | WWW婷婷AV久久久影片| 国内精品久久久久影院一蜜桃| 欧美熟妇另类久久久久久不卡| 久久丫精品国产亚洲av不卡|