CSS3を使用する3つの方法とは何ですか-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2022-01-24 11:15:38

オリジナル

2853 人が閲覧しました

css3 を使用する 3 つの方法: 1. インラインスタイル、構文は「」です。 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つの方法とは何ですか (学習ビデオ共有: