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