CSSスタイルクラスの解説（例付き）

この記事では、CSS スタイル クラスについて説明します (例を示します)。必要な方は参考にしていただければ幸いです。

CSS の概要

CSS はカスケード スタイル シートを指します
スタイルは HTML 要素の表示方法を定義します
スタイルは通常、スタイルに保存されます。 table
、コンテンツとプレゼンテーションの分離の問題を解決するために HTML 4.0 にスタイルが追加されました
外部スタイル シートにより作業効率が大幅に向上します
外部スタイル シートは通常、CSS ファイルに保存されます
複数スタイル定義は

HTML タグにカスケード接続できます。HTML タグはもともとドキュメントのコンテンツを定義するために設計されました。

、

、 などのタグを使用することで、HTML の本来の目的は、「これはタイトルです」、「これは段落です」、「これは表です」などの情報を表現することでした。 。同時に、ドキュメントのレイアウトは、書式設定タグを使用せずにブラウザーによって完成されます。

すべての主要なブラウザはカスケード スタイル シートをサポートしています

div と scan について理解しています

1. div は HTML タグ、ブロックです。 -level 要素 (行のみを表示) は、単独で使用すると意味がなく、主にページ レイアウトに使用されます。 html タグ、内部の Linked 要素 (行を表示)、単独で使用しても意味がありません。主に囲まれたコンテンツのスタイルを変更するために CSS と組み合わせて使用​​する必要があります。

2. ##クラス セレクター

クラス セレクターを使用する前に、クラス セレクターがその役割を果たすことができるように世紀ドキュメントをマークする必要があります。 <p></p>

.name{text-align:center}

スタイルに関連付けられた「class」属性を含め、事前定義されたスタイルの 1 つを「name」値として指定することにより、ドキュメントの後半でこのタグの特定のケースを明示的に選択します。使用するスタイル

<p></p>

nbsp;html>


    <meta>
    <title>类选择器</title>
    <style>
        .sheen{font-size: large;color: salmon}
    </style>


<div>
    Sie sprechen gut Deutsch.
</div>
<div>
    Was machen Sie hier in Berlin?Arbeiten Sie hire?
</div>
<div>
    Nein,ich studiere.
</div>

<p></p> <p></p>

##ID セレクター
ID セレクターはクラス セレクターに似ており、ID セレクターの前に # が付きます。記号 - チェッカーボード番号またはポンド記号とも呼ばれます。クラス セレクターと同様に、ID セレクターではワイルドカード セレクターを無視できます。 ID は一意の識別子であり、使用できるのは 1 回だけです

nbsp;html>


    <meta>
    <title>ID选择器</title>
    <style>
        #sheen{font-size: x-large;color: rosybrown}
        #star{font-size: large;color: #c0ffff}
        #clotho{font-size: xx-large;color: darkgreen}
    </style>


    <div>
        Sheen:Sie sprechen gut Deutsch.
    </div>
    <div>
        Star:Was machen Sie hier in Berlin?Arbeiten Sie hire?
    </div>
    <div>
        Clotho:Nein,ich studiere.
    </div>

#タグ セレクター

<p></p>

nbsp;html>


    <meta>
    <title>标签选择器</title>
    <style>
        div{margin: 0 auto;border: 1px;color: darkgreen;font-size: larger;text-align: center}

    </style>


<h3 id="使用CSS">使用CSS</h3>
<div>
    类选择器
</div>
<div>ID选择器</div>
<div>标签选择器</div>

リンク スタイルの設定

リンク スタイル (色、フォントファミリーなど) を設定できる CSS プロパティが多数あります。 、背景など）。 リンクの特別な点は、リンクの状態に基づいてスタイルを設定できることです。 リンクの 4 つの状態:

a:link - 通常の未訪問のリンク

a:visited - ユーザーが訪問したリンク a:hover - マウス ポインタがリンクの上にあるa :active - リンクがクリックされた瞬間

CSS スタイルの紹介:


インライン紹介:
2)。内部導入: head タグ内の style タグに記述されたスタイル;
3)。CSS スタイルを 現在の HTML ファイルにリンクされています。

3 つの導入方法の優先順位: 近接原則

//CSS文件
div {
    width: 80%;
    margin: 0 auto;
    padding: 0;

}

ul {
    list-style-type: none
}

li {
    display: inline-block;
    width: 20%;
    background: snow;
    color: #333333;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-size: large;
    text-transform: capitalize;
}

li:hover {
    background: green;
    color: snow;
}

a:hover {

    color: snow;

}

<!--HTML文件-->
nbsp;html>


    <meta>
    <title>Title</title>
    <style>
        li {
            background: red;
        }
    </style>
    <link>




<div>
    <ul>
        <li>
            <a>HTML</a>
        </li>
        <li>CSS</li>
        <li>JS</li>
        <li>python</li>
    </ul>
</div>

# ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

以上がCSSスタイルクラスの解説（例付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。