<rp id="wnpn7"><ruby id="wnpn7"></ruby></rp>
<progress id="wnpn7"><track id="wnpn7"><rt id="wnpn7"></rt></track></progress>
<ruby id="wnpn7"></ruby>
<ruby id="wnpn7"><blockquote id="wnpn7"><div id="wnpn7"></div></blockquote></ruby>

    1. <em id="wnpn7"><ruby id="wnpn7"><input id="wnpn7"></input></ruby></em>
      1. <button id="wnpn7"><acronym id="wnpn7"></acronym></button><button id="wnpn7"><acronym id="wnpn7"></acronym></button>

        <rp id="wnpn7"><acronym id="wnpn7"></acronym></rp>

        <li id="wnpn7"><object id="wnpn7"><u id="wnpn7"></u></object></li>
        VB.net 2010 視頻教程 VB.net 2010 視頻教程 python基礎視頻教程
        SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
        當前位置:
        首頁 > 網站開發 > css >
        • div+css視頻教程之CSS 分類屬性 (Classification)

         CSS 分類屬性 (Classification)
        CSS 分類屬性允許你控制如何顯示元素,設置圖像顯示于另一元素中的何處,相對于其正常位置來定位元素,使用絕對值來定位元素,以及元素的可見度。
        屬性 描述
        clear 設置一個元素的側面是否允許其他的浮動元素。
        cursor 規定當指向某元素之上時顯示的指針類型。
        display 設置是否及如何顯示元素。
        float 定義元素在哪個方向浮動。
        position 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
        visibility 設置元素是否可見或不可見。
        CSS 偽類 (Pseudo-classes)
        ·         Previous Page
        ·         Next Page
        CSS 偽類用于向某些選擇器添加特殊的效果。
        CSS 偽類 (Pseudo-classes)實例:
        超鏈接
        本例演示如何向文檔中的超鏈接添加不同的顏色。
        超鏈接 2
        本例演示如何向超鏈接添加其他樣式。
        超鏈接 - :focus 的使用
        本例演示如何對超鏈接應用 :focus 偽類(無法在 IE 中工作)。
        :first-child(首個子對象)
        本例演示 :first-child 偽類的用法。
        :lang(語言)
        本例演示 :lang 偽類的用法。
        語法
        偽類的語法:
        selector : pseudo-class {property: value}
        CSS 類也可與偽類搭配使用。
        selector.class : pseudo-class {property: value}
        錨偽類
        在支持 CSS 的瀏覽器中,鏈接的不同狀態都可以不同的方式顯示,這些狀態包括:活動狀態,已被訪問狀態,未被訪問狀態,和鼠標懸停狀態。
        a:link {color: #FF0000} /* 未訪問的鏈接 */
        a:visited {color: #00FF00}     /* 已訪問的鏈接 */
        a:hover {color: #FF00FF}        /* 鼠標移動到鏈接上 */
        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 偽類來選擇元素的第一個子元素。這個特定偽類很容易遭到誤解,所以有必要舉例來說明。考慮以下標記:
        <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>
        在上面的例子中,作為第一個元素的元素包括第一個 p、第一個 li 和 strong 和 em 元素。
        給定以下規則:
        p:first-child {font-weight: bold;}
        li:first-child {text-transform:uppercase;}
        第一個規則將作為某元素第一個子元素的所有 p 元素設置為粗體。第二個規則將作為某個元素(在 HTML 中,這肯定是 ol 或 ul 元素)第一個子元素的所有 li 元素變成大寫。
        請訪問該鏈接,來查看這個 :first-child 實例的效果。
        提示:最常見的錯誤是認為 p:first-child 之類的選擇器會選擇 p 元素的第一個子元素。
        注釋:必須聲明 <!DOCTYPE>,這樣 :first-child 才能在 IE 中生效。
        為了使您更透徹地理解 :first-child 偽類,我們另外提供了 3 個例子:
        例子 1 - 匹配第一個 <p> 元素
        在下面的例子中,選擇器匹配作為任何元素的第一個子元素的 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> 元素中的第一個 <i> 元素
        在下面的例子中,選擇器匹配所有 <p> 元素中的第一個 <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 - 匹配所有作為第一個子元素的 <p> 元素中的所有 <i> 元素
        在下面的例子中,選擇器匹配所有作為元素的第一個子元素的 <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 偽類使你有能力為不同的語言定義特殊的規則。在下面的例子中,:lang 類為屬性值為 no 的 q 元素定義引號的類型:
        <html>
        <head>
         
        <style type="text/css">
        q:lang(no)
           {
           quotes: "~" "~"
           }
        </style>
         
        </head>
         
        <body>
        <p>文字<q lang="no">段落中的引用的文字</q>文字</p>
        </body></html>
        偽類
        瀏覽器支持IE Internet Explorer, F: Firefox, N: Netscape。
        W3C:“W3C” 列的數字顯示出偽類屬性由哪個 CSS 標準定義(CSS1 還是 CSS2)。
        偽類 作用 IE F N W3C
        :active 將樣式添加到被激活的元素 4 1 8 1
        :focus 將樣式添加到被選中的元素 - - - 2
        :hover 當鼠標懸浮在元素上方時,向元素添加樣式 4 1 7 1
        :link 將特殊的樣式添加到未被訪問過的鏈接 3 1 4 1
        :visited 將特殊的樣式添加到被訪問過的鏈接 3 1 4 1
        :first-child 將特殊的樣式添加到元素的第一個子元素   1 7 2
        :lang 允許創作者來定義指定的元素中使用的語言   1 8 2

        相關教程
                
        免费看成年人视频大全_免费看成年人视频在线观看