ホームページ > 記事 > ウェブフロントエンド > HTMLのスタイルタグってどういう意味ですか？ styleタグの使い方を詳しく解説
HTMLのスタイルタグってどういう意味ですか？ styleタグの使い方を詳しく解説
- 寻∝梦オリジナル
- 2018-08-22 13:58:3916433ブラウズ
この記事では主に HTML スタイル タグの定義と属性の紹介について説明します。まず、HTML におけるスタイル タグの用途と位置を理解してから、使用されているいくつかのメソッドと詳細なテクニックを紹介します。
html スタイル タグの使用法 タグ:
c9ccee2e6ea535a969eb3f532ad9fe89 タグは、HTML ドキュメントのスタイル情報を定義するために使用されます。
スタイルでは、HTML ドキュメントがブラウザーでどのようにレンダリングされるかを指定できます。
type 属性は必須であり、style 要素の内容を定義します。可能な値は「text/css」のみです。
style 要素は head セクションにあります。
HTML c9ccee2e6ea535a969eb3f532ad9fe89 タグインスタンス:
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>必須属性:
type: text/css: スタイルシートの MIME タイプを指定します。
HTML スタイル タグの使用方法の詳細な説明:
531ac245ce3e4fe3d50054a55f265927 タグ ペアにさまざまなタグのスタイルを記述します (body または h1 にすることができます)。つまり、すべてのインライン スタイルを記述します。一緒に
たとえば、10 個のタグがすべて同じクラスの場合、インライン スタイルに 10 個のタグを記述し、スタイルには 1 つだけ記述する必要があります。
これで、すべて構造 (html)、スタイル (css)、および動作 (js) が分離されたデザイン パターンになりました
<p id="xxx">===><style>#xxx{}</style>
<p class="xxx">===><style>.xxx{}</style>
<body></body>===><style>body{}</style> スタイル タグは、CSS スタイル シート内の位置に応じて 3 つのタイプに分類されます: 1 . インラインスタイルシート
3. 外部スタイルシート
を詳しく説明します
1. 埋め込みスタイルシートは、例えば、 、 < ;p> タグで使用される
の構文は次のとおりです: <p style font-size:20pt>这段文字使用了内嵌样式表，更改了字体大小为20</p>
は、93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 タグの間に記述されます。 html Web ページなので、このページのすべてに有効です。なお、特定のタグ内に記述していないため、そのタグ内でこのスタイルシートを使用したい場合は、定義時にも明記しておかないと不具合が発生しますので注意が必要です。ページ全体が混乱します。例:
<html>
<head>
p.mylayout <style type="text/css">{font-size:22pt; color:blue; border-width:1px; border:double; text-align:center; }</style></head>
<body>
<p class="mylayout">这段文字使用了样式表</p>
<p>这段文字没有使用样式表</p>
</body>
</html>このスタイル シートをすべて使用したくない場合は、以前に c9ccee2e6ea535a969eb3f532ad9fe89 を宣言するときに、最初にこのスタイル シートを使用することを宣言する必要があることがわかります。 Web ページのタグ このスタイル シートは、上記の p.mylayout など、宣言されたタグの後に自己定義のスタイル シート名を追加します。これは、このスタイル シートが Web ページの e388a4556c0f65e1904146cc1a846bee タグ内でのみ使用できることを意味します。テーブルの e388a4556c0f65e1904146cc1a846bee タグで宣言されたこのスタイルを使用する場合、宣言方法は cb434693f9fad3bbc0e4e453c589e3e7 ですスタイル シートの選択を使用すると、同じ HTML タグを使用して異なるスタイルを作成できます。たとえば、段落 e388a4556c0f65e1904146cc1a846bee に 2 つのスタイルを設定し、1 つは中央揃え、もう 1 つは右揃えにするとします。次のスタイルを記述できます:
p.right {text-align:right}
p.center {text-align:center}ここで、右と中央は 2 つのスタイル シートです。次に、これら 2 つのスタイル シートを参照できます。サンプル コードは次のとおりです。
<p class="center">这一段居中显示。</p> <p class="right">这一段是居右显示。</p>
HTML タグを使用せずに、「.」とスタイル シート名を直接使用することもできます。サンプルコードは次のとおりです。
.center {text-align: center}このユニバーサル スタイル シート名にはタグの制限がなく、さまざまなタグに使用できます。例:
<h1 class = "center">这个标题居中显示。</h1> <p class = "center">这个段落居中显示。</p>3. 外部スタイル シート
外部スタイル シートは、スタイル シートの内容をメモ帳に個別に書き込み、作成した Web ページに拡張子 .css が付いたファイルとして保存します。次のコードを追加します (もちろん 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 の間に): <link href="你css文件所在的文件夹" rel="stylesheet" type="text/css">
例:
最初にコードを記述し、p.css として保存します
p.mylayout {font-size:20pt; border-width:1px; color:blue; }それから呼び出しますあなたが作成した Web ページにこのスタイル シートを追加します:
<HTML> <head> <link href="p.css所在的相对路径" rel="stylesheet" type="text/css"> </head> <body> <p class="mylayout"> 这个标题使用了Style 。</p> <p>这个标题没有使用Style。</p> </body> </HTML>
したがって、外部スタイル シートは多くの Web ページから呼び出すことができます。これが外部スタイル シートの利点です。
スタイルシートは連結することもできます。つまり、Web ページで複数の CSS が使用されます。連結の順序は、埋め込み > 内部 > 外部 > ブラウザー独自です
つまり、Web ページに内部 CSS がある場合、外部 CSS への呼び出しは上書きされます (つまり、外部 CSS は機能しません)
CSS スタイル シートを定義するときのネストされた説明:
p b {color:blue;}
使用時:
<p>这段文字在b标签中的为<b>蓝色</b></p>
cursor:handこのプロパティはマウスを手の形に変えます。
【編集者の関連記事】
html emタグの機能とは？ 907fae80ddef53131f3292ee4f81644b タグと 5a8028ccc7a7e27417bff9f05adf5932 タグの違いhtml5 出力タグは何を意味しますか? html5出力タグの使い方
以上がHTMLのスタイルタグってどういう意味ですか？ styleタグの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。