追加スタイル（CSS）：スクラッチパートIIからWebサイトを構築します。
私たちは何をしますか
この章では以下となります。
- サイトのCSSスタイルシートを作成します。
- 私達のページにスタイルシートへのリンクを追加します。
CSSスタイルシートを作成します。
demowebフォルダで、site.cssという名前の新 しいファイルを作成します。
CSSファイル内に次のコードを追加します。
site.css
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 16px;
background-color: dimgrey;
color: #696969;
padding: 3px;
}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #ffffff;
border-radius:
0 0 5px 5px;
}
h1 {
font-family: Georgia, serif;
border-bottom: 3px
solid #cc9900;
color: #996600;
font-size: 30px;
}CSSファイルは、上記に使用するスタイルを定義しています。
- HTMLのbody要素の<body>
- idを持つHTML要素= "メイン"
- HTMLの見出し要素<H1>
ホームページの編集
demowebフォルダで、index.htmlファイルを編集します。
以下に、ファイルの内容を変更します。
index.htmlを
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main Ingredients</h2>
<p>Pages (HTML)</p>
<p>Style Sheets (CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files and
Databases)</p>
</div>
</body>
</html>
»それを自分で試してみてください上記ホームページは、前の章のホームページのコピーです。
私たちは、スタイルシートへのリンク、およびコンテンツの「セクション」を定義するための<divのID = "メイン">要素を追加しました。
変更は赤でマークされています。
ページを編集します
あなたの作業を完了するために、about.htmlで同じ変更を行います。
1.スタイルシートへのリンクを追加します。
2.の<divのid = "メイン">要素を追加します。
about.html
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>About Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
</div>
</body>
</html>
»それを自分で試してみてください続きを読む
私たちの中にCSSについてもっと読むCSSのチュートリアルを 。