田舎でのんびりパソコンライフ

ここでは、スタイルシートのお勉強です。

前項のおさらい・・・

p {font-family:"MS Gothic"; font-size:16px; font-weight:extra-light;color:blue; line-height:16px;background-color : white ;}

というふうに、フォントの属性を記述することで、まとめて変更してくれる。

このページは、前回に、background-color : white ;←を書き加えました。文字部分の後ろが白くなってボーダー模様です。

前ページでは、

このページでは、スタイルシートで、

このスタイルシートももうおなじみのテクニックですね。

具体的には、たとえば「goo」のトップページなんかは、

リンク色　「紺色」、マウスおくと「ワイン色」、すでに訪ねたページは「パープル」ですね。

前ページと同じものを下記に記してます。

<HEAD> </HEAD>の間に、下記のような文章を挿入しています。

■■■■■■■■これより下■■■■■■■■■■■■■■■■

<style　text/css">

<!--

body{background-color:lightcyan;}

p {font-family:"MS Gothic"; font-size:16px; font-weight:extra-light;color:blue; line-height:16px;background-color : white ;}

h1 {font-family:"MS Gothic"; font-size:18px; color:darkcyan; line-height:50px;}

h2 {font-family:"MS Gothic"; font-size:16px; color:darkgreen; font-weight:bold;}

h3 {font-family:"MS Gothic"; font-size:16px; color:red; line-height:24px;}

a:link{color: gray; background: pink; font-size:16px;}　　

a:visited{color: #808080; background: #FEC2F3;font-size:16px;}

a:hover { font-weight: normal; color: #3333FF;text-decoration:none;}

a:active { font-weight: normal; color: #6699FF;}

-->

</style>

■■■■■■■■これより上■■■■■■■■■■■■■■■■

■■■■■■■■■■■■■■■■⑥リンクしてある箇所の飾り指定

LINK　（リンクしてある）　VISITED（すでにリンク先に行った）HOVER(マウスで上にのせた状態）ACTIVE（クリックした瞬間の状態）の

それぞれの状態の属性を設定してみました。

a:link{color: gray; background: pink; font-size:16px;}

a:visited{color: #808080; background: #FEC2F3;font-size:16px;}

a:hover { font-weight: normal; color: #3333FF ; text-decoration:none;}

a:active { font-weight: normal; color: #6699FF;}

使用例↓

↑そのままだと　a linkの状態（文字色はグレー、背景はピンク）色上のあてるとHOVERの状態、（色青、アンダーラインなし）ａｃｔｉｖｅはクリックされた瞬間、ＶＩＳＩＴＥＤは、読み込み済みのリンク。色や、下線あり、なしがマウスを置いて変わることで、ちょっと変化がでて楽しいですね。

ただし、あまりやりすぎると見づらくなるので、有名サイト等を参考に、センスよくしましょう。

フォント指定	font-weight: ▲　;	▲に入る項目(下に行くに従って太字） extra-light light demi-light medium demi-bold bold extra-bold
フォントの形状	font-style:　●　 ;	●に入る項目 nomal(飾りなし） italic(斜体）
文字装飾	text-decoration:　■　;	■に入る項目 none(飾りなし） underline(下線） overline(上線） line-through(取り消し線） blink(点滅）
色の指定	color: ▼　;	blue等、色で指定するか、＃FF6300のように16進数で指定
背景の指定	background: 　▼　;	bｌue等、色で指定するか、＃FF6300のように16進数で指定（上記色の指定と同じ）

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■