ウェブサイトの作り方パートII：スタイリングとCSS

で最初の一部Webサイトの作成方法に関するナイトスクールシリーズについて、Webページの骨について少し学びました：HTML。今日のレッスンでは、スタイリングとCSSを使用して衣服をサイトに置き始めます。

上のビデオでは、HTMLドキュメントの要素にスタイルを適用できる3つの方法をご覧ください。それはあなたがすでに見ていると仮定しています最初のレッスン、そうしていない場合は、最初にそれをしたいかもしれません。このレッスンの終わりまでに、Webページ内の要素にスタイルプロパティを追加する方法がわかります。追加の参照資料については、以下のテキストをご覧ください。

必要なもの

HTMLを書くためのプレーンテキストエディター
HTMLをテストするために選択したWebブラウザ
Webがどのように機能するかについてのあなたの知識を強化したいという願望

ご覧のとおり、始めるのにそれほど時間はかかりません。

スタイルとCSSとは何ですか？

CSSは略ですcascadingsそんなにsHeet、そしてそれはあなたのブラウザがWebページの要素がどのように見えるかを解釈するために使用する言語です。 CSS言語は非常に簡単に理解できます。要素の寸法（幅と高さ）、テキスト（重量、スタイル、フォントタイプ、色など）、ポジショニング、間隔（マージン、および間隔にまたがる特定のCSSプロパティを定義します。パディング）。

基本的に、それが要素がどのようにすべきかと関係があるなら見て、CSSに関係しています。上記のメタファーに拡張するために、HTMLとドキュメントの要素はサイトの骨です。それらは構造を提供します。 CSSはあなたのサイトをドレスアップし、見栄えを良くします - またはそうではありません。その部分はあなたのデザインチョップに依存します。

たとえば、書かれたCSSはこのようなものに見えます。テキストに色を追加したい場合、対応するCSSプロパティは驚くことではありません。color。カラープロパティを定義するには、単に入力しますcolor、コロン、スタイルがどうあるべきかを宣言し、セミコロンで終わります。たとえば、color:red;

要素にCSSを適用する方法

もちろん、ページ上の要素がそれらを反映するように、CSSスタイルを適用する場所を知る必要があります。（入力することはできませんでしたcolor:red;意志と結果を期待します。 CSSを使用して、3つの方法のいずれかでWebページの任意の要素にスタイルを適用できます。

インラインスタイル：この方法は、オーバーヘッドを大量に使用せずに1つの要素に適用したい迅速で1回限りのスタイルに最適です。要素のスタイル属性を定義することにより、任意の要素にインラインスタイルを追加できます。例えば：

<p style="color:red;">The text inside this paragraph tag will be red.</p>

インラインスタイルを使用して、それらの間のセミコロンを覚えている限り、複数のプロパティを定義できます。

<p style="color:red; font-family:Helvetica; font-size:20px;">The text inside this p tag will be red, 20-pixels wide, and use Helvetica.<p>

内部スタイルシート：ドキュメント内（多くの場合、頭の中）に、ページ内の要素のスタイルを使用して定義できますセレクター。内部スタイルシートは次のようになります：
上記の例では、h3セレクターです。「このページのすべてのH3要素は、次のスタイルを使用する必要があります」と言っています。クラスまたは要素IDを使用してセレクターを定義することもできます。
外部スタイルシート：これらのスタイルシートは、CSSを.CSSで終了する外部ファイルに移動します（たとえば、style.css。外部スタイルシートの構文は、内部スタイルシートで見たものとまったく同じですが、スタイル宣言は必要ありません。代わりに、次のように外部スタイルシートにリンクします。

<link href="stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />

この例では、私は持っていますstyle.cssStyleSheetsフォルダー内にファイルを提出し、Webブラウザーに「ページをロードするときは、ここでCSSを探します。」内部のスタイルシートのスタイルタグ内にあるものと同じように、内部はすべて同じように見えます。

クラス、ID、および要素セレクターをいつ使用するのですか？

ほとんどの場合、組織のために、外部スタイルシートを使用する必要があります。しかし、どのセレクターを使用するかをどのように決定しますか？すぐにオプションを実行しましょう。

要素セレクター：必要に応じて、要素セレクターを使用する必要がありますほとんどそのタイプの要素は、あなたのページで同じように見えるようにします。したがって、すべてのH2要素を30ピクセルにする必要がある場合は、CSSファイルに次のものを追加できます。
h2 { font-size:30px; }
それ以降、すべてのH2は、あなたがそれを無効にしない限り、そのスタイルを尊重します。
クラスセレクター：クラスは、複数の要素に適用したい広いスタイルに役立ちますが、要素セレクターを使用する場合よりも少し選択的に使用したいスタイルかもしれません。ビデオでは、非常に退屈なものを定義しましたredSOのようなクラス：
.red { color:red; }
テキスト「Red」の前にドット（。）を使用して、このセレクターは私が作成しているクラスであることをブラウザに伝えました。これで、私のページの任意の要素で、class = "red"の属性を追加でき、そのテキストは赤になります。
IDセレクター：前のハッシュ（＃）によってCSSで定義されているIDセレクターは、1つの特定の要素と1つの要素のみです。基本的に、これはインラインスタイルを使用せずに特定の要素のスタイルを調整する方法を提供します。（IDはJavaScriptにとっても非常に便利ですが、それはここでの範囲をはるかに超えています。）my_red_divと呼ばれる赤い背景を持つ800x600px divが必要な場合、次のようになります。
#my_red_div { width:800px; height:600px; background:red; }

これらすべてを実際に見るためにビデオをご覧ください。読書は一つのことですが、それを見ることができるとき、それはすべてより意味があり始めます。

それでおしまい？

一言で言えば、はい！もちろん、CSSにはもっと多くのことがあり、CSSセレクターを処理するよりも高度な方法がいくつかあります。そのため、要素がスタイルを継承する方法を本当に絞り込むことができますが、それは本当に基本です。欠けている唯一のもの：プロパティ！

しかし、私は利用可能なすべてのCSSプロパティを歩くつもりはありません（率直に言って、このレッスンには時間がありません）。プログラミングの性質のほとんどのことと同様に、1つのクイックガイドで提供できるよりも、オプションを検索することから多くを学びます。閲覧したいかもしれないいくつかのCSS参照は次のとおりです。

参照ツールのコメントでもっとお気に入りを聞いてみたいです！私は主にこの種のもののためにグーグル人です。私はCSSの専門家ではありませんが、自分のペットプロジェクトのためにCSSをハッキングするのにかなりの時間を費やしました。私を信じています。

この投稿の著者であるAdam Pashに連絡できます。[保護された電子メール]。あなたも彼をフォローすることができますツイッターそしてFacebook。