「每日一學」前端魔法王國：HTML與CSS奇跡創造者的冒險之旅

習總目標

本次學習目標

3. HTML

3.1 HTML概念

HTML是Hyper Text Markup Language的縮寫。意思是『超文本標記語言』。它的作用是搭建網頁結構，在網頁上展示內容

3.1.1 超文本

HTML文件本質上是文本文件，而普通的文本文件只能顯示字符。但是HTML技術則通過HTML標簽把其他網頁、圖片、音頻、視頻等各種多媒體資源引入到當前網頁中，讓網頁有了非常豐富的呈現方式，這就是超文本的含義——本身是文本，但是呈現出來的最終效果超越了文本。

3.1.2 標記語言

說HTML是一種『標記語言』是因為它不是向Java這樣的『編程語言』，因為它是由一系列『標簽』組成的，沒有常量、變量、流程控制、異常處理、IO等等這些功能。HTML很簡單，每個標簽都有它固定的含義和確定的頁面顯示效果。

標簽是通過一組尖括號+標簽名的方式來定義的：

<p>HTML is a very popular fore-end technology.</p>

這個例子中使用了一個p標簽來定義一個段落，<p>叫『開始標簽』，</p>叫『結束標簽』。開始標簽和結束標簽一起構成了一個完整的標簽。開始標簽和結束標簽之間的部分叫『文本標簽體』，也簡稱『標簽體』。

有的時候標簽里還帶有『屬性』：

<a href="http://www.xxx.com">show detail</a>

href=“http://www.xxx.com”就是屬性，href是『屬性名』，“http://www.xxx.com”是『屬性值』。

還有一種標簽是『單標簽』：

<input type="text" name="username" />

3.2 HTML的入門程序

3.3 HTML的結構

文檔聲明: HTML文件中第一行的內容，用來告訴瀏覽器當前HTML文檔的基本信息，其中最重要的就是當前HTML文檔遵循的語法標準。這里我們只需要知道HTML有4和5這兩個大的版本，HTML4版本的文檔類型聲明是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML5版本的文檔類型聲明是：
<!DOCTYPE html>
現在主流的技術選型都是使用HTML5，之前的版本基本不用了。

根標簽:html標簽是整個文檔的根標簽，所有其他標簽都必須放在html標簽里面。
頭部:head標簽用于定義文檔的頭部，其他頭部元素都放在head標簽里。頭部元素包括title標簽、script標簽、style標簽、link標簽、meta標簽等等。
主體:body標簽定義網頁的主體內容，在瀏覽器窗口內顯示的內容都定義到body標簽內。
注釋:HTML注釋的寫法是：


注釋的內容不會顯示到瀏覽器窗口內，是開發人員用來對代碼內容進行解釋說明。

3.4 HTML語法規則

根標簽有且只能有一個
無論是雙標簽還是單標簽都必須正確關閉
標簽可以嵌套但不能交叉嵌套
注釋不能嵌套
屬性必須有值，值必須加引號，單引號或雙引號均可
標簽名不區分大小寫但建議使用小寫

3.5 使用idea創建StaticWeb工程

3.6 HTML的各個標簽的使用

3.6.1 標題標簽

代碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<h4>這是四級標題</h4>
<h5>這是五級標題</h5>
<h6>這是六級標題</h6>
</body>
</html>

頁面效果

3.6.2 段落標簽

代碼

<p>There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.</p>

頁面效果

3.6.3 換行標簽

代碼

We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only. The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. <br/>The only real requirement we have is that your CSS validates.

3.6.4 無序列表標簽

代碼

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grape</li>
</ul>

頁面效果

3.6.5 超鏈接標簽(重要)

代碼

<body>


<a href="../01_html的入門/start.html">跳轉到start.html頁面</a><br/>

<a href="https://www.baidu.com" target="_blank">跳轉到百度</a>
</body>

點擊后跳轉到href屬性指定的頁面

3.6.6 圖片標簽(重點)

準備圖片文件

代碼


<img src="../img/mm.jpg" width="409" height="292"/>

頁面效果

3.6.7 塊標簽(重點)

『塊』并不是為了顯示文章內容的，而是為了方便結合CSS對頁面進行布局。塊有兩種，div是前后有換行的塊，span是前后沒有換行的塊。

把下面代碼粘貼到HTML文件中查看他們的區別：

<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
<div style="border: 1px solid black;width: 100px;height: 100px;">This is a div block</div>
<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>
<span style="border: 1px solid black;width: 100px;height: 100px;">This is a span block</span>

