ホームページ > 記事 > ウェブフロントエンド > HTML と CSS 間の完璧な関係を明らかにする
HTML と CSS 間の完璧な関係を明らかにする
- 王林オリジナル
- 2024-04-09 16:33:01714ブラウズ
HTML は Web ページのコンテンツと構造を提供し、CSS は外観とレイアウトを制御します。開発者は、HTML ファイルと CSS ファイルを作成してリンクすることで、インタラクティブな Web ページを作成できます。実際のケースでは、HTML を使用して Web ページの構造を定義し、CSS を使用してフォントや色などのスタイルを追加し、Web ページがブラウザーで開かれるため、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 サイトの他の関連記事を参照してください。