HTMLのspanタグのclass属性の使い方は？ class属性の詳しい説明はこちら-htmlチュートリアル-php.cn

HTMLのspanタグのclass属性の使い方は？ class属性の詳しい説明はこちら

寻∝梦

リリース： 2018-08-28 13:54:35

オリジナル

31459 人が閲覧しました

この記事では、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のspanタグのclass属性の使い方は？ class属性の詳しい説明はこちら