1. CSS のクイックスタートとメリットのまとめ

1. Vscode ソフトウェアを使用してコードを記述します (次の名前は、自分の習慣に応じて変更できます)。

1.1 新しく作成したフォルダーを開き、このフォルダーの下に新しいフォルダーを作成し、lesson01 という名前を付けます。

1.2 lesson01 の下に新しいフォルダーを作成し、1 という名前を付けます。初めての CSS プログラム

1.3 1.cssコードを書くための最初のcssプログラムフォルダーの下に新しいcssフォルダーを作成します

1.4 新しいファイル index.html を 1. my first css program folder の下に作成し、html ファイルを書き込みます

1.5 index.html入力を開く！Enter キーを押すと、HTML 本文タグが自動的に生成されます

以下に示すように：

2. Live Server 拡張機能をインストールして、コードとブラウザコンテンツのリアルタイム更新を実現します. インストールが完了したら、index.html ファイルに戻り、単一のマシンを右クリックして、Open With Live Server を選択して実現しますコードとブラウザコンテンツ間のリアルタイム更新。

現時点でリアルタイム更新が実装されていない場合は、右下隅にある [Go Live] ボタンをクリックします。

3.タグにcssを書く

セレクタ{

宣言: 属性値;

}

<!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>
        /* 规范，标签里面写css代码，每一个声明最好用分号结尾 */
        h1{
            color: rgb(255, 0, 0);
            /* 声明：属性值；
               声明：属性值； */
        }
    </style>
</head>
<body>
   <h1>标题</h1>
</body>
</html>

ヒント: ショートカットキー Ctrl+? を使用できます。コードを選択してコメントとして直接追加するには

4. html ファイルと css ファイルは別々に記述されます

index.html をクリックして左に分割し、それぞれ html ファイルと css ファイルを開きます

4.1 先ほどのスタイルタグを削除し、内容をcssファイルに直接書き込む

4.2 <head> タグに link タグを追加して、html ファイルと css ファイルを関連付けます。

スタイル.css

h1{
    color: rgb(252, 0, 0);
}

ヒント: ./ は現在のパスの下を意味します

5.まとめ（cssアドバンテージを利用）

1. コンテンツとプレゼンテーションの分離

2. Web ページの構造が統一され、再利用できる

3.スタイルは非常に豊かです

4. html から独立した css ファイルを使用することをお勧めします

5. SEO（ウェブ検索機能）につながり、検索エンジンに取り込まれやすい