[音樂播放] 

道格·勞埃德：那麼，讓我們多了一個 視頻談多了一個語言。 這一次，我們將討論CSS。 這樣的CSS，這是短期的 層疊樣式表， 是我們用另一種語言 建設網站的時候。 想想看，是這樣的。 如果HTML是什麼，我們用它來組織 內容我們希望把我們的頁面， CSS是，我們一般使用的工具 定制我們的網站怎麼看， 以及如何在用戶體驗真正的 是，我們的網站進行交互。 

類似於HTML，CSS是 不是一種編程語言。 它不具有邏輯。 它不具有的變量。 它不具有任何種類的該 流相關的事情，C那樣被。 這是一種造型語言。 其語法相當 簡單，只是介紹 如何的元素我們的 頁面有一定的HTML 元件應該被修改。 為此，如果你還沒有 但觀看我們的視頻在HTML， 或不熟悉 HTML通常，你 可能想看一看那 首先，因為這CSS的討論 是要依賴於 HTML有一定的了解。 

因此，這裡是一個非常 簡單的CSS樣式表。 即使你從來沒有 之前，CSS編程， 我敢肯定，你可以計算出 正是這個樣式表做什麼。 它有什麼作用？ 好，適用於我們的網絡體 身體標記之間的網頁，一切 在我們的HTML，並將這 該頁面以藍色背景色。 嗯，這是一個非常簡單的樣式表。 它實際上是非常人性化 友好的語言，CSS。 所以，即使你從來沒有使用過， 你可能會猜到這是什麼做。 事實上，如果我們加載一個頁面，其中 這個樣式表嵌入不知何故， 我們網頁的背景顏色會 是藍色，而不是標準的白色。 

那麼，我們如何建立樣式？ 那麼首先，我們要 確定一個選擇器。 在最後一個例子， 該選擇是身體。 然後我們有一個開放 大括號，而且我們 要開始定義 樣式的選擇符。 在大括號之間，我們 只是有鍵值對的列表。 以前的值對是 背景色的藍色分號， 但我們可以做更多的這些以及更多。 你可以有多重的東西應用 該標籤，即選擇的身體。 它們中的每一個是由一個分離 分號，我們稱之為他們每個人 一個宣言，一個CSS聲明。 當我們所有的樣式，我們做 要應用到特定的標籤， 我們只是有一個右大 振奮結束樣式表， 我們正在做的定義樣式表 該特定選擇器。 

什麼是一些常見的CSS屬性？ 好吧，也許你想要把 周圍的東西邊界。 所以，你可以說，邊境， 這將是你的關鍵， 然後你的價值觀會， 什麼款式，顏色和寬度 你希望它是。 因此，風格可以是固體 線，點線，虛線， 一個棱線，這將是波形線。 也許你想擁有它 是藍色或黑色或綠色。 也許你希望它是 1或2或10像素寬。 您可以指定所有這些事情。 也許你想設置背景 你的網頁在一個特定的方式顏色。 我們已經看到，設置 身體的背景是藍色的。 

然後你可以使用一個關鍵詞， 所以CSS有一定的顏色 被內置到它，藍色，綠色， 黑色的，很簡單的顏色，我們知道。 但你也可以指定任何 十六進制顏色，你會喜歡的。 回想一下，顏色可以被識別 由一組三十六進制數 從0到255，RG和b，所述 紅色，綠色和藍色分量。 因此，我們可以指定 我們希望通過任何顏色， 代替使用藍色或綠色或黑色， 使用英鎊，然後六個內六角的數字， 這將給予我們 六個數字顏色。 所以這是背景色。 

我們也有前台 顏色，這通常是 要在您的網頁的文本。 你可以同樣做到這一點 與關鍵字和六個兩位數的十六進制。 所以，你可以指定任何顏色，你 想為你的網頁的文本 針對一個特定的 背景色，同比增長上面。 您還可以更改和處理 與字體，以及文本的方式 呈現在網頁上。 

所以，你可以改變您的字體大小。 您可以使用關鍵詞，如額外的， 額外的小，或者XX小或中等， 大，等等。 您可以使用固定點，10 點，12點，依此類推。 可以使用百分比，80％，20％， 其中100％是默認的字體 大小，通常要 是像11或12分。 或者，你甚至可以作為它的基礎關閉 的最新的字體大小。 如果你只是寫東西，你知道的 你想要的是它要小一些， 但你不知道到底是什麼大小你 希望它是，好了，你可以說， 字體大小更小。 它將基地起飛的， 剛起來上面，它的字體大小。 你可以變得更小或更大。 所以這是一個很大的不同 方法來指定字體大小。 