3.6.8 HTML實體(了解)

在HTML文件中，<、>等等這樣的符號已經被賦予了特定含義，不會作為符號本身顯示到頁面上，此時如果我們想使用符號本身怎么辦呢？那就是使用HTML實體來轉義。

3.7 路徑介紹

在我們整個Web開發技術體系中，『路徑』是一個貫穿始終的重要概念。凡是需要獲取另外一個資源的時候都需要用到路徑。要想理解路徑這個概念，我們首先要認識一個概念：『文件系統』。

3.7.1 文件系統

我們寫代碼的時候通常都是在Windows系統來操作，而一個項目開發完成后想要讓所有人都能夠訪問到就必須『部署』到服務器上，也叫『發布』。而服務器通常是Linux系統。

Windows系統和Linux系統的文件系統有很大差別，為了讓我們編寫的代碼不會因為從Windows系統部署到了Linux系統而出現故障，實際開發時不允許使用物理路徑。

物理路徑舉例：
D:\aaa\pro01-HTML\page01-article-tag.html
D:\aaa\pro01-HTML\page02-anchor-target.html

幸運的是不管是Windows系統還是Linux系統環境下，目錄結構都是樹形結構，編寫路徑的規則是一樣的。

所以我們以項目的樹形目錄結構為依據來編寫路徑就不用擔心操作系統平臺發生變化之后路徑錯誤的問題了。有了這個大前提，我們具體編寫路徑時有兩種具體寫法：

相對路徑
絕對路徑

3.7.2 相對路徑

相對路徑都是以『當前位置』為基準來編寫的。假設我們現在正在瀏覽a頁面，想在a頁面內通過超鏈接跳轉到z頁面。

那么按照相對路徑的規則，我們現在所在的位置是a.html所在的b目錄：

z.html并不在b目錄下，所以我們要從b目錄出發，向上走，進入b的父目錄——c目錄：

c目錄還是不行，繼續向上走，進入c的父目錄——d目錄：

在從d目錄向下經過兩級子目錄——e目錄、f目錄才能找到z.html：

所以整個路徑的寫法是：

3.8 使用表格標簽展示數據(重要)

3.8.1 目標頁面效果

3.8.2 第一版代碼


<table>

<tr>

<th>姓名</th>
<th>屬性</th>
<th>級別</th>
<th>忍村</th>
</tr>
<tr>

<td>漩渦鳴人</td>
<td>風</td>
<td>下忍</td>
<td>木葉</td>
</tr>
<tr>
<td>宇智波佐助</td>
<td>雷&火</td>
<td>下忍</td>
<td>木葉</td>
</tr>
<tr>
<td>我愛羅</td>
<td>沙</td>
<td>影</td>
<td>砂隱村</td>
</tr>
</table>

如果只有上面的代碼，頁面顯示效果是：

沒有表格邊框。想要顯示好看的表格邊框可以把下面的style標簽代碼復制粘貼到head標簽里,CSS還沒講，不必在意語法細節，整體照搬即可。

<style type="text/css">
table,th,td {
border-collapse: collapse;
border: 1px solid black;
padding: 5px;
}
</style>

我們發現，相較于目標效果而言，還未實現橫縱向合并單元格

3.8.3 合并單元格

① 橫向合并單元格(列合并)

使用colspan屬性將兩個橫向相鄰的單元格跨列合并：

<tr>
<td>宇智波佐助</td>
<td>雷&火</td>
<td colspan="2">下忍</td>
</tr>

注意: 『被合并』的單元格要刪掉。

② 縱向合并單元格(行合并)

使用rowspan屬性將兩個縱向相鄰的單元格跨行合并：

<tr>
<td>宇智波佐助</td>
<td rowspan="2">雷&火</td>
<td colspan="2">下忍</td>
</tr>
<tr>
<td>我愛羅</td>
<td>影</td>
<td>砂隱村</td>
</tr>

注意: 『被合并』的單元格要刪掉。

3.9 表單標簽(最重要)

3.9.1 表單標簽的作用

在項目開發過程中，凡是需要用戶填寫的信息都需要用到表單。它的作用是接收用戶的輸入信息，并且將用戶輸入的信息提交給服務器

3.9.2 form標簽的介紹

在HTML中我們使用form標簽來定義一個表單。而對于form標簽來說有兩個最重要的屬性：action和method。

<form action="/aaa/pro01-HTML/page05-form-target.html" method="post">

</form>

① action屬性

