[音楽再生] ALLISON BUCHHOLTZ-AU：だから 我々は基本的にはちょうどつもりだ あなたの荒廃を与えるために CSSの、私たちが知っているので それがカバーされていなかったことを すべてのセクションで。 そして、私たちは本当に確認していることを確認したい みんな、あなたの処分で、このツールを持っている そのようにする能力を有するため あなたのウェブサイトは非常にきれいに見える。 そして、あなたはその後、ウェブサイトを構築している場合 おそらくそれはかなり作りたい。 私が意味する、あなたがする必要はありません、 が、私はそれをお勧めしたい。 （笑） あなたは、ユーザーがそれを使用したい場合は、かもしれない それは少し[聞こえない]にしたい。 だから我々はあなたを試してみて、与えるつもりだ いくつかの基本的なツールと理解、 そのため、あなたは外に出て、あなたがいるとき CSSについての事を研究し、 それは完全なちんぷんかんぷんではありません、 CSSのように時々であると。 TOMAS Reimersの：うん。 アリソンはかなりよくそれを言った。 だから私は最初に私達を推測 で始まる必要があり、CSSとは何かありますか？ だから、CSSは素晴らしいです。 CSS-- ALLISON BUCHHOLTZ-AU：それは 私たちのゼミの名前。 TOMAS Reimersの：うん。 それは、その本当に重要です あなたはそれまでにそれを理解しています。 あなただけの1を奪う場合 素晴らしいた場合の事は、それはそのCSSです。 二つは、CSSの略です カスケードスタイルシート。 だから、その中核に、CSSがある スタイルシートは、意味 それはあなたがWebページのスタイルを設定することができます。 そして、それが何を意味するのか、それはだ あなたのウェブサイトにスタイルを追加する方法。 だからスタイルで、我々はすべてを意味する それではありませんstructural-- 色、背景のようなものはそう 画像、ボーダー、のように、パディング、 余白。 私たちは何について話します すべてのことは少し意味する。 だから我々はちょうど先に行ってきたと geditの中でそれらの最大の両方をオープンしました。 だから、これはindex.HTMLをです。 そして、これはmain.cssがある。 だから、main.cssが何もしています。 ALLISON BUCHHOLTZ-AU：今のところありませんスタイル。 TOMAS Reimersの：なし。 あなたが表示されますように、それはだ 本当に醜いサイト。 ALLISON BUCHHOLTZ-AU：それはちょうど明白だ。 TOMAS Reimersの：うん。 ええ、それは、醜いではありません それだけでミニマリストです。 そして、ここではindex.htmlを持っている。 そしてそう迅速なため HTML、アリソンの要約、 あなただけのページについての話をしたい？ ALLISON BUCHHOLTZ-AU：うん。 だから、明らかに、私たちは私たちのHTMLを持っている タグ、名前だけのHTMLファイル。 私たちは、CSSで、ここに私たちのヘッダを持っている 素晴らしさ、which--前に戻った場合。 それはどこですか？ TOMAS Reimersの：ああ。 ええ、あなたが見ることができます。 ALLISON BUCHHOLTZ-AU： そして、ヘッダに気付く このタブヘッダは、右ここまでです。 そして、 "こんにちは、世界！"ある 私たちはただ持っているテキスト ウェブ上で表示する 戻るis--ページ、。 戻る。 ちょうど私たちの体にどのです プレーンテキストをhere--。 また、一つのことに 予告、あなたがここに見れば、 トーマスは、これらを切り替える 私たちのスライドから2。 だから、限り、あなたはすべて持っているように これらの3は、あなたがいいですよ。 彼らは、彼らが好きな順序にすることができます。 どのような最も重要なのはそういうことだ あなたはこれらの3つの事のそれぞれを持っている。 TOMAS Reimersの：クール。 ドキュメントの種類を追加しますか？ ALLISON BUCHHOLTZ-AU：うん。 TOMAS Reimersの：うん。 クール。 ALLISON BUCHHOLTZ-AU：どうやら、 私のマイクは私を好きではない。 TOMAS Reimersの：ああ、ちょうど私達に秒を与える アリソンは、彼女のマイクを切り替えるながら。 そうそう。 だから我々は我々のメインページを持っている。 それはスタイルなしのようなものだ。 我々は多くを持っていない。 私達はちょうど基本的にテキストを持っている。 私たちは、スタイルシートを持っている。 我々はタイトルを持っている。 だから裸の骨太 コンポーネントは、ウェブサイトを作る。 だから、そこから、してみましょう CSSとは何かについて話す とそれがのように見え、すべてのこと。 だからthat--用 ALLISON BUCHHOLTZ-AU： バックスライドへ。 TOMAS Reimersの：スライドに戻る。 そして、アリソンは引き継ぐことができます。 ALLISON BUCHHOLTZ-AU：ウー。 OK。 だからあなたのCSSファイルで、 あなたが必要があるとしている これらのものの多くは、セレクタと呼ばれる。 それはちょうどになります あなたのCSSファイルの基礎。 それはちょうどになるだろう たくさんのこれらの多く。 だから、セレクタ。 これは単に一般的な解剖学です。 私たちは、通過するつもりだ 例、もし君たちは決して理由 私が感じる、私のセクションを見て 抽象的で物事のような 本当に意味がありません。 それは、常に例を参照するのに役立ちます。 だから我々はいくつかのセレクタを持っている。 それはのためにいくつかの識別子になるだろう 我々は、スタイルが適用したいもの。 そして、我々は、いずれかを有することができる ルールと値のセット。 あなたが表示される場合がありますので、セレクタ 体のようなものかもしれませんが、 またはPとの段落、 またはヘッダー、または何、 何でも、あなたのHTMLタグになりたい。 したがって、この場合には、本体を有している。 そして、我々はいくつかのルールを持っている、 これは、この対応 あなたのスタイルが適用されるものに。 したがって、この場合には、我々は 背景色とフォント重量。 だから、これは変更する予定です 何の背景 私たちのHTMLファイルのいずれかのbodyタグ内。 そして、それは与えるために起こっている それこのライトブルー値。 だから、作るために起こっている 背景水色。 そして、本体内のものがある ボールドフォントの太さを持っているつもり。 だから、それだけに起こっている 私たちのすべてのテキストを太字。 そして、これはただ1つのセレクタである。 しかし、あなたはこれらの非常に多くの可能性があります。 そして、我々は表示するようになるだろうとして、 後で、もう少しどのように それが動作し、そこより多くの例。 追加するには？ TOMAS Reimersの：いいえ。 アリソンはそれを得た。 私達はちょうどカットアップするつもりだ ここに私たちの例サイトの例。 それでは、実際にこれをみましょう。 それは完璧だ。 だから、僕はコピー＆ペーストするつもりです 私たちのmain.cssファイルにその権利。 そして、私はそれを保存するつもりです。 そして、我々はそれを実行します。 だから、サイドノート、の1 最もイライラするもの ファイルを保存しない場合で、 あなたは、のように、ページをリロードし、 などが、理由はない 変更が起こっている？ それが起こる。 そこでここでは私達が私達を作ったことを見た ライトブルーの背景ウェブサイト といくつかの太字のテキスト。 あなた場合、私はまた、言及する必要があります 人は何か疑問を持っている 我々がやっている、感じてください 私たちを停止し、私たちを尋ねること自由に。 私たちは完全に喜んでいる フィールドの質問へ。 ALLISON BUCHHOLTZ-AU：明らかに、と CSSは、すべてがそれ自体の上に構築されています。 一つのことにはないのであれば 今意味が、我々 それが後であなたを行き詰まらしたくない。 TOMAS Reimersの：だからしてみましょう 種類のこのを分析。 だから、開始しますか ここでセレクタと？ ALLISON BUCHHOLTZ-AU：うん。 私が前に言っていたとおり、ボディ ちょうど私たちのセレクタはこちらです。 だから私たちは私たちのindex--ああに戻っオーバー行けば。 TOMAS Reimersの：私はちょうど閉じた。 私に第二を与えます。 だから、オープン、index.htmlをファイル。 ALLISON BUCHHOLTZ-AU：クール。 ですから、ここに気づいた場合、我々 これらのボディタグを持っている、右？ だから、セレクタはちょうどに対応 我々が話しているタグ。 右ここにボディだから。 だから我々は何であるかを言っている everything--我々は戻って行くことができますか？ 私はちょうどことがしたい のような画面をタッチします。 それはそんなにクーラーになるだろう。 それらの中でそのように何でも 我々が見たbodyタグ、 テキスト、のように、ちょうどだった、 そして、一般的にボディ 背景のようにいう。 あなたは今までにしたい場合 背景を変更、 つまり、bodyタグ内になるだろう。 ちょうどそれらに適用されるこれらのルールを持っています。 だから我々はに行くした場合 、実際にindex.htmlをand-- 私たちは何かを持つことができます 体外？ 我々が持っていた場合は、同様に、フッタまたは 何か、これに適用されない。 しかし、中には何も これらのボディタグが起こっている この体によって影響される 私たちが作ったセレクタ。 だから、あなたが入力した場合 何か他のものthere-- TOMAS Reimersのは：のは、その家をドライブしてみましょう。 だから、ですので、我々はdiv--があった場合 あなたが持つことができるだけで、別のタグ。 私はそれを閉じますつもりです。 またはのは、この段落してみましょう。 だから、pは段落の略です。 そして、その段落内。 そして私は「これはテキストです。」と言う クール。 そして私は、このルールが適用した 代わりにボディの段落。 あなたはそれが唯一に適用される方法を見ていきます 新たに形成された段落、右 全体ではなく事。 それは理にかなっていますか？ ALLISON BUCHHOLTZ-AU： だから、これはすべての体であり、 しかし、今私たちのセレクタだけ 段落に対応している。 だから我々はちょうど大胆と青を持っている この特定のパラグラフのために、 これが唯一のものであるため、 そのはpタグで囲まれている。 TOMAS Reimersの：ないソート意味をなす 物事が他のものをカプセル化する方法の？ ALLISON BUCHHOLTZ-AU：また、ちょうど 最善の方法の一つ、のように、言って 本当にCSSに慣れて取得する ちょうどこのようなことを行うことです、 ちょうどそれを試してみてください。 それは何かを入力することは非常に簡単です アウト、最新の情報に更新をヒットし、何が起こるかを参照してください。 そして、ほとんどのCSと同様に、 実験は、多くの場合することができます はるかに良いにつながる 直感的な理解。 それ以上に私たちよりちょうど、 あなたに話し、のような。 TOMAS Reimersの：絶対に 100％が、その点については同意します。 我々は戻って、これに行けばそれでは、始めましょう これら二つが何まさに解剖。 だから我々は、この上に2つのルールがあります。 したがって、最初の一つの背景色である。 そして、あなたは私たちがそれを設定したことを参照してください。 値、水色に等しい。 だから、CSSで、CSSはソートです 方法についての非常に緩い あなたは色を定義することが許可されています。 だから、名前でそれらを定義することができます。 また、のような何かを行うことができ、「赤」 そして、私たちはこれに戻った後も、 あなたは背景が赤であることがわかります。 また、私はあなたを思うreally--得ることができます これでかなり創造的な取得することができ、 あなたがすることはできません？ ALLISON BUCHHOLTZ-AU：I あなたが進を使うことができると思います。 あなたことができませんか？ TOMAS Reimersの：うん。 だから、六角を使用することができます。 しかし、私は名前ワイズ考えています。 そこではないか？ ALLISON BUCHHOLTZ-AU： あなたはかなりの数を行うことができます。 ほとんどの色のような、かなりそのあなた のようにname--でき、私は鮭が一つだと思います。 TOMAS Reimersの：私たちはつもりのtryサーモンだ。 ALLISON BUCHHOLTZ-AU：I シャルトルーズがそこにあると思います。 TOMAS Reimersの：うん。 参照してください？ だから、かなり創造的な取得することができます。 ALLISON BUCHHOLTZ-AU：あなた かなり創造的得ることができる。 同様に、あなたが考えることができる場合 色名は、それがそこにおそらく。 あなたが本当に細かいたい場合 詳細は、ヘックスに行くことができます。 TOMAS Reimersの：うん。 だから、進。 あなたたちは、このバックを覚えている場合は 古いPSETから、イメージ回復、 あなたたちは、対処しなければならなかった これらの進値を持つ。 そして、ソートのことが何であるかを要約すると、 六角はそれに格納されている3つの値があります。 だから、2ずつのグループであります。 最初の二つは赤の値を表します。 もう一つは表し 緑の値。 そして、最後の1は青です？ だから、FFは表現するために起こる 進255。 だから、255赤、255を持っている 緑、および青の0。 と値は0から255の範囲である。 聴衆：右。 だから、基本的に、私たちは検索できます 私たちが望む任意の色のために、インターネット、 そして実際に知られてを識別 カラースペクトルコンボ、 その後、我々はそれを置くことができる？ ALLISON BUCHHOLTZ-AU：その通り。 だから、ほとんど完全な制御を持っている 色の上には、CSS内で欲しい。 我々はについて話をするつもりですか 背景画像後で？ それとも私たちはそれをしたいですか？ TOMAS Reimersの：うん。 絶対に。 ちょうどことを示すこと、したがって、最初の 赤と緑は黄色です。 そして、あなたは、いくつかが必要な場合 このを見つける助け、あなた Googleの何かをすることができます 「カラーピッカー。」のように ALLISON BUCHHOLTZ-AU：ああ、それはとても良いことだ。 私は、カラーピッカーが大好きです。 TOMAS Reimersの：colorpicker.com 良い例です。 そしてここで、あなたが持っていることがわかります フルPhotoshopのようなカラーピッカー。 ALLISON BUCHHOLTZ-AU：MM-HM。 また、クールなものはあなたです カラースキームを生成することができます あなたが持っていないように、 のように、色を衝突。 TOMAS Reimersの：そして、 ここでは、ここ16進値アップです。 だから、常に基本的にオンラインで見つけることができます から進値を取得するための場所。 それは、のように、単にソートすることの私達ではありません 数字で世界の色を見る。 それは我々がオンラインで行くことがよりだ そして、私たちが欲しいものを色見つける その後数をダウン。 それは本当に簡単なので CSで物事を参照する方法。 ALLISON BUCHHOLTZ-AU： そしてalso--あります 私は、サイトの正確な名前を忘れてしまった。 しかし、私は、間違いなくあります 、アドビシステムズ社から何かを考える それはあなたのためのカラースキームを生成し、 これは、本当にクールですあなたなぜなら それは時々だdefinitely-- 把握するのは難しい、 ああ、私はこの色を使用したい場合は、 何別の有用な1かもしれない に自分のサイト上の他の場所に使用するには、 のような、それはいいと凝集する。 TOMAS Reimersの：アリソンのが何について話 アドビによる1は、私が思う、Kulerのと呼ばれる。 これは、K-U-L-E-Rです。 ALLISON BUCHHOLTZ-AU：私はそう思う。 私はそれは一つだかなり確信している。 TOMAS Reimersの：私のお気に入りが持っている 常にカラースキームデザイナーなって。 ALLISON BUCHHOLTZ-AU：ああ。 TOMAS Reimersの：now--です ALLISON BUCHHOLTZ-AU： ああ、これは美しいです。 TOMAS Reimersの：そして、あなた 基本的には、のように、言うことができます Iは、互いに3色次たい。 そしてのはいい何かをやらせる。 そして、あなたは一例を得ることができます それがどのように見えるかの。 そして、あなたは、任意の上にマウスを移動した場合 彼らは、それはあなたの進値を与える。 だから開始するには良い方法として、 カラースキームを考える またはウェブサイトでどのような色 一緒にうまく行くかもしれない。 それは驚くほど可能性があるため あなたが思うほど簡単ではありませピックアップする。 そして、他のクールなもの 私はいつもこのサイトについて見つけた あなたが例にヒットした場合、それはよです 何例のウェブサイトを表示 そのカラースキームを使用してのようになります。 とにかく。 戻る実際のCSSに。 ALLISON BUCHHOLTZ-AU：しかし、明らかに、我々 これらの参照は役に立つかもしれません知っている。 TOMAS Reimersの：いいえ、彼ら 間違いなく役立ちます。 だから、二番目のルール、アリソン？ ALLISON BUCHHOLTZ-AU：うん。 二番目のルールはただである 我々のフォントに対応する。 だから、フォントの太さはちょうど一種である of--ので重量はでしょう あなたのような、ちょうどしたい場合も、 正常または、シンナーフォント、のような、 あるいは、この場合、太字、等。 私は忘れる。 あなたがしたい場合it--がある何 通常の、のような、単によりも薄い1？ TOMAS Reimersの：私は実際にはない シンナー1があるかどうか知っている。 ALLISON BUCHHOLTZ-AU：私は忘れている。 だから、フォント重量一般的に我々 ちょうど大胆に使用。 あなたがに本当に取得したい場合 それは、私たちはあなたを表示するつもりだ。 W3Schoolsのは、すべての異なるを持って あなたがフォントのためにできること。 しかし、基本的に、あなたがしたい場合 フォントについては何も変更するには、 それは常にになるだろう、 フォント何か、などである。 あなたがしているのであれば、それは、フォントファミリのようになるだろう 実際の型を変更しよう。 それはあなたの場合、フォント·スタイルになるでしょう 筆記体のようにそれを作りたい、 や斜体、またはその他もろもろ。 あるいは、フォント色、場合 我々はそれを変更するようだった。 TOMAS Reimersの：うん。 だから、それを変更することができます。 そして、ソートのちょうどに 今要約、あなたができるので、 私たちはここにセレクタを持っていることがわかります。 我々は、これらの中括弧を持っている。 そして、我々はルールがあります セミコロンで区切られた。 それは理にかなっていますか？ うん？ クール。 だから、good--ある場合 ALLISON BUCHHOLTZ-AU：バック。 TOMAS Reimersの：のは、具体的に話をしましょう 我々が持っているセレクタの種類を約。 「今、私たちがした原因 ちょうど示すタグの一種。 しかし、あなたたちはそれがもっともらしい見ることができました。 次の2つの段落を持っていると言う ページ上のあなた スタイルにできるようにしたい 1が、他のではない、 あなただけの自分を制限しない 別の実際のHTMLを使用する必要がありますする タグは、それらに異なるスタイルを得た。 だから我々は、3つの基本的なを持っている セレクタの種類。 ALLISON BUCHHOLTZ-AU：うん。 だから我々は何であるタグを持っている 私たちは、今の話をしてきました。 だから、一種のあなたの体またはpのようなものだ。 そして、我々はある、クラスを持っている 我々はCSSファイルでそれを定義するときに、 それは常にドットになるだろう、何でも あなたはあなたのクラスの名前になりたい。 そして、これは複数のものに適用することができます。 あなたが5段落があるとし それらの3の2 同じスタイルをする必要がある、 あなたはそれにクラスを適用する。 そして、これは私たちがそれを行うだけの方法です。 私たちはあなたの例をあげる どこにこれは実際に表示されます。 しかし、あなたはおそらくいくつかのタグを持っていた場合 pは、それの後に、次のように記述し、 クラスは、どんなクラスに等しい あなたはそれに適用する。 私たちが望むので、どんなクラスセレクタ この特定の段落に適用する、 私たちは次のように書くことができます。 もちろん、私は例を考える それがはるか​​に具体的なようになります。 私たちが持っている他の1 私たちが示してidは、ある ハッシュ、またはシャープ、またはハッシュタグ付き。 TOMAS Reimersの：シャープ。 ALLISON BUCHHOLTZ-AU：シャープ。 それも、動作します。 そして、これは本当にユニークである必要があります。 彼らは唯一に適用する必要があります あなたのページ上の一つのこと。 それは特定の段落のかどうかそう、 またはいくつかのリスト内の項目、または何でも、 これは一意である必要があります。 そして、我々はちょうど同じように 、と言うような、クラス= "クラス1クラス2、" これはちょうど私達が持っている何でものIDを指定することもできます。 TOMAS Reimersの：うん。 それでは、間違いなく話をしましょう ここでの例について。 そして私はちょうど潜るするつもりです バックストレートコードに。 それでは、私たちのHTMLを見てみましょう。 そして、私たちは今、1段落を持っている。 これはテキストです。 私はちょうど、変更するつもりです それ。 「これは、テキスト1です。 " そして、我々はするつもりだ 持っている "これは、テキスト2です。" ALLISON BUCHHOLTZ-AU：第二1。 TOMAS Reimersの：うん。 だから我々が今持っている右の "これは、テキスト2は、ある"？ そして、我々は我々がリロードした場合ことを確認するつもりだ 我々は見つけるつもりだ何ページ、 我々はつもりですfind-- ALLISON BUCHHOLTZ-AU：ああ。 TOMAS Reimersの：うん。 私たちは、「これはです見つけるつもりだ テキスト1」、および「この」は、テキストの2である。 ALLISON BUCHHOLTZ-AU：そして、 美しい黄色から。 TOMAS Reimersの：そして、あなたが表示されます 今、私たちのセレクタこと、 これ、pのに適用される、または 段落は、それらの両方に影響し、 それらの両方を満たすため、 彼らは両方のpタグだという条件。 つまり、全体の意味があります。 そこで問題は、何も、である 私たちは、1つを取得したい場合は？ だから、正確にアリソンが言っていたように、 我々はそれを行うには他の二つの方法があります。 私は、IDで始めるつもりだ。 ALLISON BUCHHOLTZ-AU： のは、IDから始めましょう。 TOMAS Reimersの：そして両方 これらの属性である。 だから、属性は、HTML内に存在する。 そして、彼らは何をされている 追加何か あるタグ内 タグ名とは別。 ですから、複数の属性を持つことができます。 うん？ ALLISON BUCHHOLTZ-AU：私はちょうどつもりだった あなたの例からPSET 7から、と言って、 あなたのいずれかが整列するようにしようとした場合 中心部への物事、 あなたが使用している可能性があります 「テキスト=中央に合わせます。」 そして、あなたはおそらくそれに気づいた 集中している必要があります あなたのテキストやあなたのナビゲーションバー。 だから、ただ、属性だ あなたが精通している可能性があること。 TOMAS Reimersのは：たくさんあり​​ます あなたが表示されます属性の。 うん。 PSET 7への適切な参照のように。 私たちは、IDを持っています。 また、持つことができます クラス、このようなもの。 単一のタグは、多くの属性を持つことができます。 だからIDで始まる、のは、我々のふりをしましょう 私にはわからないof-- IDを持っていると思います。 我々は、特別なそれを呼ぶことにします この1ので、私たちはしている 太字にします。また、 下線、および何でも。 ALLISON BUCHHOLTZ-AU：それは つもりスーパースペシャルである。 TOMAS Reimersの：だからこの 一方、我々のid特別を持っている。 だから、それを選択する方法は、その後、ある main.cssがで、pタグを持つのではなく、 あなたはOK、#specialのですか？ そして、それは選択され IDの特別なとの事。 これはすべての人に意味があるか？ 読者：うん。 TOMAS Reimersの：クール。 だから今私たちが戻った場合、 我々はおっとsee--う。 うん。 我々は、それが唯一の選択ことがわかります のid特別に1。 うん？ クールなサウンド。 はい。 読者：何かが持つことができる クラスとIDの両方の属性？ TOMAS Reimersの：はい。 聴衆：OK。 そして、あなたはそれから与えるとどうなるか それ紛争CSSのいくつかのルール？ TOMAS Reimersの：もちろんです。 我々は間違いなくつもりだ そのことについて話をする。 だから、なっていたかを正確に で、あなたはまた、クラスを持つことができます。 それでは、私が持っていたふりをしましょう 3段落と私 最初のスタイルをしたかった 2しかし第三のではない。 さて、あなたの最初のアイデアは、私は、よくあることができる ちょうど第二1のIDを与えることができる。 しかし、あなたはできませんが、IDなぜなら、 正確にアリソンが言っていたように、 一意である必要があります。 だからではなく、IDのか、何をあなた 使用することができ、クラスを使用することができますです。 それが許可するものとclass-- あなたは何を基本的に言うと、 これは、グループの一部として所属。 この場合において、当社グループ 特別と呼ばれている。 そして、我々は、次にやろうとしているものを 私たちは、むしろ、ポンドよりもsay--するつもりだ 私たちは、ドットを使用するつもりだ。 OK？ ポンドとドットことに気付く 唯一のCSSファイル内に存在し、 しないHTML内。 ALLISON BUCHHOLTZ-AU：はい。 重要な違い。 TOMAS Reimersの：私が持っている そんなに闘争を持っていた、 私はHTMLでハッシュを入れているためと そしてちょうど長い間、愚かな感じ。 それはの両方を選択する方法を参照してください そのクラスを持つもの？ クール。 さて、物事は複数のクラスを持つことができます。 のは、私が最初にしたかったとしましょう 2は、黄色の背景を持っている そして第二2は持っている 青のフォントの色。 OK。 私は思います、なぜ私は本当に知らない それをやってみたいが、私はすることができます。 ALLISON BUCHHOLTZ-AU：ない可能性があります あなたのウェブサイトのためにそれをお勧めします。 しかし、我々の目的のために、それはやる。 TOMAS Reimersの：それはありません 優れた配色。 ALLISON BUCHHOLTZ-AU：まあ、黄色 青が私の高校の色です。 でも、私は知りません。 TOMAS Reimersの：アリソンの高い 学校は偉大なカラースキームを持っていた。 [笑い] それでは私たちはこれを呼び出すことができるものである this--呼び出してみましょうので、私たちは特別なを持っている 私たちはかなりあります。 私はこのために、あなたが使用し、提案する はるか説明的な名前。 ALLISON BUCHHOLTZ-AU：ええ、私はだろう 黄色や青、のように、これを呼び出します。 TOMAS Reimersの：私たちではない 本当に、本物のウェブサイトを作る その私たちはそれをやっていない理由です。 しかし、もしあなたが実際に あなたは、実際のウェブサイトを持っていた 記事のヘッダー、のように、持っているかもしれません、 記事の内容、最初の単語、 許可するそのようなこと、 あなたは、はるかに記述的であると。 これらは単に変数のように実際にある。 彼らはどこな方法で名前を付ける必要があります 次のような、like--うん、することができます。 パーフェクト。 だから、背景色。 そして、我々はそうsay--するつもりだ 色を変更する方法はただ「色」です。 そして、私たちはそれを青にするつもりだ。 カッコいい。 だから今我々が持っている 最初の二つは、特別なを持っている。 次はなるだろう "クラス=かわいい。"持っている ALLISON BUCHHOLTZ-AU：そして、あなたはよ 真ん中の1に "かわいい"を追加します。 TOMAS Reimersの：うん。 そして、中央の1に、 追加するには「かわいい」、何が起こる あなただけのスペースがある。 そのため、クラス属性 スペースで区切られたリストです すべてのクラスの それは、そのタグに適用されます。 OK？ この1が属するような、そうではありません と呼ばれる特別なクラスのいくつかの種類 「特別な、スペース、かわいい。」 これは、2つのclasses--に属し 特別なとかわいい。 はい？ クール。 そして、我々が見れば 何が起こるかで、私たちはしている 最初の1が持っていることを見に行く 黄色の背景、黒のテキスト。 第二にひとつ選ぶ ALLISON BUCHHOLTZ-AU：ボールド--has 青のテキストで黄色の背景。 そして、私たちの最後の一つがちょうど持って 我々はそれに割り当てられた青いテキスト。 TOMAS Reimersの：クール？ セレクタはどのように動作？ 恐ろしい。 ALLISON BUCHHOLTZ-AU：私たちはしたいですか 今、競合の話？ TOMAS Reimersの：そうそう。 絶対に。 あなたのであれば、何が起こる 競合している、右？ まずは1をふりをしましょう 何かをセットアップしlike-- ALLISON BUCHHOLTZ-AU：たぶん この1は、背景を変更する？ TOMAS Reimersの：うん。 だから我々はするつもりだ "かわいい" サーモンの背景を変更する。 ALLISON BUCHHOLTZ-AU：あなたはただでいる すべての偉大な色今日、トーマス。 TOMAS Reimersの：うん。 私は私ができるがわかったので、 実際の色として鮭を使用しています。 だから我々は唯一のことをやろうとしている。 私はまた、サンセ​​ットは実際の色だと思います。 読者：サンセットの本当の色？ ALLISON BUCHHOLTZ-AU：それを試してみましょう。 TOMAS Reimersの：このデモの後 ケースでは台無しという理由だけで、 私は、デバッグされたくない。 だから我々は鮭が本当の色を知っている。 だから、上の任意の推測 何が起こるだろう？ ALLISON BUCHHOLTZ-AU：任意のアイデア？ 読者：[聞こえない]。 TOMAS Reimersの：うん。 だから、それが正確に右だ。 基本的に、それが取る それが与えられた最後のルール。 ALLISON BUCHHOLTZ-AU：だからこれは カスケードが有効に出番。 TOMAS Reimersの：では、どのように覚えている カスケードスタイルシートことを持っていた？ だからによって、我々は一種の意味 我々はルールの束を持っていること 互いの上に適用され、そして 彼らはまた、互いを上書きすることができます。 ALLISON BUCHHOLTZ-AU：だから 下部にどんなの 上部にあるの何よりも優先されます。 あなたは完全にルールを持つことができ 事前に何かを否定する。 あなたがなりたい理由でもあります あなたがスタイリングしているときは注意してください、 だから、ルールを作成していないこと あなただけの完全にオーバーライドしています。 TOMAS Reimersの：または多分あなた ルールを上書きしますか。 ALLISON BUCHHOLTZ-AU：または多分あなたが行う。 はい。 TOMAS Reimersの：あなたが持っているふり ほとんどのものに適用されるクラス、 しかし、あなたが、変更したいとしましょう 赤とフォントに背景色 ほとんどのための大胆な重量 物事が1のために、 あなただけの背景色に​​したい 赤はできますが、他のすべてが欲しいために プロパティは、あなたが何かを行うことができます 「、フォントの太さ=ノーマル "のような これ、その大胆な変更を元に戻すだろう。 うん？ ここでも、最良の方法は、私が思う アリソンは、それが、ちょうど練習であることを特徴とする。 ALLISON BUCHHOLTZ-AU：実験。 TOMAS Reimersの：練習、練習、 練習、そして実験。 私が考える多くの人を知っている CSSは推測·アンド·チェックのちょうどたくさんある 一日の終わりに、どこかの あなたは、something--などをやってみたい あなたが大まかなアイデアを持っていますが、 あなたはまだ、おそらく必要があります 確認するためにそれを試してみること あなたはそれがどのようなものか知っている。 読者：あなたが適用している クラスは、複数の 同じ段落に またはセクション、それはありません 何でオーダーすることができます 引用符にそれらを入力する？ TOMAS Reimersの：いいえ、全然。 ALLISON BUCHHOLTZ-AU：何が問題である あなたのCSSスタイルシート内の順。 読者：あなたが質問を繰り返すだろうか？ TOMAS Reimersの：ああ。 ALLISON BUCHHOLTZ-AU：以内 あなたがクラスを与えているクラス、 HTMLで何かに、い それは彼らがにいるどの順番は関係？ それは順序が重要ではありません。 重要なのは順序である あなたのCSS内のクラスセレクタ、 あなたのスタイルシート内。 TOMAS Reimersの：サウンド良い？ ALLISON BUCHHOLTZ-AU：ラブリー。 TOMAS Reimersの：そして、 我々はto--継続するつもりだ ALLISON BUCHHOLTZ-AU： 私たちは、次のものはありますか？ 私は忘れる。 ああ、私たちは一例を持っている。 しかし、我々は種類のものをやった。 私たちは、その場での例をやった。 TOMAS Reimersの：私たちは、に行く すぐにセレクタを組み合わせる。 ALLISON BUCHHOLTZ-AU：ああ、 私たちは、セレクタを組み合わせることを得る。 TOMAS Reimersの：だから、いくつかの 例では、我々が持っているである ＃dog--ポンド、またはハッシュタグ、 またはシャープ、または何 あなたはthat--シャープを呼び出したい。 ALLISON BUCHHOLTZ-AU：シャープ犬。 TOMAS Reimersの：次に、.petsを持っている。 何かが犬のIDを持って、 ページ上の唯一の1の犬があります。 何かがのIDを持ってい 一つだけ猫が猫あります。 ページ上の多くのペットがあるかもしれません。 私たちはクラスのことを与えた理由です。 あなたは、pの例を持っている。 そして、そのようにの1 最後の例、その 我々は話をしていないものです、 あなたがそれらを結合するときに起こることです。 p.petsだから。 そのためそれでは、に戻ってみましょう コー​​ドとうんanother--紹介する。 だから、ここに戻って。 ALLISON BUCHHOLTZ-AU：I これはreally--あるように感じる ちょうど例を通して見ているよう 本当にこれを学ぶための方法です。 だから、私たちがやっていることだ。 TOMAS Reimersの：それでは我々のふりをしましょう 右側のみ、テキスト2を選択するようにしたいですか？ だから我々は間違いなくできない IDでそれを行う。 さて、私たちはとのことを行うことができます IDが、それはIDを持っていません。 私は1つを追加しますが、それではふりをしましょう​​可能性 私は1つを追加したくなかったことを またはそれは、すでに何か他のものを持っています。 私はそれでそれを行うことはできません。 タグは、右、間違いなく一意ではありません？ そして、どちらもクラスです。 しかし、あなたはこれらの事を組み合わせることができます。 のは私たちが何かをしたかったとしましょう これだけのものに適用されている クラス特別を持って これはかなりのクラスを持っている。 だから何あなたがすることができることは、main.cssがしている あなたがのは、最初にこれを削除させて、言うことができます。 あなたは、これらを組み合わせることができます。 だから、。特殊行うことができます。 スペースがありません。 ただ.special.pretty。 何それが意味するものです その特別なとかなりの両方です。 それは理にかなっていますか？ そして、我々はここに行けば、何 あなたが見ることになるだろう この規則は、のみに適用されている それらの両方を有する2つ目。 そして、あなたは多くのことのためにそれを行うことができます。 あなたがしてみましょうsay--できる 私は思ったふり かなりのクラスを持っていることを行う また、段落タグである。 だからp.pretty。 のは、私が持っていたことふりをしましょう タグ本体にかなり何か。 OK？ 私はこれを実行すると私ができる それが唯一だということがわかります ある物事に適用するつもり かなりクラスで段落。 そして、あなたは、これらを組み合わせることができます 基本的に、あなたが好きなだけ。 だから、単にそれらを一緒に置くことができます。 それは理にかなっていますか？ ALLISON BUCHHOLTZ-AU：だから この種の方が便利です トマスは多分、先に言っていたとき、 あなたは非常に複雑なウェブサイトを持って、 あなたがすでにたくさんある 書かれたこれらのルールの、 そしてあなただけに必要 前から2を組み合わせる。 全体ではなくを書くのと同様に 新しいセレクタとそこにそれを変え、 あなただけの組み合わせることができます それらは、それが重なる。 TOMAS Reimersの：または 時々かゆうパックで見つけるかもしれない その一つのクラスがあります 青のようなフォントの色を行い、 そしてその別のクラスがあります 背景青になります。 そして、それだけでは動作しません。 だから、特別な場合、どこを書く それは両方を持っている場合like--しかし、あなたは何をしている やろうとして使用すると、するつもりである 青のこの日陰この1を作る この1つの青色のこの他の陰。 右？ ALLISON BUCHHOLTZ-AU：グッド 例外のそれらの種類の。 TOMAS Reimersの：へだから、 問題について考える あなたがそれらを結合するときには、発生する可能性がある。 クール。 だから、戻って私たちのプレゼンテーションに。 ALLISON BUCHHOLTZ-AU： 私たちはほとんどがしています。 TOMAS Reimersの：そしてそれ 接続停止しました。 ALLISON BUCHHOLTZ-AU：ああ、ない。 ALLISON BUCHHOLTZ-AU：CSで オフィス、インターネットがダウンした。 ああ、皮肉。 TOMAS Reimersの：だから幸いにも、我々はできる インターネットなしで現在、私は推測する、 私たちはここですべてのスライドを持っているので。 それでは、について話しましょう タグの関係。 ALLISON BUCHHOLTZ-AU：右。 だから種類の行く トマスが言ったことのオフ、 これはそれを行うにはちょうど別の方法です。 だから我々はいくつかの親を持つ 子セレクタとセレクタ。 だからここに、この例では、我々はいくつかを持っている クラスのナビゲーションバー、クラスボタンでボディ。 ああ。 TOMAS Reimersの：ああ、申し訳ありません。 ALLISON BUCHHOLTZ-AU：そして、 基本的に、これが意味する のように、すべての子を選択している セレクタのこれらの種類のすべて、 この親セレクタ内。 そして、それらは唯一のものである それは今までに適用するために起こっている。 あなたかどうかは知りません より良い方法を持ってof-- TOMAS Reimersの：だから私 考えるための方法を推測 このことについてどのように前に覚えている 私たちは、ソートのように一緒にそれらを置く。 そして、その一つの要素を意味する これは、これらのすべてに一致します。 これが何を言っていることは、私です あなたはすべてを一致させたい 私が欲しいsome--内 あなたセレクターを見つける。 そしてその中で、私が欲しい あなたは新しいことを一致させます。 右？ だから、CSSで、それは約ソートのすべてです これらの項目を一致させることができるという。 そして、あなたが一致するように試みることができる 他の項目内の項目。 それでは、実際に例を実行してみましょう そして我々はそれが明確と思います。 それでは、私たちは特別な持っているふりをしましょう​​、 特別かなり、何でも。 そして、我々はOK、リンクがありますか？ だから、リンクである、覚えている。 それは、どこにでも行くことはないだろう。 そして、我々はそれを与えるつもりだ クラス·リンク、私は推測する。 のはそれを与えてみましょう 私にアイデアを与えるclass--。 ALLISON BUCHHOLTZ-AU：クール。 TOMAS Reimersの：-COO-レッツ それはかなりクラスに行く。 何故なの？ ALLISON BUCHHOLTZ-AU：OK。 TOMAS Reimersの：だから 今はかなりのもの 背景を作るしようとしている ブルー、サーモンの背景色。 それは理にかなっている。 そして、我々はthis--を行う場合 ALLISON BUCHHOLTZ-AU： あなたは、テキストを追加しますか そうハイパーリンクは、実際に表示さ？ TOMAS Reimersの：それ 良いコールでしょう。 ALLISON BUCHHOLTZ-AU：「正しい原因 今、私たちは何も得るだけのつもりだ。 TOMAS Reimersの：これはリンクです。 「これはリンクになっています。」 ああ、これが起こっている 別のリンクであると。 のはそれをクラスを挙げてみましょう "クール。" あなたが正しい。 クール。 だから、今の我々はこれをつかむつもりだ。 私たちは、1をスローするつもりだ。 私たちは一つを持っている 特殊なタグ、およびまた、我々 かなりタグ内の1を持ってしようとしている。 そして今、私たちはするつもりだ何 やる我々はcool--するつもりだです 我々はそれが何をすべきかをしたいですか？ ALLISON BUCHHOLTZ-AU： 我々はそれを大きくすることはできますか？ TOMAS Reimersのは：それに境界線を挙げてみましょう。 ALLISON BUCHHOLTZ-AU：私たちは、国境可能性があります。 TOMAS Reimersの：うん。 だから我々は何かをやろうとしている のように、国境is--、私たちがしている すべての第二でこれを説明するつもり。 今のところ-- ALLISON BUCHHOLTZ-AU：ボックスモデルに。 TOMAS Reimersの：しかし、今のところ、私たちはしている ただそれを境界線を与えるつもり。 だから何それが意味することはあなたがしているである これらのリンクを見に行く。 そして、あなたは彼らが持っていることを確認するつもりだ これらの、のような、醜い黒い枠、その クールです。 ALLISON BUCHHOLTZ-AU： 弊社のウェブサイトはとてもきれいだ。 TOMAS Reimersの：うん。 弊社のウェブサイトは素晴らしいです。 したがって、これら2はリンクであり、彼らが表示されます。 今度は、私をふりをしましょう これだけをやってみたかった それは何かの中ではなかった場合、 その鮭の背景を持っていた。 だから、これを覚えている 鮭の背景を持って、 それはかなりクラスのだから。 しかし、我々は唯一の冷却することを言いたい クラスでクラスで、特別なされていない かなり、その境界線を持っている必要があります。 さて、あなたは何を行うことができますです .cool、、。特殊、スペースを言うことができます。 あなたが考えるときそして、それは、何をやっている それについて、それは基本的に言ってあり、 [OK]を、私にすべてを見つける それは特別にマッチします。 そして、これらのタグの中、見つける 私にクールだすべてのもの。 ALLISON BUCHHOLTZ-AU：だから別の方法 それはこれについて考えて良いかもしれませんが、 Cに戻ってそれを持って来るである ちょうどスコープのアイデアのように。 だから、あなたには、いくつかを持っているとき もののようなセレクタ、 私たちはこの前のために働いてきたことを、 あなたのWeb​​ページ全体、あなたのHTMLのすべて 右、あなたの範囲内にある？ しかし、我々はこれらを持っているとき 親子関係、 あなたはどこで絞込みしているかのようです あなたは、特定の場所に探しています かのように、のような、私たちは内を探している 代わりに特定の機能 私たちのファイル全体の。 聴衆：だからこのことを念頭に置いて、だろう 我々はchanged--持っていた場合、それは重要だっいる ALLISON BUCHHOLTZ-AU：オーダー？ 読者：CSSで--theクラス 、スペースを.coolする、。特殊？ ALLISON BUCHHOLTZ-AU： はい、なぜなら、その それがスコープ、と言うでしょう 涼しいているすべてのもの、 その後何has--を見て 私は、この場合には、のように、意味 私はそれはそれを変更したとは思わない。 TOMAS Reimersの：私たちは何を言っていた場合は？ ごめんなさい。 ALLISON BUCHHOLTZ-AU：我々の場合 それはその後冷却し、する範囲 特別の外にものを探す、 実際には、同じである。 TOMAS Reimersの：だからそれはないだろう。 ALLISON BUCHHOLTZ-AU：それはないでしょうか？ まあ、ああ。 私は間違っている。 TOMAS Reimersの：だから理由 それはdifferent--共通mistake--だ されている、今だけ リンクは右、涼しい持って？ 私はあなたたちに私の質問は推測する、 このページの何が.coolにマッチして？ 2タグは右、ここにありますか？ これは、この1と、この1である。 どちらも、クールに一致する。 他には何もしません。 だから、あなたが言った場合には、.cool、スペース、 。特殊、あなたが言おうとしているのか、 これらのタグの中、特別な何ですか？ ALLISON BUCHHOLTZ-AU：フム。 それは右it--ものだ。 ので、それはここにちょうど何かのようなものだ。 TOMAS Reimersの：だからそれは何も選択しない。 ALLISON BUCHHOLTZ-AU：付きのに対し 特別な、我々はここで、これらのタグの中だ。 TOMAS Reimersの：それらとそれら。 聴衆：OK。 だから、フォワードからこれらのタグはスラッシュ？ TOMAS Reimersの：はい。 それは理にかなっていますか？ どのようにそれは基本的にだ 範囲を絞り込むしようとしている。 ALLISON BUCHHOLTZ-AU：うん。 私はそれはおそらくだと思う それについて考えるための最も簡単な方法。 TOMAS Reimersの：だから我々はこれを発見し、 我々は、この両方の一致した特別なを見つけた。 そして、我々は内に、求めている これらの人は、クールな何ですか？ そして、この1つの中、この1のクール。 この1内では、何もクールだん。 だから、これは残っている唯一のタグです。 ALLISON BUCHHOLTZ-AU：涼しいのに対し ちょうどそこにこれらのAタグ内である。 TOMAS Reimersの：その通り。 そして、それらの中で特別な何ですか？ 何もない。 今、私は言うだろうものです スペースがなかった場合には、 あなたはクールでspecial--何を求めている または右、かなり、特別な何ですか？ あなたが.special.pretty言うなら、それはだ .pretty.specialと同じ。 スペースを削除すると何であるので、 あなたは。特殊言うとき、される尋ね、 [OK]を、求めている、 そのものは特別ですか？ その後、それらのどの ものもかなりあり、 その文法的には同じです、 言い値として、かなり何、 次にそれらのため、特別にも何ですか？ 右？ それは、の違いだ 何が何であるかの範囲内だ。 聴衆：OK。 TOMAS Reimersの：うん。 恐ろしい。 このことを念頭に置いてそこでthen-- ALLISON BUCHHOLTZ-AU：私は、私たちの最後だと思い 事は（FANCY BRITISH ACCENT IN）である ボックスモデル。 TOMAS Reimersの：box-- [笑う] 私はアリソンはそれを言う方法を愛する。 ボックスモデルの事だから。 ALLISON BUCHHOLTZ-AU：ちょうど持っている ボックスには、私はあなたのボックスモデルになります。 TOMAS Reimersの：それでは、そのことについて話しましょう​​。 だから、今私たちは多くのことを費やしてきた 時間のセレクタの話。 今では、あなたたちは次のように、おそらく、 あなたが知っているselectors--の巨匠、 正確にそのコンテンツを選択する方法 あなたが画面に操作したい。 だから今の質問は、どのように 正確には、それを操作することができますか？ だから私は、最も基本的な推測 そのことについて考えるための方法 よく、まさに、ある CSSの要素とは？ 私たちは多くの時間を費やしてきた について話して、タグが何であるか、 または最も基本的なものです タグの表現？ について考えるための良い方法 つまり、鮭は何形状のですか？ 、のように、どのような形状である サーモン色の背景？ 聴衆：それは長方形です。 TOMAS Reimersの：それは右、矩形の？ ALLISON BUCHHOLTZ-AU： トリックの質問ではなかった。 [笑い] TOMAS Reimersの：しようとしていない この後半のあなたたちをだまして。 だから我々はこの四角形を持っている。 そして、タグは右、pは？ だから、私たちは良い与える 信念その段落 で、矩形として表現さ​​れ 、ブラウザの心に少なくともいる それは。 ALLISON BUCHHOLTZ-AU：私は意味、 ブラウザは、一般的に長方形である ので、それは理にかなっています。 TOMAS Reimersのは：アイデアはここにある CSS内のタグのすべてのこと 長方形として表されます。 すべての矩形の4つを有する CSSによると部品、OK？ あなたは、実際のコンテンツを持っている。 テキストがどこにあるからだ。 ALLISON BUCHHOLTZ-AU： たぶんあなたの絵。 TOMAS Reimersの：うん。 あなたは、あるパディングを、持っている ホワイトスペースのほんのいくつかの種類。 その後、境界線を持っている。 そしてあなたは、余裕を持っている ホワイトスペースは、その外にある。 だから、意味がありません 誰にも、私たちはしている 第二のためにそのことについて話をするつもり。 だから、右ここでは、やろうとしているものを 我々はOK、いくつかのdivを作成するつもりですか？ I--ながらすみません ALLISON BUCHHOLTZ-AU：私はのように感じる 私たちは、かわいい絵を置く必要があります。 TOMAS Reimersの：我々は間違いなくすべきである。 ALLISON BUCHHOLTZ-AU： 私は皆のように感じる 恩恵を受ける かわいい絵は、すべてのです。 TOMAS Reimersの：私たちすることができます A--からのすべての利益 聴衆：うん、確かに。 TOMAS Reimersの：OK、涼しい。 だから我々はかわいいを置くべき どこかで絵。 ALLISON BUCHHOLTZ-AU：私はのように感じる かわいいバニーは今便利です。 TOMAS Reimersの：確かに。 ALLISON BUCHHOLTZ-AU：週の終わり。 何かを持っているadorab-- TOMAS Reimersの：どのように子猫試合？ ALLISON BUCHHOLTZ-AU： 子猫は、あまりにも、動作します。 TOMAS Reimersの：クール、なぜなら そのためのサイトがあります。 それは、PlaceKittenと呼ばれています。 ALLISON BUCHHOLTZ-AU：それは素晴らしいことだ。 TOMAS Reimersの：はい。 ALLISON BUCHHOLTZ-AU：ちょうどのように、のために、 あなたのウェブサイト内のプレースホルダのイメージ。 TOMAS Reimersの：MM-HM。 PlacePuppyもあります。 そしてPlaceBaconがあります。 ALLISON BUCHHOLTZ-AU：PlaceBacon？ 本当に？ TOMAS Reimersの：ああ、私たちはしないでください ここではインターネットアクセスがあります。 ALLISON BUCHHOLTZ-AU：[どよめき] 悲劇。 TOMAS Reimersの：それ以外の場合は、 私はあなたたちを示すであろう あなたのウェブサイトで画像を配置する方法。 我々はこれを取得しようとするつもりだ 私たちが行く必要が前に働いて。 しかし、今のところ、私たちはしている その後色で話をするつもり。 私たちは、kittens--の写真を入れたい ALLISON BUCHHOLTZ-AU：私たちはやった。 TOMAS Reimersの：--theインターネットの 一瞬のためにダウンしている。 だから我々は2 divを持って、私たちはしている 彼らに2のIDを与えるつもり。 我々はそれを呼び出すするつもりだ 「第一」および「第二」 そうイド= "最初" そして、我々は彼らに2つの色を与えるつもりだ。 では、どのように何かを選択してください 「最初」のIDを持つ？ ALLISON BUCHHOLTZ-AU：ドットまたはハッシュ？ 読者：シャープ。 TOMAS Reimersの：シャープ、完璧。 シャープ、ハッシュ、何でもwe-- ALLISON BUCHHOLTZ-AU： 物事の多くは、それを呼び出します。 TOMAS Reimersの：OK。 私たちは、ハッシュタグに落ち着くつもり、としている それは我々が一緒に行くつもり何だ。 OK？ ALLISON BUCHHOLTZ-AU：ハッシュタグ。 TOMAS Reimersの：だからハッシュタグの最初の。 ALLISON BUCHHOLTZ-AU：だから あなたはseminar--をツイートすることができます ハッシュタグのCSS、クールハッシュタグ。 TOMAS Reimersの：ハッシュタグAwesomenesと。 ALLISON BUCHHOLTZ-AU： ハッシュタグAwesomenesと、はい。 TOMAS Reimersの：OK。 だから我々は、「第一」および「第二」を持っている したがって、最初、私たちは持っているつもりです 赤の背景色。 ALLISON BUCHHOLTZ-AU：ええと、コロン。 TOMAS Reimersの：うん。 ALLISON BUCHHOLTZ-AU： 私はあなたのスポットチェッカーになるでしょう。 TOMAS Reimersの：アリソンのは私を得た。 blue--の背景色 TOMAS Reimersの：パープル！ TOMAS Reimersの：パープル。 ALLISON BUCHHOLTZ-AU：はい。 パープルの私の好きな​​色、 そして我々はまだそれを使用していない。 TOMAS Reimersの：バイオレット。 ALLISON BUCHHOLTZ-AU：バイオレット。 それは動作します。 TOMAS Reimersの：だから私たちはしている 2 divを持っているつもり。 彼らは完全に空にすることになるだろう。 我々は、おそらくいくつかのテキストを持っている必要があります。 だから、「第一」であることを行っている "HELLO。」 そして、「第二」say--ます ALLISON BUCHHOLTZ-AU：さようなら。 読者： - 「WORLD。」 さようなら、こんにちは。 ALLISON BUCHHOLTZ-AU：私が見た コンサートでそれら他の週。 TOMAS Reimersの：ビートルズ？ ALLISON BUCHHOLTZ-AU：実数の場合。 彼らは、その素晴らしいではありませんね。 私はそれを好きではない。 TOMAS Reimersの：私たちは持っている "HELLO"と "さようなら" そして再び、CSSは、単に素晴らしいです それが私たちの色を認識するため。 さえする必要はありません それらが存在することを心配する。 彼らはありません。 ALLISON BUCHHOLTZ-AU：彼らは存在する。 TOMAS Reimersの：だからCSS私は持っていると思う 色について話をする255の言葉。 あなたが外で色を考えることができた場合 それらの255は、のような、私は感銘を受けるでしょう。 ALLISON BUCHHOLTZ-AU：うん。 私はあなたたちが持っているかもしれないと思う ちょうど右の後に来る。 TOMAS Reimersの：だからここに、 あなたは私たちがつのボックスを持って表示されます 右互いの上に、右？ こんにちは、GOODBYE。 ALLISON BUCHHOLTZ-AU： 間にスペースはありません。 彼らはただsmooshedしている 互いの上に右。 TOMAS Reimersの：だから最初の事 私たちはについて話す必要がありますね それではまたうんsay--てみましょうです。 だから、CSSは箱の一種としてそれらを表します。 そしてボックスとして、彼らがコンテンツを持っている。 そして、今の内容はソートのです ハローまたはGOODBYEとそれはそれだ。 OK？ 最初のものの1ですから、 行うことができますあなたはパディングを追加することができますです。 パディングはどのくらいのスペースを言う それはそれぞれの側に残してください。 それでは、私が言いたいとしましょう それぞれの側に10ピクセル。 そして、私は第二にそれを解剖します。 ALLISON BUCHHOLTZ-AU： ここではこれらの事のすべて ピクセル単位で主にあることを行っている セミナーの残りの部分。 あなたはそれが持っていることを確認するつもりだ その周りにいくつかのスペース、右？ ですから、ここに表示されていないものもございますです パディングのこの目に見えないソート のように、と言うそれぞれの側、上、 OK、あなたはcontent--のあなたの箱を持っている ALLISON BUCHHOLTZ-AU：あなたがしたいですか ちょうど点検要素をプルアップするには？ TOMAS Reimersの：ええ、それは良いアイデアです。 ALLISON BUCHHOLTZ-AU：また、私は見つける 検査要素は良い方法であることを 何かが起こっているかどうかを把握する 間違って、予期しない何かが起こる、 タグを検査し、何を見て 上書きが役に立つようなものだ。 TOMAS Reimersの：だから私はわからないんだけど あなたたちは、この色を見ることができます。 あなたはできますか？ あなたはこのパディングが表示されます エッジのソートに。 そして、あなたが実際に見る 青のコンテンツ、右？ だから、非常にだ ボックスモデルの基礎。 あなたは、コンテンツを持っている。 その後、パディングを持っている。 読者：なぜ、あなただけではないん the--内部のボックスを使用する ALLISON BUCHHOLTZ-AU：右。 それだけで選択することだから 今の要素。 TOMAS Reimersの：うん。 他のもの。 それでは、そのことについて話しましょう 第二のパディングコマンド。 CSS、測定の中のSO ユニットを有する必要がある。 だから、最初のあなたは量を持っている。 したがって、このケースでは、10を言った。 そして、次の1 我々は、ピクセル、PXであると言ってきました。 あなたが持つかもしれない他のものがある センチメートル、インチのようなもの。 あなたのようなことを行うことができ、 10インチ何ですか？ そして、それはとんでもないことになるだろう。 ALLISON BUCHHOLTZ-AU：ああ、少年。 聴衆：おっ。 TOMASアリソン：うん。 TOMAS Reimersの：だから、すべてのパディングです。 私は、ピクセルに戻って行くつもりです。 ALLISON BUCHHOLTZ-AU：ピクセル 標準のように、である傾向がある。 あなたは多くのウェブサイトを見てみると、 彼らは主にピクセル単位で働く。 TOMAS Reimersの：だからあなたは見に行っている どちらかあなたが見る他のものをpixels-- 1 EMである、EMさである フォントの高さに等しい これは、現在使用している。 ALLISON BUCHHOLTZ-AU：MM。 TOMAS Reimersの：それは言っても良い方法ですが、 のような、私は私のフォントのように多くのスペースを望む 取っている。 ALLISON BUCHHOLTZ-AU：それを知りませんでした。 あなたは、毎日何か新しいことを学ぶ。 TOMAS Reimersの：あり CSでの測定がたくさん。 私はあなたがそれらを検索示唆する。 すべてのあなたのケースのために、私は思う ピクセルは十分なはずです。 そして、彼らはまた何だ あなたが見ることになるだろう オンラインで行う例の大半で。 だから我々はピクセルでそれを残しておきます。 また、私はそうsay--必要がありますすることができます パディングはパディングのすべてを設定します。 また、のような何かを行うことができます ただset--に「パディングトップ」 ALLISON BUCHHOLTZ-AU：たぶん 私たちは "HELLO"バックを得るでしょう。 TOMAS Reimersの：ちょうどに設定--to トップと他には何も上のパディング。 だから、4つのコマンドは、パディングトップである、 パディング下、パディング左、 パディング右。 ALLISON BUCHHOLTZ-AU：だけのような あなたはボックスのために期待する。 TOMAS Reimersの：うん。 そこにあまりにもクレイジー何もない。 それは理にかなっていますか？ だから、パディングです。 私はすべての設定するつもりです 戻って10にパディング。 そして私は国境に移動するつもりです。 だから何ボーダーされている ボーダーは奇妙なコマンドです。 それは、一度に3つのうちの一種を取ります。 だから、最初はどのように大きなあなたです それは測定としてになりたい。 繰り返しますが、私はピクセルのみを使用しています。 そして、最後のことは、私 測定結果に追加する必要があります 一つのことである 単位は0である必要はありません。 それは実際に正しくないです 0の単位を与えるために、 0は0インチ全体であるので、 ピクセル、センチメートル、何でも。 それはすべてちょうど、0意味？ だから、最初にあなたはそれを測定を与える。 次に、あなたはそれをスタイルを与える。 だから私は言うつもりです」固体。」 そして、私たちはそれが何を意味するのかについて話します。 そして最後に、あなたはそれを色を与える。 だから私は言うつもりです」黒を。」 そして、これらは、私たちがしたすべてのものである 今のスタイルを除き、前に見た、 しかし、我々はそれについて話をしましょう​​。 だから、あなたたちは、測定結果を見てきました、 あなたが色を見てきました。 そして、何が起こるかは我々はこれを取得することです その周りに素敵な黒のボーダー、右？ 君たちは、私たちがそれをしたかを見る？ 読者：うん。 TOMAS Reimersの：クール。 だから、何ですか？ だから、まず第一に、それは1ピクセルです。 それは正しい、十分な自明だ？ のように、それは1ピクセル太いです。 それとも、1ピクセルであるだろうが、私は今 それはもう少しですので、ズームアップ それよりも。 ALLISON BUCHHOLTZ-AU：そして、我々は持っている このばかげた解像度のテレビ。 TOMAS Reimersの：うん。 あなたはそれを大きくすることができ、 小さい、何でも。 だからここに2画素の境界線です。 あなたはそれが2倍の厚だが表示されます。 あなたが持っている次のことは、色です。 それは面白いではありません。 私が話をするつもりはありません そのことについて、本当に。 ALLISON BUCHHOLTZ-AU：しかしスタイル ちょっと面白いかもしれません。 TOMAS Reimersの：うん。 スタイルだから、いくつかのものがあります 私は一般的に使用されて参照すること。 まず1の固体、次の1の 点在し、そして最後の1の破線。 そして、ここに点在しています。 あなたは、彼らがしていることがわかります ドットの束、右？ ソートの素敵な境界線を得るための良い方法 行き、ダッシュもかなり人気があります。 ALLISON BUCHHOLTZ-AU： そしてもちろん、私は今 他のたくさんがあることを確認 あなたが得ることができるスタイル。 そして、我々は大きなセットを持っている あなたたちのために最後にリンク 種類の熟読し、 より多くのクールなCSSを見てください。 TOMAS Reimersの：そして、 最後に、私たちはしている について話をするつもりは ボックスモデル実際に素早く。 ああ、その後国境、 正確にパディングのような、 あなたはまた、のようなものを持っている ボーダー左、国境から右、ボーダートップ、 あなたを許すのborder-bottom、 具体的な国境で取得する。 だからここだけの境界線が左に定義されます。 それは理にかなっていますか？ ALLISON BUCHHOLTZ-AU：それはクールだ 物事を強調するか、追加する方法 異なる要素間の線。 TOMAS Reimersの：もちろんです。 だから、私たちの国境だ。 そして、最後の1のマージン。 証拠金のようなパディング それはwithin--ではありませんを除いて ALLISON BUCHHOLTZ-AU：それは ではないあなたの要素の周囲 しかし、実際には全体の周りに 私たちが見てきた箱。 TOMAS Reimersの：うん。 アリソンは完全にそれを言った。 それはあなたの中に、のような、ではありません 要素は、それが全体のボックスの周りだ。 それはのようなものを意味します 背景はそれには適用されません。 そして、それは基本的に言う、 のような、私は何もしたくない 私のためにこれだけの空間で。 だからここのように私たちは持っている 10ピクセルの余白。 10ピクセル以内だから、何もしない 私の隣にする必要があります。 つまり、そののようなものだ スペースはなく一種のではない。 だから、非常にだ ボックスモデルの基礎。 それは理にかなっていますか？ クール、クール。 ALLISON BUCHHOLTZ-AU：恐ろしい。 だから今私はちょうど私達を思う 私たちのクールな資源を持っている 私たちはあなたたちを取るだろうと 非常に迅速にスルー。 そして、私たちはよくactually--よ、 我々はまだインターネットがありますか？ TOMAS Reimersの：レッツ 私はup--開くことができるかどうかを確認 私なら、私はちょうど見てみましょう すぐにインターネットを得ることができます アリソンは何について話している間 アリソンは、話をしたいと考えています。 ALLISON BUCHHOLTZ-AU： だからbasically--私はしないでください 私はこの時点で言うことができる他に何を知っています。 しかし、これらは一部です 本当に良いリソース。 これらは、そのものです トーマスと私が使用している そして我々実際にその このために予備校するために使用する。 W3Schoolsのは1であることを 男は前に見たはず。 私たちはそれをお勧めします CSSを使用した多くのこと。 私はそれをお勧めします知っている 私のセクションのすべての時間。 素晴らしいことの一つは、それということです CSSを使用した混乱の種類にあなたを可能にする と変更を参照してください。 この瞬間において、 のような、二重窓は、それが持っていることを表示します。 だから、心配する必要はありません 自分のWebページを設定する、 またはあなたの中にバーチャルホストを設定する ローカルアプライアンスとローカルホスト、 そしてすべてのものの作業を取得する。 これは、右ページ内に埋め込まれています。 そしてそれは、これらの小さなを持って そのあなたができるレッスン 学ぶために通過 セレクタの詳細、 またはあなたの操作について学ぶ フォント、または背景、または画像。 そして、あなたはこれらを持っている 瞬間的な結果は、あなた いずれかを行う必要はありません のための他の準備作業。 だから私は、W3Schoolsのが大好きです。 それは素晴らしいです。 それが動作していますか？ TOMAS Reimersの：うん。 いいえ、そうではありません。 あなたは私が試してみたいか と私のコンピュータを再起動します？ それともto--たいです ALLISON BUCHHOLTZ-AU：私は意味、 まあ、これはまた、オンラインになります。 すべてのスライドがオンラインになります。 だから、僕は非常にこれらをやってお勧めします。 これは同じように素晴らしいです チートシートのように。 それはちょうど、すべての基本的です あなたが持っていることを指令する。 あなたが最初にしているときには素晴らしいことだ あなたのウェブサイトを始め。 多分あなたがいないため、 すべてに取得したい 本当の核心 デザイン·重いもの。 あなただけの方法でそれをフォーマットする必要が その種の感覚と意志を作る 当分のために行う。 そして、あなたが本当にしたい場合は、 それに入るために、私が知っている これは、のように、のいずれか トマスのお気に入りの参照。 私たちは、それを使用していた 準備は、それは素晴らしいです。 これは、Mozillaの開発者。 TOMAS Reimersの：だからMozillaがある Firefoxを作る人。 そして、それは単に、自分の開発者 私が思うの参照は、素晴らしいです。 そして、それは素晴らしいがある リソースのリスト。 だから我々はhave-- ALLISON BUCHHOLTZ-AU： そして、最後のノートがある あなたがしようとしているとき あなたのウェブサイトを設計し、 物事からインスピレーションを描く あなたはかなりあると思う。 要素の検査、 ソースコードを検査する スーパー役立ちます 把握しようとして用 どのようにあなた自身のウェブサイトをスタイルに。 多くの場合、私は最高のように感じる 道、実験に加えて、 単に見ることである かなりあるもの。 私はそれだけにハード本当にだ見つける 種類の自分で物事を設計し、 特に初め。 だから、ウェブサイトをご覧ください あなたが見て楽しむこと。 作るものを見つけ出す 彼らはあなたにアピール。 そして、お気軽に 試してみて、それを複製する。 TOMAS Reimersの：右。 でも、ウェブサイトのような このように、あなたが見ることができます 一番上のDIVは間違いなくあります。 そして、あなたは内の別のdivを持っている ここでは、CSS Awesomenesとなる。 そして、あなたはここで、リンクの束を持っている。 あなたは本当にただ検査した場合 要素は、あなたがの並べ替えることができます ウェブサイトを何見始める ように見える、とどのようにすることができます 私がしたい場合ことを再作成します。 それは理にかなっていますか？ だから我々は唯一の左3分している。 質問だから？ それらのいずれか？ はい。 読者：色の場合 長方形、どのようにでしょう あなたがそれを望んでいない場合は、have-- 、ページ全体を横断できただろう あなたはそれだけで渡って行く作った 半ページまたはテキストだけ？ TOMAS Reimersの：うん、絶対に。 だから私は実際に見てみましょう。 私は2つのアイデアを持っている。 あなたは、すべてのだから、最初の またパーセントを使用することができます。 聴衆：本当に？ ALLISON BUCHHOLTZ-AU：だから何か ルックアップするためには、相対的な位置である。 それは、我々何か に入るために時間を持っていない、 それは私が間違いなく何か あなたたちは、チェックアウトをお勧めします。 TOMAS Reimersの：だからパーセント。 そして、我々はそれを作ったかを見る 幅のわずか50％？ ALLISON BUCHHOLTZ-AU：あなたの場合 実際のピクセル数を知っている、 あなたがそのようにより正確にすることができます。 あなたはそれの周りいじることができます。 しかし、50％。 我々はブラウザのサイズを変更した場合、 それは小さくなるだろう。 TOMAS Reimersの：まあ、それはだ 基本的には50パーセント、今、私は思います。 これは、利益率50％だし、 それに追加されました。 CSSは癖をたくさん持っている。 だから、今はこれです ページ幅の50％。 しかし、あなたは10を持っていることを覚えている ピクセルは、それぞれの側から取り出さ。 ですから、反対のことを移動した場合 ブラウザの左端、 それは50％のようになります。 繰り返しますが、私はCSSができる、言ったように 推測·アンド·チェックがたくさんあること。 同様に、あなたが何かだと思う 1ように動作するつもりは、 それは全く違うように動作します。 ALLISON BUCHHOLTZ-AU： そして、あなたはただ、賢く取得 そしてあなただけの良くなる それのための直感あなたが一緒に移動する。 TOMAS Reimersの：そしてそれ 悪いと悪化します。 だから、実際にはレースだ。 ALLISON BUCHHOLTZ-AU： それはスーパー心強いです。 私たちは、彼らがCSSを好きにしたい。 TOMAS Reimersの：CSSは素晴らしいです。 それを忘れないでください。 その他の質問？ ALLISON BUCHHOLTZ-AU：一つのこと。 他に何か？ クール。 TOMAS Reimersの：恐ろしい。 ALLISON BUCHHOLTZ-AU：さて、あなたなら 男は、後でご質問がある 私たちはいつもの通りに、常に利用可能だ。 あなたは、おそらくいくつかが表示されます 最終的なプロジェクトのために私たちの 間違いハッカソンで。 TOMAS Reimersの：もちろんです。 かつ公正で。 ALLISON BUCHHOLTZ-AU：かつ公正で。 ああ。 TOMAS Reimersの：楽しみに あなたのawesome--のすべてを見て ALLISON BUCHHOLTZ-AU：私たちは、表示されます あなたの素晴らしいウェブサイトのすべて それは美しくなります。 TOMAS Reimersの：あなたは、常にすることができます 、のような、ウェブサイトを参照してください。 誰が、その後のように、優れたCSSとを持っていた CSSをしようとしなかった人のように。 ALLISON BUCHHOLTZ-AU：また、別の に見ての事、もう一つ ブートストラップです。 だから、ブートストラップは素晴らしいです。 TOMAS Reimersの：グーグル、もしyou-- ALLISON BUCHHOLTZ-AU：グーグルそれ。 それは素晴らしいです。 あなたはそれを好きになる。 そして今、あなたが持っている CSSの基本的な理解、 それは多くの方が理にかなっているでしょう。 恐ろしい。 おかげで、みんな。 TOMAS Reimersのは：どうもありがとう。