HTMLにCSSを導入する方法-htmlチュートリアル-php.cn

HTMLにCSSを導入する方法

墨辰丷

リリース： 2018-05-16 11:26:59

オリジナル

2426 人が閲覧しました

HTML に CSS を導入するには主に 4 つの方法があり、インライン、埋め込み、リンク、インポートです。

1. インラインスタイル
インラインスタイルとは、タグのstyle属性にCSSのスタイルを設定することです。この方法は CSS の利点を反映していないため、お勧めできません。
2. 埋め込み
埋め込みとは、Web ページのタグペアの中に CSS スタイルを集中的に記述することです。形式は次のとおりです:

<head>
        <style type="text/css">
               ...此处写CSS样式
       </style>
      </head>

ログイン後にコピー

欠点は、多くの Web ページが含まれる Web サイトの場合、各 Web ページで埋め込みを使用したり、スタイルを変更したりするのが非常に面倒なことです。単一の Web ページでは、埋め込みの使用を検討できます。

3. インポート方法
インポート方法は、CSS ルールを使用して、タグに記述されます。

<style type="text/css">
                    @import"mystyle.css"; 此处要注意.css文件的路径
         </style>

ログイン後にコピー

インポート式は Web ページ全体をロードした後に CSS ファイルをロードするため、Web ページが比較的大きい場合、Web ページをフラッシュした後、最初にページのスタイルが存在しません。スタイルが現れます。これは輸入品特有の欠陥です。

4. Link -type も .css ファイルを HTML ファイルに導入しましたが、HTML ルールを使用したリンクタイプは & lt; タグを使用して外部 CSS ファイルに導入されました。 ; 外部スタイルテーブルファイルを導入するための文法は次のとおりです:

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

ログイン後にコピー

リンクを使用する場合、Web ファイルをロードする前に CSS ファイルをロードします。インポート型のように、最初からスタイルのない Web ページを表示してからスタイル付きの Web ページを表示することはありません。これがリンクタイプの利点です。

まとめ: 一般的に、ウェブサイトを構築する場合、スタイルは複数のスタイルシートファイルに記述されることがほとんどなので、最初にリンクを使用して一般的な CSS ファイルを導入し、次にインポートを使用してこの CSS ファイルに他の CSS ファイルを導入します。 CSS ファイル。ただし、JavaScript を使用して CSS ファイルを動的に導入する場合は、リンクのみを使用できます。