前端新手看過來，教你從零CSS做漂亮網頁，這樣學習太有成就感了

疊樣式表（Cascading Style Sheet，簡稱：CSS）是為網頁添加樣式的代碼。本節將介紹 CSS 的基礎知識，并解答類似問題：怎樣將文本設置為黑色或紅色？怎樣將內容顯示在屏幕的特定位置？怎樣用背景圖片或顏色來裝飾網頁？

CSS 究竟什么來頭？

和 HTML 類似，CSS 也不是真正的編程語言，甚至不是標記語言。它是一門樣式表語言，這也就是說人們可以用它來選擇性地為 HTML 元素添加樣式。舉例來說，要選擇一個 HTML 頁面里所有的段落元素，然后將其中的文本改成紅色，可以這樣寫 CSS：

p {
  color: red;
}

不妨試一下：首先新建一個 styles 文件夾，在其中新建一個 style.css 文件，將這三行 CSS 保存在這個新文件中。

然后再將該 CSS 文件連接至 HTML 文檔，否則 CSS 代碼不會對 HTML 文檔在瀏覽器里的顯示效果有任何影響。（如果你沒有完成前幾節的實踐，請復習處理文件和 HTML 基礎。在筆記本里有這個方面的內容！）

1、打開 index.html 文件，然后將下面一行粘貼到文檔頭（也就是 <head> 和 </head> 標簽之間）。

<link href="styles/style.css" rel="stylesheet">

2、保存 index.html 并用瀏覽器將其打開。應該看到以下頁面：

如果段落文字變紅，那么祝賀你，你已經成功地邁出了 CSS 學習的第一步。

“CSS 規則集”詳解

讓我們來仔細看一看上述CSS：

整個結構稱為 規則集（通常簡稱“規則”），各部分釋義如下：

選擇器（Selector）
HTML 元素的名稱位于規則集開始。它選擇了一個或者多個需要添加樣式的元素（在這個例子中就是 p 元素）。要給不同元素添加樣式只需要更改選擇器就行了。
聲明（Declaration）
一個單獨的規則，比如說 color: red; 用來指定添加樣式元素的屬性。
屬性（Properties）
改變 HTML 元素樣式的途徑。（本例中 color 就是 `` 元素的屬性。）CSS 中，由編寫人員決定修改哪個屬性以改變規則。
屬性的值（Property value）
在屬性的右邊，冒號后面即屬性的值，它從指定屬性的眾多外觀中選擇一個值（我們除了 red 之外還有很多屬性值可以用于 color ）。

注意其他重要的語法：

每個規則集（除了選擇器的部分）都應該包含在成對的大括號里（{}）。
在每個聲明里要用冒號（:）將屬性與屬性值分隔開。
在每個規則集里要用分號（;）將各個聲明分隔開。

如果要同時修改多個屬性，只需要將它們用分號隔開，就像這樣：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

多元素選擇

也可以選擇多種類型的元素并為它們添加一組相同的樣式。將不同的選擇器用逗號分開。例如：

p, li, h1 {
  color: red;
}

不同類型的選擇器

選擇器有許多不同的類型。上面只介紹了元素選擇器，用來選擇 HTML 文檔中給定的元素。但是選擇的操作可以更加具體。下面是一些常用的選擇器類型：

選擇器名稱	選擇的內容	示例
元素選擇器（也稱作標簽或類型選擇器）	所有指定(該)類型的 HTML 元素	p 選擇 <p>
ID 選擇器	具有特定 ID 的元素（單一 HTML 頁面中，每個 ID 只對應一個元素，一個元素只對應一個 ID）	#my-id 選擇 <p id="my-id"> 或 <a id="my-id">
類選擇器	具有特定類的元素（單一頁面中，一個類可以有多個實例）	.my-class 選擇 <p class="my-class"> 和 <a class="my-class">
屬性選擇器	擁有特定屬性的元素	img[src] 選擇 <img src="myimage.png"> 而不是 <img>
偽（Pseudo）類選擇器	特定狀態下的特定元素（比如鼠標指針懸停）	a:hover 僅在鼠標指針懸停在鏈接上時選擇 <a>。

選擇器的種類遠不止于此，更多信息請參閱選擇器。

字體和文本

譯注：再一次說明，中文字體文件較大，不適合直接用于 Web Font。

在探索了一些 CSS 基礎后，我們來把更多規則和信息添加至 style.css 中，從而讓示例更美觀。首先，讓字體和文本變得更漂亮。

第一步:找到之前Google Font 輸出的地址。并以<link>元素的形式添加進index.html文檔頭（<head>和</head>之間的任意位置）。代碼如下：

 <link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css">

以上代碼為當前網頁下載 Open Sans 字體，從而使自定義 CSS 中可以對 HTML 元素應用這個字體。

第二步：接下來，刪除 style.css 文件中已有的規則。雖然測試是成功的了，但是紅字看起來并不太舒服。

第三步：將下列代碼添加到相應的位置，用你在 Google Fonts 找到的字體替代 font-family 中的占位行。（ font-family 意味著你想要你的文本使用的字體。）這條規則首先為整個頁面設定了一個全局字體和字號（因為 <html> 是整個頁面的父元素，而且它所有的子元素都會繼承相同的 font-size 和 font-family）：

html {
  /* px 表示 “像素（pixels）”: 基礎字號為 10 像素 */
  font-size: 10px;
  /* Google fonts 輸出的 CSS */
  font-family: 'Open Sans', sans-serif;
}

注：CSS 文檔中所有位于 /* 和 */ 之間的內容都是 CSS 注釋，它會被瀏覽器在渲染代碼時忽略。你可以在這里寫下對你現在要做的事情有幫助的筆記。

