超初心者のためのホームページ作成講座
HTML CSS Dictionary Netscape Color AccessUp Links SiteMap
 Home > 超初心者のためのスタイルシート講座 > スタイルシート適用2 > Next 

■ HTML ファイルにスタイルシートを適用 (2)

前のページの HTML ファイルに、今度は別のスタイルを適用してみます。
適用するスタイルシートのソースはこうなります。

body{
 background-color: #00ff7f;
}
h3{
 color: #ffffff;
 background-color: #008000;
 border-style: double;
 border-width: 6pt;
 text-align: center;
 margin-right: 20%;
 margin-left: 20%;
 padding-top: 14px;
 padding-right: 0px;
 padding-bottom: 10px;
 padding-left: 0px;
}
h4{
 color: #ffffff;
 background-color: #ff8000;
 text-align: left;
 position: relative;
 z-index: 5;
 margin-left: 2%;
 margin-right: 25%;
 margin-bottom: -10px;
 padding-top: 8px;
 padding-bottom: 5px;
 padding-left: 10px;
}
p{
 color: #000000;
}
div{
 color: #000000;
 background-color: #ffffff;
 font-size: 10pt;
 position: relative;
 z-index: 4;
 margin-left: 5%;
 padding: 20px 2% 2% 2%;
 line-height: 120%;
}

すると画面はこうなります。同じテキストファイルでも全然違いますね。

画面です

なんとなくスタイルシートって便利っぽいなって思えてきたでしょ。
次のページから設定の方法やプロパティ(属性)について具体的に勉強していきます。


 Home < 超初心者のためのスタイルシート講座 < Back < スタイルシート適用2 > Next