HTML と CSS 間の完璧な関係を明らかにする-htmlチュートリアル-php.cn

HTML と CSS 間の完璧な関係を明らかにする

王林

リリース： 2024-04-09 16:33:01

オリジナル

749 人が閲覧しました

HTML は Web ページのコンテンツと構造を提供し、CSS は外観とレイアウトを制御します。開発者は、HTML ファイルと CSS ファイルを作成してリンクすることで、インタラクティブな Web ページを作成できます。実際のケースでは、HTML を使用して Web ページの構造を定義し、CSS を使用してフォントや色などのスタイルを追加し、Web ページがブラウザーで開かれるため、HTML と CSS が緊密に統合されていることがわかります。

揭秘 HTML 与 CSS 的完美连接

HTML と CSS 間の完璧な関係を明らかにする

HTML (ハイパーテキストマークアップ言語) と CSS (カスケードスタイルシート) は Web です。開発において重要な 2 つのテクノロジー。これらは連携して、美しくインタラクティブな Web ページを作成します。この記事では、HTML と CSS の密接な関係を詳しく掘り下げ、実践的な例を示します。

HTML と CSS の関係

HTML 構造: HTML は Web ページのコンテンツと構造を提供し、テキストを定義します。ページ内の画像とリンク。
CSS スタイル: CSS は HTML 要素にスタイルを追加し、フォント、色、境界線などの外観とレイアウトを制御します。

実践的なケース: 基本的な Web ページの作成

次の手順に従って、HTML と CSS を含む基本的な Web ページを作成します。

HTML ファイルの作成: テキストエディターを使用して index.html という名前のファイルを作成し、次のコードを入力します:

<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎访问我的网页</h1>
  <p>这是我使用 HTML 和 CSS 创建的一个简单网页。</p>
</body>
</html>

ログイン後にコピー

CSS ファイルの作成: style.css という名前のファイルを作成し、次のコードを入力します:

body {
  font-family: Arial;
  font-size: 16px;
  color: #000;
  background-color: #fff;
}

h1 {
  font-size: 24px;
  color: #333;
}

p {
  font-size: 14px;
  color: #666;
}

ログイン後にコピー

CSS を HTML に関連付けます: head タグに次のコードを追加して、CSS ファイルを HTML ファイルに関連付けます:

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

ログイン後にコピー

ファイルを保存して開きます: 2 つを変更します。ファイルを同じディレクトリに保存し、ブラウザを使用して index.html ファイルを開きます。

結果:

ブラウザには、タイトルが「My Page」、本文が 16 ピクセルの Arial フォント黒、背景が黒の単純な Web ページが表示されます。白。 h1 見出しは、色 #333 の 34 ピクセル Arial フォントで表示されます。

結論:

HTML と CSS の組み合わせは、柔軟で美しい Web ページを構築およびデザインするために必要な基盤を提供します。それらの関係を理解することで、Web サイトをオンラインで目立たせる優れたユーザーエクスペリエンスを作成できます。

以上がHTML と CSS 間の完璧な関係を明らかにするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。