CSS ファイルをリンクするいくつかの方法をまとめます。-フロントエンドQ&A-php.cn

CSS ファイルをリンクするいくつかの方法をまとめます。

PHPz

リリース： 2023-04-13 10:39:03

オリジナル

1765 人が閲覧しました

CSS (Cascading Style Sheets) は、Web ページを作成する際に非常に重要な部分です。 CSS は、ページ上のすべてのテキストと要素の外観とレイアウトを定義および制御できます。ただし、初心者にとって、CSS を正しくリンクする方法は難しい問題になる可能性があります。この記事では、プロセスをより簡単に習得できるように CSS ファイルをリンクするいくつかの方法について説明します。

内部スタイルシートのリンク

まず、内部スタイルシートを使用して CSS ファイルをリンクできます。これを行うには、HTML ドキュメントの <head> タグ内で <style> タグを使用します。 <style> タグには CSS コードを入力できます。例を次に示します。

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        color: red;
      }
      p {
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

ログイン後にコピー

ここの HTML ドキュメントでは、すべての CSS コードが <style> タグに格納されています。この方法は、CSS スタイルに簡単な変更を加えるのに適していますが、スタイルを変更したい場合は、HTML ファイルを変更する必要があります。

外部スタイルシートのリンク

2 番目の方法は、外部スタイルシートを使用して CSS ファイルをリンクすることです。これは、HTML ドキュメントで <link> タグを使用して実現できます。 <link>タグは、CSS ファイルの場所をブラウザに知らせるために、CSS ファイルへのパスを指す必要があります。外部スタイルシートへのリンクの例を次に示します。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

ログイン後にコピー

ここで、<link> タグは、「style.css」という名前のファイルを指します。ファイル名とパスは必要に応じて変更できます。 CSS ファイルは HTML ファイルと同じサーバー上に存在する必要があります。

インラインスタイルシートのリンク

3 番目の方法は、インラインスタイルシートを使用して CSS を HTML ドキュメントにリンクすることです。これを行うには、HTML 要素内の style 属性に CSS コードを入力します。以下に例を示します。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1 style="color:red;">This is a heading</h1>
    <p style="font-size:16px;">This is a paragraph.</p>
  </body>
</html>

ログイン後にコピー

ここでは、style 属性を使用して CSS コードを埋め込みます。このアプローチはより便利かもしれませんが、保守と変更が難しく、コードの重複が発生する可能性があります。

概要

CSS ファイルを接続する場合、外部スタイルシートを使用するのが最善の方法です。このアプローチは保守が容易で、コードがより読みやすく、スケーラブルになります。小規模なプロジェクトの場合は、内部スタイルシートの使用を検討してください。どのような場合でも、インラインスタイルシートを使用してコードを迅速に変更できますが、コードの重複やメンテナンスの困難な問題が発生する可能性があることに注意する必要があります。

以上がCSS ファイルをリンクするいくつかの方法をまとめます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。