CSSとHTMLを組み合わせる4つの方法

（１）各HTMLタグには属性スタイルがあり、CSSとHTMLを組み合わせている。

<div style="background-color:red;color:blue;">私は小さな鳥です</div>

（２）HTMLタグ、<style>タグを使用する：head内に記述する

    <スタイル タイプ="text/css">
      CSS コード;
    </スタイル>
<スタイル タイプ="text/css">
div {
背景色:赤;
色:グレー;
}
</スタイル>

（３）スタイルタグ内のステートメントを使用する（一部のブラウザでは機能しない）

@import url(cssファイルパス);

- ステップ1: CSSファイルを作成する

   <スタイル タイプ="text/css">
    div.css をインポートします。
  </スタイル>

（4）ヘッダータグリンクを使用して外部CSSファイルを導入する

- ステップ1: CSSファイルを作成する

 - <link rel="スタイルシート" type="text/css" href="div.css"/>

*** 3番目の組み合わせ方法の欠点：一部のブラウザでは機能せず、4番目の方法が一般的に使用されます

*** 優先度（一般）

上から下へ、外から内へ、優先順位は低いものから高いものへ

*** 後で読み込まれたものの方が優先度が高くなります

*** フォーマットセレクタ名 {属性名: 属性値; 属性名: 属性値; ......}

完全なコード:

<html>
    <ヘッド>
        <title>世界</title>
        <スタイル タイプ="text/css">
            div {
                背景色:グレー;
                色：白;
            }
        </スタイル>
    </head>
    <本文>
        <div style="background-color:red;color:blue;">私は小さな鳥です</div>
        <div>過去を振り返り、深い愛情を持って一緒に年を重ねていけますように！ </div>
    </本文>
</html>

<html>
    <ヘッド>
        <title>世界</title>
        <スタイル タイプ="text/css">
            div.css をインポートします。
        </スタイル>
    </head>
    <本文>
        <div>過去を振り返り、深い愛情を持って一緒に年を重ねていけますように！ </div>
    </本文>
</html>

<!DOCTYPE HTML>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8">
<title>世界</title>
<link rel="スタイルシート" type="text/css" href="div.css"/>
</head>
<本文>
    <div>過去を振り返り、深い愛情を持って一緒に年を重ねていけますように！ </div>
</本文>
</html>

要約する

以上が、私がご紹介した CSS と HTML を組み合わせる 4 つの方法です。お役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: HTML の相対パスと絶対パスの違いの分析

>>: mysql-joinsの具体的な使用方法