CSSにおけるclassとidの違いと使い方の分析-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSにおけるclassとidの違いと使い方の分析

不言

Jun 15, 2018 am 09:23 AM

css

この記事では、CSS のクラスと ID の違いと使用法を主に紹介します。これは、必要な友人に共有して、Xhtml Web ページを作成する際に役立ちます。 CSS スタイル属性の呼び出しを選択するために Class と ID がよく使用されます。では、どのような場合に class を使用し、どのような場合に ID を使用する必要があるのでしょうか。CLASS と ID の基本的な属性と使用法について詳しく学びましょう

Xhtml Web ページを作成するには CSS を使用します。多くの場合、クラスと ID を使用して CSS スタイル属性を選択して呼び出します。 CSS を学習する初心者にとって、クラスと ID は曖昧であると同時に、いつクラスを使用し、いつ ID を使用するのか、またその使用方法や制限が何なのかもわかりません。次に、CLASS と ID の基本的なプロパティと使用法について詳しく学びましょう。

クラスはプログラムでは「クラス」と呼ばれますが、CSSの書き言葉でも「クラス」と呼ばれます。 CSS スタイルでは、.css5{attribute: 属性値;} のように、小文字の「ドット」と「.」で名前が付けられ、HTML ページでは、名前付きの選択に class="css5" が使用されます。 CSSはCSSセレクターとも呼ばれます。例: .css5{属性: 属性値;} セレクターは HTML では「

I am a class example

」として呼び出されます。 CSS を引用する方法がわからない場合、CSSリファレンスについて学ぶことができます。

そしてクラス(class)は同じhtmlページ内で同じクラスを何度も呼び出すことができます。この例では、対応するWebページ内で「css5」を何度も呼び出すことができます。これは、CSS で事前設定された属性を呼び出すためにクラスが一般的に使用されることも示しています。たとえば、ここに「.class01{属性: 属性値;}」のような事前設定された属性がある場合、関数を呼び出すのと同じように使用できます。「クラス」属性は Web ページ内で繰り返し構成されます。必要なのはクラス選択を記述するだけで、同じページ内のどこでも同じ CLASS クラスを使用して選択を呼び出すことができます。

ID はタグの ID を表し、ID は JS スクリプトで使用されます。JS がタグの属性を変更する場合、JS はタグの一意の識別子として ID 名を使用します。つまり、ID はページ要素の単なる識別子であり、他の要素スクリプトなどから参照できます。ページに 2 つの ID がある場合、JS エフェクト機能でロジックエラーが発生し、タグ属性を変更するためにどの ID を使用すればよいかわかりません。 CSS の ID は JS に設定されている必要はありませんが、同じ ID はページ内で 1 回しか出現できず、一意です。 p+CSS 愛好家がページ上で同じ ID を複数回呼び出してもページ混同エラーが発生しないことを学んだだけかもしれませんが、W3C やさまざまな標準のために、ID の一意性にも従わなければなりません。ページ。ブラウザの互換性の問題を回避するため。

p CSSページでIDを使用するにはどうすればよいですか?
通常、CSS スタイルを定義するときは、次のように「#」で始まる ID 名を付けます。 #css5{属性: 属性値;} これは、クラスの定義と少し似ていますが、クラスの名前が a で始まる点が異なります。小文字のピリオド「.」と「#」で始まるIDを定義します。 IDの使い方は？ CSS での ID の使用法はクラスの使用法と同じで、クラスを ID に置き換えるだけです。例: CSS スタイルで ID を定義 --- #css5{height:25px;width: 200px;}、ID を呼び出す ---

ID の例

です。

次に、完全な CLASS と ID の例を見てみましょう:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>p CSS中CLASS与ID实例 - -p+CSS-www.pcss5.com</title> 
<style> 
.css5{ width:100px; height:100px; border:1px solid #000; float:left; } 
.css5_class{ background:#FFF;} /* 背景白色 */ 
#css5_id{ background:#FF0000;} /* 背景红色 */ 
</style> 
</head> 
<body> 
<p class="css5 css5_class">我在浏览器下浏览，内容背景将是白色</p> 
<p class="css5" id="css5_id">我在浏览器下浏览，内容背景将是红色</p> 
</body> 
</html>

ログイン後にコピー

次に、上記の例を分析してみましょう: class="css5 css5_class" なぜこのようになるのでしょうか?これは、選択したクラス class css5 および css5_class を呼び出すことと同じです。 class="css5" id="css5_id" ここでは、クラスを class :css5 および id :css5_id と呼ぶことも選択します。

このページではCSSインスタンス、CLASSクラス、IDについてそれぞれ解説していますので、深く理解して区別し、柔軟に対応できるようになると思います。特記事項: ID とクラスの名前を付けるときは、大文字と小文字が区別されるので注意してください。CSS クラス名には中国語を使用しないでください。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

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

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

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

7569

CakePHP チュートリアル

1386

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

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

107

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:18 PM

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

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

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

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

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