ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS学習メモ 2_html/css_WEB-ITnose
CSS学習メモ 2_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:53:371048ブラウズ
Web サイトを閲覧するとき、いくつかのリンクをクリックします。これらのリンクは、クリックする前と後で異なる効果をもたらします。
は、HTML でいくつかのセレクターを事前に定義し、疑似要素
形式: タグ名: 疑似要素: クラス 名
タグ名: 疑似要素
。
ハイパーリンクの状態: a :link : ハイパーリンクの未クリック状態
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 までご連絡ください。