01の10
CSSスタイルシートを作成する
HTML用に個別のテキストファイルを作成したのと同じ方法で、CSS用のテキストファイルを作成します。 このプロセスのビジュアルが必要な場合は、最初のチュートリアルを参照してください。 メモ帳でCSSスタイルシートを作成する手順は次のとおりです。
- 空のウィンドウを表示するには、ファイル/メモ帳で新規作成を選択します。
- ファイル<名前を付けて保存...をクリックして、ファイルをCSSとして保存します。
- ハードドライブ上のmy_websiteフォルダに移動します。
- [ファイルの種類]を[すべてのファイル]に変更します。
- あなたのファイルに "styles.css"と名前をつけて（引用符を付けずに）保存をクリックしてください
02の10
CSSスタイルシートをHTMLにリンクする
Webサイト用のスタイルシートを入手したら、それをWebページ自体に関連付ける必要があります。 これを行うには、linkタグを使用します。 次のリンクタグをpets.htmドキュメントの
タグの任意の場所に配置します。03/10
ページの余白を修正する
さまざまなブラウザ向けにXHTMLを書くとき、あなたが学ぶことの1つは、彼らがすべてのマージンとそれらが物を表示する方法の規則を持っているように見えることです。 ほとんどのブラウザでサイトが同じように見えるようにするには、余白のようなものをブラウザの選択肢にデフォルト設定しないでください。
私は左上隅のページを開始することを好みます。テキストを囲む余分なパディングや余白はありません。 内容を埋めるつもりでも、余白をゼロに設定して、同じ空白のスレートで開始しています。 これを行うには、styles.cssドキュメントに次の行を追加します。
html、body {
マージン：0px。
パディング：0px。
border：0px;
左：0ピクセル。
top：0px;
}
04/10
ページ上のフォントの変更
フォントは、しばしばWebページ上で変更したい最初のものです。 Webページ上のデフォルトのフォントは醜いかもしれません。実際にはWebブラウザ自体の上にあるので、フォントを定義しないと、あなたのページがどのように見えるかは分かりません。
通常、段落のフォントを変更するか、文書全体のフォントを変更することがあります。 このサイトでは、ヘッダーと段落レベルでフォントを定義します。 styles.cssドキュメントに以下を追加します：
p、li {
フォント：1em Arial、Helvetica、sans-serif;
}
h1 {
フォント：2em Arial、Helvetica、sans-serif;
}
h2 {
フォント：1.5em Arial、Helvetica、sans-serif;
}
h3 {
フォント：1.25em Arial、Helvetica、sans-serif;
}
私は段落とリストアイテムの基本サイズとして1emを使い始めました。そしてそれを使って見出しのサイズを設定しました。 私はh4より深い見出しを使うことを期待していませんが、あなたが計画していればそれも同様にスタイルを設定したいと思うでしょう。
05の10
あなたのリンクをもっと興味深くする
リンクのデフォルトの色は、それぞれ訪問されていないリンクと訪問されたリンクの青と紫です。 これは標準ではありますが、ページの配色に合わない場合がありますので、変更してください。 styles.cssファイルに次の行を追加します。
リンク {
フォントファミリ：Arial、Helvetica、sans-serif;
色：＃FF9900;
テキスト装飾：下線;
}
a：訪問済み{
色：＃FFCC66;
}
a：ホバー{
背景：#FFFFCC;
font-weight：太字;
}
私は3つのリンクスタイルを設定しています。デフォルトはa：リンク、訪問したときに訪問し、色を変更し、a：ホバーです。 ：hoverを使用すると、リンク先の背景色を取得し、クリックするリンクを強調するために太字にします。
06の10
ナビゲーションセクションのスタイル設定
ナビゲーション（id = "nav"）セクションをHTMLの中に置くので、最初にスタイルを設定しましょう。 私たちは、それがどれくらい広がっているかを明示し、右側に幅広いマージンを置くことで、メインテキストがそれにぶつかりません。 私はまたそれの周りに国境を置く。
styles.cssドキュメントに次のCSSを追加します。
#nav {
幅：225px;
margin-right：15px;
境界線：中実の固体＃000000;
}
#nav li {
リストスタイル：なし;
}
.footer {
font-size：.75em;
両方ともクリア。
幅：100％;
text-align：center;
}
list-styleプロパティは、ナビゲーションセクション内のリストに箇条書きや数字を持たないように設定し、.footerは著作権セクションをセクション内でより小さく中央に配置します。
07/10
メインセクションの配置
あなたのメインセクションを絶対的な位置に配置することによって、ウェブページ上に留まる場所に正確に留まることが保証されます。 大きなモニターに対応するために私は800pxの幅で製作しましたが、小さいモニターを使用している場合は、それをより狭くしたいと思うかもしれません。
styles.cssドキュメントに次のコードを挿入します。
#main {
幅：800px;
top：0px;
位置：絶対;
左：250ピクセル。
}
08の10
段落のスタイル設定
上の段落のフォントを既に設定しているので、各段落に少しずつ "キック"を付けて、より優れたものにしたいと考えました。 私は段落をイメージだけではなく強調した上に境界線を置くことでこれを行いました。
styles.cssドキュメントに次のコードを挿入します。
。トップライン {
border-top：太い実線＃FFCC00;
}
私はそのようにすべての段落を定義するのではなく、 "topline"というクラスとしてそれを行うことにしました。 このようにして、黄色い線がない段落が必要と判断した場合は、段落タグのclass = "topline"を省略することができます。
09/10
画像のスタイリング
画像は通常、画像の周りに枠線がありますが、画像がリンクでない限り常に表示されるわけではありませんが、CSSスタイルシート内に枠線を自動的にオフにするクラスがあります。 このスタイルシートでは、 "noborder"クラスを作成しました。ドキュメントのほとんどのイメージは、このクラスの一部です。
これらの画像の他の特別な部分は、ページ上の位置です。 私はそれらを整列させるためにテーブルを使わずに、彼らが段落に参加したかったのです。 これを行う最も簡単な方法は、float CSSプロパティを使用することです。
styles.cssドキュメントに次のコードを挿入します。
#main img {
float：left;
margin-right：5px;
margin-bottom：15px;
}
。国境がない {
border：0pxなし;
}
ご覧のように、画像上にマージンのプロパティが設定されているため、パラグラフの横にある浮遊したテキストに対してマッシュアップされていないことを確認できます。
10の10
完了したページを見てください
CSSを保存したら、Webブラウザでpets.htmページをリロードすることができます。 あなたのページは、この画像に示されているものと似ていて、画像が整列し、ナビゲーションがページの左側に正しく配置されている必要があります。
このサイトのすべての内部ページについて、同じ手順を実行します。 あなたは、あなたのナビゲーション内のすべてのページに対して1ページを持ちたいと思っています。