相互リンクONE

相互リンクでアクセスアップ!

HTMLタグ スタイルシートでページのデザインを変える
相互リンクONE

スタイルシートでページのデザインを変える

スタイルシート(CSS )とは、ページのデザインを決めるタグの事を言います。
ページのデザイン? 基本の文字・線・リンク等を変化させる事が出来るのです!
下に当ページのスタイルシートを書き出しましたので、これで説明します。

<head>
<title>HTMLタグ スタイルシートでデザインを変える!</title>
<Style Type="text/css">
<!--
A{ text-decoration:none;}
A:link { text-decoration:none; color:#0000ff; }
A:visited { text-decoration:none; color:#ff8000; }
A:active { text-decoration:underline; color:#00cc00; }
A:hover{ text-decoration:underline; color:#ff0000; }
A:hover { background-color:#cccccc; }
tbody {font-size: 10pt;}
h1 { font-size: 13pt;}
h2 { font-size: 12pt;}
h3 { font-size: 11pt;}
h4 { font-size: 10pt;}
//-->
</Style>

</head>

青い部分がスタイルシート(CSS)です。
※head内にスタイルシートを入れます。

リンク部分に対して下記の様になる指示をするタグです。

A{ text-decoration:none;} はリンクの下線を消す意味があります。

A:link リンク最初
A:visited リンクが押された後
A:active リンクを押したとき
A:hover{ text-decoration:underline マウスが乗ったら
A:hover { background マウスが乗った背景色

テキストの大きさを変える!

tbody {font-size: 10pt;} はテキストの大きさを決めます。
普通より1つ小さめで設定しました。


hタグの大きさを変える!

普通使うのに大きすぎて使いにくい hタグ ですが、スタイルシートで大きさを決める事により使いやすく成ります!

h1タグ=13の大きさにしています!h1 { font-size: 13pt;}

相互リンクONE

良い感じかな? このように hタグ の大きさも変える事が出来ます。

豆知識 縦書きに出来る!

<Div Style="writing-mode:tb-rl;">相互リンクでアクセスアップ!</Div>

相互リンクでアクセスアップ!

色々な事が出来ますのでチャレンジしてみて下さい。

スポンサードリンク

New

オススメ

登録サイト

当サイトは内容の正確性・安全性を保証するサービスではありません。
当サイトの情報で被った損害については、一切の責任を負いかねますのでご了承した上で、当サイトをご利用下さい。
このホームページに掲載されている記事・写真・図表などの無断転載を禁じます。
Copyright (C)相互リンクONE , All rights reserved.