>> [音樂播放]
ALLISON BUCHHOLTZ-AU：那麼 我們基本上只是要
給你一個破敗 CSS的，因為我們知道
它不是蓋的 在所有的部分。
我們真的要確保你 你們有這個工具在您的處置，
因為它有使能力 您的網站看起來更漂亮。
>> 如果你正在建設一個網站，然後 你可能希望把它漂亮。
我的意思是，你不必， 但我建議它。 （笑）
如果你希望用戶使用它，你可能 想讓它一點[聽不清]。
所以我們要嘗試給你剛才 一些基本的工具和理解，
所以，當你走出去，你 研究的事情有關CSS，
它沒有完成胡言亂語， 像CSS有時候是。
>> TOMAS賴默斯：是的。
佳佳說，這非常好。
所以我想的第一件事我們 應該是什麼是CSS開始？
所以CSS是真棒。
CSS--
>> ALLISON BUCHHOLTZ-AU：那是 我們研討會的名稱。
>> TOMAS賴默斯：是的。
這真的很重要 你明白了吧。
如果你只拿走1 的事情，那就是CSS，如果真棒。
二是CSS代表 層疊樣式表。
因此，在其核心，就是CSS 一個樣式表，這意味著
它可以讓你風格的網頁。
然後這意味著什麼，這是一個 的方式來添加樣式到你的網站。
因此，通過造型，我們意味著一切 這不是structural--
這樣的事情般的色彩，背景 圖像，邊框等，填充，
利潤率。
我們將談論什麼 所有這意味著在一個位。
>> 因此，我們剛剛經歷進取， 打開這兩個在gedit中的。
所以這是的index.html。
這是的main.css。
所以的main.css無關。
ALLISON BUCHHOLTZ-AU：沒有風格至今。
TOMAS賴默斯：無。
正如你所看到的，這是 一個真正醜陋的網站。
ALLISON BUCHHOLTZ-AU：這只是普通的。
TOMAS賴默斯：是的。
是的，這是不醜， 它只是最低限度的。
然後我們在這裡有index.html的。
等了快 HTML，佳佳的回顧一下，
你只想談談網頁？
>> ALLISON BUCHHOLTZ-AU：是的。
所以，很顯然，我們有我們的HTML 標籤，它只是名字HTML文件。
我們有我們的頭在這裡，與CSS 迷死人，which--如果你回去。
哪裡是？
>> TOMAS賴默斯：哦。
是的，你可以看到。
ALLISON BUCHHOLTZ-AU： 並注意頭
這片頭部右側在這裡。
然後“你好，世界！”是 我們剛才文
顯示在網絡上 頁面，這is--回去。
返回。
這僅僅是在我們的身體 這裡 - 純文本。
此外，一件事 請注意，如果你看這裡，
托馬斯交換了這些 兩個來自我們的幻燈片。
所以只要你擁有所有 這三種，你的罰款。
他們可以在任何以他們想要的。
什麼是最重要的就是這樣 你有每個這樣的三件事情。
>> TOMAS賴默斯：酷。
添加文檔類型？
ALLISON BUCHHOLTZ-AU：是的。
TOMAS賴默斯：是的。
酷。
ALLISON BUCHHOLTZ-AU：顯然， 我的麥克風不喜歡我。
TOMAS賴默斯：哦，給大家一個秒只 而佳佳切換了她的麥克風。
所以，是的。
因此，我們有我們的主頁。
這是一種無樣式。
我們沒有多少。
我們只需要基本的文字。
我們有樣式表。
我們擁有的稱號。
因此，只要裸去骨 組件使一個網站。
>> 因此，從那裡，讓我們 說說什麼是CSS
和什麼樣子，所有這一切。
因此，對於that--
ALLISON BUCHHOLTZ-AU： 回到幻燈片。
TOMAS賴默斯：回到幻燈片。
和Allison可以接管。
>> ALLISON BUCHHOLTZ-AU：嗚。
好不好。
因此，在你的CSS文件， 你將有
很多這些東西叫做選擇。
這只會是 依據你的CSS文件。
它只是將是 很多很多的這些。
如此選擇。
這僅僅是一般的解剖結構。
我們將通過 例子，因為如果你們永遠
看著我的部分，我覺得 類似的事情在抽象
沒有真正意義。
它總是幫助，看例子。
>> 所以，我們有一些選擇。
這將是一些標識符 我們想要的樣式應用到。
然後我們就可以有 設置的規則和價值觀。
所以，選擇你可能會看到 可能是這樣的身體，
或P段， 或標題，或什麼的，
你希望你的HTML標籤是什麼。
>> 因此，在這種情況下，我們有身體。
我們有一些規則， 此對應
以你的風格適用於。
因此，在這種情況下，我們有 背景顏色和字體的重量。
因此，這將改變 任何事物的背景
在我們的HTML文件的任何body標籤。
而且它要給 這本淡藍色值。
>> 因此，這將令 背景淺藍色。
然後在身體什麼是 將有一個字體粗細大膽。
所以它只是要 大膽的所有文字。
而這僅僅是一個選擇。
但是你可以有非常多的了。
正如我們將要展示 越到後來，一點點變成怎樣
該作品和更多的例子在那裡。
任何你想補充的嗎？
>> TOMAS賴默斯：第
佳佳得到了它。
我們只是削減了一個 例如在這裡我們的例子網站。
因此，讓我們真正需要這一點。
這是完美的。
所以我只是去複製和粘貼 這種權利到我們的main.css文件。
而且我要保存它。
然後，我們將運行它。
所以側面說明，之一 最令人沮喪的事情
是，如果你不保存文件，並 那麼你一樣，重新加載頁面，
而像，為什麼不 變化發生？
它發生。
所以在這裡我們看到，我們取得了我們的 網站上的淡藍色背景
有的黑體字。
>> 我還要提到，如果你 男人對什麼問題
我們正在做的，請隨時 免費阻止我們，問我們。
我們完全願意 到現場的問題。
>> ALLISON BUCHHOLTZ-AU：顯然，與 CSS，一切都建立在本身。
所以，如果有一件事不 道理現在，我們
不想那以後陷入你失望。
>> TOMAS賴默斯：讓我們 種剖析這一點。
所以，你想開始 這裡的選擇？
>> ALLISON BUCHHOLTZ-AU：是的。
正如我說之前，身體 只是我們在這裡選擇。
所以，如果我們回到了我們的index--啊。
>> TOMAS賴默斯：我剛才關閉。
給我一秒鐘。
所以文件，打開，index.html的。
ALLISON BUCHHOLTZ-AU：酷。
所以，如果你在這裡看到，我們 有這些body標籤，對不對？
所以選擇只對應於 我們正在談論的標籤。
所以身體就在這裡。
所以，我們在說什麼是 一切 - 我們能回去嗎？
我希望我可以只 像觸摸屏幕。
它會是這麼涼爽。
>> 所以，在這些事情 身體標記，這是我們看到的
只是，像，文， 和主體的一般
指，喜歡的背景。
如果你想 改變背景，
這將是在body標籤。
只是有這些規則適用於他們。
>> 所以，如果我們去 index.html的還有 - 實際上，
我們可以有一些 身體的外？
如果我們有，像，頁腳或 的東西，它並不適用於這一點。
但在任何 這些body標籤是怎麼回事
受到影響這身 選擇器，我們已經取得了。
所以，如果你輸入 別的那裡 -
>> TOMAS賴默斯：讓我們開車的那家。
所以，如果我們有一個div--所以這是 只是一個標籤，你可以有。
我要關閉它。
還是讓我們做這一個段落。
所以，p表示段落。
而該段內。
然後我說，“這是文本”。
酷。
然後我做了這個規則適用於 一個段，而不是身體。
你會看到它是如何僅適用於 新成立的段落，權利，
不是整個事情。
這是否有意義？
>> ALLISON BUCHHOLTZ-AU： 所以，這是所有身體，
但現在我們只選擇 對應於該段。
所以，我們只能大膽和藍色 對於此特定段
因為這是唯一的事 這是p標籤內封閉。
>> TOMAS賴默斯：這是否有意義排序 事情如何封裝其他的東西呢？
ALLISON BUCHHOLTZ-AU：另外，剛 說一樣，最好的方法之一
要真正獲得舒適與CSS 是剛剛做這樣的事情，
只是嘗試一下。
這是非常簡單的事情型 出，擊中刷新，看看會發生什麼。
而且，與大多數的CS， 實驗往往能
導致一個更好的 直觀的了解。
甚至比我們剛剛， 喜歡，跟你說話。
>> TOMAS賴默斯：絕對 100％同意這一點。
所以，如果我們回到這一點，讓我們開始 解剖正是這兩個事情。
因此，我們必須在這兩個規則。
所以，第一個是背景顏色。
你可以看到，我們已經設置 等於一個值，淡藍色。
>> 因此，在CSS，CSS是排序 非常寬鬆的關於如何
你可以定義顏色。
所以，你可以通過名稱來定義它們。
你也可以這樣做“紅”。
然後如果我們回到這一點， 你會看到，背景是紅色的。
您還可以得到really--我想你 可以得到相當的創意與此，
不是嗎？
>> ALLISON BUCHHOLTZ-AU：我 想你可以使用十六進制。
不是嗎？
>> TOMAS賴默斯：是的。
所以，你可以使用十六進制。
但我想的名字明智的。
不是嗎？
ALLISON BUCHHOLTZ-AU： 你可以做不少。
幾乎最喜歡的顏色，你 可以像名稱 - 我認為鮭魚就是其中之一。
>> TOMAS賴默斯：我們要去嘗試鮭魚。
ALLISON BUCHHOLTZ-AU：我 認為黃綠色就在那裡。
TOMAS賴默斯：是的。
看到了嗎？
這樣你就可以得到相當的創意。
>> ALLISON BUCHHOLTZ-AU：你 能得到相當的創意。
喜歡，如果你能想到的 顏色名稱，它可能是在那裡。
如果你真的想細 細節，你可以去十六進制。
>> TOMAS賴默斯：是的。
所以十六進制。
如果你們還記得這回 從舊PSET，圖像恢復，
你們不得不處理 這些十六進制值。
排序，並回顧一下那是什麼， 六角具有存儲在其中的三個值。
所以，這兩種增量組。
前兩個代表紅色值。
第二個代表 綠色的價值。
最後一個是藍色的？
>> 所以FF恰好代表 一個十六進制的255。
所以，你有255紅，255 綠色和0為藍色。
和值的範圍為0至255。
>> 聽眾：是的。
所以基本上，我們可以搜索 互聯網為我們想要的任何顏色，
並確定所述實際的已知 彩色光譜組合，
然後我們可以把它？
ALLISON BUCHHOLTZ-AU：沒錯。
所以，你必須非常全面控制 在顏色你想在CSS。
我們要說說 背景圖片以後呢？
還是我們想要做的是什麼？
>> TOMAS賴默斯：是的。
當然可以。
因此，首先，只是為了顯示 紅色和綠色是黃色的。
如果你需要一些 幫助尋找，你
可以谷歌的東西 像“拾色器”。
ALLISON BUCHHOLTZ-AU：哦，它是那麼好。
我愛拾色器。
>> TOMAS賴默斯：colorpicker.com 就是一個​​很好的例子。
在這裡，你會看到你有 一個完整的Photoshop般的顏色選擇器。
>> ALLISON BUCHHOLTZ-AU：嗯。
此外，很酷的事情是你 可以生成配色方案
這樣你就不用， 像，衝突的色彩。
TOMAS賴默斯：然後 這裡是這裡的十六進制值了。
所以，你可以隨時在網上找到基本 地方得到的十六進制值。
它不是那種只是，像我們 看到在數字世界的顏色。
它更是我們上網 並找到我們想要的顏色，
然後取數下降。
因為它只是一個非常簡單的 的方式來引用CS的東西。
>> ALLISON BUCHHOLTZ-AU： 然後還有also--
我忘記了網站的確切名稱。
但有絕對的，我 認為，從Adobe的東西
生成的配色方案適合你， 這是真的很酷，因為你
definitely--它有時 很難搞清楚，
哦，如果我想用這個顏色， 什麼可能是另一種有用的
在我的網站上的其他地方使用， 狀，使其漂亮和凝聚力​​。
>> TOMAS賴默斯：佳佳的談論 1由Adobe所謂的Kuler，我想。
這是K-U-L-E-R上。
ALLISON BUCHHOLTZ-AU：我認為是這樣。
我敢肯定，這是一個。
>> TOMAS賴默斯：我最喜歡的有 一向顏色方案設計師。
>> ALLISON BUCHHOLTZ-AU：哦。
>> TOMAS賴默斯：這是now--
>> ALLISON BUCHHOLTZ-AU： 啊，這是美麗的。
>> TOMAS賴默斯：你 基本上可以說，喜歡，
我想彼此相鄰三種顏色。
然後讓我們做一件好事。
然後你就可以得到一個例子 什麼可能的樣子。
然後，如果你在懸停的任何 其中，它給你的十六進制值。
>> 因此，正如一個很好的方式開始 想著配色方案
或者是什麼顏色的網站 可能會去得很好。
因為這更是出奇地 如你想像的那麼容易上手。
然後其他很酷的事情 我總是發現這個網站
是，如果你打的例子，它會 展示一下一個例子網站
可能看起來像使用的配色方案。
反正。
>> 回到實際的CSS。
ALLISON BUCHHOLTZ-AU：但很明顯，我們 知道這些引用可能是有用的。
TOMAS賴默斯：不，他們 肯定是有幫助的。
所以，第二條規則，佳佳？
>> ALLISON BUCHHOLTZ-AU：是的。
第二條規則就是 對應我們的字體。
所以，字體粗細僅僅是一種 of--所以重量會
，如果你只想要一樣， 正常或像，更薄的字體，
或在此情況下，象，粗體。
我忘記了。
有什麼，如果你想它 - 有 更薄的人比剛一樣，正常嗎？
TOMAS賴默斯：我實際上並不 知道如果有一個薄的。
ALLISON BUCHHOLTZ-AU：我忘了。
所以，字體粗細，我們一般 只需使用大膽。
如果你想獲得真正進入 它，我們要告訴你。
W3Schools的有各種不同 事情你可以做的字體。
但基本上，如果你想 要改變有關字體什麼，
它總是將是， 像，字體什麼的。
所以它會是這樣，font-family的，如果你 試圖改變實際類型。
這將是字體的風格，如果你 想讓它像草書，
或斜體，或諸如此類的東西。
甚至字體顏色，如果 我們想改變這種狀況。
>> TOMAS賴默斯：是啊。
所以，你可以改變這種狀況。
和排序只是為了 現在回顧一下，這樣你就可以
看到我們選擇了這裡。
我們有這些大括號。
然後我們有規矩 用分號分隔。
這是否有意義？
是嗎？
酷。
因此，如果這是good--
>> ALLISON BUCHHOLTZ-AU：返回。
TOMAS賴默斯：讓我們來談談具體 什麼樣的選擇，我們有。
“原因，現在我們已經 只是有點所示的標籤。
但是你們可以看到它似是而非。
說你有兩​​個段落 一個頁面，你
希望能夠以風格 之一，但不是其他，
你不就是想限制自己 不得不使用不同的實際的HTML
標籤給他們不同的風格。
>> 因此，我們有三個基本 類型選擇器。
ALLISON BUCHHOLTZ-AU：是的。
因此，我們有標籤，這是什麼 我們一直在談論現在。
所以這有點像你的身體或p。
然後我們有一流的，這是 當我們在CSS文件中定義它，
它總是會被點，無論 你想成為你的類的名稱。
這可以應用到多個的東西。
>> 說你有五段 其中兩個三個
需要被樣式相同， 你會一類適用於它。
而這僅僅是我們做的方式。
我們會給你一個例子 其中，這實際上顯示了。
但是，如果你有或許有些標籤 P，之後，你會寫，
級等於什麼班 要應用它。
我們希望所以，無論類選擇 適用於本具體段落，
我們可以只寫這樣的。
當然，我覺得一個例子 將使它更具體。
>> 另一個我們有 是的id，我們表示
用哈希或磅，或包括hashtag。
TOMAS賴默斯：井號。
ALLISON BUCHHOLTZ-AU：井號。
這樣的作品，太。
而這一次真的應該是唯一的。
他們應該只適用於 有一件事您的網頁上。
因此，無論這是一個特定的段落， 或在列表中的某些項目，或什麼的，
這應該是唯一的。
並以同樣的方式，我們只是 說，喜歡的class =“class1的類class2，”
這可能僅僅是，無論我們有ID。
TOMAS賴默斯：是的。
因此，讓我們談談肯定 這裡的例子。
而我只是去潛水 直回代碼。
所以，讓我們來看看我們的HTML。
因此，我們現在有一個段落。
這是文字。
我只是要修改 它。 “這是文本1.”
然後我們要 有一個“這是文2”。
>> ALLISON BUCHHOLTZ-AU：第二個。
TOMAS賴默斯：是啊。
所以，我們現在有“這是文2”吧？
而且我們要看到，如果我們刷新 該頁面中，我們要怎麼找
就是我們要find--
ALLISON BUCHHOLTZ-AU：哦。
TOMAS賴默斯：是的。
我們要找到一個“這是 文本1“和”這是文本2“。
>> ALLISON BUCHHOLTZ-AU：而 出可愛的黃色。
>> TOMAS賴默斯：你會看到 我們的選擇，現在，
它適用於P的，或者 段落，影響了他們兩個，
因為他們兩人的見面 條件是他們倆一個p標籤。
這使得總感覺。
所以，問題是，好了，有什麼 如果我們想只有一次？
所以，酷似佳佳說的話， 我們有兩個方法可以做到這一點。
我將開始與ID。
>> ALLISON BUCHHOLTZ-AU： 讓我們先從ID。
>> TOMAS賴默斯：而且兩者 這些都是屬性。
因此，在HTML存在的屬性。
而且他們都是 您添加的東西
這是標籤內 從標籤名稱分開。
所以，你可以有多個屬性。
是嗎？
>> ALLISON BUCHHOLTZ-AU：我正要 從PSET 7說，從你的榜樣，
如果你們嘗試調整 事情為中心，
你可能已經使用 “文字對齊=中心”。
你可能注意到了這一點 應該居中
你的文字或您的導航欄。
所以，這也只是一個屬性 你可能很熟悉。
TOMAS賴默斯：有一堆 屬性，你會看到的。
是啊。
像很好的參考PSET 7。
我們有ID。
你也可以有 一流的，像這樣的事情。
單個標籤可以有很多屬性。
所以，開始的ID，讓我們假裝我們 想擁有一個id of--我不知道。
我們會打電話給它特殊的， 因為這一次，我們是
要大膽，和 下劃線，等等。
ALLISON BUCHHOLTZ-AU：這是 要成為超級特殊。
TOMAS賴默斯：所以這 1，我們有特殊的標識。
這樣的方式來選擇，那麼，是 在的main.css，而不是有一個p標籤，
你做#special，OK？
而且，其選擇 id為特別的東西。
這是否有意義給大家？
聽眾：是的。
TOMAS賴默斯：酷。
所以現在，如果我們回去， 我們將see--哎呦。
是啊。
我們會看到，它只是選擇 一個id為特殊。
是嗎？
聽起來很酷。
是。
>> 聽眾：可以的東西有一個 這兩個類和一個id屬性？
>> TOMAS賴默斯：是的。
聽眾：OK。
然後會發生什麼，如果你再給 它在CSS衝突的一些規則？
TOMAS賴默斯：當然。
我們肯定會 談論這一點。
那麼究竟你得到什麼 時，你也可以上課。
因此，讓我們假裝我有 三段我
想樣式第一 2而不是三分之一。
好了，你的第一個想法可能是，好了，我 可能只是給第二個的ID。
但你不能，因為一個id， 酷似佳佳說的話，
必須是唯一的。
>> 因此，而不是一個id，你 可以用的是你可以使用一個類。
和分類 - 是什麼讓 你做的基本上是說，
這屬於作為一個組的一部分。
在這種情況下，我們的基 被稱為特殊。
而我們要做的就是再 我們要say--而不是一斤，
我們要使用點。
好不好？
並注意英鎊和點 僅在CSS文件中存在，
不是在HTML。
ALLISON BUCHHOLTZ-AU：是的。
重要的區別。
>> TOMAS賴默斯：我有 有這麼多的鬥爭，
因為我把散在HTML和 然後只覺得愚蠢的很長一段時間。
看看它是如何選擇這兩個 那些與類？
酷。
>> 現在，事情可以有多個類。
比方說，我想先做出 兩人有黃色背景
和第二二有 藍色的字體顏色。
好不好。
我真的不知道為什麼我最好 要做到這一點，但我可以。
>> ALLISON BUCHHOLTZ-AU：可能並非 推薦它為您的網站。
但我們的目的，它會做。
>> TOMAS賴默斯：這不是 一個很好的配色方案。
ALLISON BUCHHOLTZ-AU：嗯，黃色 和藍色是我高中的色彩。
我不知道，但。
TOMAS賴默斯：佳佳的高 學校有一個偉大的配色方案。
[笑]
這樣的話我們可以稱之為這是 讓我們把this--所以我們特別
我們有漂亮的。
我建議，對於這一點，你使用 更多的描述性的名稱。
ALLISON BUCHHOLTZ-AU：是的，我會 調用此，像，黃色或藍色。
>> TOMAS賴默斯：我們不 實拍真正的網站，
這就是為什麼我們不這樣做。
但是，如果你真的 有一個真正的網站，你
可能有，像，文頭， 文章內容，第一個字，
這樣的事情，這讓 你要多得多的描述。
這些都是真的就像變量。
他們應該在某種程度上，其中被命名為 你可以，like--是的，因為這樣的。
完美。
>> 這樣的背景顏色。
然後我們要say--於是 方法來改變顏色只是“顏色”。
而且我們要讓它藍色。
這很酷。
所以，現在我們有 前兩個有特殊的。
接下來人會 擁有“一流=很漂亮。”
ALLISON BUCHHOLTZ-AU：然後你就會 要添加“漂亮”的中間的一個。
TOMAS賴默斯：是啊。
然後到中間的一個， 添加“漂亮”，會發生什麼
就是你剛才有一個空間。
因此，類屬性 是一個空格分隔的列表
所有類 適用於該標記。
好不好？
它不是像這樣的是屬於 某種特殊的類被稱為
“特殊，空間，漂亮。”
它屬於兩個classes-- 特別的漂亮。
是嗎？
酷。
>> 然後如果我們看一下 在發生什麼，我們
要看到，第一個具有 黃色背景，黑色文本。
第二埃德蒙頓
>> ALLISON BUCHHOLTZ-AU：--has大膽 黃色背景，藍色文本。
而我們的最後一個只是有 我們分配給它的藍色文本。
>> TOMAS賴默斯：酷？
如何選擇工作？
真棒。
>> ALLISON BUCHHOLTZ-AU：難道我們要 說說現在的衝突呢？
>> TOMAS賴默斯：所以是的。
當然可以。
如果你恰巧是什麼 有衝突吧？
讓我們假設第一個 建立東西like--
ALLISON BUCHHOLTZ-AU：也許 這一改變的背景？
TOMAS賴默斯：是的。
所以我們要做出“漂亮” 背景更改為鮭魚。
ALLISON BUCHHOLTZ-AU：你只是用 所有偉大的顏色的今天，托馬斯。
TOMAS賴默斯：是的。
因為我發現我可以 用鮭魚作為一個真正的顏色。
因此，我們只打算這樣做。
我也覺得夕陽是一個真正的顏色。
聽眾：日落是一個真正的顏色？
ALLISON BUCHHOLTZ-AU：讓我們試試吧。
TOMAS賴默斯：這個演示後， 只是因為如果它弄亂了，
我不希望被調試。
所以我們知道鮭魚是真正的顏色。
因此，任何的猜測上 什麼事情發生呢？
>> ALLISON BUCHHOLTZ-AU：你知道嗎？
>> 觀眾：[聽不清]。
>> TOMAS賴默斯：是的。
所以，你得到它完全正確。
基本上，它需要的 它被賦予最後一條規則。
>> ALLISON BUCHHOLTZ-AU：所以這是 其中，級聯生效。
>> TOMAS賴默斯：那麼還記得我們如何 有這樣的級聯樣式表？
因此，通過這一點，我們種的意思 我們有一堆規則
適用於彼此的頂部上，並 他們還可以互相覆蓋。
>> ALLISON BUCHHOLTZ-AU：那麼 凡是在底部
將覆蓋無論是在頂部。
你可以說完全有規則 先否定的東西。
這也是為什麼你想成為 當你的造型小心，
這樣你就不會創建規則 你只是完全覆蓋。
>> TOMAS賴默斯：或者，也許你 確實要覆蓋規則。
>> ALLISON BUCHHOLTZ-AU：或者，也許你做的。
是。
>> TOMAS賴默斯：假設你有一個 這適用於大多數類的東西，
但讓​​我們說你要改變 背景顏色為紅色，字體
重量大膽的大多數 的事情，但為一體，
您只需要在背景顏色 是紅色的，但你希望所有其他
性能，你可以做一些事情 像“字體體重=正常，”
這將隨後撤消了大膽的改變。
是嗎？
再次，最好的辦法，我認為 佳佳說，只是練習。
>> ALLISON BUCHHOLTZ-AU：實驗。
>> TOMAS賴默斯：練習，練習， 實踐和實驗。
我知道有很多人認為這 CSS是只是很多猜測和檢查
在一天結束時，其中如果 你想要做something--一樣，
你有一個大概的了解，但 你仍然可能需要
嘗試一下，以確保 你知道它是什麼樣子。
>> 聽眾：當你申請 類，多於一個
以同款 或部分，不是
不管你可以什麼順序 它們輸入到引號？
>> TOMAS賴默斯：沒有，一點都沒有。
>> ALLISON BUCHHOLTZ-AU：重要的是 你的CSS樣式表中的順序。
聽眾：你能重複一次這個問題？
TOMAS賴默斯：哦。
ALLISON BUCHHOLTZ-AU：在 一流的，當你給班
某事的HTML，不 它無論他們以什麼順序？
沒關係的順序。
重要的是的順序 您在CSS類選擇，
在您的樣式表。
>> TOMAS賴默斯：聲音好？
>> ALLISON BUCHHOLTZ-AU：可愛。
>> TOMAS賴默斯：然後 我們將繼續to--
ALLISON BUCHHOLTZ-AU： 我們有什麼下一個？
我忘記了。
哦，我們只是例子。
但是，我們已經種做這些。
我們已經做了上飛的例子。
>> TOMAS賴默斯：我們去 很快結合選擇。
>> ALLISON BUCHHOLTZ-AU：哦， 我們得到的組合選擇。
TOMAS賴默斯：所以有的 例子之一是我們有
＃dog--一斤，或包括hashtag， 或井號，或任何
要呼叫that--尖銳。
>> ALLISON BUCHHOLTZ-AU：夏普狗。
>> TOMAS賴默斯：那你有.pets。
一些有狗的ID， 這裡只有一隻狗在頁面上。
東西有一個id 貓，這裡只有一隻貓。
有可能是在頁面上許多寵物。
這就是為什麼我們給了類。
你有P的一個例子。
然後這樣的1 最後一個例子，這
是我們還沒有談到， 就是當你把它們會發生什麼。
所以p.pets。
>> 所以，讓我們回到 代碼和引進another--耶。
所以回到這裡。
>> ALLISON BUCHHOLTZ-AU：我 感覺這是really--
像剛才翻翻例子 真的是要學習這種方式。
所以，這就是我們正在做的。
>> TOMAS賴默斯：讓我們假裝我們 只需要選擇文本2，對不對？
所以，我們絕對不能 這樣做有一個id。
好了，我們可以做到這一點與 標識，但它不具有一個id。
我可以添加一個，但讓我們假裝 我不想增加一個
或者它已經有別的東西。
我不能這樣做這一點。
標籤絕對不是唯一的，對不對？
也不是類。
但是你可以將這些東西。
比方說，我們想要做的事 這僅適用於東西
有類特殊 它們具有類漂亮。
>> 所以，你所能做的就是在的main.css， 你可以說，讓我們先刪除這個。
您可以將這些。
所以你可以做。特別。
沒有空間。
只是.special.pretty。
這是什麼意思是什麼 這既是特殊的和漂亮的。
這是否有意義？
如果我們去這裡，有什麼 你會看到
是此規則僅適用於 第二個，其具有兩個。
你可以這樣做了很多事情。
您可以say--我們 假裝我只是想
做事情有相當類 並且這也是一個段落標記。
所以p.pretty。
讓我們假設我有 一些漂亮的標籤體。
好不好？
我可以運行此，我 可以看到，這只是
要應用到的東西這是 與類漂亮的段落。
你可以將這些， 基本上，只要你想盡可能多的。
所以，你可以把它們放在一起。
這是否有意義？
ALLISON BUCHHOLTZ-AU：那麼 種，這是更有益
時，托馬斯在說更早，也許 你有一個非常複雜的網站，
你已經有很多 這些規則寫的，
而你只需要 從之前合併兩個。
像而不是寫一個整體 新的選擇和改變它在那裡，
你可以結合 他們在那裡重疊。
>> TOMAS賴默斯：或者你 可能會發現out--有時
有一類， 使得像字體的顏色為藍色，
還有另外一個類， 使背景的藍色。
而這是行不通的。
所以，你寫一個特例，其中， like--但是如果它有兩種，你在做什麼
要做的事情就是你要 使這個本樹蔭藍色
而這一次藍這另一個陰影。
對不對？
>> ALLISON BUCHHOLTZ-AU：好 對於那些類型的異常。
TOMAS賴默斯：所以要 思考問題
當你把他們可能會出現。
酷。
所以回到我們的介紹。
ALLISON BUCHHOLTZ-AU： 我們快到了。
TOMAS賴默斯：它 已停止連接。
ALLISON BUCHHOLTZ-AU：哦，不。
ALLISON BUCHHOLTZ-AU：在CS 辦公，上網下降。
呵呵，諷刺。
>> TOMAS賴默斯：那麼幸運的是，我們可以 目前沒有互聯網，我猜，
因為我們有所有的幻燈片在這裡。
因此，讓我們來談談 標籤的關係。
ALLISON BUCHHOLTZ-AU：沒錯。
種這麼正要 關閉什麼托馬斯說，
這只是另一種方式來做到這一點。
所以，我們有一些家長 選擇器，提供孩子選擇。
因此，在這裡這個例子中，我們有一些 機身採用了類導航欄，類按鈕。
啊。
>> TOMAS賴默斯：哦，對不起。
>> ALLISON BUCHHOLTZ-AU：而 基本上，這是什麼意思
是選擇所有的孩子一樣， 所有這些種類的選擇，
在這個家長選擇。
而這些都是唯一的 它曾經打算申請。
我不知道，如果你 有更好的辦法of--
TOMAS賴默斯：所以我 猜的方式去思考
關於這是怎麼才想起 排序，我們喜歡把它們放在一起。
然後，這意味著一個元件 匹配所有這些。
這是什麼意思是，我 要你的一切相匹配
在some--我想 你找一個選擇。
然後在這一點，我想 您匹配新的東西。
對不對？
因此，在CSS，這有點所有關於 能夠以匹配這些項目。
你可以嘗試搭配 其他項目中的項目。
>> 因此，讓我們真正做一個例子， 而且我們認為會澄清。
因此，讓我們假裝我們有特殊的， 特別漂亮，等等。
然後我們有一個鏈接，OK？
所以請記住，一個是鏈接。
它不會去任何地方。
我們要去給它 類的鏈接，我猜。
讓我們給它的 分類 - 給我一個想法。
ALLISON BUCHHOLTZ-AU：酷。
TOMAS賴默斯：Coo--我們 去它的類漂亮。
為什麼不呢？
>> ALLISON BUCHHOLTZ-AU：OK。
TOMAS賴默斯：所以 現在漂亮的東西
要進行後台 藍色，背景鮭魚的顏色。
這是有道理的。
如果我們做this--
>> ALLISON BUCHHOLTZ-AU： 你想添加文本
這樣的超級鏈接實際上是顯示了？
TOMAS賴默斯：那 將是一個良好的通話。
ALLISON BUCHHOLTZ-AU：因為權 現在我們只是要去什麼也得不到。
TOMAS賴默斯：所以這是一個鏈接。
“這是一個鏈接。”
哦，這是怎麼回事 是另一個鏈接。
讓我們給它的類“酷”。
你說得對。
酷。
所以現在我們要抓住這個。
我們要扔掉的。
我們有一個在 特殊的標記，我們也
將有一個在美麗的標籤。
而現在我們打算 做的是我們要做出cool--
什麼，我們希望它做什麼？
ALLISON BUCHHOLTZ-AU： 我們可以把它更大？
TOMAS賴默斯：讓我們給它一個邊界。
ALLISON BUCHHOLTZ-AU：我們可以邊框。
TOMAS賴默斯：是的。
所以，我們要做的事 狀，邊界is--和我們
要解釋這一切都在第二。
目前--
>> ALLISON BUCHHOLTZ-AU：為盒模型。
TOMAS賴默斯：但現在，我們 剛準備給它一個邊界。
所以，這是什麼意思是你 要看到這些鏈接。
而且你會看到他們有 這些一樣，醜陋的黑色邊框，這
涼爽。
>> ALLISON BUCHHOLTZ-AU： 我們的網站是如此漂亮。
>> TOMAS賴默斯：是的。
我們的網站是真棒。
所以這兩個是環節，他們出現。
現在，讓我們假裝我 只是想做到這一點
如果不是內部的東西 其中有鮭魚的背景。
所以請記住，這其中 有鮭魚的背景下，
因為它是類相當的。
>> 但我們想說的是，只有冷卻 這是在課堂上特殊的，不上課
漂亮，應該有邊界。
那麼，你能做的就是你 可以說，。特殊，空間，.cool。
什麼是在做什麼，當你覺得 它，就是它基本上是說，
OK，找我的一切 符合特殊。
然後，這些標籤內，發現 我的一切，這很酷。
ALLISON BUCHHOLTZ-AU：那麼另一種方式 這可能是很好的想一想，
把它回C，是 就像範圍的想法。
當你有這麼一些 選擇器，像那些
我們一直在努力為在此之前， 你的整個網頁，你的所有的HTML
是你的範圍之內，對不對？
但是，當我們有這些 父子關係，
這是因為，如果你縮小那裡 你正在尋找一個特定的地方，
那樣的話，就像我們正在尋找中 特定的功能，而不是
我們的整個文件。
聽眾：所以考慮到這一點，將 這也無妨，如果我們有changed--
ALLISON BUCHHOLTZ-AU：訂單？
聽眾：--the類CSS 到.cool，空間，。特別？
ALLISON BUCHHOLTZ-AU： 是的，因為那麼
可以說，它的範圍要 一切有清涼，
再看看has-- 我的意思是，等，在這種情況下，
我不認為這會改變它。
>> TOMAS賴默斯：如果我們說了什麼？
抱歉。
>> ALLISON BUCHHOLTZ-AU：如果我們 範圍之冷卻，然後
查找出來的東西特別， 這將是相同的，其實。
>> TOMAS賴默斯：所以它不會是。
>> ALLISON BUCHHOLTZ-AU：它不會？
哦，哦。
我錯了。
>> TOMAS賴默斯：那麼原因 這是different--共同mistake--
這是現在唯一 鏈接有很酷，不是嗎？
我想我的問題給你們的， 此頁面上有什麼是匹配.cool？
有兩個標籤在這裡，對不對？
這是這一個，這一個。
兩者搭配酷。
沒有別的呢。
所以，如果你說，.cool，空間， 。特別，你會說什麼的，
這些標籤中，是什麼特別之處？
ALLISON BUCHHOLTZ-AU：嗯。
這就是它 - 正確的。
因為它像剛才的東西在這裡。
>> TOMAS賴默斯：所以它會選擇什麼。
>> ALLISON BUCHHOLTZ-AU：而與 特別的，我們在這裡這些標籤內。
>> TOMAS賴默斯：那些和那些。
聽眾：OK。
因此，從正向這些標籤斜線？
>> TOMAS賴默斯：是的。
這是否有意義？
如何它基本上 努力縮小範圍。
ALLISON BUCHHOLTZ-AU：是的。
我認為這是可能的 最簡單的方法去想它。
>> TOMAS賴默斯：所以我們發現這一點， 我們發現這兩種特殊的匹配。
然後我們問，內 這些傢伙，什麼是酷？
而在這其中，這其中的涼爽。
在這其中，沒有什麼很酷。
因此，這是剩下的唯一標記。
>> ALLISON BUCHHOLTZ-AU：雖然酷 只是這一個標籤有內。
TOMAS賴默斯：沒錯。
這有什麼特殊的內那些？
什麼都沒有。
現在，我要說的是 如果沒有空間，
你問什麼是冷靜和special-- 或者有什麼漂亮，特別的，對不對？
如果你說.special.pretty，這是 一樣.pretty.special。
>> 因為什麼除去空間 問的是，當你說。特殊，
你問，OK， 哪些是特殊的？
然後那些，其中 那些還漂亮，
這是一樣的，語法， 為問，什麼是漂亮，
這些，然後，什麼也特別的？
對不對？
它的差 什麼是內部是什麼。
聽眾：OK。
TOMAS賴默斯：是的。
真棒。
所以考慮到這一點then--
>> ALLISON BUCHHOLTZ-AU：我認為我們的最後一 事情是（花式英國口音）
盒模型。
>> TOMAS賴默斯：本box-- [笑] 我愛的方式佳佳說。
因此，盒模型的事情。
>> ALLISON BUCHHOLTZ-AU：只要有 一個盒子，我會是你的盒子模型。
TOMAS賴默斯：讓我們談談這一點。
所以，現在，我們已經花了很多 時間談論選擇。
到現在為止，你們可能一樣， 的selectors--你知道主人，
如何確切地選擇內容 你想操縱你的屏幕上。
>> 所以，現在的問題是，如何 究竟你能處理呢？
所以我想最基本的 想想這樣
是，好了，究竟是什麼 在CSS元素？
我們已經花了很多時間 談到什麼是標籤，
或者什麼是最基本的 標記的表示？
>> 想想一個好辦法 也就是說，什麼形狀是鮭魚？
什麼形狀，喜歡的 鮭魚色的背景是什麼？
>> 聽眾：這是一個矩形。
>> TOMAS賴默斯：這是一個矩形，對不對？
>> ALLISON BUCHHOLTZ-AU： 是不是一招的問題。
[笑]
>> TOMAS賴默斯：不嘗試 欺騙你們這麼晚。
所以，我們有這個矩形。
而標籤是P，對不對？
所以這給了我們很好 相信段落
被表示為一個長方形，在 至少在瀏覽器中的一點，這
它是。
>> ALLISON BUCHHOLTZ-AU：我的意思是， 瀏覽器通常是長方形的，
因此它是有道理的。
>> TOMAS賴默斯：這個想法是在這裡 所有在CSS標籤的
被表示為矩形。
和每一個長方形有四 部分根據CSS，OK？
你有實際的內容。
這就是文字所在。
>> ALLISON BUCHHOLTZ-AU： 也許你的圖片。
>> TOMAS賴默斯：是的。
你有填充，這是 只是某種空白。
那麼你有一個邊界。
然後你有保證金，這 是那個以外的空白。
所以這是沒有意義的 任何人，所以我們
要談論的一秒鐘。
所以在這裡，我們要做的 是我們要創建一些div的，OK？
原諒我，而我 -
>> ALLISON BUCHHOLTZ-AU：我覺得喜歡 我們應該把一個可愛的照片。
>> TOMAS賴默斯：我們當然應該。
>> ALLISON BUCHHOLTZ-AU： 我覺得每個人都
可受益於 可愛的圖片，僅此而已。
>> TOMAS賴默斯：我們能否 從A--中獲益
>> 聽眾：是的，當然。
TOMAS賴默斯：OK，涼。
所以，我們應該把一個可愛 畫面中的某個地方。
ALLISON BUCHHOLTZ-AU：我覺得自己像一個 現在可愛的兔子可能是有用的。
TOMAS賴默斯：當然。
ALLISON BUCHHOLTZ-AU：本週結束。
有一些adorab--
>> TOMAS賴默斯：如何回合一隻小貓？
>> ALLISON BUCHHOLTZ-AU： 一隻小貓作品了。
>> TOMAS賴默斯：酷，因為 有一個網站的。
這就是所謂的PlaceKitten。
ALLISON BUCHHOLTZ-AU：那太好了。
TOMAS賴默斯：是的。
ALLISON BUCHHOLTZ-AU：只為一樣， 佔位符圖像在你的網站。
TOMAS賴默斯：嗯。
還有PlacePuppy。
並有PlaceBacon。
>> ALLISON BUCHHOLTZ-AU：PlaceBacon？
真的嗎？
>> TOMAS賴默斯：哦，我們不 有互聯網連接在這裡。
>> ALLISON BUCHHOLTZ-AU：[呻吟]
悲劇。
TOMAS賴默斯：否則， 我會告訴你的傢伙
如何把圖像在你的網站。
我們將設法讓這個 工作之前，我們得走了。
但現在，我們只是 要談的顏色即可。
我們希望把kittens--的照片
>> ALLISON BUCHHOLTZ-AU：我們做到了。
>> TOMAS賴默斯：--the互聯網 下來的那一刻是。
因此，我們有兩個div，而且我們 要給他們兩個ID。
我們要叫它 “第一”和“第二”。
所以ID =“第一”。
我們打算給他們兩種顏色。
那麼，我們如何選擇的東西 與“第一”的ID？
ALLISON BUCHHOLTZ-AU：點或哈希？
聽眾：夏普。
TOMAS賴默斯：夏普，完美。
夏普，哈希，無論we--
>> ALLISON BUCHHOLTZ-AU： 很多事情來調用它。
>> TOMAS賴默斯：OK。
我們要解決的包括hashtag，並 這就是我們要一起去。
好不好？
>> ALLISON BUCHHOLTZ-AU：包括hashtag。
>> TOMAS賴默斯：所以包括hashtag第一。
>> ALLISON BUCHHOLTZ-AU：那麼 你可以鳴叫的seminar--
包括hashtag CSS，包括hashtag涼爽。
TOMAS賴默斯：包括hashtag迷死人。
ALLISON BUCHHOLTZ-AU： 包括hashtag迷死人，是的。
TOMAS賴默斯：OK。
因此，我們有“第一”，“第二”。
因此，首先，我們將有 紅色的背景色。
ALLISON BUCHHOLTZ-AU：嗯，結腸癌。
TOMAS賴默斯：是啊。
ALLISON BUCHHOLTZ-AU： 我會是你當場檢查。
TOMAS賴默斯：佳佳的拉去。
的blue--背景顏色
>> TOMAS賴默斯：紫色！
>> TOMAS賴默斯：紫色。
ALLISON BUCHHOLTZ-AU：是的。
紫色是我最喜歡的顏色， 我們並沒有使用它。
>> TOMAS賴默斯：紫羅蘭。
ALLISON BUCHHOLTZ-AU：紫羅蘭。
這一工程。
>> TOMAS賴默斯：所以我們 將有兩個div。
他們將是完全空白。
我們也許應該有一些文字。
因此，“第一”將是“HELLO”。
和“老二”會say--
>> ALLISON BUCHHOLTZ-AU：再見。
>> 聽眾： - “世界”。
你好，再見。
ALLISON BUCHHOLTZ-AU：我看到了 在一周他們的演唱會。
TOMAS賴默斯：披頭士？
ALLISON BUCHHOLTZ-AU：對於實數。
他們不是很大。
我不喜歡它。
>> TOMAS賴默斯：我們有 “HELLO”和“再見”。
再次，CSS只是真棒， 因為它承認我們的顏色。
不需要連 擔心它們的存在。
他們這樣做。
>> ALLISON BUCHHOLTZ-AU：它們的存在。
>> TOMAS賴默斯：所以，CSS，我認為有 255字談色。
如果你能想到的顏色之外 那些255一樣，我會留下深刻的印象。
ALLISON BUCHHOLTZ-AU：是的。
我想你們可能 剛進來權後。
>> TOMAS賴默斯：所以在這裡， 你會看到，我們有兩個箱子
對上對方，右上？
HELLO和GOODBYE。
>> ALLISON BUCHHOLTZ-AU： 有之間沒有空格。
他們只是smooshed 右在彼此的頂部。
>> TOMAS賴默斯：所以第一件事 我想我們應該談談
是讓我們也say--耶。
所以CSS代表他們作為排序箱。
和作為盒，它們具有的內容。
和內容，現在是有點 該HELLO或GOODBYE，就是這樣。
好不好？
>> 所以第一件事情之一，你 可以做的是，你可以添加填充。
填充說多少空間 它應該留在每邊。
因此，讓我們說，我想說的 10個像素，每邊。
我會剖析，在第二。
ALLISON BUCHHOLTZ-AU： 所有這些東西在這裡
將要主要在像素 為研討會的休息。
你會看到它有 周圍的一些空間，對不對？
所以你看不出這裡有什麼的 這種無形的排序填充
在每一側，它說，等， OK，你有你的內容 - 箱
>> ALLISON BUCHHOLTZ-AU：你想 剛剛拉起檢查元素？
>> TOMAS賴默斯：是啊，這是個好主意。
ALLISON BUCHHOLTZ-AU：另外，我發現 該檢查的元素是一個好辦法
要弄清楚，如果事情是怎麼回事 錯了，意想不到的事情發生了，
檢查標籤，看看哪些 這就像覆蓋是有幫助的。
>> TOMAS賴默斯：所以我不知道 如果你們能看到這種顏色。
你能嗎？
你會看到這個填充 邊緣的排序。
然後就看到實際的 在藍含量，對不對？
所以這是非常 盒模型的基礎知識。
你有內容。
那麼你有填充。
>> 聽眾：你為什麼不只是 使用盒內the--
>> ALLISON BUCHHOLTZ-AU：沒錯。
因為它只是選擇 元素現在。
>> TOMAS賴默斯：是啊。
其他的事情。
所以，讓我們來談談 用於第二填充指令。
因此，在CSS，測量 需要有一個單元。
所以，首先你得的數額。
所以在這種情況下，我們說10。
然後下一個 我們說的是像素，像素。
其他的則可能是有 之類的東西厘米，英寸。
你可以做這樣的事情， 什麼為10英寸？
它的將是可笑的。
>> ALLISON BUCHHOLTZ-AU：哦，男孩。
>> 聽眾：哇。
>> TOMAS和Allison：是的。
TOMAS賴默斯：所以這就是所有的填充。
我要回去像素。
>> ALLISON BUCHHOLTZ-AU：像素 往往是，比如，標準。
當你看到很多網站， 他們大多​​工作以像素為單位。
TOMAS賴默斯：所以你會看到 無論是pixels--其他的人，你看
是他們，這是新興市場的 等於所述字體的高度
您目前使用。
>> ALLISON BUCHHOLTZ-AU：MM。
TOMAS賴默斯：這是一個很好的方式來表達， 就像，我想盡可能多的空間我的字體
是服用。
ALLISON BUCHHOLTZ-AU：不知道。
你每天都學到新的東西。
TOMAS賴默斯：有 很多的CS測量。
我建議你看看他們。
對於所有的情況下，我覺得 像素應該是充分的。
而且他們還什麼 你會看到
在大多數例子在網上完成。
因此，我們將離開它的像素。
>> 您還可以，我應該say--等 填充集中的所有墊的。
你也可以這樣做 “填充頂”只是set--
ALLISON BUCHHOLTZ-AU：也許 我們會得到我們的“HELLO”回來。
TOMAS賴默斯：--to只是設置 填充在頂部和沒有別的。
所以這四個命令填充頂， 填充底，填充左，
和padding-權利。
>> ALLISON BUCHHOLTZ-AU：就像 你所期望的一個盒子。
>> TOMAS賴默斯：是的。
沒有什麼太瘋狂了那裡。
這是否有意義？
所以這是填充。
我將所有設置 在墊回10。
然後我會轉移到邊境。
>> 那麼，什麼邊界是 邊框是一個奇怪的命令。
這需要排序三個件事。
所以，第一個是有多大你 希望它是作為一個測量。
同樣，我只使用像素。
最後一點我 要添加到測量
是一件事 不需要一個單元為0。
它實際上是不正確 得到0單位，
因為0是0跨越英寸， 像素，厘米，等等。
這一切都只是意味著0，對不對？
所以，首先你給它的測量。
>> 那麼你給它的風格。
所以我會說“實”。
和我們談談這意味著什麼。
然後最後，你給它的顏色。
所以我會說“黑”。
而這些都是我們已經所有的東西 現在見過的，除了款式，
但我們會談論這個。
所以你們看到的測量， 你見過的顏色。
什麼情況是，我們得到這個 它周圍漂亮的黑色邊框，對不對？
你們看看我們是怎麼做的？
>> 聽眾：是的。
>> TOMAS賴默斯：酷。
那麼，什麼是？
所以，首先，它是一個像素。
這是不言而喻的就夠了，對不對？
喜歡，這是一個像素厚。
或者，這將是一個像素，但我 放大，所以這是多一點點
比。
>> ALLISON BUCHHOLTZ-AU：我們有 這是荒謬的分辨率電視。
>> TOMAS賴默斯：是的。
你可以把它做大， 較小的，等等。
因此，這裡的兩個像素的邊框。
你會看到它的兩倍厚。
接下來的事情你必須是彩色的。
這不是有趣。
我不會說話 這個，真的。
>> ALLISON BUCHHOLTZ-AU：但風格 可能只是一點點有趣。
>> TOMAS賴默斯：是的。
所以風格的，也有少數的人 我看到用常用。
第一個穩固的，下一次的 虛線，和最後一個的虛線。
這裡星羅棋布。
你會看到，他們是 一幫點吧？
一個好方法排序，以得到一個不錯的邊界 走，短線也很受歡迎。
>> ALLISON BUCHHOLTZ-AU： 然後當然，我
肯定還有很多其他的 風格，你可以得到。
我們有一個偉大的一套 在結束對你們的聯繫
種細讀和 看多爽CSS。
>> TOMAS賴默斯：然後 最後一件事，我們
要談論的 盒子模型真正的快。
哦，然後邊框， 酷似填充，
你也有類似的東西 左邊框，右邊框，邊框頂部，
邊框底部，它允許你 獲得在特定邊界。
因此，這裡的僅僅是邊框左側定義。
這是否有道理？
>> ALLISON BUCHHOLTZ-AU：這是一個很酷 辦法強調事物或增加
不同元素之間的連線。
TOMAS賴默斯：當然。
所以這就是我們的邊界。
和最後一個的幅度。
保證金的像填充 但它不是within--
ALLISON BUCHHOLTZ-AU：這是 不在身邊你的元素
但實際上圍繞整個 中，我們已經看到。
>> TOMAS賴默斯：是的。
佳佳說，它完美。
這不一樣，在你的 元素，它是圍繞整個框。
這意味著這樣的 背景並不適用於它。
它基本上說， 就像，我什麼都不要
在我這麼多的空間。
所以像我們這裡有 的10個像素的幅度​​。
因此，在10個像素沒事 應該是我旁邊。
這是一種其 空間，但那種沒有。
所以這是非常 盒模型的基礎知識。
這是否有意義？
冷靜，冷靜。
ALLISON BUCHHOLTZ-AU：真棒。
所以現在我覺得我們只是 有我們的清涼資源
我們會帶你們 通過非常快。
我們將actually--好， 我們有互聯網了嗎？
>> TOMAS賴默斯：讓我們 看看我是否能打開up--
讓我看看，如果我 可以迅速得到互聯網
而佳佳談什麼 佳佳願意談論。
ALLISON BUCHHOLTZ-AU： 所以basically--我不
知道還有什麼我可以說在這一點上。
但這些都是一些 真正的好資源。
這些都是那些 托馬斯和我用
而我們實際上 用來預習本。
W3Schools的是一個你 你們應該已經看到過。
我們推薦它了 很多事用CSS。
我知道我把它推薦給 我的部分所有的時間。
>> 一個偉大的事情是，它 讓你那種亂用CSS的
和看到的變化 瞬間在此，
象，雙窗口中查看它了。
所以你不必擔心 建立自己的網頁，
或設立虛擬主機在你的 本土家電和本地主機，
並獲得所有的東西的工作。
這是在頁面中嵌入的權利。
>> 它有這些小 教訓可以
通過學習 更多選擇，
或了解你的操作 字體或背景，或圖像。
你有這些 瞬時結果你
不必做任何 其他準備工作。
所以我喜歡W3Schools的。
這是美妙的。
是它的工作？
>> TOMAS賴默斯：是的。
不，它不是。
難道你要我試試 並重新啟動我的電腦？
還是我們想要to--
>> ALLISON BUCHHOLTZ-AU：我的意思是， 同時，這也將是在網上。
所有的幻燈片將在網上。
所以，我只是強烈建議做這些。
>> 這是偉大的，因為只是 像小抄。
這只是所有的基本 命令你有。
這是偉大的，當你第一次 開始了你的網站。
因為也許你不 想進入所有
真正的細節問題 設計沉重的東西。
你只需要在一個格式化的方式 種是有道理的和意志
做暫時。
如果你真的想 進入它，我知道
這是一樣，一 托馬斯最喜歡引用。
我們用它來 準備，它的美妙。
這是從Mozilla的開發人員。
>> TOMAS賴默斯：所以Mozilla是 誰使Firefox的人。
而這只是自己的開發人員 參考，我認為這是真棒。
它有一個美好的 資源的列表。
所以我們have--
>> ALLISON BUCHHOLTZ-AU： 然後最後一個音符是
當你試圖 設計你的網站，
汲取靈感的東西 你認為是漂亮。
檢查元件， 檢查源代碼
可超有用 對於試圖找出
如何風格你自己的網站。
>> 通常情況下，我覺得最好的 這樣，除了實驗，
只是看 事情是漂亮。
我覺得真的很難只 種設計的東西你自己，
特別是在開始時。
所以，請看看網站 你喜歡看。
找出是什麼使 他們吸引你。
然後隨意 嘗試和複製的。
>> TOMAS賴默斯：對。
偶喜歡的網站 這樣，你可以看到
有絕對是一個DIV頂部。
然後，你還要在另一個分區 在這裡，這是CSS的迷死。
然後你有一大堆的鏈接在這裡。
如果你真的只是檢查 元素，可以排序的
開始看到什麼做網站 樣子，哪能
重建，如果我想。
這是否有意義？
因此，我們只剩下三分鐘。
所以，問題嗎？
它們中的任何？
是。
>> 顧客：顏色 矩形，你會如何
have--如果你不希望它 要在整個頁面上，可以
你已經是去對面只 一半頁面或只是文本？
>> TOMAS賴默斯：是的，絕對。
因此，讓我真正看到。
我有兩個想法。
所以首先，你 也可以用百分比。
>> 聽眾：真的嗎？
>> ALLISON BUCHHOLTZ-AU：那麼什麼 查找是相對的定位。
這件事情，我們 沒有時間進入，
但它的東西我絕對 建議你們檢查。
>> TOMAS賴默斯：那麼百分比。
看看我們如何使它 只有50％的寬度？
ALLISON BUCHHOLTZ-AU：如果您 實際上知道的像素數，
你可以更精確的方式。
你可以反复折騰它。
但是50％以上。
如果我們要調整我們的瀏覽器， 這將使其更小。
>> TOMAS賴默斯：嗯，這是 基本上是50％，現在，我想。
它的50％，然後將餘量 已被添加到這一點。
CSS有很多怪癖。
所以現在這是 50％的頁面寬度。
但請記住，你有10 像素從每一側取下。
所以，如果你是移動，對 在瀏覽器的左邊緣，
那麼它看起來像50％。
同樣，就像我說的，CSS可以 有很多的猜測和檢查。
就像，你認為什麼是 要表現的一種方式，
但它的行為是完全不同的方式。
>> ALLISON BUCHHOLTZ-AU： 而你只是變得更聰明，
而你只是得到一個更好的 直覺它，你待著。
>> TOMAS賴默斯：它 變得越來越糟糕。
所以，它實際上只是一場比賽。
>> ALLISON BUCHHOLTZ-AU： 這是超級令人鼓舞。
我們希望他們能夠喜歡CSS。
>> TOMAS賴默斯：CSS是真棒。
記住這一點。
其他問題嗎？
>> ALLISON BUCHHOLTZ-AU：一件事。
還要別的嗎？
酷。
>> TOMAS賴默斯：真棒。
>> ALLISON BUCHHOLTZ-AU：好吧，如果你 你們有什麼問題以後，
我們總是可以按往常一樣。
你可能會看到一些 美國最終項目
絕對的黑客馬拉松。
>> TOMAS賴默斯：當然。
並在公平的。
>> ALLISON BUCHHOLTZ-AU：而在展會上。
呵呵。
>> TOMAS賴默斯：期待 看到所有的awesome--的
>> ALLISON BUCHHOLTZ-AU：我們會看到 所有你真棒網站
這將是美麗的。
TOMAS賴默斯：您可以隨時 看看，喜歡的網站
誰曾一樣，良好的CSS，然後 像那些誰沒有嘗試做CSS。
ALLISON BUCHHOLTZ-AU：此外，另一個 的事情，一件事，探討
是自舉。
所以引導是偉大的。
>> TOMAS賴默斯：谷歌，如果你 -
>> ALLISON BUCHHOLTZ-AU：谷歌吧。
這是美妙的。
你會愛上它。
現在你有一個 基本的了解CSS的，
它會讓很多更有意義。
真棒。
謝謝，伙計們。
>> TOMAS賴默斯：非常感謝你。