ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLでCSSを使用するにはどのような方法がありますか

HTMLでCSSを使用するにはどのような方法がありますか

青灯夜游
青灯夜游オリジナル
2021-05-06 16:01:3535079ブラウズ

HTML で CSS を使用するには 4 つの方法があります: 1. HTML タグの style 属性を使用して CSS スタイルを設定する; 2. head タグの style タグを使用して CSS スタイルを設定する; 3. link タグを使用して外部 css ファイルをインポートします。 4. 「@import」ルールを使用して外部 css ファイルをインポートします。

HTMLでCSSを使用するにはどのような方法がありますか

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

HTML で CSS を使用するには 4 つの方法があります:

  • インライン メソッド (インライン スタイル)

  • 内部メソッド (埋め込みstyle)

  • #リンク タグを使用する (リンク スタイル)

  • #@import を使用する (インポート スタイル)
  • #1. インライン モード (インライン スタイル)

HTML タグの style 属性を使用して CSS スタイルを設定します

形式:

<html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>

例:

<p style="color:orange;font-size:18px">在HTML中如何使用css样式</p>

機能: このタグにのみ適用されます。

2. 内部メソッド (埋め込みスタイル)

は、head タグ内の style タグを使用して CSS スタイルを設定します

Format:

<style type="text/css"> ....css样式代码 </style>

特徴: 現在のページ全体に作用します

3. リンクタグ(リンクタイプ)を使用します

CSSコードを別ファイルに記述します、リンク タグを使用すると、ファイルがページに直接導入されます。ページでは LINK タグを複数回使用して、複数の外部 CSS ファイルを導入できます。これらの CSS コードの相互影響に注意してください。通常、後で導入された CSS ファイルは、以前に導入された CSS ファイルの同じ効果を上書きします。現在このCSS導入方法が最も主流であり、WebサイトごとにCSSコードを計画して再利用やメンテナンスを容易にすることができますが、コードの集中化が進み、コード量が多くなりすぎて作業が容易になる場合があります。適切に維持されないと問題が発生する可能性があります。

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

4. @import (インポート) を使用する

@import を使用して CSS ファイルを導入するには 2 つの方法があります。1 つはページの

@import url(index2.css);

CSS ファイル内でも使用できます。使用法は次のとおりです:

@import "sub.css";

非常に便利です。 @import を使用して CSS を導入する 外部ファイルから CSS コードを導入して、メンテナンスと計画を容易にします。ただし、追加の CSS ファイルを導入するたびにサーバーへの接続要求が追加されるため、アクセス数が多い場合は保守性とパフォーマンスのトレードオフが必要になります。

推奨チュートリアル: 「

html ビデオ チュートリアル

以上がHTMLでCSSを使用するにはどのような方法がありますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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