CSSスタイルをHTMLに追加するにはどうすればよいですか?-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSSスタイルをHTMLに追加するにはどうすればよいですか?

青灯夜游

Jun 01, 2019 am 10:16 AM

css CSSスタイル html

CSSスタイルをHTMLに追加するにはどうすればよいですか?

html CSS スタイルを追加するには、インライン (style 属性を使用し、特定の HTML タグ内で使用) とインライン (style タグによって CSS コードが配置される) の 3 つの方法があります。ページの先頭部分に固有）、外部リンク（link タグを使用して外部 CSS ファイルを HTML にリンク）。

1. インラインスタイル

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

各 HTML タグを個別にスタイル設定する必要があるため、インライン CSS は使用しないことをお勧めします。インライン CSS のみを使用すると、Web サイトの管理が非常に困難になる可能性があります。ただし、特定の状況では役立つ場合があります。たとえば、CSS ファイルにアクセスできない場合や、単一の要素にのみスタイルを適用する必要がある場合などです。インライン CSS を含む HTML ページの例は次のとおりです。

<!DOCTYPE html>
<html>
  <body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
   </body>
</html>

ログイン後にコピー

2. インライン

インライン CSS スタイルは、< 内の特定のページに CSS コードを配置します。 ;head> セクション。インライン CSS は、タグの間に配置する必要があります。

クラスと ID は CSS コードを参照するために使用できますが、それらはその特定のページでのみアクティブになります。この方法で埋め込まれた CSS スタイルは、ページが読み込まれるたびにダウンロードされるため、読み込み速度が向上します。インラインスタイルシートを使用すると、ページテンプレートを誰かに送信する場合など、状況によっては便利です。すべてが 1 ページ内にあるため、プレビューを確認するのがはるかに簡単です。

内部スタイルシートの例:

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

ログイン後にコピー

3. 外部リンク

外部リンクは、link タグ要素を使用して外部のスタイルシートを追加することです。 CSS ファイル ( .css ファイル) は HTML ページ内で参照されており、その参照はページのセクションに配置する必要があります。

これは、HTML ページに CSS を追加する最も便利な方法です。こうすることで、外部 CSS ファイルに加えた変更が Web サイトに反映されます。

外部スタイルシートの例:

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

ログイン後にコピー

style.css にはすべてのスタイルルールが含まれています。例:

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

ログイン後にコピー

現在、ほとんどの Web サイトでは外部スタイルシートが使用されています。外部スタイルシートは、別のドキュメントに記述され、さまざまな Web ドキュメントに添付されるスタイルです。外部スタイルシートは、接続されているすべてのファイルに影響します。つまり、20 ページの Web サイトがあり、すべてのページが同じスタイルシートを使用している場合、変更が必要な場合は、スタイルシートを編集するだけでそれらのページを完成させることができます。タームサイト管理が容易になります。

以上がCSSスタイルをHTMLに追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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