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

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

青灯夜游

May 18, 2022 pm 05:16 PM

csscss3html

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 までご連絡ください。

利用CSS怎么创建渐变色边框？5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框？下面本篇文章给大家分享CSS实现渐变色边框的5种方法，希望对大家有所帮助！

css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。

css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。

css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。

rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。

css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。

怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

ホットトピック

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

7416

CakePHP チュートリアル

1359

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

CSS スタイルシートの構成

`タグがあります。各`

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

MinGW - Minimalist GNU for Windows

ZendStudio 13.5.1 Mac

VSCode Windows 64 ビットのダウンロード

DVWA

mPDF

ホットトピック

CSS スタイル シートの構成

タグがあります。各

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

MinGW - Minimalist GNU for Windows

ZendStudio 13.5.1 Mac

VSCode Windows 64 ビットのダウンロード

DVWA

mPDF

ホットトピック

CSS スタイルシートの構成

`タグがあります。各`