CSS学習メモ 2_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:53:371075ブラウズ

Web サイトを閲覧するとき、いくつかのリンクをクリックします。これらのリンクは、クリックする前と後で異なる効果をもたらします。


は、HTML でいくつかのセレクターを事前に定義し、疑似要素

形式: タグ名: 疑似要素: クラス
タグ名: 疑似要素

ハイパーリンクの状態: a :link : ハイパーリンクの未クリック状態


a :visited 訪問後の状態

a :hover カーソルがハイパーリンクに移動した状態(未クリック)->Mouseover

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: フォーカスのある要素

(追記: 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>

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。