GROUPINGグルーピング

スタイルシートの定義を簡略化する方法としてグループ化があります。

グループ化は、次の例のようにセレクタ，セレクタとカンマで区切って並べます。

EM,BLOCKQUOTE.bgred { color: red ; }

EM,BLOCKQUOTE とclass指定のbgred３つのTAGの文字色をred に設定

宣言を並べることでスタイルを一括して定義することができます。

H1 {
 font-weight: bold;
 font-size: 12pt;
 line-height: 14pt;
 font-family: Helvetica;
 }

H1には、bold（濃く）文字サイズを12ｐtに 行幅を14pt 書体はHelveticaに設定

CLASS クラス

TGA指定を越えたきめこまかいスタイルを定義するために、HTML にCLASS属性 が用意されています。

クラスセレクタは、次のようにピリオド＋クラス名称で示し、TAG.クラス名と、.クラス名の方法があります。

P.bgwhite { background-color: #FFFFFF ;}# P TAGで使用可能
P.bgbgblue { background-color: #0000FF ;color: #FFFFFF;}# P TAGで使用可能
.bgyellow { background-color: #FFFF00 ;}# 他のTAGでも使用可能

HTML要素 . クラス名 {スタイルプロパティ｝

HTMLファイルでは、CLASS属性でこのスタイルを利用することができます。

<P class="bgwhite">文字は黒のままで背景が白になる</P>

<P class="bgblue">文字は白で背景が青になる</P>

<HTML要素class="クラス名">コンテンツ</閉HTML要素>

クラス名には、英数で指定します。

ID

HTMLファイルで自由な値を持たせるために、ID属性が用意されています。

IDセレクタは、次のように＃英数が用いられます。

#CS001 { letter-spacing: 0.3em }

<P ID=CS001>Wide text</P>

IDセレクタは、HTMLファイル中で一つの名前のIDしかつけられません。

CONTEXTUAL

CONTEXTUALは、Blockquote TGA の内容にあるP要素には、他のP要素とは異なるスタイルを採用させたいときなどに用います。

使い方は、次の３つめの例のように、TAG＋スペース＋TAGとします。

EM { color: red }
BLOCKQUOTE { color: black }
BLOCKQUOTE EM { color: blue }

<P>

<EM>

この文章の文字は EM { color: red }を適用

</EM>

</P>

<BLOCKQUOTE>

この部分の文字は BLOCKQUOTE { color: black } を適用

<EM>この部分の BLOCKQUOTE EM { color: blue } が適用される

</EM>

</BLOCKQUOTE>

Pseudo-classes and pseudo-elements 擬似クラスと擬似要素

Anchor擬似クラス

リンクに関する擬似クラスでCSS1では次の3種があります。

A:link { color: red }     /* 未表示のリンク unvisited link */
A:visited { color: blue } /* 表示済みリンク visited links */
A:active { color: lime }  /* 表示中のリンク active links */

インライン要素のスタイル定義

SPAN TAGを用いることで、インライン要素としてスタイルを変更することが可能です。

STYLE属性の値は、STYLE＝”プロパティ：値”が入ります。

文字単位での指定を行う場合です。

<P>文字が黒から<spanstyle="color:blue">青になり</span>黒に戻る

ブロック要素のスタイル定義

SPAN TAGはインライン要素として用いるものでしたが、ブロック要素に対してはDIV TGAを用います。

段落など数行に渡る範囲に指定します。

.bgyellow { background-color : yellow }

<DIVclass="bgyellow">
<P>ここの文字の背景色は黄色になります</P>
</DIV>

up上へ右矢印body （BODY-TAGでのページ一括指定）


CSS入門

広告