用戶在表單里填寫的信息需要發送到服務器端，對于Java項目來說就是交給Java代碼來處理。那么在頁面上我們就必須正確填寫服務器端的能夠接收表單數據的地址。

這個地址要寫在form標簽的action屬性中。但是現在暫時我們還沒有服務器端環境，所以先借用一個HTML頁面來當作服務器端地址使用。

② method屬性

『method』這個單詞的意思是『方式、方法』，在form標簽中method屬性用來定義提交表單的『請求方式』。method屬性只有兩個可選值：get或post，沒有極特殊情況的話使用post即可。

什么是『請求方式』？

瀏覽器和服務器之間在互相通信時有大量的『數據』需要傳輸。但是不論是瀏覽器還是服務器都有很多不同廠商提供的不同產品。

常見的瀏覽器有：

Chrome
Firefox
Safari
Opera
Edge

常見的Java服務器有：

Tomcat
Weblogic
WebSphere
Glassfish
Jetty

這么多不同廠商各自開發的應用程序怎么能保證它們彼此之間傳輸的『數據』能夠被對方正確理解呢？

很簡單，我們給這些數據設定『格式』，發送端按照格式發送數據，接收端按照格式解析數據，這樣就能夠實現數據的『跨平臺傳輸』了。

而這里定義的『數據格式』就是應用程序之間的『通信協議』。

在JavaSE階段的網絡編程章節我們接觸過TCP/IP、UDP這樣的協議，而我們現在使用的『HTTP協議』的底層就是TCP/IP協議。

但是在HTML標簽中，點擊超鏈接是GET方式的請求，提交一個表單可以通過form標簽的method屬性指定GET或POST請求，其他請求方式無法通過HTML標簽實現。除了GET、POST之外的其他請求方式暫時我們不需要涉及（到我們學習SpringMVC時會用到PUT和DELETE）。至于GET請求和POST請求的區別我們會在講HTTP協議的時候詳細介紹，現在大家可以從表面現象來觀察一下。

3.10 表單項標簽

表單中的每一項，包括: 文本框、密碼框、單選框、多選框等等，都稱之為表單項，一個表單中可以包含多個表單項

3.10.1 name和value屬性

在用戶使用一個軟件系統時，需要一次性提交很多數據是非常正常的現象。我們肯定不能要求用戶一個數據一個數據的提交，而肯定是所有數據填好后一起提交。那就帶來一個問題，服務器怎么從眾多數據中識別出來收貨人、所在地區、詳細地址、手機號碼……？

很簡單，給每個數據都起一個『名字』，發送數據時用『名字』攜帶對應的數據，接收數據時通過『名字』獲取對應的數據。

在各個具體的表單標簽中，我們通過『name屬性』來給數據起『名字』，通過『value屬性』來保存要發送給服務器的『值』。

但是名字和值之間既有可能是『一個名字對應一個值』，也有可能是『一個名字對應多個值』。

這么看來這樣的關系很像我們Java中的Map，而事實上在服務器端就是使用Map類型來接收請求參數的。具體的是類型是：Map<String,String[]>。

name屬性就是Map的鍵，value屬性就是Map的值。

有了上面介紹的基礎知識，下面我們就可以來看具體的表單項標簽了。

3.10.2 單行文本框

代碼

個性簽名：<input type="text" name="signal"/><br/>

顯示效果

3.10.3 密碼框

代碼

密碼：<input type="password" name="secret"/><br/>

顯示效果

3.10.4 單選框

代碼

你最喜歡的季節是：
<input type="radio" name="season" value="spring" />春天
<input type="radio" name="season" value="summer" checked="checked" />夏天
<input type="radio" name="season" value="autumn" />秋天
<input type="radio" name="season" value="winter" />冬天
<br/><br/>
你最喜歡的動物是：
<input type="radio" name="animal" value="tiger" />路虎
<input type="radio" name="animal" value="horse" checked="checked" />寶馬
<input type="radio" name="animal" value="cheetah" />捷豹

顯示效果

說明:

name屬性相同的radio為一組，組內互斥
當用戶選擇了一個radio并提交表單，這個radio的name屬性和value屬性組成一個鍵值對發送給服務器
設置checked=“checked”屬性設置默認被選中的radio

3.10.5 多選框

代碼

你最喜歡的球隊是：
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked="checked"/>德國
<input type="checkbox" name="team" value="France"/>法國
<input type="checkbox" name="team" value="China" checked="checked"/>中國
<input type="checkbox" name="team" value="Italian"/>意大利

顯示效果

說明:

設置checked=“checked”屬性設置默認被選中的checkbox

