<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {  /*这里我们的red对所有的div标签都有用*/
            color: red; 
            size: 50px;
        }
    </style>
</head>
<body>
    <p>css的测试</p>
    <div>
        css是一种选择器，这里我们的div选择器
    </div>
</body>
</html>

上記のことから、HTML ファイル内に CSS コードをネストして記述することもできることがわかりますが、コードの可読性が高くなく、混乱しやすいため、実際の開発では通常はこれを行いませんHTMLコードで。

以下で説明するように、CSS を別の CSS ファイルとして記述し、その CSS ファイルを HTML で参照することがよくあります。

知らせ

CSSはstyleタグ内に記述します（他の書き方は後ほど紹介します）

style タグはページ上のどこにでも配置できますが、通常は head タグ内に配置されます。

CSS は /* */ をコメントとして使用します (すぐに切り替えるには Ctrl + / を使用します)。

CSSの3つのインポート方法

1. 内部スタイルシート

style タグに記述され、html 内に埋め込まれます。
理論的には、スタイルは html 内のどこにでも配置できますが、一般的には head タグに配置されます。

長所: そうすることで、スタイルとページ構造を分離できます。

短所: 分離が十分ではない、特に CSS コンテンツが多い場合

2. インラインスタイルシート

style 属性を使用して、ラベルのスタイルを指定します。これは、
単純なスタイルの記述にのみ適しています。特定のラベルに対してのみ有効です。

欠点: あまり複雑なスタイルは記述できません。
この書き方の方が優先され、他のスタイルを上書きします。

3. 外観スタイル

実際の開発では最もよく使われる手法です。

1. cssファイルを作成する
2. linkタグを使用してcssをインポートする

推奨されるコーディングスタイル

2. 基本セレクター

1. 基本セレクター: 単一のセレクターで構成されます。

ラベルセレクター

クラスセレクター

IDセレクター

ワイルドカードセレクター

2. 複合セレクター: 複数の基本セレクターを結合します。

子孫セレクター

子セレクター

ユニオンセレクター

疑似クラスセレクター

1. ラベルセレクター

特徴:
同じ種類のタグをすべて素早く選択できます
が、区別することはできません

栗

2. クラスセレクター

特徴：

差別化とはタグが異なることを意味します

複数のタグに同じタグを使用できます

栗

構文の詳細:

クラス名はで始まります。

以下のタグは class 属性を使用して呼び出されます。

1 つのクラスは複数のタグで使用でき、1 つのタグで複数のクラスを使用することもできます (複数のクラス名はスペースで区切る必要があります。これによりコードが再利用しやすくなります)。

長いクラス名の場合は、- を使用して分割できます。

クラス名に名前を付けるために純粋な数字や中国語を使用したり、タグ名を使用したりしないでください。

3. IDセレクター

クラスセレクターを備えたクラス

4. ワイルドカードセレクター

基本的なセレクターの概要

効果	特徴
ラベルセレクター	同じタグをすべて選択できます	違う選択はできない
クラスセレクター	1 つ以上のタグを選択できます	ニーズに応じて、最も柔軟で最も一般的に使用されるものを選択してください。
IDセレクター	ラベルが選べる	同じ ID は HTML 内で 1 回だけ出現できます
ワイルドカードセレクター	すべてのタブを選択	特殊な状況で使用する

3. コンポジットセレクター

1. 子孫セレクター

デモ1

デモ2

デモ3

2. サブセレクター

3. ユニオンセレクター

元素1, 元素2 { 样式声明 }

タグのグループを選択するために使用されます (一括宣言)

複数の要素はカンマで区切ります。

要素 1 と要素 2 が同時に選択されていることを示します

どの基本セレクターでも共用体セレクターを使用できます。

ユニオンセレクターは縦書きで記述することをお勧めします。各セレクターは 1 行を占めます (最後のセレクターにはカンマを追加できません)。

栗

4. リンク擬似クラスセレクター

1) 疑似クラスセレクターのチェーン化

a:link は未訪問のリンクを選択します

a:visited は、すでに訪問したリンクを選択します

a:hover は、マウスポインタが置かれているリンクを選択します

a:active はアクティブなリンクを選択します (マウスは押されていますがポップアップしません)。

アクセスしたリンクを未アクセスの状態に戻すにはどうすればよいですか?
ブラウザの履歴をクリアするだけです。ctrl + shift + delete

注意事項
LVHAの順に記述してください例えばactiveを前にするとactiveが失敗しますメモリルール「Green」
ブラウザのaタグはデフォルトのスタイルなので、一般的には実際の開発が必要です実際
の開発はリンクのスタイルを作ってからホバーのスタイルを作るのがメインで、Link、visited、activeはあまり使いません。

デモ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 任何基础选择器都可以使用并集选择器 -->
    <style>
        a:link {
            color: black;
            /* 去掉 a 标签的下划线 */
            text-decoration: none;
        } 
        a:visited {
            color: green;
        }
        a:hover {
            color: red;
        } 
        a:active {
            color: blue;
        }
    </style>
</head>

<body>
    <!-- <!可以是任意基础选择器的组合. (包括类选择器, id 选择器) --> 
    <div class="cat">
        <ul>
            <li>java</li>
            <li>c++</li>
            <li>go</li>
        </ul>
        
    </div>
    <a href="https://blog.csdn.net/weixin_61061381?spm=1000.2115.3001.5343"> 这是一个超链接</a>
    <p>
        这是一个段落标签
    </p>
    <h1>一级标题</h1>
</body>
</html>

2) 疑似クラスセレクターを強制する

5. 複合セレクターの概要

セレクタ	効果	予防
子孫セレクター	子孫要素を選択する	孫要素にすることもできます
子セレクター	子要素を選択	選べるのは自分の息子だけで、孫ではない
ユニオンセレクター	同じスタイルの要素を選択する	コードの再利用の改善
リンク擬似クラスセレクター	異なるステータスのリンクを選択してください	a:hover の書き方をマスターすることに集中してください。
:focus 疑似クラスセレクター	選択した要素を選択します	インプットの習得に重点を置く: フォーカス

CSS の基礎入門ノート (セレクター)

1.CSSとは何ですか?

基本的な文法仕様