首頁 > 開發者 > 網站開發

CSS學習筆記二

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   blog   http   io   ar   color   使用   sp   strong   

我們瀏覽網站的時候,會點擊一些連結,這些連結在點之前,點之後有不同的效果,這些效果就是用虛擬元素選取器做的


虛擬元素選取器:


就是在httml中預先定義好一些選取器,成為虛擬元素

格式:標籤名:虛擬元素:類名    標籤名.類名:虛擬元素


超連結的狀態:

a :link :    超連結未點擊狀態

a :visited   被訪問後狀態

a :hover    游標移到超連結上的狀態(未點擊)->滑鼠移至上方

a :active    點擊超連結時的狀態

使用順序:L - V - H - A,點擊前和點擊後是一個狀態

最好用IE瀏覽器測驗,有的瀏覽器可能看不到效果

 <style type="text/css">        /*未訪問*/       a:link{            background-color: #06F;  color: #FFF;            text-decoration: none; font-size: 15px;       }        /*滑鼠移至上方*/        a:hover{             background-color: #FFF; color: #F00;            font-size: 20px;        }        /*點擊效果*/        a:active{            background-color: #000; color: #FFF;            font-size: 25px;        }        /*點擊後效果*/        a:visited{            background-color: #FF9; color: #000;            text-decoration: line-through;        }    </style>


段落標籤也有如上的效果

p:first-line : 段落的第一行文本

p:first-letter :段落中的第一個字母

:focus :具有焦點元素   (ps:IE6不支援,FIrefox,google可以看到效果)

    <style type="text/css">              div:hover{   /*類似於懸停效果 一樣可以加在div上*/            background-color: #F00;            color: #FFF;        }        input :focus{            background-color: #F0F;        }    </style></head><body><hr/><a href="http://www.sina.com.cn" target="_blank">虛擬元素選取器示範</a><input type="text" /><input type="text" /><hr/>

CSS樣式的結合應用:

css可以和html中眾多的標籤結合使用

<head lang="en">    <meta charset="UTF-8">    <style type="text/css">    ul{        list-style-type:none;        list-style-image: url(imgs/1.png);    }        table{            border-bottom: #0C0 double 3px;            border-left:#F00 solid 3px;/*solid 實線*/            border-right:#FC0 dashed 3px;/*dashed 虛*/            border-top:#000 groove 3px;            width: 600px;        }        table td{            border: #0CF dotted 2px;            padding: 20px;        }        div{            border: #0F0 dashed 2px;            height: 50px; width: 300px;        }        input{            border: none;            border-bottom: #0CF 1px solid;        }        .Per{            border: none;        }    </style>    <title>asd</title></head><body>        姓名:<input type="text" />        年齡:<input type="text" />        <hr/>        <div> div地區 </div>        <hr/>        <table ><!--html裡<table border:.....>,與css結合後,在style設定即可-->            <tr>                <td><input type="text" class="Per"> </td> <td>  儲存格二  </td>            </tr>            <tr>                <td>  儲存格三  </td> <td>  儲存格四  </td>            </tr>        </table>        <hr/>      <ul>          <li>你好</li>          <li>你好</li>          <li>你好</li>          <li>你好</li>      </ul></body>


CSS學習筆記二

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More