スタイルシートの役割として、ホームページやブログの文字や背景、色などを変更してイメージを刷新したり見栄えを良くしたりすることがあります。
この役割の中で、ページ全体に効果が及ぶ記述方法と、ページ内の特定の個所のみに効果が及ぶ記述方法との違いについてまとめて整理してみたいと思います。
<head>～</head>内にスタイルシートを記述します。
スタイルシートがページ内の全体に効果が及ぶ記述方法
<html>
<head>
<title>ここにタイトルを記入します</tytle>
<!--スタイルシート開始-->
<style type="text/css">
h1{background-color:red; color:white;}
h2{color:blue;}
p{color:maroon; margin-left 1px;}
</style>
<!--スタイルシート終了-->
</head>
<body>
<h1>ここに主見出しh1要素を記入します</h1>
<h2>ここに見出しh2要素を記入します</h2>
<p>ここに段落p要素を記入します１</p>
<p>ここに段落p要素を記入します２</p>
</body>
</html>
スタイルシートの説明はこちら：基本的な【HTMLのサンプルソース】コードを掲載します。今まで正常に機能しなかった「枠」のコードも記載しています‐HTML・CSSを学ぶ
スタイルシートがページ内の要素の一部に効果が及ぶ記述方法
スタイルシートの記述で「セレクタ、クラス名、プロパティ、値」と言う記述方法をします。クラス名は特に決まりはなく、覚えやすいもので良いと思います。このクラス名を要素の中で指定してスタイルを適用します。
セレクタ．クラス名｛プロパティ：値；｝
p.c1{color:darkblue;} の要素に説明を加えてみます。
セレクタはp 、クラス名は.c1 、プロパティはcolor: 、値はdarkblue; になります。
個別のスタイルシートをp要素のクラスで指定して文字にスタイルを適用してみます。p要素は１と２とありますが、それぞれ違ったスタイルを適用できます。
<html>
<head>
<title>ここにタイトルを記入します</tytle>
<!--スタイルシート開始-->
<style type="text/css">
h1{background-color: red; color: white;} /* h1要素に対して指定 */
h2{color:blue;} /* h2要素に対して指定 */
p.c1{color:darkblue;} /* class="c1"要素に対して指定 */
p.c2{font-size:80% color:maroon;} /* class="c2"要素に対して指定 */
p{margin-left:1px;} /* p要素に対して指定 */
</style>
<!--スタイルシート終了-->
</head>
<body>
<h1>ここに主見出しh1要素を記入します</h1>
<h2>ここに見出しh2要素を記入します</h2>
<p class="c1">ここに段落p class="c1"要素を記入します１</p>
/* class="c1"を要素に対して指定 */
<p class="c2">ここに段落p class="c2"要素を記入します２</p>
/* class="c2"を要素に対して指定 */
</body>
</html>
セレクタやクラス、プロパティ、値は沢山の種類がありとても覚えるのは大変ですが主要なものだけでも覚えておくと作業がはかどります。一覧にしてメモ帳などのエディタにまとめておけば便利だと思います。 またの機会にまとめたものを掲載したいと思います。
0 件のコメント:
コメントを投稿