您還可以指定哪些 你想字體系列。 如果你有一個特別的 名字，還有在某種程度上CSS-- 我們不會談論它 這裡 - 定義一個非常特定的字體 並將其嵌入到您的網頁。 您還可以使用通用名。 有很多的網絡安全字體 這是預先定義的CSS。 如果你是微軟的用戶 辦公室在過去的20年中， 你可能熟悉 很多這些Web安全字體 目前，宋體​​，Arial字體， 宋體，格魯吉亞，宋體，宋體， 等。 這些都被認為是網絡安全的字體。 而實際上，部分 因此，他們走過來的 還是被用來製造web--每一頁 有機會訪問這​​個默認設置的字體 各種襯線，而這一切 字體的東西，我們不會進入， 但這些通常 在你的CSS訪問， 即使你不 另外定義的字體。 最後，你可以調整你的文字， 而不是它是，默認情況下，對齊 向左，你可以 它右對齊， 或者你可以對齊居中，或 正當使命中了利潤。 因此，這些都是可以使用的所有選項 改變你的文字看起來像， 以及它如何顯示在您的網頁上。 

您的選擇不 必須僅標籤。 我們之前看到一個body標籤 選擇器和標籤選擇器 看起來就像這樣。 你的名字標籤，然後 定義樣式表的標籤。 但你也可以做一些事情 所謂的ID選擇。 一個ID選擇看起來很相似。 但是請注意，現在我沒有使用 HTML標記，我使用的，在這種情況下， #unique或哈希獨特。 如果您還記得我們 視頻HTML，我們聊 有關如何標記可以有屬性。 

而一個屬性適用 到幾乎所有的HTML標籤， 但我們並沒有談論它， 一些所謂的ID標籤。 因此，這個特殊的CSS將 僅適用於具有HTML標記 一個非常具體的ID，您已經命名。 所以，如果你有地方 在你的代碼，在某處 在你的HTML文件，標籤和你 指定為屬性的標籤， ID等於獨特的，這 尤其是樣式表 這裡將僅適用於間 該標籤具有獨特的ID。 

你也可以做一些事情 所謂一類選擇。 因此，除了具有 ID屬性，你也可以 添加一個類屬性的HTML標籤。 而當你使用一個類屬性， 它可以應用到多個標籤。 所以，如果你有幾件事情， 都差不多，也許你想說的話， 開放標籤等等，等等，等等， 胡說，班等於學生。 然後這個特定 樣式表將適用 以它的類每個標籤是學生。 在這種情況下，我們會設置 背景色為黃色， 我們會設置不透明度，其 是我們沒有談論一個標籤， 只是涉及如何透明 事情是，到70％，在這種情況下。 

有兩種選擇 寫作樣式表。 你可以把它們寫 直接到HTML 通過將樣式表 在風格上標記之間。 而那些風格標籤去內 你的網頁的head標籤。 該或許更優選的方式做 這是寫一個單獨的.css文件， 然後將其鏈接到您的 使用link標籤記錄。 鏈接標籤，再次，是 從超鏈接不同， 如果從我們的視頻回憶的HTML。 而link標籤是我們如何 拉在不同的文件。 它有點像相當於 ＃包括用於網頁編程的。 

因此，讓我們來看看table.HTML。 如果您還記得我們 HTML視頻，我發現 的一個非常一例 簡單的乘法 表看起來相當 醜陋，也許有 一個方法，使其具有更好的 CSS，使之實際上看起來 更像一個乘法 表，什麼 這不只是粘在一起 沒有具體分工 行和列之間。 因此，讓我們頭以上 CS50 IDE，看一看 在如何將CSS，排序，調整 我們以前開始， 並使其東西好了很多。 

所以我們在CS50 IDE 現在，如果不熟悉， 我們會拉起來在這 表HTML頁。 Table.HTML基本 剛剛定義的內容 的multiple--它應該是 一個四乘四乘法表。 這是非常簡單的。 而且我們認為，這將 看起來很良好的組織。 但事實上，當我們預覽該頁面， 我們看到，它是一種醜惡的，對不對？ 很顯然，我們在這裡的行和列。 有某種分離。 但它不是一個有意義的分離。 我們沒有真正得到 這裡太多的信息。 還有的之間沒有分離 在術語的行和列 的水平或垂直的規則。 我們或許可以使這 看起來更好一點。 所以讓我們試試。 所以，我要在這裡關閉此選項卡。 而且我要結束我的table.HTML， 我有另一個版本在這裡 所謂table2.HTML。 我們將打開了。 的頁面的主體是 幾乎相同， 但我已經改變了 在頂部點點。 我會在這裡向上滾動。 注意，這一次，我 採用內嵌式的標籤。 我已經開了一個風格的標籤，而我現在 定義只是裡面的CSS樣式表 它。 我有一個樣式表，上面寫著，表。 這是我的標籤選擇器。 我不使用點或散列， 我會，如果我做 是使用一個ID或類選擇。 我有一個標籤選擇這裡 - 表。 這種風格會 適用於每個表的標籤。 顯然，我想提出一個 像素寬，固體藍色邊框， 在我的表。 這聽起來像它可能會 幫助的情況下，對不對？ 我們將有 事情看起來好多了。 所以，這是好的。 在文體上，我只是 嵌入我的樣式表在這裡。 這當然是一個 可以接受的方式來做到這一點。 讓我們來看看這是什麼樣子。 所以，我會回去到這裡，和 我會預覽我的table2.HTML。 嗯，這並不完全是我想要的， 但它正是我們提出的要求。 我們說，這種風格 要應用到我們的餐桌。 我們的餐桌現在有一個像素 周圍寬闊，堅實的藍色邊框。 我們沒有真正得到 在表格單元格。 我們才剛剛在餐桌上。 所以CSS工作。 它應用了 樣式表到我們的餐桌。 但並沒有完全做到 我們希望它做什麼。 我們怎麼能這麼做 我們希望它做什麼？ 

