W3School-CSS 疑似クラス (疑似クラス) example_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

W3School-CSS 疑似クラス (疑似クラス) example_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:28 AM

CSS疑似クラスインスタンス

CSSインスタンス

CSS背景インスタンス

CSSテキストインスタンス

CSSフォントインスタンス

CSSボーダーインスタンス

CS S margin ) Example

CSSパディングの例

CSSリストの例

CSSテーブル例

アウトライン例

CSSディメンション例

CSS分類例

CSS位置決め（Positioning）インスタンス

CSS疑似クラスインスタンス

CSS疑似要素インスタンス

01ハイパーリンク

すごい

02ハイパーリンク 2

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>01超链接</title>        <style type="text/css">            body {                background-color: #99CCFF;            }            a:link {                color: #CCCCCC;            }                        a:visited {                color: #666666;            }                        a:hover {                color: #ffffff;            }                        a:active {                color: #999999;            }        </style>    </head>    <body>        <p><b><a href="https://www.baidu.com/" target="_blank">百度首页</a></b></p>        <p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>        <p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>        <img  src="/static/imghwm/default1.png"  data-src="love.jpg"  class="lazy" alt="W3School-CSS 疑似クラス (疑似クラス) example_html/css_WEB-ITnose" >    </body></html>

03ハイパーリンク: :focus

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>02超链接2</title>        <style type="text/css">            body {                background-color: #99ccff;            }            a.one:link {color: #666;}            a.one:visited {color: #333;}            a.one:hover {color: #ffffff;}                        a.two:link {color: #666;}            a.two:visited {color: #333;}            a.two:hover {font-size: 150%;}                        a.three:link {color: #666;}            a.three:visited {color: #333;}            a.three:hover {background-color: #CCCCCC;}                            a.four:link {color: #666;}            a.four:visited {color: #333;}            a.four:hover {font-family: monospace;}                            a.five:link {color: #666;text-decoration: none;}            a.five:visited {color: #333;text-decoration: none;}            a.five:hover {text-decoration: underline;}                        </style>    </head>    <body>        <p><b><a class="one" href="https://www.baidu.com/" target="_blank">改变颜色</a></b></p>        <p><b><a class="two" href="https://www.baidu.com/" target="_blank">改变字体大小</a></b></p>        <p><b><a class="three" href="https://www.baidu.com/" target="_blank">改变背景颜色</a></b></p>         <p><b><a class="four" href="https://www.baidu.com/" target="_blank">As a man thinketh in his heart so is he！改变字体</a></b></p>        <p><b><a class="five" href="https://www.baidu.com/" target="_blank">改变文本装饰</a></b></p>    </body></html>

の使用

04 :first-child (最初の子オブジェクト)

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>03超链接：:focus 的使用</title>        <style type="text/css">            input:focus {                background-color: #ccc;            }        </style>    </head>    <body>        <form>            <p>First name:                <input type="text" />            </p>            <p>Last name:                <input type="text" />            </p>            <p>                <input type="submit" value="Submit" />            </p>        </form>    </body></html>

05 :lang (言語)

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>04:first-child（首个子对象）</title>        <style type="text/css">            p:first-child {                color: green;            }                        li:first-child {                text-transform: uppercase;            }        </style>    </head>    <body>        <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>    </body></html>

CSS ps eudo-classes (擬似-クラス）概要

声明

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

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。