[Powered by Google Translate] [CSS] [ジョセフ·オング - ハーバード大学] [これはCS50です。 -  CS50.TV] 

今日はCSSの話やカスケーディングスタイルシートことでしょう。 

だからCSSはまさに何ですか？ まあ、2の部分に言葉CSSを打破てみましょう： カスケードとスタイルシート。 カスケードは、もう少し複雑であり、それは我々が別のビデオで説明します何か。 しかし、初心者のため、スタイルシートCSSが何をするかで非常に多くのヒント。 それは、ウェブページのHTMLにスタイルを追加します Webページがどのように見えるか美的変化。 これは、ページ上のテキストのフォントからのコンテンツの位置にすべてを意味 丸みを帯びた箱の角を作ったり、テキストに影を追加するような他のクールなものまで。 あなたも、物事が画面上にアニメーションを作ることのようなクレイジーなことを行うことができます。 

だから私たちは、HTMLとCSSをどのように使うのですか？ 私は書いたこの貧しいそうなサイトを取る。 ロブは今、このサイトを見ていた場合、彼はおそらく、何かのように言うだろう "うわー！私の導入はひどい見えます。ヨセフは、あなたがひどいデザイナーです。" "デフォルトのTimesフォントを使用すると？ヘルベチカはそんなに優れています。" 

だから何はロブが望んでスタイルを適用するための最も簡単な方法かもしれない？ 人々の最も明白な方法の多くは、最初はCSSを書いた 我々は、要素自体のスタイル宣言は右呼ん置くことであった HTMLスタイル属性を使用して。 スタイル宣言は、単に我々は変更したいHTML要素のCSSプロパティで構成されています 財産や末尾にセミコロンの新しい値が続くコロンが続く。 例えば、ロブは、彼の紹介の周りに黒い枠線を望んでいると言ってみましょう。 まずここでロブのDIVにスタイル属性を置く その後、二重引用符内部のCSS宣言を置く： "国境：1pxの黒一色;" 1ピクセルは、境界線の幅を指し、固体は、境界線のスタイルを指し そして最後に色が境界線の色は何であるかを決定します。 

我々は要素に複数のスタイルをしたい場合は、シーケンスでこれらの宣言を記述します。 例えば、ロブは、青色の背景色のヘルベチカの彼のヘッダーテキストを望んでいる場合、 そして、我々はこれをテキストの周りに多くのスペースを行うことができます： スタイル= "フォントファミリー：ヘルベチカ、背景色：青;パディング：5pxの;" 最後のセミコロンは、実際には任意ですが、人々は通常、一貫性のためにそれをに保つ。 

私たちは、クーラーと、より複雑なCSSプロパティの一部を説明する節約できます 別のビデオのために。 あなたの心に何かを持っている場合、単にCSSが続くしたい効果をグーグル おそらくあなたにはかなり良い結果が得られます。 クールなことは、CSSがかなり広いということです 理由の中 - あなたがやりたいものがある場合、そのオッズは -  CSSは、おそらくそれを行うことができます。 我々はこの種のインラインスタイリングスタイリングの呼び出し。 要素のスタイルは、開始タグに沿って、まあ、である。 

実際に組織化されるしたい人々のため、 あなたは、これがすべてどのように見えるか乱雑でイライラを少し取得を開始することがあります。 ページ上のすべての要素のためにこれをしなければならなかった場合には、想像してみて プラス今あなたのHTMLやCSSは、すべての混在と雑然としている。 グロス、右？ これを修正するには、人々は最終的に彼らのHTMLマークアップを分離する上でキャッチ開始 CSSセレクタと呼ばれるものを使用することによって、そのCSSスタイリングから。 CSSセレクタは、宣言が適用される要素を選択するために使用されています。 CSS宣言のリストと組み合わせるセレクタは、多くの場合、CSSルールと呼ばれています。 これらのルールは、オープンとクローズのHTMLスタイルタグの間に置かれる 多くの場合、文書の頭である。 

