免費(fèi)AI編程助手
CSS基礎(chǔ)
CSS（層疊樣式表）是你用來為網(wǎng)頁添加樣式的代碼。這一節(jié)內(nèi)容會帶你了解你所需的基礎(chǔ)知識。我們將解答像這樣的問題：怎樣將文本改成黑色或紅色？怎樣將內(nèi)容在屏幕上這樣或那樣的地方顯示？怎樣用背景圖片或背景顏色來裝飾網(wǎng)頁？
什么是CSS？
就像 HTML，CSS也不是真正的編程語言。它是樣式表語言，也就是說，它允許你有選擇性地為 HTML 文檔的元素添加樣式。舉例來說，要選擇所有的 p 元素阿然后將它們的文本改成紅色，你應(yīng)該這樣寫：
p {
color: red;
}讓我們動手操作一下：將這三行 CSS 代碼粘貼到文本編輯器里的新文件中，然后保存文件名為style.css，保存到styles文件夾內(nèi)。
但是我們還需要將 CSS 文件引用到 HTML 文檔內(nèi)，否則的話 CSS 代碼不會影響到 HTML 文檔在瀏覽器里的表現(xiàn)。（如果你沒有完整地跟隨我們的指導(dǎo)，在 文件處理 和 HTML基礎(chǔ) 中查看你所需的內(nèi)容。）
- 打開
index.html文件，然后將下面一行粘貼到頭部，也就是<head>和</head>標(biāo)簽之間。<link href="styles/style.css" rel="stylesheet" type="text/css">
- 保存并用瀏覽器打開文件。你應(yīng)該看到這樣的頁面：
如果你的段落文字現(xiàn)在是紅色的了，那么祝賀你，你已經(jīng)成功地寫下了你的第一句 CSS 代碼！
解析CSS規(guī)則
讓我們仔細(xì)看一看 CSS：
整個結(jié)構(gòu)稱為 CSS 的規(guī)則，注意里面單獨(dú)的部分也是一樣：
- 選擇符（Selector）
- HTML 元素放在規(guī)則最開始。它選擇了一個或多個需要添加樣式的元素(在這個例子中就是 p 元素)。要給不同元素添加樣式只需要改變選擇符就行了。
- 聲明（Declaration）
- 一個單獨(dú)的規(guī)則比如
color: red;這指定了你想要添加樣式元素的屬性。 - 屬性（Properties）
- 這是你改變 HTML 元素樣式的方法。（在這個例子中
color就是p元素的屬性。）在 CSS 中，你通過選擇合適的屬性來改變你的規(guī)則。 - 屬性值（Property value）
- 在屬性的右邊，冒號后面，我們擁有屬性值，用于從指定的屬性里的非常多的外觀中選擇一個值（我們除了
red之外還有很多顏色的值可以選擇）。
注意其他重要的語法：
- 規(guī)則里除了選擇器的部分都應(yīng)該包含在成對的大括號里(
{}).。 - 在聲明里，你應(yīng)該用冒號分離開屬性與屬性值。
- 在規(guī)則里，你應(yīng)該用分號分離開各個聲明。
如果要同時修改多個屬性，你只需要將它們用分號隔開，就像這樣：
p {
color: red;
width: 500px;
border: 1px solid black;
}選擇多個元素
你也可以選擇多種類型的元素然后為它們添加一組樣式。記得將不同的選擇符用逗號分開。例如：
p,li,h1 {
color: red;
}不同類型的選擇器
我們擁有許多不同類型的選擇器。在上面，我們只看到了元素選擇器，用來選擇 HTML 文檔中給定的元素。但是我們可以選擇更加具體的類型。下面是一些常用的選擇器類型。
| 選擇器 | 選擇的內(nèi)容 | 示例 |
|---|---|---|
| 元素 選擇器(有時也稱作標(biāo)簽或類型選擇器) | 所有指定的 HTML 元素 | p選擇 <p> |
| ID 選擇器 | 指定 ID 的元素（在 HTML 頁面中，每個 ID 只被允許指定一次） | #my-id選擇 <p id="my-id">或<a id="my-id"> |
| Class 選擇器 | 指定 Class 的元素（多個 Class 可以同時出現(xiàn)在一個頁面中） | .my-class選擇 <p class="my-class">和<a class="my-class"> |
| 屬性 選擇器 | 頁面上擁有指定屬性的元素 | img[src]選擇 <img src="myimage.png">而不是<img> |
| 偽類 選擇器 | 指定的元素，但是需要在特殊的狀態(tài)，比如懸停 | a:hover選擇 <a>，但是只在鼠標(biāo)懸停在鏈接上時 |
這里有更多選擇符讓人探索，在 選擇器指南 中你可以查看更多詳細(xì)的信息。
字體和文本
既然我們已經(jīng)探索了一些 CSS 基礎(chǔ)，現(xiàn)在就讓我們開始添加一些規(guī)則和信息到我們的style.css文件中來讓我們的示例更加美觀。首先，讓我們的字體和文本變得更加漂亮。
提示：我們還添加了一條注釋來解釋 "px" 的意思。CSS文檔中任何在/*和*/之間的內(nèi)容都是注釋，瀏覽器加載代碼時會忽略其中的內(nèi)容。注釋是為了讓你寫下關(guān)于你所做的有幫助的筆記所用。
- 首先，找到我們在之前訪問 Google Fonts 中保存的內(nèi)容。在
index.html的頭部中任意位置添加<link ... >元素（注意：在<head>和</head>之間）。它將看起來像下面這樣：<link rel='stylesheet' type='text/css'>
- 接下來，刪除
style.css文件中已有的規(guī)則。那是一次好的嘗試，不過紅色的文字看起來并不太舒服。 - 將下列代碼添加到相應(yīng)的位置，用你在 Google-Fonts 找到的字體替代
font-family中的占位符。（font-family意味著你想要你的文本使用的字體。）這條規(guī)則首先為整個頁面設(shè)定了一個全局字體和字體尺寸（因?yàn)?nbsp;<html> 是整個頁面的父元素，而且它所有的子元素都會繼承相同的font-size和font-family）：html { font-size: 10px; /* px 意為“像素（pixels）”: 這個基礎(chǔ)字體的尺寸現(xiàn)在是10像素 */ font-family: placeholder: this should be the rest of the output you got from Google fonts } - 現(xiàn)在我們將要為 HTML 中 body 元素內(nèi)的 (
<h1>,<li>, 和<p>)元素設(shè)置字體尺寸。我們也會將標(biāo)題居中顯示，同時為 body 元素內(nèi)的內(nèi)容設(shè)置行高和間距，來讓頁面可讀性更高。h1 { font-size: 60px; text-align: center; } p, li { font-size: 16px; line-height: 2; letter-spacing: 1px; }
你可以調(diào)整這些 px 值到任何你喜歡的值，來讓你的設(shè)計更符合你的心意，不過通常你的設(shè)計應(yīng)該看起來像這樣：
盒模型
在你寫 CSS 時你會發(fā)現(xiàn)大部分都是關(guān)于盒模型的——設(shè)置它們的尺寸，顏色，位置等等。大部分 HTML 元素都可以被看作一個一個層疊的盒子。
毫無驚喜地，CSS 布局就是基于盒模型的。每個占據(jù)你頁面空間的塊級元素都有相似的屬性：
內(nèi)邊距（padding），圍繞著內(nèi)容的空間（比如圍繞段落的空間）邊框（border），緊接著內(nèi)邊距的實(shí)體線段外邊距（margin），圍繞元素外部的空間
在這一部分我們用：
width（屬于一個元素的）background-color，元素內(nèi)容和內(nèi)邊距之后的顏色color，元素內(nèi)容的顏色（通常是文本）text-shadow：為元素內(nèi)的文本設(shè)置陰影display：設(shè)置元素的顯示模式（暫時不用擔(dān)心這部分內(nèi)容）
讓我們趕緊開始添加更多的 CSS 到頁面中吧！將這些新規(guī)則都添加到頁面的底部，不要害怕改變了屬性的值會造成的后果，趕緊去嘗試吧！
改變整個頁面的顏色
html {
background-color: #00539F;
}這條規(guī)則設(shè)置了整個頁面的背景顏色。將上面顏色的代碼改成你在 你的網(wǎng)頁將呈現(xiàn)什么樣子？中選擇的主題顏色。
解析 body 元素
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}在 body 元素中有好幾條聲明，我們現(xiàn)在一條一條的看一下：
width: 600px;— 強(qiáng)制頁面永遠(yuǎn)保持600像素寬。margin: 0 auto;— 當(dāng)你在margin或padding中設(shè)置兩個值時，第一個值代表元素的上方和下方（在這個例子中設(shè)置為 0），而第二個值代表左邊和右邊（在這里，auto 是一個特殊的值，意思是水平方向上左右對稱）。你也可以使用一個，三個或四個值，查看 這里 。background-color: #FF9500;— 指定元素的背景顏色。我們給 body 元素用了一種略微偏紅的橘色以與 html 元素形成對比。繼續(xù)實(shí)驗(yàn)，嘗試下 white 或者其他你喜歡的顏色。padding: 0 20px 20px 20px;— 我們給內(nèi)邊距設(shè)置了四個值來讓內(nèi)容四周產(chǎn)生一點(diǎn)空間。這一次我們不設(shè)置上方的內(nèi)邊距，設(shè)置右邊，下方，左邊的內(nèi)邊距為20像素。值以上、右、下、左的順序排列。border: 5px solid black;— 簡單地為頁面四周設(shè)置了5像素的黑色實(shí)線邊框。
為主標(biāo)題定位和添加樣式
h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}你可能發(fā)現(xiàn)了我們在頁面上方有一個可怕的間隙。那是因?yàn)闉g覽器會提供了一些 默認(rèn)樣式 給<h1>元素，即使你沒有提供任何 CSS 代碼。那可能聽起來不太好，但是我們希望一個沒有任何樣式的網(wǎng)頁也有可讀性。為了去掉那個間隙，我們通過設(shè)置margin: 0 覆蓋掉默認(rèn)樣式。
至此，我們已經(jīng)設(shè)置了標(biāo)題的上內(nèi)邊距和下內(nèi)邊距為20像素，標(biāo)題文本與 html 的背景顏色一致。
另一個我們在這使用了的非常有趣的屬性是text-shadow ，它為元素內(nèi)容的字體提供了陰影。它的四個值如下：
- 第一個像素值設(shè)置了水平方向的陰影值
- 第二個像素值設(shè)置了垂直方向的陰影值
- 第三個像素值設(shè)置了陰影模糊的距離（越大的值表示越模糊）
- 第四個值設(shè)置了陰影的顏色
請嘗試不同的值看看你會得出什么樣的結(jié)果！
居中顯示圖像
img {
display: block;
margin: 0 auto;
}最后，我們將使圖像居中來讓它變得更美觀。我們可以重新使用 margin: 0 auto 一次，但是我們還要做其他調(diào)整。body 元素是塊級元素，意味著它占據(jù)了頁面的空間并且能夠賦予外邊距和其他改變間距的值。與之對應(yīng)的是行內(nèi)元素，則不能。所以為了使圖像有外邊距，我們必須使用display: block 將其改成塊級元素。
提示：如果你暫時不能理解display: block也沒關(guān)系；隨著你對 CSS 學(xué)習(xí)的深入，你將明白這個問題。要了解更多display屬性的值請查看 display參考頁面 。
結(jié)論
如果你一直跟隨我們的指導(dǎo)，那么到最后你應(yīng)該得到如下的一個頁面（你也可以在 這里 查看我們的版本）：
如果你有遇到問題，你可以將你的代碼與我們GitHub上的 代碼 做對比。
在這里，我們只提到了非常有限的 HTML 知識，要查看更多，請訪問我們的CSS學(xué)習(xí)。
更多建議：