HTML CSS

CSS (Cascading Style Sheets) は、HTML 要素タグのスタイルをレンダリングするために使用されます。たとえば、先ほど学習したことは、背景色を <body> に追加することです。 <p> タグ内のテキストの色を変更します。これらはすべて CSS を使用して行われます。HTML 要素をレンダリングするために導入された CSS は、次の方法で HTML に追加できます。

- HTML 要素で「style」属性を使用する

内部スタイルシート - CSS を含めるには、HTML ドキュメントの <style> 要素を使用します

参照

- 外部 CSS ファイルを使用する最良の方法

は、CSS ファイルを外部から参照することです。CSS ファイルは .css で終わるファイルを参照し、HTML ファイルは .html で終わります

HTML チュートリアルではこのサイトでは、インライン CSS スタイルを使用して例を紹介します。これは、例を簡略化し、オンラインでのコードの編集やインスタンスの実行を容易にするためです。
このサイトの CSS チュートリアル CSS チュートリアルを通じて、CSS の知識をさらに学ぶことができます。
インラインスタイル

インラインスタイルは、HTML タグ内の style 属性を使用して直接定義されます。以下の例を参照してください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
</head>
<body>
<p style="color: red; margin-left: 20px">
    我是内联样式
</p>
</body>
</html>

上記の CSS スタイルは、<p> タグ内のテキストを変更します。黒にすると、テキストが左に 20 ピクセル移動します。ピクセルはピクセルを指します

コードの実行結果:

内部スタイルシート

インラインスタイルで定義されている場合、2 つの <P> タグを赤に設定するなど、1 つのファイルに特別なスタイルが必要な場合は、両方の <P> タグに CSS スタイルを記述する必要があります (5 ,10<)。 P> タグって、内部スタイルシートを使う必要があるのですね。＆lt; gt; head＆gt;

外部スタイルシート

多くのページにスタイルを適用する必要がある場合、外部スタイルシートが理想的な選択肢になります。

外部スタイルシートは、<link> タグを使用して外部 CSS ファイルを導入します。外部スタイルシートを使用すると、1 つのファイルを変更するだけでサイト全体の外観を変更できます。

たとえば、<body>の背景色を黄色、<h1>タイトルを赤色、<p>を青色に変更するCSSファイルを定義します。 <link>を使用してCSSファイルをHTMLファイルに導入します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>php.cn</title>
    <style type="text/css">
        p{color: red}
    </style>
</head>
<body>
<p>
    我的颜色是在 head 标签里面定义的
</p>
<p>
    我的颜色是在 head 标签里面定义的
</p>
<p>
    我的颜色是在 head 标签里面定义的
</p>
</body>
</html>

プログラムの実行結果:

HTMLスタイルタグ

リソース参照アドレスを定義します

説明

例

CSSスタイルを使用して下線を削除します

body{background-color:yellow;}
p{color: blue;}
h1{color: red;}

。プログラム実行中結果:

スタイルの詳細については、CSS チュートリアルをご覧ください。

学び続ける

新しいファイル

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <p style="color: red; margin-left: 20px"> 我是内联样式 </p> </body> </html>

提出するリセットコード

自動運転

前のセクション次のセクション

チュートリアルリスト

ヘルプの取得