メモ帳で作成した Web ページを CSS でスタイリングする

CSS スタイル シートを HTML にリンクする

な

取得したら スタイルシート Web サイトの場合は、それを Web ページ自体に関連付ける必要があります。これを行うには、link タグを使用します。内の任意の場所に次のリンク タグを配置します。

ページ余白を修正する

あなたが書いているとき XHTML ブラウザが異なれば、ブラウザごとに余白や表示方法のルールが異なるように見えることもわかります。サイトがほとんどのブラウザーで同じように見えるようにする最善の方法は、マージンなどをブラウザーの選択にデフォルトで設定しないことです。

テキストの周囲に余分なパディングやマージンを設けずに、ページを左上隅から開始することをお勧めします。コンテンツをパディングする場合でも、マージンをゼロに設定して、同じ白紙の状態から開始します。これを行うには、styles.css ドキュメントに次を追加します。

html,本文 { 
マージン: 0px; 
パディング: 0px; 
ボーダー: 0px; 
左: 0px; 
上: 0px; 
}

ページのフォントを変更する

多くの場合、Web ページで最初に変更したいのはフォントです。デフォルト ウェブページのフォント 醜い可能性があり、実際には Web ブラウザー自体に依存するため、フォントを定義しないと、ページがどのように見えるか本当にわかりません。

通常、段落のフォントを変更するか、場合によってはドキュメント全体のフォントを変更します。このサイトでは、ヘッダーと段落レベルでフォントを定義します。以下を styles.css ドキュメントに追加します。

p、だから{ 
フォント: 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 よりも深い見出しを使用する予定はありませんが、使用する予定がある場合は、スタイルも設定してください。

リンクをより面白くする

リンクのデフォルトの色は、未訪問のリンクは青、訪問済みのリンクは紫です。これは標準ですが、ページの配色に合わない場合があるため、変更しましょう。 styles.css ファイルに、次を追加します。

リンク { 
font-family: Arial、Helvetica、sans-serif; 
カラー: #FF9900; 
テキスト装飾: 下線; 
} 
a:訪問した { 
色: #FFCC66; 
} 
a:ホバー{ 
背景: #FFFFCC; 
フォントの太さ: 太字; 
}

3 つのリンク スタイルを設定します。デフォルトの a:link、訪問されたときの a:visited、色の変更、a:hover です。 a:hover を使用すると、リンクに背景色が付けられ、クリックするリンクであることを強調するために太字になります。

ナビゲーション セクションのスタイル設定

ナビゲーション (id='nav') セクションを HTML の最初に配置するので、最初にスタイルを設定しましょう。どのくらいの幅が必要かを示し、右側の余白を広くして、本文がぶつからないようにする必要があります。また、その周りに枠を付けます。

次の CSS を styles.css ドキュメントに追加します。

#ではない{ 
幅: 225px; 
マージン右: 15px; 
ボーダー: 中実線 #000000; 
} 
# { 内の名前 
リストスタイル: なし; 
} 
.フッター { 
フォントサイズ: .75em; 
クリア: 両方; 
幅: 100%; 
テキスト整列: 中央; 
}

list-style プロパティは、ナビゲーション セクション内のリストに箇条書きや数字がないように設定し、.footer は著作権セクションを小さくしてセクション内の中央に配置するようにスタイル設定します。

メインセクションの配置

絶対配置でメイン セクションを配置することで、Web ページの希望する場所に正確に配置することができます。幅800pxに対応できるようにしました 大型モニター 、しかし、小さいモニターを使用している場合は、それをより狭くしたい場合があります.

styles.css ドキュメントに以下を配置します。

＃主要 { 
幅: 800px; 
上: 0px; 
位置: 絶対; 
左: 250px; 
}

段落のスタイリング

上記で既に段落フォントを設定しているので、各段落に少し余分な「キック」を加えて、より目立たせたいと思いました.これを行うには、画像だけでなく段落を強調する境界線を上部に配置しました.

styles.css ドキュメントに以下を配置します。

。熱 { 
border-top: 厚いソリッド #FFCC00; 
}

すべての段落を単にそのように定義するのではなく、「トップライン」と呼ばれるクラスとして行うことにしました。このように、上の黄色の線のない段落を作成したい場合は、段落タグの class='topline' をそのままにしておくだけで、上の境界線がなくなります。

画像のスタイリング

通常、画像には境界線があります。これは、画像がリンクでない限り常に表示されるわけではありませんが、 ボーダーを自動的にオフにする CSS スタイルシート .このスタイルシートのために、「noborder」クラスを作成しました。ドキュメント内のほとんどの画像はこのクラスの一部です。

これらの画像のもう 1 つの特別な部分は、ページ上の位置です。表を使用せずに、段落の一部として配置したかったのです。これを行う最も簡単な方法は、float CSS プロパティを使用することです。

styles.css ドキュメントに以下を配置します。

#メイン画像 { 
フロート: 左; 
右マージン: 5px; 
margin-bottom: 15px; 
} 
。境界はない { 
ボーダー: 0px なし; 
}

ご覧のように、画像に設定された余白プロパティもあり、段落内で画像の横にあるフローティング テキストに対して画像がつぶれないようにしています。

完成したページを見てください

CSS を保存したら、pets.htm ページを Web ブラウザーで再読み込みできます。ページは次の図のように表示され、画像が整列され、ナビゲーションがページの左側に正しく配置されます。

このサイトのすべての内部ページについて、同じ手順を実行します。ナビゲーションのすべてのページに 1 つのページが必要です。