[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] 嗯，我從哪裡開始呢？ 讓我這樣做，沒有 - [笑]好吧。 添加一個 - 讓我改變措辭。 哦。抱歉。