HTMLのどこにCSSコードを入れるか-フロントエンドQ&A-php.cn

HTMLのどこにCSSコードを入れるか

青灯夜游

リリース： 2023-01-06 11:14:51

オリジナル

6282 人が閲覧しました

HTML では、CSS コードで style 属性を直接使用して HTML タグに含めることができます。構文は、「<タグ名 style="属性名:属性値;">content

HTMLのどこにCSSコードを入れるか

このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。