スタイルシートの基礎
スタイルシートの構造
スタイルシートの記入は2つの方法があります。
@ <BODY> 〜 </BODY> に記述(個別指定)
A <HEAD> 〜 </HEAD> に記述(一括指定)
<BODY> 間のスタイルシート
<BODY> 間のスタイルシートは各タグに
「style」
を付け加えて記入します。
(例)
記述
<div style = " font-size:16pt; padding:5px; background-color:#FFFFCC; > テスト文章 </div>
↓
表示
テスト文章
<HEAD> 間のスタイルシート
<HEAD> 間のスタイルシートは、
<style>
<!--
スタイルシート記述
-->
</style>
と記述されます。
1.同じタグ全てにスタイルシートを適用する
スタイルシートの記述
タグ名 {スタイル要素1 ; スタイル要素2 ; }
上記のように記述すると<BODY> 間で使用された指定タグ全てにスタイルシートが適用されます。
(例)
スタイルシート記述
div { font-size:16pt; padding:5px; background-color:#FFFFCC; }
↓
本文記述
<div> テスト文章 </div>
2.指定した部分全てに同じスタイルを適用する
<HEAD> 間で、
.クラス名 {スタイル要素1 ; スタイル要素2 ; }
または
#クラス名 {スタイル要素1 ; スタイル要素2 ; }
のように記述すると、本文中(<BODY> 間)の
<タグ名 class="クラス名">〜<タグ名>
または
<タグ名 id="クラス名">〜<タグ名>
の部分に反映される。(.(ピリオド) は class、# は id に適用)
(例)
スタイルシートで以下のように記述
.spantest {color:red;font-size:150%;}
<BODY> 間で以下のように記述
<span class="spantest">テスト文字</span>
とすると、『テスト文字』が『
テスト文字
』と表示される。
id
は一回のみ適用、
class
は複数回使用可。
他タグ部分でも
class="クラス名"
を付け加えると同じスタイルが適用される。
※タグ一覧は使用頻度の高いもののみ抜粋。
▲ ページトップへ
Menu
ブログTOPへ
HTML
HTMLの基礎
タグ一覧
タグ解説
スタイルシート
スタイルシートの基礎
構文一覧
構文解説
その他
応用編
作成時の注意点
作成支援ツール・サイト
参考書籍
関連本
アクセス解析