HTML CSSとCSSセレクターの紹介

CSSをHTMLに導入する4つの方法

1.以下のように、HTMLの先頭にスタイルタグをインポートし、スタイルを直接スタイルに書き込みます。

2. HTMLのリンクタグを介して.cssファイルをインポートします。このインポート方法により、1つのcssファイルで複数のhtmlを制御できます

mycss.cssファイルは、以下に示すように、書かれたスタイルです。

以下に示すように、HTMLファイルのスタイル表示を制御するために、HTMLファイルに既に記述されているスタイルファイルmycss.cssを導入します。

3. @importを使用してcssファイルをインポートします。このメソッドは、ページをレンダリングするときに最初にスタイルなしの表面を表示し、次にスタイルを表示します。通常は使用されません。

4.スタイルを導入する方法はラベルに直接あり、属性を介してスタイルの表示を直接制御します。

CSSのセレクター：

1.ユニバーサルセレクタ：html内のすべてのタグを* {}使用して有効にします。

2.タグセレクタ：タグ名に従って選択すると、その名前のすべてのタグが有効になります。

3.idセレクター

4.クラスセレクター

5.組み合わせセレクター

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            color: red;
            background-color: burlywood;
            font-size: 50px;
        }
        div{
            color: yellow;
            background-color: aliceblue;
            font-size: 16px;
        }
        #div1{
            color: blue;
            background-color:white;
            font-size: 15px;
        }
        .div2{
            color: black;
            background-color: cyan;
            font-size: 10px;
        }
         .div3{
            color: fuchsia;
            background-color: aquamarine;
        }
        #div1 .div3{
            color: darkturquoise;
            background-color: black;
        }
       #div4,.div4{
           background-color: red;
           color: black;
       }
    </style>
</head>
<body>
    <p>通过选择器控制样式显示
        <span>嵌套内容都使用通用选择器控制的样式</span>
        <span>嵌套内容</span>
    </p>
    <p>通用选择器控制样式显示</p>
    <div>通过标签选择器控制样式显示</div>
    <div class="div2">class选择器显示</div>
    <div id="div1" class="div2">通过id进行控制样式显示，id优先级高于class
        <div class="div3">通过组合选择器控制样式显示</div>
        <div class="div3">通过组合选择器控制演示</div>
    </div>
    <p class="div2">通过class选择器进行控制样式显示，可以控制多个标签</p>
    <p class="div2">通过class选择器控制</p>
    <p id="div4">控制两个没有关系的标签格式显示，用逗号分隔</p>
    <p class="div4">控制两个没有关系的标签格式显示，用逗号分隔</p>
</body>
</html>

+接続を備えた隣接するラベルセレクタ

HTML CSSとCSSセレクターの紹介

おすすめ