3.10.6 下拉框

代碼

你喜歡的運動是：
<select name="interesting">
<option value="swimming">游泳</option>
<option value="running">跑步</option>
<option value="shooting" selected="selected">射擊</option>
<option value="skating">溜冰</option>
</select>

顯示效果

說明:

下拉列表用到了兩種標簽，其中select標簽用來定義下拉列表，而option標簽設置列表項。
name屬性在select標簽中設置。
value屬性在option標簽中設置。
option標簽的標簽體是顯示出來給用戶看的，提交到服務器的是value屬性的值。
通過在option標簽中設置selected=“selected”屬性實現默認選中的效果。

3.10.7 按鈕

代碼

<button type="button">普通按鈕</button>或<input type="button" value="普通按鈕"/>
<button type="reset">重置按鈕</button>或<input type="reset" value="重置按鈕"/>
<button type="submit">提交按鈕</button>或<input type="submit" value="提交按鈕"/>

顯示效果

說明:

普通按鈕: 點擊后無效果，需要通過JavaScript綁定單擊響應函數
重置按鈕: 點擊后將表單內的所有表單項都恢復為默認值提交按鈕
提交按鈕: 點擊后提交表單

3.10.8 隱藏域

代碼

<input type="hidden" name="userId" value="2233"/>

說明:

通過表單隱藏域設置的表單項不會顯示到頁面上，用戶看不到。但是提交表單時會一起被提交。用來設置一些需要和表單一起提交但是不希望用戶看到的數據，例如：用戶id等等。

3.10.9 多行文本框

代碼

自我介紹：<textarea name="desc"></textarea>

顯示效果

說明:

textarea沒有value屬性，如果要設置默認值需要寫在開始和結束標簽之間。

3.10.10 文件表單

代碼

頭像:<input type="file" name="file"/>

顯示效果

說明:

不同瀏覽器顯示的樣式有微小差異

人熟悉前端(html,css,js,vue等)，后端(python)，小程序，老板有需求聯系我。

1.CSS初識

概念： CSS(Cascading Style Sheets) ，通常稱為CSS樣式表或層疊樣式表（級聯樣式表）
作用：主要用于設置 HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式。CSS以HTML為基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式。

2. 引入CSS樣式表（書寫位置）

2.1 行內式（內聯樣式）

概念：稱行內樣式、行間樣式. 是通過標簽的style屬性來設置元素的樣式

其基本語法格式如下：

<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>

實際上任何HTML標簽都擁有style屬性，用來設置行內式。

案例：

<div style="color: red; font-size: 12px;">青春不常在，抓緊談戀愛</div>

注意：style其實就是標簽的屬性樣式屬性和值中間是:多組屬性值之間用;隔開。只能控制當前的標簽和以及嵌套在其中的字標簽，造成代碼冗余
缺點：沒有實現樣式和結構相分離

2.2 內部樣式表（內嵌樣式表）

概念：稱內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中，并且用style標簽定義
其基本語法格式如下：

<head>
<style type="text/CSS">
    選擇器（選擇的標簽） { 
      屬性1: 屬性值1;
      屬性2: 屬性值2; 
      屬性3: 屬性值3;
    }
</style>
</head>

<style>
     div {
        color: red;
        font-size: 12px;
     }
</style>

注意：style標簽一般位于head標簽中，當然理論上他可以放在HTML文檔的任何地方。type="text/css" 在html5中可以省略。只能控制當前的頁面
缺點：沒有徹底分離

綜合案例

<style>
   /*選擇器{屬性:值；}*/
   p {
      color:#06C; 
      font-size:14px;  
    }  /*文字的顏色是 藍色*/
   h4 {
     color:#900;
   }
   h1 {
     color:#090; 
     font-size:16px; 
    }
   body { 
     background:url(bg2.jpg);
   }
</style>

2.3 外部樣式表（外鏈式）

概念：稱鏈入式是將所有的樣式放在一個或多個以.CSS為擴展名的外部樣式表文件中，通過link標簽將外部樣式表文件鏈接到HTML文檔中
其基本語法格式如下：

<head>
  <link rel="stylesheet" type="text/css" href="css文件路徑">
</head>

注意： link 是個單標簽link標簽需要放在head頭部標簽中，并且指定link標簽的三個屬性

屬性	作用
rel	定義當前文檔與被鏈接文檔之間的關系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。
type	定義所鏈接文檔的類型，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表。我們都可以省略
href	定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。

2.4 三種樣式表總結（位置）

