ホームページ > 記事 > ウェブフロントエンド > HTMLとCSSの書き方について話し合います。
HTMLとCSSの書き方について話し合います。
- PHPzオリジナル
- 2023-04-25 10:48:06552ブラウズ
HTML 言語と CSS 言語は、最新の Web サイト構築の基礎であり、この 2 つは密接に関連しており、連携して動作します。この記事では、HTML と CSS の書き方と、それらを使用して美しく使いやすい Web サイトを構築する方法について説明します。
HTML の書き方
HTML は Hypertext Markup Language の略称で、Web ページの構造と内容を記述します。 HTML ではマークアップを使用して、テキスト、画像、リンクなどの要素を記述します。次に、HTML の基本タグをいくつか示します。 コード内の
<!DOCTYPE html> <html> <head> <title>我的网站</title> </head> <body> <header> <!-- 头部内容 --> </header> <nav> <!-- 导航栏内容 --> </nav> <main> <!-- 主体内容 --> </main> <footer> <!-- 底部内容 --> </footer> </body> </html>
<!DOCTYPE html> はドキュメント タイプ宣言であり、これが HTML5 ドキュメントであることをブラウザに伝えます。 <html> タグはドキュメントのルート要素を定義し、<head> タグと <body> タグは head 要素を定義するために使用されます。および文書の本文の部分。
<head> タグには、Web ページのタイトルを表示するために使用される <title> タグなど、いくつかの要素を追加できます。 。 <body>タグには、テキスト、画像、表などのページのコンテンツを含めることができます。これに基づいて、他のマークアップを追加してページを完成させることができます。
CSSの書き方
CSSとはCascading Style Sheetsの略称で、Webページの階層構造やスタイルを定義します。 CSS は HTML 要素にスタイルを適用します。基本的な CSS 構文は次のとおりです。
body {
background-color: #333;
color: #fff;
}
この例では、スタイルを <body> 要素に適用しています。 background-color 属性は要素の背景色を設定し、color 属性は要素のテキストの色を設定します。 CSS スタイルには、フォント、幅、高さなど、さらに多くのプロパティを含めることができます。
CSS は、さまざまな方法で HTML 要素に適用できます。一般的なメソッドをいくつか示します。
- 内部スタイル シート: HTML ドキュメントの
<head>セクションで定義されます。 - 外部スタイル シート:
<link>タグを使用して、.CSS ファイルを HTML ドキュメントにリンクします。 - インライン スタイル: HTML 要素内でスタイルを直接定義します。
外部スタイル シートの例を次に示します。
/* styles.css */
body {
background-color: #333;
color: #fff;
}
h1 {
font-family: Arial, sans-serif;
font-size: 32px;
text-align: center;
}
<link>## を使用して、.css ファイルを HTML にリンクします。 # タグ ドキュメント内:
<!DOCTYPE html> <html> <head> <title>我的网站</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>欢迎来到我的网站！</h1> </header> <main> <p>这里是主体内容。</p> </main> <footer> <p>版权所有 © 2021</p> </footer> </body> </html>この例では、
<link> タグは、styles.css ファイルを指します。このファイルには、< ;body> および
要素のスタイル。 HTML と CSS を使用して Web サイトを構築する方法
HTML と CSS の基本的な構文を理解したところで、これらを使用して美しく使いやすい Web サイトを構築するためのヒントをいくつか紹介します。ウェブサイト:
- 全体的なデザイン
- レイアウト
、
- ナビゲーション バー
- 画像とビデオ
要素を使用し、ビデオを埋め込むには
- フォーム