1行目に適用させる

指定したブロックレベル要素の1行目に表示される部分にだけスタイルを適用させる場合の、記述方法です。
要素名 : first-line { プロパティ : 値 ;}
[ スタイル設定部分 ]
p : first-line { background-color : red ; color : white ;}
[ HTMLファイル部分 ]
<p>日光東照宮(にっこうとうしょうぐう)は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。日本全国の東照宮の総本社的存在である。正式名称は地名等を冠称しない「東照宮」であるが、他の東照宮との区別のために、「日光東照宮」と呼ばれることが多い。</p>
上記のように、1行目にスタイルが適用される。
ただし、ウィンドウの幅が変化することによって、一行目の文字列も変化すると適用される文字列も変化する。

1文字目に適用させる

指定したブロックレベル要素の最初の1文字目に表示される部分にだけスタイルを適用させる場合の、記述方法です。
要素名 : first-letter { プロパティ : 値 ;}
[ スタイル設定部分 ]
p : first-letter { font-size : 2em ; color : red ;}
[ HTMLファイル部分 ]
<p>日光東照宮(にっこうとうしょうぐう)は栃木県日光市にある神社。江戸幕府初代将軍徳川家康を神格化した東照大権現を祀る。日本全国の東照宮の総本社的存在である。正式名称は地名等を冠称しない「東照宮」であるが、他の東照宮との区別のために、「日光東照宮」と呼ばれることが多い。</p>
上記のように、最初の一文字目にだけ設定したスタイルが、適用される。

リンク部分に適用させる

リンク部分にスタイルを適用させる場合の、記述方法です。
通常要素名の部分は「a」になります。要素名の部分に「#ID名」や「.クラス名」を、指定することで、特定のリンク部分に別のスタイルを適用させることも出来ます。
要素名 : link { プロパティ : 値 ;} まだ見ていないリンク部分のスタイル
要素名 : visited { プロパティ : 値 ;} すでに見たリンク部分のスタイル
要素名 : hover { プロパティ : 値 ;}カーソルがその要素を触った時のスタイル
要素名 : active { プロパティ : 値 ;}クリックした時のスタイル
[ スタイル設定部分 ]
■通常のリンク色の設定
a : link { color : 色名 ; } a : visited { color : 色名 ; } a : hover { color : 色名 ; } a : active { color : 色名 ; }
上記の設定は、HTMLファイル内のリンクが張られている所すべてに適用されます。

■特性のクラスが指定されているリンクだけ色を変える
a.クラス名 : link { color : 色名 ; } a.クラス名 : visited { color : 色名 ; } a.クラス名 : hover { color : 色名 ; } a.クラス名 : active { color : 色名 ; }
上記のようにリンクのスタイルを設定し、HTMLファイルの「a」要素にクラス属性を利用して、<a href="リンクファイルのURL" class="クラス名">文字列</a>と記述すると、他のリンクの設定と違う設定が出来ます。

■特定のクラスに含まれているリンクだけ色を変える。
.クラス名 a:link{color:文字色} .クラス名 a:visited{color:文字色} .クラス名 a:hover{color:文字色} .クラス名 a:active{color:文字色}
上記のようにスタイルを設定し、特定の要素(p要素とかdiv要素等)にクラス名又はID名を指定して、その要素でリンク部分を囲むと囲んだ部分だけリンクの設定を変えることが出来ます。
[ HTMLファイル部分 ]
<p class="クラス名"> <a href="リンクファイルのURL" >文字列</a> <a href="リンクファイルのURL" >文字列</a> <a href="リンクファイルのURL">文字列</a> </p>