樣式表	優點	缺點	使用情況	控制范圍
行內樣式表	書寫方便，權重高	沒有實現樣式和結構相分離	較少	控制一個標簽（少）
內部樣式表	部分結構和樣式相分離	沒有徹底分離	較多	控制一個頁面（中）
外部樣式表	完全實現結構和樣式相分離	需要引入	最多，強烈推薦	控制整個站點（多）

CSS選擇器（重點）

2. CSS基礎選擇器

2.1 標簽選擇器

概念：標簽選擇器（元素選擇器）是指用HTML標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統一的CSS樣式。
語法：

標簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

作用：標簽選擇器可以把某一類標簽全部選擇出來比如所有的div標簽和所有的 span標簽
優點：是能快速為頁面中同類型的標簽統一樣式
缺點：不能設計差異化樣式。

2.2 類選擇器

類選擇器使用“.”（英文點號）進行標識，后面緊跟類名.

語法：類名選擇器.類名 {
屬性1:屬性值1;
屬性2:屬性值2;
屬性3:屬性值3;
}標簽<p class='類名'></p>
優點：可以為元素對象定義單獨或相同的樣式。可以選擇一個或者多個標簽
注意類選擇器使用“.”（英文點號）進行標識，后面緊跟類名(自定義，我們自己命名的)長名稱或詞組可以使用中橫線來為選擇器命名。不要純數字、中文等命名，盡量使用英文字母來表示。

命名規范：見附件（Web前端開發規范手冊.doc）

命名是我們通俗約定的，但是沒有規定必須用這些常用的命名。

課堂案例：

<head>
        <meta charset="utf-8">
        <style>
    
        .blue {
            color: blue;
            font-size: 100px;
        }
        .red {
            color: red;
            font-size: 100px;
        }
        .orange {
            color: orange;
            font-size: 100px;
        }
        .green {
            color: green;
            font-size: 100px;
        }
        </style>
    </head>
    <body>
        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="orange">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
    </body>

2.3 類選擇器特殊用法- 多類名

我們可以給標簽指定多個類名，從而達到更多的選擇目的。

注意：

各個類名中間用空格隔開。
多類名選擇器在后期布局比較復雜的情況下，還是較多使用的。

<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>

2.4 id選擇器

id選擇器使用#進行標識，后面緊跟id名

其基本語法格式如下：id選擇器#id名 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }標簽<p id="id名"></p>
元素的id值是唯一的，只能對應于文檔中某一個具體的元素。
用法基本和類選擇器相同。

id選擇器和類選擇器區別

W3C標準規定，在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。

id選擇器和類選擇器最大的不同在于使用次數上。

總結他們**

類選擇器我們在修改樣式中，用的最多。
id選擇器一般用于頁面唯一性的元素身上，經常和我們后面學習的javascript 搭配使用。

2.6 通配符選擇器

概念通配符選擇器用*號表示， * 就是選擇所有的標簽他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。
其基本語法格式如下：

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標記的默認邊距。

* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內邊距*/
}

注意：會匹配頁面所有的元素，降低頁面響應速度，不建議隨便使用

2.7 基礎選擇器總結

選擇器	作用	缺點	使用情況	用法
標簽選擇器	可以選出所有相同的標簽，比如p	不能差異化選擇	較多	p { color：red;}
類選擇器	可以選出1個或者多個標簽	可以根據需求選擇	非常多	.nav { color: red; }
id選擇器	一次只能選擇器1個標簽	只能使用一次	不推薦使用	#nav {color: red;}
通配符選擇器	選擇所有的標簽	選擇的太多，有部分不需要	不推薦使用	* {color: red;}

2.8 團隊約定

選擇器

盡量少用通用選擇器 *
盡量少用 ID 選擇器
不使用無具體語義定義的標簽選擇器 div span

CSS字體樣式屬性調試工具

1.font字體

1.1 font-size:大小

作用：font-size屬性用于設置字號

p {  
    font-size:20px; 
}

單位：可以使用相對長度單位，也可以使用絕對長度單位。相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。

注意：

我們文字大小以后，基本就用px了，其他單位很少使用
谷歌瀏覽器默認的文字大小為16px
但是不同瀏覽器可能默認顯示的字號大小不一致，我們盡量給一個明確值大小，不要默認大小。一般給body指定整個頁面文字的大小

1.2 font-family:字體

作用：font-family屬性用于設置哪一種字體。

p{ font-family:"微軟雅黑";}

網頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文本的字體設置為微軟雅黑
可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體，如果都沒有，則以我們電腦默認的字體為準。

