CSS スタイルの導入方法とその長所と短所の紹介

CSSを導入する3つの方法

1. インラインスタイル

利点: 書きやすく、重みがある欠点: 構造とスタイルが分離されていない

<div スタイル="幅: 100px" 高さ: 100px></div>

2. 内部スタイル

利点: 構造パターンの相分離欠点: 不完全な分離

    <スタイル>
        div {
            色: 紫;
            フォントサイズ: 16px;
        }
    </スタイル>

3. 外観スタイル

利点: 構造とスタイルが完全に分離されている欠点: 導入する必要がある

    <!-- CSS 初期化ファイルをインポートします -->
    <link rel="スタイルシート" href="css/normalize.css" />
    <!-- パブリック スタイルをインポート -->
    <link rel="スタイルシート" href="css/baes.css">
    <!-- ホームページ スタイルをインポート -->
    <link rel="スタイルシート" href="css/index.css">

補足: CSS スタイルを導入する 4 つの方法

準備する

1. まず HTML ファイル test.html を準備します。ファイルの作成にメモ帳を使用することはお勧めしません。ファイルの作成と編集には、Notepad++ を使用することをお勧めします。エンコード形式は BOM なしの UTF-8 であることに注意してください。そうしないと、中国語の文字化けが発生します。内容は次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」を参照してください。

<html xmlns="http://www.w3.org/1999/xhtml">
    <ヘッド>
        <meta http-equiv="コンテンツタイプ" content="text/html;charset=UTF-8">
        <title>CSS スタイルを導入する 4 つの方法</title>
        <スタイル タイプ="text/css">
        </スタイル>
    </head>
    <本文>
        こんにちは
    </本文>
</html>

2. ファイルをデスクトップに保存し、右クリックして Google Chrome (または他のブラウザで開く) を選択すると、ページに英語の文字「hello」が表示されます。

紹介する4つの方法

列をなして

これは、以下に示すように、HTML属性スタイルを通じて実現されます。

//bodyタグ内に<span style="color:red;">インラインスタイル</span>を記述します

埋め込み

CSSスタイルをスタイルタグに記述し、本文で参照します。

//スタイルタグに記述されたcssスタイル p{
    色:青;
}
-----------------------------------------------------------------
//bodyタグに<p>Embedded</p>と記述する

リンク

1. 通常、この方法はデスクトップに新しいCSSファイルを作成するために使用されます: test.css、CSSスタイル

//test.cssファイルに記述するdiv{
    色：黄色;
}

2. test.cssファイルをtest.htmlにインポートする

// CSS ファイルを導入するために head タグに記述します。href 属性は絶対パスで、現在は同じディレクトリにあります <link href="test.css" type="text/css" rel="stylesheet" />
------------------------------------------------------------------------
//bodyタグに<div>リンクスタイル</div>を記述します

輸入

@import(url(デモ.css))

1. ページは最初に HTML を読み込み、次に CSS を読み込むため、ページスタイルに遅延が発生するため、基本的には使用されません。

2. demo.cssファイルを作成し、CSSスタイルを記述する

//demo.cssファイルに記述する h2{
    色：緑;
}

3. @importを使用してdemo.cssファイルをインポートします。

// テストを行った後、別のスタイルで記述する必要があります。
<スタイル>
  @import url(デモ.css)
</スタイル>
----------------------------------------------------------------------------
//本文タグに<h2>重要</h2>と記入

HTML ページコード

ページレンダリング

最初の3つのスタイルの表示優先順位

近接原則、つまりインライン > 埋め込み > 埋め込み

要約する

CSS スタイルの導入とそのメリットとデメリットについての記事はこれで終わりです。CSS スタイルの導入とそのメリットとデメリットに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: Docker Consul コンテナサービスの更新と見つかった問題の概要

>>: コードを通じてHTMLエスケープ文字を識別する方法について説明します