CSSスタイルクラスの解説（例付き）-CSSチュートリアル-php.cn

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

不言

リリース： 2018-10-13 16:19:17

転載

3129 人が閲覧しました

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

CSS の概要

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

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

、

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

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

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

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

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

.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>

ログイン後にコピー

##ID セレクター CSSスタイルクラスの解説（例付き）
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>

ログイン後にコピー

#タグセレクター

nbsp;html>


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

    </style>


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

ログイン後にコピー

リンクスタイルの設定

リンクスタイル (色、フォントファミリーなど) を設定できる CSS プロパティが多数あります。、背景など）。 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文件-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
            background: red;
        }
    </style>
    <link rel="stylesheet" href="css/main.css">

</head>
<body>

<div>
    <ul>
        <li style="background: blue">
            <a href="http://www.w3school.com.cn/h.asp" style="text-decoration: none">HTML</a>
        </li>
        <li>CSS</li>
        <li>JS</li>
        <li>python</li>
    </ul>
</div>
</body>
</html>

ログイン後にコピー

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

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