p{font-family: Arial,"Microsoft Yahei", "微軟雅黑";}

常用技巧：

1. 各種字體之間必須使用英文狀態下的逗號隔開。
2. 中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前。
3. 如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。
4. 盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

CSS Unicode字體

為什么使用 Unicode字體在 CSS 中設置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支持類似微軟雅黑的中文。
解決：方案一：你可以使用英文來替代。比如font-family:"Microsoft Yahei"。方案二：在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。font-family: "FAEF6FC5ED1"; 表示設置字體為“微軟雅黑”。

字體名稱	英文名稱	Unicode 編碼
宋體	SimSun	B8BF53
新宋體	NSimSun	B0B8BF53
黑體	SimHei	ED1F53
微軟雅黑	Microsoft YaHei	FAEF6FC5ED1
楷體_GB2312	KaiTi_GB2312	77F53_GB2312
隸書	LiSu	B6E66
幼園	YouYuan	E7C06
華文細黑	STXihei	4E87EC6ED1
細明體	MingLiU	EC60EF53
新細明體	PMingLiU	B0EC60EF53

1.3 font-weight:字體粗細

在html中如何將字體加粗我們可以用標簽來實現使用 b 和 strong 標簽是文本加粗。
可以使用CSS 來實現，但是CSS 是沒有語義的。

屬性值	描述
normal	默認值（不加粗的）
bold	定義粗體（加粗的）
100~900	400 等同于 normal，而 700 等同于 bold 我們重點記住這句話

提倡：

我們平時更喜歡用數字來表示加粗和不加粗。

1.4 font-style:字體風格

在html中如何將字體傾斜我們可以用標簽來實現字體傾斜除了用 i 和 em 標簽，
可以使用CSS 來實現，但是CSS 是沒有語義的

font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：

屬性	作用
normal	默認值，瀏覽器會顯示標準的字體樣式 font-style: normal;
italic	瀏覽器會顯示斜體的字體樣式。

小技巧：

平時我們很少給文字加斜體，反而喜歡給斜體標簽（em，i）改為普通模式。

1.5 font:綜合設置字體樣式 (重點)

font屬性用于對字體樣式進行綜合設置

基本語法格式如下：

選擇器 { font: font-style  font-weight  font-size/line-height  font-family;}

注意：使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。

1.6 font總結

屬性	表示	注意點
font-size	字號	我們通常用的單位是px 像素，一定要跟上單位
font-family	字體	實際工作中按照團隊約定來寫字體
font-weight	字體粗細	記住加粗是 700 或者 bold 不加粗是 normal 或者 400 記住數字不要跟單位
font-style	字體樣式	記住傾斜是 italic 不傾斜是 normal 工作中我們最常用 normal
font	字體連寫	1. 字體連寫是有順序的不能隨意換位置 2. 其中字號和字體必須同時出現

2. CSS外觀屬性

2.1 color:文本顏色

作用：color屬性用于定義文本的顏色，
其取值方式有如下3種：

表示表示	屬性值
預定義的顏色值	red，green，blue，還有我們的御用色 pink
十六進制	#FF0000，#FF6600，#29D794
RGB代碼	rgb(255,0,0)或rgb(100%,0%,0%)

注意我們實際工作中，用 16進制的寫法是最多的，而且我們更喜歡簡寫方式比如 #f00 代表紅色

2.2 text-align:文本水平對齊方式

作用：text-align屬性用于設置文本內容的水平對齊，相當于html中的align對齊屬性
其可用屬性值如下：

屬性	解釋
left	左對齊（默認值）
right	右對齊
center	居中對齊

注意：是讓盒子里面的內容水平居中，而不是讓盒子居中對齊

2.3 line-height:行間距

作用：line-height屬性用于設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。
單位：line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際工作中使用最多的是像素px
技巧：

一般情況下，行距比字號大7.8像素左右就可以了。
line-height: 24px;

2.4 text-indent:首行縮進

作用：text-indent屬性用于設置首行文本的縮進，
屬性值其屬性值可為不同單位的數值、em字符寬度的倍數、或相對于瀏覽器窗口寬度的百分比%，允許使用負值,建議使用em作為設置單位。

1em 就是一個字的寬度如果是漢字的段落， 1em 就是一個漢字的寬度

p {
      /*行間距*/
      line-height: 25px;
      /*首行縮進2個字  em  1個em 就是1個字的大小*/
      text-indent: 2em;  
 }

2.5 text-decoration 文本的裝飾

text-decoration 通常我們用于給鏈接修改裝飾效果

