1.CSSの概要

CSSは「カスケードスタイルシート」です。これは、Webページのスタイルを制御（強化）し、Webコンテンツからスタイル情報を分離できるようにするために使用されるマークアップ言語です。

2つの文法規則

ここに画像の説明を挿入
セレクター：ブラウザーは、「セレクター」（変更するスタイル名）に従って、CSSスタイルの影響を受けるhtmlタグ（要素）
属性を
決定します。たとえば、色、各宣言間で使用されるフォントサイズ、個別。
コメント： / *コメントの内容* /

3.CSSとHTMLの組み合わせ

3.1方法1

ラベルのstyle属性に「key：valuevalue;」を設定してスタイルを変更します

<!--需求
    分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。
-->
    <div style="border: red 1px solid ">这是一个div标签</div> <br/>

3.2方法2

headタグで、styleタグを使用して必要なスタイルを定義します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
     
     
            color: red;
            border: 1px solid blue;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>这是一个div标签</div>
</body>
</html>

3.3方法3

ここに画像の説明を挿入

CSSスタイルを個別のCSSファイルとして記述し、headタグでlinkタグを再利用します

<link href="test.css" rel="stylesheet" type="text/css"/>

4、CSSセレクター

ブラウザは、「セレクタ」に従って、CSSスタイルの影響を受けるhtmlタグ（要素）を決定します

4.1タグ名セレクター

タグ名セレクターを使用して、このスタイルを受動的に使用するタグを判別します

フォーマット：

标签名{
	属性：值;
}

<style type="text/css">
   /* 需求 1：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。 
   并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。*/
    div{
     
     
        color: blue;
        font-size: 30px;
        font-style: italic;/* 字体样式 */
        border: yellow 1px solid;
    }
    span{
     
     
        color: yellow;
        font-size: 20px;
        border: blue 5px dashed;
    }
</style>

4.2IDセレクター

id属性を使用してこのスタイルを選択的に使用しましょう

フォーマット

#id属性值{
	属性：值;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div01{
     
     
            font-style: italic;
            font-size: 7px;
        }
        #div02{
     
     
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;/*黄色实线*/
        }
    </style>
</head>
<body>
    <div id="div01">01 这是一个div标签</div>
    <div id="div02">02 这是一个div标签<</div>
</body>
</html>

4.3クラスセレクター

クラス属性を介してこのスタイルを効果的に使用することを選択します

フォーマット

.class属性值{
	属性：值;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .divClass01{
     
     
            color: blue;
            font-size: 30px;
            border: 1px yellow solid;
        }
        .divClass02{
     
     
            color: gray;
            font-size: 26px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
    <div class="divClass01">01 这是一个div标签</div>
    <div class="divClass02">02 这是一个div标签</div>
</body>
</html>

4.4コンビネーションセレクター

複数のセレクターで同じCSSコード形式を共有することができ
ます

选择器1，选择器2……选择器n{
属性：值;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div01 ,.divClass02 ,p,span{
     
     
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;/*黄色实线*/
        }
    </style>
</head>
<body>
    <div id="div01">01 这是一个div标签</div>
    <div class="divClass02">02 这是一个div标签<</div>
    <p>03这是一个p标签</p>
    <span>04这是一个span标签</span>
</body>
</html>