html に css を適応するその２

では html ファイルと css を作成してみましょう、まず簡単な html ファイルです

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=EUC-JP">
<meta name="keywords" content="css,html">
<meta name="description" content="linuxとcss">
<link rev="made" href="mailto:mm@nyanta.no-ip.info">
<link rel="stylesheet" type="text/css" href="btest001.css">
<title>html and css</title>
</head>
<body>
<p> file name : atest001.html</p>
<p> css  file name : btest001.css</p>
試験用  html と css 
</body>
</html>

css ファイルも作成してみましょう。

body {
        color: #000000;
	background-color: #ffffff;
	margin-top: 2%;
	margin-bottom: 1%;
	margin-left: 2%;
	margin-right: 2%;
        line-height: 1.12em;
}

見てみましょうここ見えますか？文字は黒背景は白で見えれば良いのです。

”atest001.html ”を少し変えてみましょうこれを

<h1>大きさ h1 の もの </h1>
<h2>サイズ h2 の もの</h2>
<h3>表示 h3 の もの</h3>
<h4>寸法 h4 の もの</h4>

<body>”と”</body>” の間に追加しますまたファイルの名前も変えておきます。見てみましょうここですどうですか大きさの異なったものが表れたでしょう。別にcss ファイルには何も記入してませんが文字の大きさに関してはなにもしなくても有効なものがあるようです。では css ファイルを変えて見ましょうこのように、追記しました。

h1, h2, h3, h4 {
	border-width: 1px 2px 3px 10px;
	border-style: solid;
        margin-top: 20px ;
	font-family: helvetica, sans-serif;
	line-height: 1.12em;
}	
h1 {
        color: #999933;
	border-color: #00ffff;
}
h2 {
        color: #ff6633;
	border-color: #0000cc;
}
h3 {
        color: #ff0033;
	border-color: #00cc00;
}
h4 {
        color: #669999;
	border-color: #cc0000;
}

ファイルの名前は”btest002.css”です” html”ファイルも” css”ファイルが変更になるので該当場所を変更し当然ファイル名も変更しましょう抜粋はこのようになります。

<link rel="stylesheet" type="text/css" href="btest002.css">
<p> file name : atest003.html</p>
<p> css  file name : btest002.css</p>

見てみましょうここですどうですか変化の様子がわかりますか？では一連の少ない検討の最後にもう少し”css ”ファイルを変えて、それに伴って”html”ファイルも変えたものを見てみましょう、ここです何をしたかってと言えば”css ”ファイルを見てみましょうこのようになっています文字の状態が太い部分を追記しました。

body {
        color: #000000;
        background-color: #ffffff;
        margin-top: 2%;
        margin-bottom: 1%;
        margin-left: 2%;
        margin-right: 2%;
       line-height: 1.12em;
}
h1, h2, h3, h4 {
        border-width: 1px 2px 3px 10px;
        border-style: solid;
        margin-top: 20px ;
        font-family: helvetica, sans-serif;
        line-height: 1.12em;
}       
h1 {
        color: #999933;
        border-color: #00ffff;
         font-size: 1em ;
}
h2 {
        color: #ff6633;
        border-color: #0000cc;
        font-size: 2.2em ;
}
h3 {
        color: #ff0033;
        border-color: #00cc00;
        font-size: 3.3em ;
}
h4 {
        color: #669999;
        border-color: #cc0000;
        font-size: 4.3em ;
}

つまり”font-size: 1em ;”というようなものを追記したのです。ということで実例をあげて見ました、これはどのように作用を及ぼすかという一例ですのでこのような使いかたをする”css”は良くないといわれてますが、そこはもうこらえてくだあさいなあくまで参考として見るようにしてください。

次をみる。？？

前へ|次へ|戻る

html に css を 適応する その２

html に css を適応するその２