值	描述
none	默認。定義標準的文本。取消下劃線（最常用）
underline	定義文本下的一條線。下劃線也是我們鏈接自帶的（常用）
overline	定義文本上的一條線。（不用）
line-through	定義穿過文本下的一條線。（不常用）

2.6 CSS外觀屬性總結

屬性	表示	注意點
color	顏色	我們通常用十六進制比如而且是簡寫形式 #fff
line-height	行高	控制行與行之間的距離
text-align	水平對齊	可以設定文字水平的對齊方式
text-indent	首行縮進	通常我們用于段落首行縮進2個字的距離 text-indent: 2em;
text-decoration	文本修飾	記住添加下劃線 underline 取消下劃線 none

3. sublime快捷操作emmet語法

Emmet的前身是Zen coding,它使用縮寫,來提高html/css的編寫速度。

生成標簽直接輸入標簽名按tab鍵即可比如 div 然后tab 鍵，就可以生成 <div></div>
如果想要生成多個相同標簽加上 * 就可以了比如 div*3 就可以快速生成3個div
如果有父子級關系的標簽，可以用 > 比如 ul > li就可以了
如果有兄弟關系的標簽，用 + 就可以了比如 div+p
如果生成帶有類名或者id名字的，直接寫 .demo 或者 #two tab 鍵就可以了
如果生成的div 類名是有順序的，可以用自增符號 $ .demo$*3
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>

4. 拓展閱讀@

emment語法

瀏覽器更好用，自然離不開萬能的《油猴插件》（戳這里），通過腳本實現去廣告、繞過二次跳轉、自動翻頁、懸停看圖、扒下載鏈接等功能。雖說AC-baidu這類的腳本自帶更改頁面樣式，

但由于是1對1的，沒法改所有網站的面貌，這時候就要用到另一個插件“Stylus”了，它可以讓絕大多數網頁都變得工工整整（趕上時代）。

▌用上Stylus

插件可以直接誒從Chrome瀏覽器插件商店安裝，或者網上直接下一個。

樣式可以點擊插件中[查找更多樣式]，

接下來會列出所在網頁可用的所有樣式，供你選擇，包含源鏈接、發布日期、本周/所有下載數據等。

裝好的樣式可以在頂部選擇開關，也可以組合搭配使用（可能有bug沖突），比方說：

這一步可能需要梯子，不然可能加載不出來...你也可以到Stylish的網站userstyles.org下載安裝。

點擊[選項]進入設置界面，它支持Dropbox、Google Drive、Onedrive云同步功能，一鍵在其他電腦上同步使用，不再需要一個個手動重新添加。

▌樣式推薦

百度：Baidu Lite 百度輕

谷歌：Google Search - Material Design

IT之家：IT之家去廣告,優化閱讀

貼吧：TieBa Maverick

知乎：Flat Zhihu 扁平化知乎

微博：Weibo v6 簡約微博

斗魚：Douyu Cleaner清爽斗魚

夜讀：NightShift - eye care 全局夜間模式

字體：ForceMyFonts 全局字體美化

如果你恰巧會一點CSS，那么可以自定義修改任意樣式，也可以從頭自己做。

▌什么是CSS（層疊樣式表）？

Stylus的原理也不復雜，通過CSS層疊樣式表改變網頁樣式，什么字體、背景、邊框、網頁布局，統統在它的掌控之中，就像整形一樣，換個鼻子、調個眼睛什么的，還是全程無痛。

CSS很復雜，但是Stylus簡單好用、沒啥學習成本，所以這部分只是當簡單的拓展講一下：

那它是如何誕生的呢？這還得從1993年說起，早期網頁使用的是RRP樣式，僅支持一個樣式表，只能顯示文字，看網頁的體驗可能還不如看報紙來的豐富。之前在《瀏覽器的輝煌發展史》（戳這里）中咱們提到過一款Mosaic（馬賽克）瀏覽器，

開始采用HTML標簽實現樣式表達，支持了書簽、圖標按鈕、圖片顯示這些革命性的功能、沿用至今。網景最早支持HTML框架顯示，也就是最簡單的table布局，

可以調整內外邊距，網頁看著更舒服，優點是兼容性高，但既要負責圖文內容、又要負責排版樣式，注定了他的樣式不夠美觀。

魏培源開發的ViolaWWW瀏覽器用了有層次嵌套性的樣式表，率先支持用<Link>標簽引用外部樣式表（可以簡單理解為：你請了個美工幫你改善改善）。但各家瀏覽器各用各的，豈不是亂了套？1994年，以萬維網之父老李為首的W3C萬維網聯盟，開始提供網絡標準化建議。

