」です; 2. 内部スタイル、構文は「"; 3. 外部スタイル、構文は "" です。

CSS3を使用する3つの方法とは何ですか

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

css3 を使用する 3 つの方法とは何ですか

1. インライン スタイル

インライン スタイルは style 属性によって設定され、属性値には任意の CSS スタイルを指定できます。 

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>内联样式</title>
  </head>
  <body>
     <p style="background: red"> I  love  China!</p>
  </body>
 </html>

表示効果:

CSS3を使用する3つの方法とは何ですか

2. 内部スタイル

内部スタイルは文書の先頭部分で定義され、設定されます。 styleタグを介して。要素セレクター (p) を使用して、スタイルをスタイル設定するタグ (p タグ) に関連付ける必要があります。 

  <!DOCTYPE html>
  <html>
  <head>
     <meta charset="UTF-8">
      <title>内联样式</title>
     <style type="text/css">
         p{ 
              background: green;
          }
    </style>
 </head>
 <body>
    <p> I  love  China!</p>
 </body>
 </html>

効果:

CSS3を使用する3つの方法とは何ですか

3. 外部スタイル

CSS スタイルをドキュメントの外側の *.css で定義し、次にドキュメント内で定義します。ドキュメントの先頭 リンク要素を通じて部分的に導入されます。 

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <title>内联样式</title>
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <p> I  love  China!</p>
</body>
 </html>

Style.css ファイルの内容: 

p{ 
             background: yellow;
        }

表示効果:

CSS3を使用する3つの方法とは何ですか# a. 外部スタイル シートに他のスタイル シートをインポートします。

上記の style.css を combin.css ファイルにインポートします。

@import "style.css";
 body{
     background: red;
}

combin.css ファイルを HTML ファイルにインポートします。

  <!DOCTYPE html>
  <html>
 <head>
      <meta charset="UTF-8">
      <title>document</title>
      <link rel="stylesheet" href="combine.css">
  </head>
  <body>
      <p> I  <span>love</span>  China!</p>
 </body>
 </html>　

効果:

CSS3を使用する3つの方法とは何ですか(学習ビデオ共有:

css ビデオ チュートリアル

)

以上がCSS3を使用する3つの方法とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

関連記事

続きを見る