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

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLにCSSを追加する方法

(*-*)浩

May 28, 2019 pm 03:47 PM

html

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

1. インラインスタイル

インラインスタイルは、style 属性に CSS スタイルを設定します。タグ。この方法は CSS の利点を反映していないため、お勧めできません。

<div style = "width:100px;height:100px;>我是行内样式</div>

ログイン後にコピー

2. Embedded

Embedded とは、Web ページのタグペアに CSS スタイルを記述することです。形式は次のとおりです。

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

ログイン後にコピー

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

3. インポートタイプ

独立した .css ファイルを HTML ファイルに導入します。インポートタイプでは、CSS ルールを使用して外部 CSS ファイルを導入します。

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

ログイン後にコピー

インポートでは、Web ページ全体が読み込まれた後に CSS ファイルが読み込まれるため、問題が発生します。Web ページが比較的大きい場合は、スタイルのないページが最初に表示され、フラッシュ後に Web ページのスタイルが表示されます。現れる。これは輸入品特有の欠陥です。

4. リンクタイプ

も .css ファイルを HTML ファイルに導入しますが、リンクタイプが HTML ルールを使用してインポートタイプとは異なります。外部 CSS ファイルを導入します。Web ページのタグペアのタグを使用して外部スタイルシートファイルを導入します。構文は次のとおりです:

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

ログイン後にコピー

リンクタイプとインポートタイプの使用の違いは、は、Web ページファイル本体を読み込む前に CSS ファイルを読み込みます。そのため、表示される Web ページには最初からスタイル効果が適用されます。インポートタイプのように、最初にスタイルのない Web ページを表示してからスタイル付きの Web ページを表示することはありません。 . これがリンク型のメリットです。

要約: 一般的に、Web サイトを作成する場合、スタイルは複数のスタイルシートファイルに記述されることが多いため、最初にリンクを使用して一般的な CSS ファイルを紹介し、次にこのCSS インポートは、他の CSS ファイルを導入するためにファイル内で使用されます。ただし、JavaScript を使用して CSS ファイルを動的に導入する場合は、リンクのみを使用できます。

以上がHTMLにCSSを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。