ホームページ  >  記事  >  ウェブフロントエンド  >  CSS スタイルでの HTML SPAN の具体的な使用法は何ですか? (例)

CSS スタイルでの HTML SPAN の具体的な使用法は何ですか? (例)

藏色散人
藏色散人オリジナル
2018-08-14 12:01:462540ブラウズ

この記事では、spanタグの属性、spanタグの役割、spanとdivの違いを中心に紹介します。

HTML スパン コードを使用する簡単な例を示します:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>span标签的使用示例</title>
    <meta charset="UTF-8">
    <style type="text/css">
       p{color: #04569A;}
        span{color: red;}

    </style>
</head>
<body>
<div>
    <p>这里是一段文字<span>html span是重点</span>其余没有变色</p>
</div>
</body>
</html>

その効果は次のとおりです:

CSS スタイルでの HTML SPAN の具体的な使用法は何ですか? (例)

ほとんどの HTML 要素がブロック レベル要素またはインライン要素として定義されていることは誰もが知っているはずです。

ここでの

要素は、ドキュメント内のセクションまたはセクションを定義するブロックレベルの要素であり、大きなコンテンツ ブロックのスタイル属性を設定するために使用できます。

要素はインライン要素であり、ドキュメント内のインライン要素を結合するために使用されます。テキストのコンテナとして使用できます。 CSS と併用すると、テキストの一部のスタイル プロパティを設定するために使用することもできます。たとえば、上の赤い文字。

実際、span にスタイルが適用されていない場合、span 要素内のテキストは他のテキストと視覚的な違いがありません。それでも、上記の例のspan要素は、p要素に追加の構造を追加します。

span と div の主な違いは、div はブロックレベル要素であり、その周囲の要素は自動的に折り返されますが、 はインライン要素のみであり、その前後は自動的に折り返されないことです。また、 タグを

に含めて
の子要素にすることはできますが、その逆は当てはまりません。

ということで、上記では「spanタグの意味」に関する関連問題を詳しく紹介しましたが、困っている友人の役に立てば幸いです。

【関連コンテンツおすすめ】

htmlタグ分類

HTMLタグ


以上がCSS スタイルでの HTML SPAN の具体的な使用法は何ですか? (例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。