CSS スタイルシートは 3 つの部分から構成されていますか?-フロントエンドQ&A-php.cn

CSS スタイルシートは 3 つの部分から構成されていますか?

青灯夜游

リリース： 2022-05-18 17:16:30

オリジナル

5738 人が閲覧しました

CSS スタイルシートの 3 つのコンポーネント: 1. セレクター、指定されたスタイルがページ内のどのオブジェクトに作用するかをブラウザーに伝えるために使用されます; 2. プロパティ、主に CSS によって提供されるスタイルオプションの設定です。フォント属性、テキスト属性、背景属性、レイアウト属性などを含む; 3. 属性値は指定された属性の有効な値であり、属性と属性値は「:」で区切られます。

CSS スタイルシートは 3 つの部分から構成されていますか?

# このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、デルのG3コンピューター。

CSS スタイルシートの構成

CSS スタイルシートには、セレクター、属性、属性値の 3 つの部分が含まれています。構文スタイルは次のとおりです:

选择符{属性：属性值;}

ログイン後にコピー

構文の説明は次のとおりです:

セレクター (セレクター): セレクターとも呼ばれ、CSS では非常に重要な概念です。、すべて HTML マーカーは、さまざまな CSS セレクターを通じて制御されます。
スタイルが作用するページ内のオブジェクトをブラウザに伝えます。これらのオブジェクトには、特定のタグ、すべての Web ページオブジェクト、指定されたクラスまたは ID 値などが含まれます。ブラウザがこのスタイルを解析すると、セレクターに基づいてオブジェクトの表示効果がレンダリングされます。
プロパティ: CSS によって提供されるセットスタイルオプションで、主にフォント属性、テキスト属性、背景属性、レイアウト属性、境界線属性、リスト項目属性、テーブル属性などが含まれます。。コンテンツ。これらのプロパティの一部は一部のブラウザでのみサポートされているため、CSS プロパティを使用するとその使用がより複雑になります。
属性値 (value): 指定された属性の有効な値。属性と属性値は「:」で区切られます。属性値が複数ある場合は「;」で区切ってください。

CSS スタイルシートは 3 つの部分から構成されていますか?

CSS セレクター

一般的に使用される CSS セレクターは、タグセレクター、カテゴリセレクター、包含セレクター、および ID 選択です。セレクターなどセレクターを使用してさまざまな HTML タグを制御し、さまざまな効果を実現します。 3 つの基本的なセレクターについては、以下で詳しく紹介します。

1. タグセレクター

HTML ページはイメージタグなどの多くのタグで構成されています

CSS スタイルシートは 3 つの部分から構成されていますか? 、ハイパーリンクタグ 、テーブルタグ

 など、CSS タグ セレクターは、ページ内のどのタグがどの CSS タグを使用するかを宣言します。選択デバイスは、ページ内のすべての

タグのスタイルを宣言するために使用されます。 たとえば、タグセレクターを定義し、タグセレクター内のハイパーリンクのフォントと色を定義します。

<style>
	a{
		font_size:9px;
		color:#F93;
	}
</style>

ログイン後にコピー

2. カテゴリセレクター

タグセレクターの使用は非常に高速ですが、一定の制限があります。ページでタグセレクターを宣言すると、ページ内のそのタグのすべてのコンテンツがそれに応じて変更されます。結合ページには 3 つの

`タグがあります。各`

 を別々に表示したい場合は、タグ セレクターを使用できません。これが必要です。カテゴリセレクターを導入します。

タイプセレクターの名前は自分で定義した「.」で始まり、定義された属性と属性値も CSS 仕様に準拠している必要があります。カテゴリセレクターの HTML タグを適用するには、class 属性を使用して宣言するだけです。

例:

<html>
	<style>
	.one{
			font-family:宋体;
			font-size:24px;
			color:red;
		}
	.two{
			font-family:宋体;
			font-size:16px;
			color:red;
		}
	.three{
			font-family:宋体;
			font-size:12px;
			color:red;
		}
	</style>
	</head>
	<body>
		<h2 class="one">应用选择one</h2><!--定义样式后，页面会自动加载样式-->
		<p>正文内容1</p>
		<h2 class="two">应用选择器two</h2>
		<p>正文内容2</p>
		<h2 class="three">应用选择器three</h2>
		<p>正文内容3</p>
	</body>
</html>

ログイン後にコピー

CSS スタイルシートは 3 つの部分から構成されていますか?

3.ID セレクター

ID セレクター ID HTML ページの属性は、スタイルの選択と追加に使用されます。基本的にはカテゴリセレクターと同じです。ただし、HTML ページには 2 つの同一の ID タグを含めることはできないため、定義された ID セレクターも、一度使用しました。

名前付き ID セレクターは「#」記号で始まり、その後に HTML タグ内の ID 属性値が続く必要があります。
たとえば、ID セレクターを使用してページ内のスタイルを制御します。

<html>
	<style>
	#first{
			font-size:18px
		}
	#two{
			font-size:24px
		}
	#three{
			font-size:36px
		}
	</style>
	<body>
		<p id="first">ID选择器1</p>
		<p id="two">ID选择器2</p>
		<p id="three">ID选择器3</p>
	</body>
</html>

ログイン後にコピー

CSS スタイルシートは 3 つの部分から構成されていますか?

幅広い知識: CSS 3 の新機能

モジュールとモジュール構造

CSS 3 は全体構造を採用せず、分業・協業によるモジュール構造を採用しています。このパターン化された構造は、ブラウザが特定のモジュールを完全にサポートしていない状況を回避するために採用されています。全体がいくつかのモジュールに分割されている場合、各ブラウザはどのモジュールをサポートし、どのモジュールをサポートしないかを選択できます。

CSS 3 で一般的に使用されるモジュールを次の表に示します。

##背景と境界線 ##ページメディアヘッダー、フッター、ページ番号などのさまざまなページ要素データのスタイルを定義します。書き込みモードページ中国語を定義します。このデータのレイアウト (学習ビデオ共有: css ビデオチュートリアル

モジュール名	関数の説明
Basic Box Model	さまざまなボックス関連モジュールの定義
Line	さまざまなライン関連モジュールの定義スタイル
リスト	リストに関連するさまざまなスタイルを定義します。
テキスト	さまざまなスタイルを定義します。テキスト関連スタイル
Color	さまざまな色関連のスタイルを定義します
Font	さまざまなフォント関連を定義しますスタイル
#背景と境界線に関連するさまざまなスタイルを定義します