(003)CSSの基礎_html/css_WEB-ITnose

Jun 24, 2016 am 11:46 AM

1. はじめに

CSS はページにスタイルを追加し、コンテンツの外観を強化および改善することができます。構造を提供するのは XHTML です。各要素はコンテンツの異なる部分を識別し、属性は要素に関する詳細情報を伝えます。 CSS は、これらの XHTML 要素の外観に影響を与えるもう 1 つのレイヤーです。ページ上の色、フォント、サイズ、背景、レイアウトはすべて、CSS を賢く使用することで制御できるコンテンツのプレゼンテーションの側面です。

2. CSS ルールの分析

要素や属性が xhtml 文書の素材だとすると、CSS 文書の素材は「ルール」です。 「ルール」とは、ブラウザーが指定された説明的な値に基づいて xhtml 要素の外観を変更するために従うことができる一連の命令です。 CSS ルールは、以下の図に示すように、いくつかの部分で構成されます。

セレクターは、スタイルが適用されるターゲット要素を決定するために使用されるルールの一部です。そのスコープは、特定の要素のすべてのインスタンスに影響を与えるのに十分なほど大きく、少数または 1 つの要素のみに影響を与えるほど十分に小さいです。

スタイル宣言には属性と値の 2 つの部分が含まれます。プロパティは、色、幅、ページ上の位置など、変更される要素のプレゼンテーションの側面です。 CSS 言語では多数のプロパティを使用できます。属性の値は、選択した要素に適用する特定のスタイルを指定します。許容される値は属性自体によって異なります。一部の属性はスペースで区切って複数の値を持つことができます。

スタイル宣言は中括弧「{}」の間にあります。セレクターに対して複数のスタイル宣言を指定できるため、単一のルールで要素の外観の複数の側面を変更できます。プロパティとその値はコロン (:) で区切られ、スタイル宣言はセミコロンで終わります。セミコロンは複数のスタイル宣言を区切ることができますが、ルール内にスタイル宣言が 1 つしかない場合はオプションです。一連のスタイル宣言の最後のものについても同様です。用心したほうがいいですが、すべてのスタイル宣言の後に (たとえ 1 つしかない場合でも) セミコロンを付ける習慣をつけるのは悪いことではありません。

CSS コードがこれらの基本的な構造と構文に準拠していない場合、たとえば、属性と値を区切る閉じ括弧やコロンが欠落している場合、ルール全体、さらにはスタイル シート全体が失敗する可能性があります。 xhtml と同様に、スタイルシートも適切で正しく構築されている必要があります。 w3c は、CSS スタイル シートのエラーを見つけるのに役立つ CSS バリデーターも提供します。

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

< meter>の目的は何ですか 要素?

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

< datalist>の目的は何ですか 要素?

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

< Progress>の目的は何ですか 要素?

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか?

See all articles