それは、例を見てはるかに簡単です 非常にシンプルなCSSルールを作成することから始めてみましょう。 まず、のは我々のHTMLのheadセクションにスタイルのタグを入れてみましょう。 次に、セレクタ。 我々は、最も単純なセレクタのひとつ、ハッシュ記号を使用してオフに始めましょう どのそのID属性でHTML要素を選択します。 このケースでは、ロブの導入を表すdiv要素を選択します div要素のID、ロブ続いハッシュ記号を入力することによって。 今宣言。 私たちは、オープンとクローズブレースを追加して、ロブのdivの上で我々の以前のインライン宣言をシフト these括弧の内側に、リフレッシュ、 そして、涼しい、ロブのイントロはまだそれの周りに黒い枠線を引い乱雑インライン醜さを持っています。 

さて、私たちはロブのイントロのH1の内側を選択したい場合は？ あなたは "のがそれにIDを入れた後、我々の以前のスタイルを移動してみましょう。"、と思うかもしれません それは動作しますが、CSSでは、要素を選択させる他の方法を持っている 我々はコンビネータは単純セレクタを混在させると呼ぶもの使用します。 例えば、空白文字がコンビネータとして使用することができる 別のセレクタの内部を生きる1セレクタのすべてのインスタンスを指定します。 それはそれは実際よりも多く、より複雑に聞こえる。 以下に例を示します。 我々は、奪うスペースを追加し、H1でそれをフォロー＃入力されます 別の簡単なセレクタは要素の型を選択し、タグセレクタと呼ばれる div要素または段落のような。 スペースは、すべてのCSS宣言を適用し、我々の2つの単純なセレクタを組み合わせ とid = "ロブ"を持つ要素の中に住んでh1タグに中括弧。 ただ、それが動作することを納得させるために、私は白、リフレッシュにフォントの色を変更します と、見て、ロブのヘッダは今白です。 

この作業のすべてがルールの代わりにインラインスタイルを使用して、そのを示すことを行く 我々ははるかにクリーンなコードを得ることができます。 実際には、このスタイルのブロックが開始された場合は、少し大きくなっ 私も完全に別のファイルにこれらのスタイルを引き出すことができる。 

このドキュメントでCSSなど、この新しいファイルを含めるには、私はちょうどHTMLのリンクタグを使用します。 ここで私は、私は外部スタイルシートにリンクしていることをrel属性でそれを言っている、 と私のhref属性を持つファイルへのパスを指定する。 今私のHTMLマークアップとCSSは、完全に別々のファイルにきちんと整理されてい これは、ほとんどの場合、設計者はHTMLとCSSでの作業好む方法です。 

あなたが迷っている場合には、単純なセレクタは、IDセレクタを含める 先ほど見たもののような、タグセレクタ 同様に、クラス特定のクラスを持つ要素を選択するためのセレクタ、 型のような他の属性で要素を選択するための属性セレクタ= "ラジオ" ラジオボタンの入力、ホバー、フォーカスなどのpseudoselectors用 相互作用は好きなときスタイリングを指定するための要素の上にマウスオーバーが発生します。 

共通のコンビネータは、すべての子供たちのために空白文字が含まれる とコンマセレクタを区別する。 に発生する可能性がある人は、唯一の直接の子供のための矢印を含む 要素の後に発生するすべての兄弟のためにチルダ、 要素の直後に1兄弟のために、プラス記号。 

これらのセレクタとコンビネータを組み合わせることにより、 あなたが指定したWebページ上で実現することができスタイリングの幅を広げることができます より効率的にCSSを記述します。 あなたが私をここに入力してくださいCSSの行だけのカップルで、 私はすぐにこのような何かのようなこの外観のようなものを作ることができます。 

私はジョセフだし、これはCS50です。 

[CS50.TV] 

ええと、私はどこを開始するのですか？ （笑）さて - 私はせずにのことをやってみましょう。 追加 - 私はその文言を変更してみましょう。 ああ。申し訳ありません。