ホームページ >ウェブフロントエンド >フロントエンドQ&A >HTMLのどこにCSSコードを入れるか
HTMLのどこにCSSコードを入れるか
- 青灯夜游オリジナル
- 2021-05-21 13:53:596246ブラウズ
HTML では、CSS コードで style 属性を直接使用して HTML タグに含めることができます。構文は、「a996ac25fb3e80758e9c6750733c92bfcontent
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
html における CSS コードの配置場所
##1. style 属性を直接使用して html タグ内に配置します
基本的な構文形式は次のとおりです:<标签名 style="属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;...."> 内容</标签名>構文では、style はタグの属性です。実際、どの HTML タグにも style 属性があり、これは次の目的で使用されます。インラインスタイルを設定します。属性や値の記述仕様はCSSスタイルのルールと同じで、インラインスタイルはそれが配置されているタグとその中にネストされているサブタグにのみ影響します。 各 HTML タグを個別にスタイル設定する必要があるため、インライン CSS は使用しないことをお勧めします。インライン CSS のみを使用すると、Web サイトの管理が非常に困難になる可能性があります。ただし、特定の状況では役立つ場合があります。たとえば、CSS ファイルにアクセスできない場合や、単一の要素にのみスタイルを適用する必要がある場合などです。インライン CSS を含む HTML ページの例は次のとおりです:
<!DOCTYPE html>
<html>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
<p style="color:white;">Something usefull here.</p>
</body>
</html>
2. style タグを使用して、HTML ドキュメントの head タグに CSS コードを記述します
基本的な構文形式は次のとおりです。<head>
<style type="text/CSS">
选择器 {属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;....}
</style>
</head> 構文では、通常、style タグは head タグ内の title タグの後に配置されますが、HTML ドキュメント内のどこにでも配置できます。
type="text/CSS" は HTML5 では省略可能であり、より仕様に準拠しているため、この場所は記述しても省略しても問題ありません。
<head>
<style type="text/css">
p {color:white; font-size: 10px;}
.center {display: block; margin: 0 auto;}
#button-go, #button-back {border: solid 1px black;}
</style>
</head> (学習ビデオ共有: css ビデオ チュートリアル)
以上がHTMLのどこにCSSコードを入れるかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。