[Powered by Google Translate] [CSS]
王陽樂 - 哈佛大學]
[這是CS50。 - CS50.TV]
>> 今天，我們將談論CSS層疊樣式表（Cascading Style Sheets）。
>> 那麼究竟什麼是CSS？
好吧，讓我們打破了長期的CSS成兩部分：
層疊樣式表。
級聯是一個稍微複雜一點，它的東西，我們將在另一個視頻。
但對於初學者來說，非常樣式表CSS做什麼的提示。
它添加樣式到HTML的網頁，
如何改變網頁的美觀看起來。
這意味著所有的文字的字體在網頁上的內容定位
等涼的東西，像圓形的盒子的角落裡，或為文本添加陰影。
你甚至可以做瘋狂的事情，比如做事情的動畫在屏幕上。
>> 那麼，我們如何使用CSS和HTML嗎？
採取前瞻性的網站，我只寫了這個可憐的。
如果羅布看看這個網站現在，他很可能這樣說：
“哇！我的介紹看起來很可怕。約瑟夫，你是一個可怕的設計師。”
“使用默認的字體Helvetica是好多了。”
>> 那麼，什麼可能是最簡單的方法適用的造型，羅布希望嗎？
最明顯的方法很多人最初寫CSS
是把元素本身就是我們所說的正確的樣式聲明
使用HTML樣式屬性。
我們要改變樣式聲明只包含HTML元素的CSS屬性
其次由一個冒號後面的新的價值的財產和一個分號結束。
例如，讓我們說，羅布希望他介紹周圍的黑色邊框。
首先，我們把羅布在這裡的div style屬性
然後在雙引號內把一個CSS聲明：
“邊界：1px固體黑色;
1個像素的邊框寬度，固體是指邊境的風格，
和結束時的顏色確定邊框的顏色是什麼。
>> 如果我們想多種風格元素，這些聲明的順序寫入。
例如，如果羅布希望他的頭球具有藍色背景的文本中黑體
周圍的文字和更多的空間，我們可以這樣做：
風格=“字體：黑體;背景色：藍色填充：5PX;
最後一個分號是可選的，但人們通常保持其一致性的緣故。
>> 我們將解釋一些更酷，更複雜的CSS屬性保存
另一個視頻。
如果你有心靈的東西，只是谷歌搜索你想要的效果的CSS
可能會給你不錯的成果。
最酷的是，CSS是非常廣泛的，
所以賠率是，如果有什麼事情你想做的事 - 在合理的範圍內 -
CSS可能做到這一點。
我們把這種內聯樣式的造型。
元素的風格，良好的開始標記。
>> 人真的很喜歡來組織，
你可能會開始變得多麼的糟糕，這一切看起來有點惱怒。
試想一下，如果你沒有這樣做，為每個頁面上的元素，
加上現在你的HTML和CSS都混雜和混亂。
毛，對不對？
為了解決這個問題，人們終於開始抓他們的HTML標記分離
從他們使用一些所謂的CSS選擇器的CSS樣式。
使用CSS選擇器來選擇元素聲明應用。
結合，具有一系列的CSS聲明的選擇器通常被稱為作為CSS規則。
這些規則將打開和關閉HTML樣式標籤之間，
常常在該文件的頭部。
>> 這是很容易看到的一個例子，
所以，讓我們開始創建一個簡單的CSS規則。
首先，讓我們把我們的HTML的head部分的style標籤。
接著，選擇器。
首先，我們將使用一個最簡單的選擇器，哈希符號，
選擇一個HTML元素的ID屬性。
在這種情況下，我們將選擇代表羅布介紹的div
通過鍵入div的ID，搶的哈希符號。
現在的聲明。
羅布的div，我們增加了打開和關閉括號，並把我們前面的內聯聲明
這些括號內的，刷新，
涼爽，Rob的介紹仍然有它周圍的黑色邊框減去凌亂的內聯醜陋。
>> 現在，如果我們想要選擇Rob的介紹裡面的h1？
你可能會想，“讓我們把一個ID就可以了，然後將我們先前的風格。”
這樣的作品，但CSS有其他的方式讓你選擇元素
通過使用我們所說的組合子混合簡單選擇。
例如，空白字符可以作為一個組合
指定的所有實例1選擇器，裡面住的另一個選擇。
這聽起來複雜得多，它實際上是。
下面是一個例子。
我們將輸入＃搶劫，添加一個空格，然後按照它的H1，
另一個簡單的選擇一個標籤選擇器，選擇類型的元素
如申報單或段落。
空間結合我們的簡單選擇，將所有CSS聲明
和花括號裡面的元素的id =“搶”生活的h1標籤。
只是為了說服你，它的工作原理，我會改變字體顏色為白色，刷新，
和Rob的頭，你看，現在是白色的。
>> 所有這些工作表明一點，使用規則，而不是內聯樣式
我們可以得到更清晰的代碼。
事實上，如果這種風格的塊開始變得有點大，
我什至可以把這些樣式到一個不同的文件完全。
>> 本文檔中包括這個新的CSS文件，我只使用HTML的link標籤。
在這裡，我告訴我連接到一個外部的樣式表，rel屬性，
和我href屬性指定文件的路徑。
現在，我的HTML標記和CSS很好的組織完全獨立的文件，
這是幾乎總是設計者更喜歡使用HTML和CSS的方式。
>> 如果你想知道，簡單的選擇器，ID選擇器
像我們剛才看到的和標籤選擇器
以及類選擇器選擇某一類的元素，
屬性選擇器選擇元素的其他屬性，如類型=“無線電”
單選按鈕，的投入，pseudoselectors的一樣盤旋和重點
指定造型時喜歡鼠標在一個元素上發生相互作用。
>> 常見的選擇符包括為所有兒童的空白
和逗號區分的選擇器。
其他您可能遇到的箭頭，直接孩子們只，
波浪線的元素之後發生的所有兄弟，
的兄弟來後，立即元素的加號。
>> 通過結合這些選擇和組合子，
你可以擴大範圍​​的造型，你可以實現對指定的網頁，
和更有效地編寫CSS。
只是一對夫婦的CSS行，你看我打字這裡，
我可以快速做出這樣的事情像這個樣子。
>> 我叫約瑟夫，這是CS50。
>> [CS50.TV]
>> 嗯，我從哪裡開始呢？
讓我這樣做，沒有 - [笑]好吧。
添加一個 - 讓我改變措辭。
哦。抱歉。