スタイルシート





スタイルシートについて













*註　はじめのあいさつは、Javaです。



最近、私はスタイルシートの勉強に取り掛かった。

セレクタ
<P>～</P>
<H1>～</H1>と

デクラレーション(宣言)COLOR GREEN

スタイルシートはセレクタと宣言から出来ていて

このセレクタには、この宣言を適用しなさいというふうになっている



リンク　スタイルシート
このページのスタイルシートは、別ファイルにリンクさせています。


そのリンク先の中でスタイルシートを設定しています。( .cssファイル)


別ファイルでの設定内容


ポイントするだけで水色に変わる
見た場所は赤色に変わる
バックグラウンドは白
文字は青


設定した内容
メモ帳に

body { line-height: 150%; letter-spacing: 0.1em;  
background-color: #ffffee; }
a { text-decoration:none; }
a:hover { background-color:"#ddffff"; }  /* ポイントした時 */
{ font-color: blue; }
A:link    { color: red  }   /* 未訪問のリンク unvisited link */
A:visited { color: blue }   /* 訪問済みリンク visited links */
A:active  { color: lime }   /* 選択中のリンク active links */
H1 { color: #007700;font-size:20pt;} 
p { line-height: 150%;  letter-spacing: 0.1em;}
この様に書いて保存
さらに、名前を付けて保存
保存場所は、私のホームページの置いてあるフォルダ
ファイル名の後ろには　.cssを付けて　okadastyle.cssとした。
HTMLファイルの
<head>のすぐ下には
<META HTTP-EQUIV="Content-type" 
CONTENT="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK REL=stylesheet HREF="okadastyle.css" TYPE="text/css">

と記入
これで外部スタイルシートが効くようになる。
H1の設定はエクセルの機能説明のページで
見出し用に頻繁に使用しています。
「H1で囲んだ部分をグリーン表示しなさい」の意味。

文章<テキスト>の前に<p>と書いただけで
文字間隔と、行間隔と文字色の設定が出来てます。
いちいち面倒なフォント設定をしなくとも済みます。

.htmlではソースの中にコメントを入れるとき
<!--　このようにします　-->　が

.cssでは
/* このようにします */
スラッシュとアスタリクスの間に記入します。

リンクのスタイルシートが、埋め込みスタイルシートよりも優先する。




埋め込みスタイルシート
HTMLのすぐ後ろに入れるのを埋め込みスタイルシート

つまり、文章(テキスト)を書き込むボディの外に置いている。




スタイルシートのインポート
インラインでスタイルシートの追加
　P　の first クラスに　みどり　を宣言している。
　P　の second クラスに　紫色　を宣言している。
　P　の third クラスに　灰色　を宣言している。 

フォント単位はピクセルより　ポイントが良い

ピクセルは正確に出るようで、実は印刷出てないときがある

ポイントはプラウザによって、少しずれがあるが柔軟性があり安定している。

フォントサイズと同じ物


xx-small 

x-small 

small 

medium 
large 

x-large 

xx-large 


i

i

i
スタイルシートについて

リンク スタイルシート

埋め込みスタイルシート

スタイルシートのインポート

リンク　スタイルシート
