ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTMLとCSSの書き方について話し合います。

HTMLとCSSの書き方について話し合います。

PHPz
PHPzオリジナル
2023-04-25 10:48:06609ブラウズ

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 サイトを構築するためのヒントをいくつか紹介します。ウェブサイト:

    全体的なデザイン
Web サイトを構築する前に、ページの全体的なデザインを検討してください。テーマまたはスタイルを選択し、ページの色、フォント、レイアウトがそれに一致していることを確認します。

    レイアウト
Web サイトのレイアウト構造を決定します。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。