[Powered by Google Translate] [CSS] [王陽樂 - 哈佛大學] [這是CS50。 - CS50.TV] 今天，我們將談論CSS層疊樣式表。 那麼究竟什麼是CSS？ 好吧，讓我們打破了長期的CSS跌分為2部分： 層疊樣式表。 級聯是一點點更複雜，它的東西，我們將在另一個視頻。 但對於初學者來說，非常樣式表什麼是CSS的提示。 它添加樣式到HTML的網頁， 如何改變網頁看起來美觀。 這意味著從在頁面上的文本的字體的內容的定位 等涼的東西，像一箱的邊角圓潤，為文字添加陰影。 你甚至可以做瘋狂的事情，喜歡把事情動畫在屏幕上。 那麼，我們如何使用CSS與HTML？ 我剛寫了這個可憐的漂亮的網站。 如果羅布現在來看看這個網站，他可能會說類似的東西， “哇！我的介紹看起來太可怕了。約瑟夫，你是一個可怕的設計師。” “使用默認的Times字體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添加打開和關閉括號和轉移早期的內嵌聲明 這些括號內，刷新， ，陰涼，羅布的介紹還是有它減去凌亂內嵌醜陋的周圍的黑色邊框。 現在，如果我們想，選擇H1內部Rob的前奏？ 你可能會想，“讓我們把它上的一個ID，然後將我們的早期風格。” 這樣的作品，但CSS有其他方式讓你選擇元素 通過使用我們所說的組合子混合使用簡單的選擇器。 例如，可以使用空白字符作為一個組合子 指定的所有實例1選擇，裡面住的另一個選擇。 這聽起來複雜得多比它實際上是。 下面是一個例子。 我們將鍵入＃搶，添加一個空格，然後按照一個h1， 另一種簡單的選擇稱為標籤選擇器選擇類型的元素 一樣的div段落。 空間結合我們的2個簡單的選擇器，將所有的CSS聲明 h1標籤裡面住的元素ID =“搶”花括號。 只是為了讓你相信它的工作原理，我會改變字體顏色為白色，刷新， 和Rob的頭，你看，現在是白色的。 所有這些工作正好說明使用規則，而不是內聯樣式 我們可以得到更清晰的代碼。 事實上，如果這種風格的塊開始變得有點大， 我什至可以把這些樣式完全進入一個不同的文件。 本文檔中要包括這個新的文件，如CSS，我就用HTML的鏈接標籤。 在這裡，我告訴我鏈接外部樣式表，rel屬性， 並指定文件路徑，我的href屬性。 現在我的HTML標記和CSS很好地組織完全分開的文件， 這是幾乎總是設計師喜歡用HTML和CSS的方式。 如果你想知道，簡單的選擇包括ID選擇 像我們剛才看到的和標籤選擇 以及類選擇器選擇某一類的元素， 屬性選擇器選擇元素的其他屬性，如類型=“無線電” 單選按鈕輸入，和pseudoselectors像盤旋和重點 指定造型相互作用時喜歡鼠標在一個元素出現。 常見的組合程序，包括為所有兒童的空白 和逗號區分選擇。 其他你可能會遇到包括直接兒童的箭頭， 波浪號元素後所發生的所有的兄弟姐妹， 加號1兄弟後立即出現的元素。 通過結合這些選擇和組合子， 你可以擴大範圍​​的造型，就可以實現對一個給定的網頁 寫CSS更有效率。 只需幾行CSS，你看我這裡打字， 我可以很快像這個樣子像這樣的東西。 我是約瑟，這是CS50。 [CS50.TV] 嗯，我從哪裡開始呢？ 讓我做，沒有 - [笑]好吧。 添加一個 - 讓我改變了這一措辭。 哦。抱歉。