同年老萊（H?kon W Lie）提出層疊HTML樣式表（CHSS）支持用戶自定義樣式，網頁作者可以自己DIY版面，不同的規則用不同的百分比呈現，這也是CSS的雛形。隔壁的波斯正在做一款Argo瀏覽器，兩人相談盛歡、打算合作。

1996年底出現了一種和CSS語法很像的表現指明語言，PSL 96，可以根據不同的瀏覽器信息，自動判斷用什么樣式。年底，CSS已經完成，支持改變字體大小、字形、顏色、間距、排列、表格、邊框、id、class等等，如果說普通網頁是你剛買到手的毛坯房，那么CSS就是你給它做裝修。

但由于早期網頁設計師濫用HTML導致了“tagsoup標簽湯”問題，哪怕微軟在IE上逐步實現CSS，但BUG依然不少（

果然BUG是微軟祖傳BUFF）。

隔壁對手網景則推出了JS（JavaScript）語言，瀏覽器大戰沒有勝者，當時的網頁設計師被迫要為IE和網景分別設計一套網頁，頭都氣禿了...

于是民間團體WaSP（網頁標準計劃）發動水軍推動W3C 標準化，怒噴那些不加盟的廠商。在1998年出臺CSS2，他們之中的7位主要成員成立了CSS 武士團（CSS Samurai），催廠商們改善對CSS的支持，Opera照做了，但微軟依舊無動于衷。

可能也是因為大家看不到CSS的優勢，覺得沒必要，但2003年，Dave Shea推出了CSS 禪意花園（CSS Zen Garden）來展示樣式效果，也就是搭了個“樣板房”，讓設計師們熱血沸騰起來。

在2006~2009年間，DIV+CSS布局開始取代傳統表格布局，CSS3引入了簡單動畫等功能，插了JS一腳，還有靈活的flex彈性布局，沿用至今，而2011年開始設計的CSS4特性目前支持的還太少。

▌其他瀏覽器

你說為啥不直接用Stylish呢？因為3年前原作者賣給SimilarWeb之后，它涉嫌竊取用戶瀏覽歷史，被Chrome和Firefox下架。而Stylus是Stylish 1.5.2的開發分支，也是原作者維護的最后一個版本，作為GH上的開源項目，代碼公開審查，可以安心食用啦。

除了Chrome外，Firefox、Opera也都支持，Safari可以用FreeStyler（你也要來一段說唱嗎），同類插件還有xStyle。當然，由于win的字體渲染并不美觀，還可以搭配MacType使用，關于它的配置方法，咱們以后繼續說。

參考&引用：

sspai.com/post/40485

sspai.com/post/45537

github.com/openstyles/stylus

zhihu.com/search?type=content&q=css

zhihu.com/question/24826065/answer/194294438

zh.wikipedia.org/wiki/層疊樣式表?oldformat=true

在線咨詢

上一篇：JavaScript奇淫技巧：命令行語法高亮
下一篇：HTML調用打開本地文件

您的項目需求

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

整合營銷服務商

「每日一學」前端魔法王國：HTML與CSS奇跡創造者的冒險之旅

人熟悉前端(html,css,js,vue等)，后端(python)，小程序，老板有需求聯系我。

1.CSS初識

2. 引入CSS樣式表（書寫位置）

2.1 行內式（內聯樣式）

2.2 內部樣式表（內嵌樣式表）

綜合案例

2.3 外部樣式表（外鏈式）

2.4 三種樣式表總結（位置）

CSS選擇器（重點）

2. CSS基礎選擇器

2.1 標簽選擇器

2.2 類選擇器

2.3 類選擇器特殊用法- 多類名

2.4 id選擇器

id選擇器和類選擇器區別

2.6 通配符選擇器

2.7 基礎選擇器總結

2.8 團隊約定

CSS字體樣式屬性調試工具

1.font字體

1.1 font-size:大小

1.2 font-family:字體

CSS Unicode字體

1.3 font-weight:字體粗細

1.4 font-style:字體風格

1.5 font:綜合設置字體樣式 (重點)

1.6 font總結

2. CSS外觀屬性

2.1 color:文本顏色

2.2 text-align:文本水平對齊方式

2.3 line-height:行間距

2.4 text-indent:首行縮進

2.5 text-decoration 文本的裝飾

2.6 CSS外觀屬性總結

3. sublime快捷操作emmet語法

4. 拓展閱讀@

您的項目需求