ホームページ  >  記事  >  ウェブフロントエンド  >  スタイルシートCSSの4つの導入方法とは?

スタイルシートCSSの4つの導入方法とは?

青灯夜游
青灯夜游オリジナル
2021-05-21 13:46:2814379ブラウズ

導入方法は、 1. htmlタグ内のstyle属性を直接使用して導入する 2. styleタグ内にcssのスタイルルールを記述する 3. linkタグを使用して外部cssファイルを導入する 4. 4. 外部cssファイルを導入する の4つです。 4. style タグで、「@import」ルールを使用して外部 CSS ファイルを導入します。

スタイルシートCSSの4つの導入方法とは?

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

1. style 属性を使用します: style 属性を html タグに直接追加します# ## 内部。

<标签 style="属性1: 设定值1; 属性2: 设定值2; ">
例:

<td style="color:blue;font-size:9pt;font-family:&#39;黑体&#39;;line-height:150%;">
この使用法の利点は、各タグにスタイルを柔軟に適用できることですが、欠点は「統一性」がないことです。文書全体で。



2. style タグを使用する: タグにスタイル ルールを記述します。

    <style type="text/css">
    <!--
    样式规则表    -->
    </style>
例:

    <style type="text/css">
    <!--
    BODY {
      color: BLUE;
      background: #FFFFCC;
      font-size: 9pt}
    TD, P {
      COLOR: GREEN;
      font-size: 9pt}    -->
    </style>
は通常、

webpage 構造全体を書き込みます。 ;head> セクション。

この使用法の利点は、文書全体の統一性であり、宣言されたタグがある限り、スタイル ルールが適用されます。

欠点は、個々のタグの柔軟性が不十分であることです

3. LINK タグを使用します:

スタイルを記述しますルールを .css スタイル ファイルに追加し、 タグを使用してインポートします。


スタイル ルールを example.css ファイルとして保存するとします。スタイル ファイルで指定されたスタイルを適用するには、Web ページに

<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">

を追加するだけです。通常、LINK タグは Web ページの セクションに記述されます。

この使用法の利点は、同じスタイル ルールが適用される複数のドキュメントを同じスタイル ファイルに割り当てることができることです。欠点は、個々のファイルやタグに柔軟性がないことです。



4. @import を使用して導入します: これは LINK の使用法とよく似ていますが、 に配置する必要があります。

    <STYLE TYPE="text/css">
    <!--
      @import url(引入的样式表的位址、路径与档名);    -->
    </STYLE>
例:

    <STYLE TYPE="text/css">
    <!--
      @import url(http://yourweb/ example.css);
    -->
    </STYLE>
(学習ビデオ共有:

css ビデオ チュートリアル)

以上がスタイルシートCSSの4つの導入方法とは?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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