學習筆記，僅供參考，有錯必糾
參考自：CSS中文文檔
CSS
CSS的長度單位
- 絕對長度
cm：釐米
mm：毫米
in：英寸
pc：派卡
- 相對長度
px：像素點，像素就是顯示器顯示的一個點；
若把影像放大數倍，會發現這些連續色調其實是由許多色彩相近的小方點所組成，這些小方點就是構成影像的最小單位像素。這種最小的圖形的單元能在屏幕上顯示通常是單個的染色點。像素的大小是會變的，也稱爲相對長度。越高位的像素，其擁有的色板也就越豐富，越能表達顏色的真實感。-- 百度百科
em：1em默認爲16px，如果我們設置font-size爲1.5em，那麼當前元素的字體大小爲24px(16*1.5)
- 單位之間的關係
1in = 2.54cm = 25.4mm = 96px
字體樣式屬性
font-size
font-size屬性用於設置不同HTML元素的字體大小。
- 屬性值
- xx-small
- x-small
- small
- medium(默認)
- large
- x-large
- xx-large
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OK</title>
<style>
#p1 {
font-size: small
}
#p2 {
font-size: large;
}
#p3 {
font-size: 20px;
}
</style>
</head>
<body>
<p id="p1">我是p1</p>
<p id="p2">我是p2</p>
<p id="p3">我是p3</p>
</body>
</html>
頁面：
font-family
font - family屬性可以指定一個元素的字體。
在網頁中常使用的字體有宋體、微軟雅黑、黑體等，例如，將網頁中所有p標籤下的字體設置爲微軟難黑，可以使用如下CSS樣式代碼：
p { font-family: "微軟雅黑"; }
我們可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。如果字體名稱包含空格或中文，則應使用引號括起，例如：
p { font-family: Verdana, Arial, "宋體"; }
- 注意事項
- 各種字體之間必須使用英文狀態下的逗號隔開；
- 中文字體需要加英文狀態下的引號，英文字體一般不需要加引號，當需要設置英文字體時，英文字體名必須位於中文字體名之前；
- 如果字體名中包含空格、#、$ 等符號，則該字體必須加英文狀態下的單引號或雙引號，例如
font-family: "Times New Roman"； - 儘量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示；
- 在CSS中設置字體名稱，可以直接寫中文。但是在文件編碼(GB2312, UTF-8)不匹配時會產生亂碼的錯誤，所以，在CSS中直接使用Unicode編碼來編寫字體名稱可以避免這些錯誤。使用Unicode編寫中文字體名稱，瀏覽器是可以正確的解析的。
- 如何把中文轉換爲Unicode編碼格式
打開瀏覽器開發工具DevTools，進入控制檯Console：
使用escape()函數，將中文字符轉換爲Unicode編碼格式：
這時，在html頁面中，我們就可以這樣寫：
p { font-family: "%u9ED1%u4F53"; }
- 中英Unicode對應
- 襯線體與無襯線體
西方國家字母體系分爲兩類：襯線字體（serif）以及無襯線體（sans serif）
襯線字體，意思是在字的筆畫開始、結束的地方有額外的裝飾，而且筆畫的粗細會有所不同。
無襯線體是無襯線字體，沒有這些額外的裝飾，而且筆畫的粗細差不多。
圖示：
我們看一看下面這行代碼：
p { font-family: tahoma, arial, sans-serif; }
上面這段代碼的意思是，當瀏覽器不支持前面兩個字體時，將會在無襯線體體系中挑選一個字體作爲默認字體，如果在sans-serif之後有其他字體，則其他字體均失效。
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
h1 {
font-family: "微軟雅黑";
}
#datam {
/*font-family: "宋體";*/
font-family: "Lucida Console", "宋體";
/*怎麼才能解決 多系統下面不同字體的兼容問題？*/
}
div p {
font-family: "%u9ED1%u4F53";
}
</style>
</head>
<body>
<h1>
兔兔之家
</h1>
<p id="datam">
數據挖掘是指從大量的數據中通過算法搜索隱藏於其中信息的過程。數據挖掘通常與計算機科學有關，並通過統計、在線分析處理、情報檢索、機器學習、專家系統
</p>
<div>
<p>
需要是發明之母。近年來，數據挖掘引起了信息產業界的極大關注，其主要原因是存在大量數據，可以廣泛使用，並且迫切需要將這些數據轉換成有用的信息和知識。獲取的信息和知識可以廣泛用於各種應用，包括商務管理，生產控制，市場分析，工程設計和科學探索等
</p>
</div>
</body>
</html>
頁面：
font-weight
font-weight 屬性可以設置文本的粗細。
- 屬性值
- normal
- bold
- bolder
- lighter
- 100 ~ 900(定義由粗到細的字符，400 等同於 normal，而 700 等同於bold)
- 注意事項
字體的加粗跟字體有關，比如：一種字體只有兩種粗細程度的變化，那麼無論是normal到bold，還是normal到bolder都是一樣的。
- 實例
div {font-weight:bolder;}
p {font-weight:900;}
font-style
font-style屬性用於指定文本的字體風格，比如，設置斜體、傾斜或者正常字體。
- 屬性值
- normal(默認值)
- italic(斜體的字體樣式)
- oblique(傾斜的字體樣式)
- inherit(從父元素繼承字體樣式)
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OK</title>
<style>
#p1 {
font-style: oblique; /* 讓文字進行傾斜顯示*/
}
#p2 {
font-style: italic; /*使用文字本身的斜體樣式顯示。*/
}
</style>
</head>
<body>
<p id="p1">
俺是p1標記
</p>
<p id="p2">
俺是p2標記
</p>
</body>
</html>
頁面：
好吧，這兩個屬性值看起來得到的效果是一樣的啊，那它們的區別在哪呢？
- oblique和italic的區別(參考自：italic 和 oblique 的區別)
一些字體有粗體、斜體、下劃線、刪除線等諸多屬性，但是並不是所有字體都都有這些屬性，一些不常用的字體，或許就只有一個正常體，如果我們使用 italic，則不會產生效果。
這時候我們就需要用oblique，可以理解成 italic 是使用文字的斜體屬性，而oblique是讓沒有斜體屬性的文字傾斜。
font:綜合設置字體樣式
font屬性可以在一個聲明中設置所有字體屬性，它的格式爲：
選擇器 { font: font-style font-weight font-size/line-height font-family; }
使用font屬性時，必須按上面語法格式(字體樣式 字體是否加粗 字體大小 字體類型)中的順序書寫，各個屬性以空格隔開。
其中不需要設置的屬性可以省略(它們取默認值)，但必須保留font-size和font-family屬性，否則font屬性將不起作用。
- 舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OK</title>
<style>
#p1 {
font: oblique 700 20px "微軟雅黑";
}
</style>
</head>
<body>
<p id="p1">
俺是p1標記
</p>
</body>
</html>
頁面：
