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スタイルタグ
| 説明 | <style> テキストのスタイルを定義します L & lt; リンク & gt; ; |
例 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> なし |