譯注：/*``*/ 不可嵌套，/*這樣的注釋是/*不行*/的*/。CSS 不接受 // 注釋。

接下來為文檔體內的元素（<h1> (en-US)、<li>和<p>）設置字號。將標題居中顯示，并為正文設置行高和字間距，從而提高頁面的可讀性。

   h1 {
     font-size: 60px;
     text-align: center;
   }
   
   p, li {
     font-size: 16px;
     /* line-height 后而可以跟不同的參數，如果是數字，就是當前字體大小乘上數字 */
     line-height: 2;
     letter-spacing: 1px;
   }

可以隨時調整這些 px 值來獲得滿意的結果，以下是大體效果：

一切皆盒子

編寫 CSS 時你會發現，你的工作好像是圍繞著一個一個盒子展開的——設置尺寸、顏色、位置，等等。頁面里大部分 HTML 元素都可以被看作若干層疊的盒子。

并不意外，CSS 布局主要就是基于盒模型的。每個占據頁面空間的塊都有這樣的屬性：

padding：即內邊距，圍繞著內容（比如段落）的空間。
border：即邊框，緊接著內邊距的線。
margin：即外邊距，圍繞元素外部的空間。

這里還使用了：

width ：元素的寬度
background-color ：元素內容和內邊距底下的顏色
color ：元素內容（通常是文本）的顏色
text-shadow ：為元素內的文本設置陰影
display ：設置元素的顯示模式（暫略）

開始在頁面中添加更多 CSS 吧！大膽將這些新規則都添加到頁面的底部，而不要糾結改變屬性值會帶來什么結果。

更改頁面顏色

html{
  background-color:#00539f;
}

這條規則將整個頁面的背景顏色設置為所計劃的顏色。

文檔體格式設置

body{
   width:600px;
   margin:0 auto;
   background-color:#ff9500;
   padding:0 20px 20px 20px；
   border:5px solid black;
}

現在是 <body> 元素。以上條聲明，我們來逐條查看：

width: 600px; —— 強制頁面永遠保持 600 像素寬。
margin: 0 auto; —— 為 margin 或 padding 等屬性設置兩個值時，第一個值代表元素的上方和下方（在這個例子中設置為 0），而第二個值代表左邊和右邊（在這里，auto 是一個特殊的值，意思是水平方向上左右對稱）。你也可以使用一個，三個或四個值，參考這里。
background-color: #FF9500; —— 如前文所述，指定元素的背景顏色。我們給 body 用了一種略微偏紅的橘色以與深藍色的 `` 元素形成反差，你也可以嘗試其它顏色。
padding: 0 20px 20px 20px; —— 我們給內邊距設置了四個值來讓內容四周產生一點空間。這一次我們不設置上方的內邊距，設置右邊，下方，左邊的內邊距為20像素。值以上、右、下、左的順序排列。
border: 5px solid black; —— 直接為 body 設置 5 像素的黑色實線邊框。

定位頁面主標題并添加樣式

h1{
  margin: 0;
  padding:20px 0;
  color: #00539f;
  text-shadow:3px 3px 1px black
}

你可能發現頁面的頂部有一個難看的間隙，那是因為瀏覽器會在沒有任何 CSS 的情況下給 <h1>en-US等元素設置一些默認樣式。但這并不是個好主意，因為我們希望一個沒有任何樣式的網頁也有基本的可讀性。為了去掉那個間隙，我們通過設置margin: 0;來覆蓋默認樣式。

至此，我們已經把標題的上下內邊距設置為 20 像素，并且將標題文本與 HTML 的背景顏色設為一致。

需要注意的是，這里使用了一個 text-shadow 屬性，它可以為元素中的文本提供陰影。四個值含義如下：

第一個值設置水平偏移值 —— 即陰影右移的像素數（負值左移）。
第二個值設置垂直偏移值 —— 即陰影下移的像素數（負值上移）。
第三個值設置陰影的模糊半徑 —— 值越大產生的陰影越模糊。
第四個值設置陰影的基色。

不妨嘗試不同的值看看能得出什么結果。

圖像居中

img{
  display:block；
  margin:0 auto；
}

最后，我們把圖像居中來使頁面更美觀。可以復用 body 的margin: 0 auto，但是需要一點點調整。<body>元素是塊級元素，意味著它占據了頁面的空間并且能夠賦予外邊距和其他改變間距的值。而圖片是內聯元素，不具備塊級元素的一些功能。所以為了使圖像有外邊距，我們必須使用display: block 給予其塊級行為。

注：以上說明假定所選圖片小于頁面寬度（600 pixels）。更大的圖片會溢出 body 并占據頁面的其他位置。要解決這個問題，可以：

1）使用圖片編輯器來減小圖片寬度； 2）用 CSS 限制圖片大小，即減小 <img> 元素 width 屬性的值（比如 400 px）。

注：如果你暫時不能理解 display: block 和塊級元素與行內元素的差別也沒關系；隨著你對 CSS 學習的深入，你將明白這個問題。

小結

如果你按部就班完成本文的實踐，那么最終可以得到以下頁面

Page 404 / Vinyl edition by Andrii Chalyi

404 page by Nastya Slovak

Daily UI | 008 — 404 Page Rizvan Baghirli

Monkey 404 by Rachit

495 Russian Vodka | 404 Page Not Found by Emil Ismayilov

404 Page illustration by Hafid Paperpillar

404 error by Anna ?o?nierowicz

404 Page Design by Atousa Mahdavi

404 Error page by Jithin Roy

404 web page error by Kit8

3D Page 404 by JzhDesigner

404 Illustration by Natasha Vnuk

在線咨詢

上一篇：javascript獲取、設置修改img的src屬性
下一篇：一招搞定HTML中連續字母或數字不換行的問題

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商