CSSの基本チュートリアルの基本セレクター

CSSセレクター

1. 基本セレクター

(1) "*"セレクター: ワイルドカード

: すべての HTML タグに一致します。タグが変わります。
構文: *{ color:red; }

注: IE6 はサポートしていないため、「*」はできるだけ使用しないでください。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     *{
         color:red;
     }
    </style>
    </head>
    <body>
        <h1>习近平心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

(2) タグセレクター

Description: 指定された HTML タグと一致します。

構文: h1{ color:red; }

注: CSS タグセレクターは HTML タグと同じ名前ですが、山括弧は追加できません。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     h1{
         color:red;
     }
     p{
         color:blue;
     }
    </style>
    </head>
    <body>
        <h1>习近平心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

(3) クラスセレクター (クラスセレクター) - クラスセレクターは最も頻繁に使用されます

説明: HTML タグのタイプにスタイルを追加します。ここで言う「1つのクラス」とは、各HTMLタグがclass属性を持ち、classの値が同じであることを意味します。 class 属性は、すべての HTML タグが持つパブリック属性です。

クラスセレクターの名前は「.」で始まり、HTML タグの class 属性の値に限定される必要があります。例: .box{ color:red; }

注: HTML タグの class 属性の値を数字で始めることはできません。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     .NO1{
         color:red;
         background-color:#88ff66;
     }
    </style>
    </head>
    <body>
        <h1 class="NO1">习近平心中的互联网</h1>
        <p class="NO1">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

(4) ID セレクター

説明: 指定された ID を持つ要素にスタイルを追加します。

注:

Web ページ内の HTML タグの id 属性の値は一意である必要があります。
すべての HTML タグには id という public 属性があります。
id 属性は通常、スタイルを追加するためではなく、JS に使用されます。 class 属性は CSS にのみ使用でき、JS には使用できません。
ID セレクターの名前は「#」で始まり、その後に HTML タグの id 属性の値が続く必要があります。

りー

学び続ける

新しいファイル

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> *{ color:red; } </style> </head> <body> <h1>习近平心中的互联网</h1> <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> </html>

提出するリセットコード

自動運転