HTML ファイルに CSS スタイルを設定する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

HTML ファイルに CSS スタイルを設定する方法

PHPz

Apr 26, 2023 pm 04:00 PM

HTML は Web ページの作成に使用されるマークアップ言語であり、CSS (Cascading Style Sheets) は Web ページの外観とスタイルを記述するために使用される言語です。 HTML と CSS を一緒に使用することで、魅力的でプロフェッショナルな外観の Web サイトを作成できます。この記事では、HTMLファイルにCSSスタイルを設定する方法を紹介します。

埋め込みスタイルシート

HTML ドキュメントの head タグでは、style タグを使用して CSS スタイルを定義できます。 CSS スタイルが HTML ドキュメント内に埋め込まれているため、これは埋め込みスタイルシートと呼ばれます。基本的な例を次に示します。

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
    <style>
        body {
            background-color: #ccc;
            color: #000;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: #00f;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一篇博客文章。</p>
</body>
</html>

ログイン後にコピー

上の例では、埋め込みスタイルシートを使用して、body 要素と h1 要素の CSS スタイルを定義しました。これらのスタイルを HTML ドキュメント全体に適用したいため、head タグ内に配置します。ご覧のとおり、CSS スタイルの構文は非常に単純です。変更するプロパティ名、コロン、プロパティ値の順に指定するだけです。

外部スタイルシート

埋め込みスタイルシートは非常に便利ですが、単一の HTML ドキュメントでのみ機能します。複数の HTML ドキュメントがあり、それらの間で CSS スタイルを共有したい場合は、外部スタイルシートを使用できます。外部スタイルシートは、すべての CSS スタイル定義を含む個別の CSS ファイルです。以下に示すように、link タグを使用して HTML にリンクできます。

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一篇博客文章。</p>
</body>
</html>

ログイン後にコピー

上の例では、link タグを使用して style.css ファイルを HTML ドキュメントにリンクします。 CSS ファイルには、埋め込みスタイルシートのプロパティと同じ CSS コードが含まれている必要があります。

クラスセレクターと ID セレクター

CSS は、クラスセレクターと ID セレクターを通じて HTML 要素のスタイルを選択および変更することもできます。クラスセレクターはピリオド (.) で始まり、特定の CSS クラスを持つ要素を選択するために使用されます。要素には複数のクラスを定義できます。 ID セレクターはポンド記号 (#) で始まり、特定の ID を持つ要素を選択するために使用されます。各要素には ID を 1 つだけ持つことができます。基本的な例を次に示します:

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
    <style>
        .title {
            color: #f00;
            font-size: 32px;
        }
        #intro {
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1 class="title">欢迎来到我的网站</h1>
    <p id="intro">这是我的第一篇博客文章。</p>
</body>
</html>

ログイン後にコピー

上の例では、クラスセレクター (.title) を使用して h1 要素のスタイルを定義し、ID セレクター (#intro) を使用して p 要素のスタイルを定義しました。。セレクターの名前は、対応する HTML 要素タグの class または id 属性と同じである必要があることに注意してください。

その他の CSS セレクター

CSS には、HTML 要素のスタイルをより正確に選択および変更するのに役立つセレクターが他にも多数あります。一般的に使用されるセレクターの一部を以下に示します。

子孫セレクター: 子要素内の要素を選択するために使用されます。たとえば、div p は、div 要素内にネストされているすべての p 要素を選択します。
隣接する兄弟セレクター: 隣接する兄弟要素を選択するために使用されます。たとえば、p span は、p の後の最初の span 要素を選択します。
疑似クラスセレクター: 特定の状態の要素を照合するために使用されます。たとえば、hover は、マウスが要素上にあるときに状態を選択します。

CSS では、セレクターを組み合わせて要素をより正確に選択できます。たとえば、クラスセレクターと子孫セレクターを使用して、div 内のすべての p 要素を選択できます。

div p {
    color: #000;
    font-size: 16px;
}

ログイン後にコピー

上の例では、div セレクターと p セレクターを使用して、div All にネストされたすべての p 要素を選択しました。 p 要素。

概要

基本的な CSS スタイル設定を通じて、HTML ドキュメント内の Web サイトの外観とスタイルを定義できます。埋め込みおよび外部のスタイルシート、クラスセレクターと ID セレクター、その他の CSS セレクターはすべて、ページデザインをより柔軟でパーソナライズしたものにします。これらを使用して、魅力的でプロフェッショナルな外観の Web サイトを作成できます。

以上がHTML ファイルに CSS スタイルを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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