好吧，讓我們來看看在一個多 這個版本的中table3.HTML。 所以，我只是要關閉這些標籤。 我要回去了這裡我 文件樹，並開闢table3.HTML。 再次，它會好看 類似此處在開始。 但通知，這一次，而不是使用 嵌入權有一個樣式表， 我要去一個鏈接 使用樣式表的鏈接標籤。 所以我顯然是連接在 樣式表叫tables.CSS， 這也等於 樣式表僅僅是指：好， 文件相對於該是什麼就是什麼 我doing--的是，我是一個樣式表 用我的網頁。 所以，如果我真的想看到什麼 我用CSS來這裡幹什麼， 我需要去開了 table.CSS文件中。 所以我們要回去在這裡 再次我們的文件樹。 有table.CSS。 我們將彈出打開。 現在我們看到了一點CSS的。 很顯然，我有一對夫婦 事情怎麼回事。 我顯然希望把五 像素寬，純紅色邊框， 在我的桌子。 我們已經知道，這是怎麼回事 只是去在外線。 我們看到，在table2.HTML。 每行，我 顯然想指定 該行高度為50像素高。 因此，對於每一行，記 這就是tr標籤呢， 我讓它成為50像素高。 

最後，我有這樣的評論。 這就是我們如何在CSS中的註釋。 這是非常相似的，抓住塊 註釋語法斜線明星。 所有你想要的文字。 有沒有斜線斜線雖然CSS。 對於短行內註釋，我們有 在這裡使用這種特殊的格式。 它看起來像我做一個 很多事情在我的TD標記。 記住TD標籤，或表 數據，這真的只是 內的列 我們的行，顯然 每段數據的 在我的表，我想 設置背景顏色 是黑色的，顏色為白色， 顏色為前景色。 因此，這將是 我的網頁的文本。 我想大字體，22 字體，我想 它是字體系列，喬治亞州。 所以我不打算 有默認的字體。 我要去指定格魯吉亞，這 是那些網絡安全的字體之一 我們已經看到過。 我希望我的文字對齊 集中，在框的中央， 我不希望它被拋 對齊或右對齊。 我希望我的列寬 為50個像素寬為好。 讓我們來看看 這是什麼樣子， 看看這也許是一種進步。 所以我要去table3.HTML，這 召回，包括table.CSS為紐帶， 我們會進行預覽。 這是好多了，對不對？ 這實際上是開始尋找一個 很多更像是一個乘法表。 我有一個紅色的邊框 在我的桌子，但現在 我還指定了 每行50個像素寬， 或者是50個像素tall--藉口 我 - 每列50個像素寬。 每一列中的數據，並且只有 中的數據，有一個黑色的背景。 所以這就是為什麼那些 白線在那裡。 因為在該空間 所有這些單元之間， 它不是在邊界 與本身，它只是 我只填寫 細胞，這實際上 使表的邊​​界，其中 顯然確實存在，一直以來，它 只是細白線。 現在，他們是可見的。 現在，他們突然在屏幕上。 所以這是一個非常簡單的 樣式表，我申請， 現在我的表看起來更像 一個四乘四乘法表， 而不是僅僅混亂的爛攤子，其中 一切是顯然的行和列， 但不是超級良好的組織。 我們真的只是冰山一角 你可以用CSS在這裡做什麼。 幸運的是，CSS文件 是非常簡單的。 您將使用它的幾個 屬性，相當頻繁。 我們談到的那些 此前在這部影片。 有幾種您 可能不會使用所有。 而這，也行。 但是，僅僅知道，有一個 大量的文檔在那裡。 因此，即使我們沒有面面俱到， 你肯定不會留在你自己的。 但是，CSS是真的很好玩 嘗試。 而且我會強烈建議您 玩弄你的網頁， 看你如何讓他們 外觀和感覺，以改善用戶 訪問你的頁面的經驗。 我是道格·勞埃德。 這是CS50。