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

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

不言

リリース： 2018-06-15 09:23:01

オリジナル

1891 人が閲覧しました

この記事では、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 サイトをご覧ください。