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

应用选择one

应用选择器two

应用选择器three

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

青灯夜游

May 18, 2022 pm 05:16 PM

css css3 html

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 id="应用选择one">应用选择one</h2><!--定义样式后，页面会自动加载样式-->
		<p>正文内容1</p>
		<h2 id="应用选择器two">应用选择器two</h2>
		<p>正文内容2</p>
		<h2 id="应用选择器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	さまざまなフォント関連を定義しますスタイル
#背景と境界線に関連するさまざまなスタイルを定義します

、

Web フロントエンド)

以上がCSS スタイルシートは 3 つの部分から構成されていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7682

Java チュートリアル

1639

CakePHP チュートリアル

1393

Laravel チュートリアル

1286

PHP チュートリアル

1229

Related knowledge

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

HTML、CSS、およびJavaScriptの理解：初心者向けガイド Apr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上 Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。

See all articles

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

CSS スタイルシートの構成

`タグがあります。各`

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

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

CSS スタイル シートの構成

タグがあります。各

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

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

CSS スタイルシートの構成

`タグがあります。各`