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

PHPz

リリース： 2023-04-25 11:26:07

オリジナル

623 人が閲覧しました

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>

ログイン後にコピー

この例では、