ホームページ > 記事 > ウェブフロントエンド > HTMLのspanタグのclass属性の使い方は？ class属性の詳しい説明はこちら
HTMLのspanタグのclass属性の使い方は？ class属性の詳しい説明はこちら
- 寻∝梦オリジナル
- 2018-08-28 13:54:3531416ブラウズ
この記事では、CSS スタイルと組み合わせて使用する必要がある HTML の spam タグの使用法について説明します。基本的な知識がある人にとっては、すべて簡単です。 。それでは、この記事を見てみましょう
まず、HTMLのspanタグのclass属性の意味を見てみましょう:
spanとは英語でspanという意味ですが、Webページ制作ではhtml タグ 完全なタグは です
タグはドキュメント内のインライン要素をグループ化するために使用されます。
クラスは HTML でラベルのスタイルを定義するために使用され、さまざまなラベルの長さ、幅、高さ、背景色などを定義できます。
たとえば、< ;/span>、main はクラス名で、CSS では「.」で定義されています
開発を下から見てみましょう:
ここに例があります:
<p><span>some text.</span>some other text.</p>
例は次のとおりです:
それが間違っている場合、span 要素内のテキストが他のテキストと視覚的に異ならないように、span はスタイルを適用します。それでも、上記の例のspan要素は、p要素に追加の構造を追加します。
ID またはクラス属性をスパンに適用できます。これにより、適切なセマンティクスを追加できるだけでなく、スパンにスタイルを適用することも簡単になります。
同じ 要素に class 属性または id 属性のいずれかを適用することは可能ですが、どちらか 1 つだけを適用するのが一般的です。 2 つの主な違いは、class は要素のグループ (類似した要素、または特定のタイプの要素として理解できる) に使用されるのに対し、id は個々の固有の要素を識別するために使用されることです。
ヒント: 実際、W3School サイト上の一部のテキストのスタイルが他のテキストとは異なることに気づいたかもしれません。たとえば、「ヒント」は太字のオレンジ色で表示されます。この効果を実現するにはさまざまな方法がありますが、私たちのアプローチは次のとおりです。「ヒント」を使用してspan要素を使用し、次にspan要素の親要素、つまりp要素にclassを適用して、このクラスの子要素に対応するスタイルを指定します。
これは HTML のコードです:
<p class="tip"><span>提示：</span>... ... ...</p>
これは CSS のコードです:
p.tip span {
font-weight:bold;
color:#ff9955;
}以上です。単純な CSS 属性に加えて、span タグを適用することで、タグを他のタグに適用できます。タグ要素、これは CSS スタイルの利点の 1 つであり、使用すると便利です。
これは HTML のスパンタグの別の完全なクラスの例です:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网(php.cn)</title>
<style>
span.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<span class="intro">标题 1</span>
<p>段落。</p>
<p class="important">注意：这是一个很重要的段落。 :)</p>
</body>
</html>画像からわかる限り、これも非常に単純な Web ページであり、いくつかの CSS スタイルを使用すると、スタイル全体を変更できます。たとえば、フォントの色を青に変更します。
写真のように:
さて、上記は HTML の spam タグの class 属性の紹介です。ご不明な点がございましたら、下記までお問い合わせください。
【編集者のおすすめ】
HTMLでベースタグの相対パスを記述するには？ (使い方説明付き)
HTMLのimgタグのsrc属性の使い方とは？具体的な使用方法の分析（例付き）
以上がHTMLのspanタグのclass属性の使い方は？ class属性の詳しい説明はこちらの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。