ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLにおけるクラスとは何を意味するのでしょうか？ HTML の class 属性の使い方の紹介 (例付き)
HTMLにおけるクラスとは何を意味するのでしょうか？ HTML の class 属性の使い方の紹介 (例付き)
- 寻∝梦オリジナル
- 2018-09-03 17:15:2775929ブラウズ
この記事では、htmlにおけるクラスの意味と、htmlにおけるクラスの使用例を中心に紹介します。左奥にはhtmlクラスの役割の説明もあります。次に、この記事を一緒に読みましょう
まず、HTMLにおけるクラスの意味をご紹介します
class属性は、要素のクラス名(クラス名)を指定します。
class 属性は、スタイル シート内のクラスを指すために最もよく使用されます。ただし、これを使用して、JavaScript を通じて指定されたクラスの HTML 要素を変更することもできます。 HTML の
class= はセレクターであり、特定のタグを識別するために使用される識別子として理解できます。
例:
さらに、一般的なフラッシュファイルは目に見えず、呼び出されるだけです。 Flash ファイルを単独で視聴したい場合や、直接ダウンロードしたい場合は、Flash ファイルの名前をパスに従ってブラウザにコピーし、直接視聴することができます。
注: class 属性は、base、head、html、meta、param、script、style、title の HTML 要素では使用できません。
ヒント: HTML 要素に複数のクラスを割り当てることができます (例:
ヒント: クラス名を数字で始めることはできません。このアプローチをサポートしているのは Internet Explorer だけです。
HTMLのclass属性の属性値:
classname: 要素のクラスの名前を指定します。 1 つの要素に複数のクラスを指定するには、クラス名をスペースで区切ります。
それでは、HTML での class 属性の使用法を見てみましょう:
HTML での class 属性の例を次に示します: HTML ドキュメントでの class 属性の使用:
<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">PHP中文网</h1>
<p>一个编程网站</p>
<p class="important">这里是PHP中文网</p>
</body>
</html>その効果は次のとおりです:
この図のテキストが変更されていることがわかりますが、効果がまだ設定されていないため、p タグのテキストには効果がありません。
classはidのような単なるセレクターで、スタイルを定義した後、htmlタグによって呼び出され、ページのレイアウト、レイアウト、スタイルを実現します。
ここに HTML クラスの別の例を示します:
<style>
#nav{float:left;}
/*id调用*/
.text{font-size:30px;}
.text2{font-size:10px;}
/*class调用*/
</style>
<body>
<div id="nav">
<p class="text">第一行文字PHP中文网</p>
<p class="text2">PHP中文网第二个文字</p>
</div>
<body>以下に示すように、この効果は非常に明白です:
1 つのフォントは 30 ピクセルで、もう 1 つはわずか 10 ピクセルです。 ?これは、クラス セレクターの定義スタイルのレイアウトにすぎません。
HTMLにおけるクラスの役割の説明:
クラスは通常、スタイル設定を統一するために使用されます。たとえば、ul内のすべてのli、そのフォント、背景色などです。すべてのliのクラスを置くことができます。名前は次のとおりです。上で述べたように、スタイルを統一した後、たとえば、異なるスタイルを持つ複数の li がある場合は、異なるスタイルを持つ複数の li を与えることができます。次に、その属性を id で制御します
以上がこの記事での HTML クラスの説明であり、HTML クラスの使用例と機能の説明です。ご不明な点がございましたら、以下でご質問ください。
【編集者のおすすめ】
HTML空間コードの書き方は？ HTML 空間コードの表現方法の概要
HTML 画像を同じ比率に拡大縮小するにはどうすればよいですか? HTML img画像の拡大縮小方法のまとめ（例付き）
以上がHTMLにおけるクラスとは何を意味するのでしょうか？ HTML の class 属性の使い方の紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。