ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTMLとCSSの書き方について話し合います。
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 要素に適用できます。一般的なメソッドをいくつか示します。
<head>
セクションで定義されます。 <link>
タグを使用して、.CSS ファイルを 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 サイトを構築する方法、
要素を使用し、ビデオを埋め込むには