Java 0基礎入門（Html標簽的使用）

一篇：Java 0基礎入門（初識Html）

1.文本相關標簽--標題標簽

<h#></h#>:一般用來創建各級不同的標題，其中#的值可以為1-6中的值

代碼<h1>Hello Java</h1>
<h2>Hello Java</h2>
<h3>Hello Java</h3>
<h4>Hello Java</h4>
<h5>Hello Java</h5>
<h6>Hello Java</h6>
<h7>Hello Java</h7>

代碼請放在body中，然后再運行。

還不清楚Html結構的，請看上一篇文章。

運行結果如下：

標題標簽運行結果

字體大小隨著#值變大而變小

h標簽會自動換行

當#的值超過6以后，就直接顯示成了普通文本。

2.文本相關標簽--特殊符號

空格

小于(<) <

大于(>) >

版權號(? ) ?

注冊符(?) ?

3.文本相關標簽--行的控制

段落標簽<p>xxx</p>

相當于在頁面中預留了一行空行，xxx是你在這個空行中填寫的內容

換行標簽<br>

ps：注意標簽分為成對出現的和自閉合標簽，書寫時要注意規范

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<p>
			<h1>是一級標題
		</p>
		<p>
			<h2>是二級標題
		</p>
		<h3>是三級標題
		<br>
		<h4>是四級標題
		
	</body>
</html>

3.圖像標簽

基本用法：

src--圖片的路徑(相對路徑的寫法../)

width--圖片顯示時的寬度（不一定是實際），像素為單位，px可以不寫

height--圖片顯示時的高度（不一定是實際），像素為單位，px可以不寫

alt，title--鼠標放在圖片上顯示的文字，幾乎每個標簽都可以加這兩個屬性，圖片不存在時，圖片位置顯示設定的文字

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<!--
    		src屬性：當前圖片的路徑
    		路徑：
    		(1)絕對路徑:一個完整的路徑，從ip開始到文件名結束
    		(2)相對路徑:要引用的圖片資源相對于當前頁面的路徑
    		
    		width屬性：顯示的寬度
    		heigth屬性:顯示的高度
    		1.如果只給定寬度或高度，那么另外一個高度或寬度的值
    		會根據原圖的寬高比進行自動計算
    		2.如果同時給定了寬度和高度，并且不符合原圖的比例，
    		那么就會失真

    	-->
    	<!--絕對路徑-->
		<img src="http://zt.tgbus.com/ff15coming/assets/images/bg_02.jpg" width="500px"/>
		<!--相對路徑，圖片和文件在同一目錄下-->
		<img src="001.jpg" height="300px"/>
		<!--相對路徑，圖片所在的目錄和頁面同一級-->
		<img src="img/002.jpg" width="100px" height="500px"/>
		
		
		<!--
			alt/title:
			（1）鼠標放在對應圖片上時能夠顯示出對應的說明性文字
			（2）當圖片不存在時，會在原來顯示圖片的地方加上說明性文字
			（3）alt/title在不同瀏覽器中可能有兼容性問題，所以一起寫，作用是一樣的
			（4）后面學習的標簽中都可以加上這兩個屬性，來作為鼠標放上去時的說明
		-->
		<img src="img/002.jpg" alt="圖片002" title="圖片002"/>
		<img src="img1111/002.jpg" alt="圖片002" title="圖片002"/>
	</body>

</html>

4.文字布局--內容分隔標簽

用于在頁面上繪制水平線

size--線的厚度

color--線的顏色，顏色的寫法支持多種形式

width--線的寬度

align--對齊方式（盡可能使用后面學習的CSS樣式來對齊）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		第一行
		<!--分隔標簽-->
		<hr/>
		第二行
		
		<!--
			size:線的厚度
			color：線的顏色
			align：對齊方式 left right
			width：線的寬度（像素，相對于外部元素寬度的百分比）
		-->
		<hr size="5" color="red" width="300" align="left"/>
		<hr size="5" color="#FF1493" width="30%" align="right"/>
		<hr color="#D84D2A" />
	</body>
</html>

5.文字布局--項目列表和編號（有序列表）

<li>收電子郵件</li>

</ol>

type值：(改變序號類型）

1：效果1，2，3，4……

a：效果a，b，c，d

A：效果A，B，C，D

i：效果i，ii，iii，iv，v

I：效果I，II，III，IV，V

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			type屬性：
				1  阿拉伯數字作為序號
				a 小寫字母作為序號
				A 大寫字母作為序號
				i 羅馬數字的小寫形式
				I 羅馬數字的大寫形式
		-->
		<ol type="I">
			<li>第一項</li>
			<li>第二項</li>
			<li>第三項</li>
			<li>第四項</li>
			<li>第五項</li>
			<li>第六項</li>
		</ol>
	</body>
</html>

6.文字布局--項目列表和編號（無序列表）

<li>如何激活會員名？</li>

<li>如何注冊淘寶會員？</li>

<li>注冊時密碼設置有什么要求？</li>

<li>支付寶認證</li>

</ul>

type值：

disc：效果——實心黑色小圓點

square：效果——實心黑色小方塊

circle：效果——空心小圓點

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			type屬性取值：
				circle：空心圈
				disc：實心圓
				square：正方形
		-->
		<ul type="circle">
			<li>第一項</li>
			<li>第二項</li>
			<li>第三項</li>
			<li>第四項</li>
			<li>第五項</li>
			<li>第六項</li>
		</ul>
	</body>
</html>

7.預格式文本標簽

pre：pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。

<pre> 標簽的一個常見應用就是用來表示計算機的源代碼

8.頁面鏈接

<a> 標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。最重要的是href屬性，用于指定要跳轉的頁面的路徑。

相對路徑:指定從根目錄到文件的完整路徑。

絕對路徑:指定相對于當前文件的文件位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
        	<a></a>:頁面鏈接
        	如果沒有給定href屬性，那么a標簽之間的內容以普通文本方式顯示
        	href:用來指定當前鏈接要跳轉的路徑
        	路徑可以是相對路徑也可以是絕對路徑
     
        -->
		<a href="http://www.baidu.com" >百度</a>
		<a href="圖像標簽.html">圖像標簽</a>
		
		<!--圖片鏈接-->
		<a href="http://zt.tgbus.com/ff15coming/">
			<img src="http://zt.tgbus.com/ff15coming/assets/images/bg_02.jpg" width="500px"/>
		</a>
		
		<!--
			阻止鏈接的跳轉行為
		-->
		<a href="#">淘寶</a>
		<!--了解-->
		<a href="javascript：void(0);">京東</a>
	</body>
</html>

使用a標簽制作錨點，實現跳轉到頁面指定位置

（1）本頁跳轉（頁面很長，內容很多，點擊a標簽內容，迅速定位到你要找的內容）

<a name="helpme">新人上路指南</a>

（2）其它頁跳轉（定位到1.html這種不是本頁面的，a標簽name值為t2的內容處）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			1.定義要進行點擊的鏈接
		-->
		<a href="#position1">位置1</a>
		<a href="#position2">位置2</a>
		<a href="#position3">位置3</a>
		<!--
			2.要跳轉的位置
		-->	
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<a name="position1">位置1</a>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<a name="position2">位置2</a>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<p id="position3">位置3</p>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
	</body>
</html>

使用a標簽打開電子郵件發送窗口

這個方法是調用outlook客戶端，現在已經很少用了！

在href前面加上mailto前綴，后面跟合法的郵箱地址

發送郵件

</a>

指定超鏈接在何處打開目標 URL

在href屬性存在的情況下，指定target屬性

_blank：在空白頁打開

_self：直接在本頁打開

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			target屬性：指定頁面的打開的地方
				_self:在當前頁打開
				_blank:在空白頁打開
		-->
		<a href="http://www.baidu.com" target="_self">在當前頁打開</a>
		<a href="http://www.baidu.com" target="_blank">在空白頁打開</a>
	</body>
</html>

標簽的學習就到這，下一篇會介紹表單、表單元素的寫法。喜歡的可以關注下，謝謝！！

下一篇：Java 0基礎入門（Html表單、表單元素）

介

CSS 是什么？

CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表。

屬性和屬性值用冒號隔開，以分號結尾。

CSS 四種引入方式：

1.行內式

行內式是在標簽的style屬性中設定CSS樣式。

<div style="..."></div>

2.嵌入式

嵌入式是將CSS樣式集中寫在網頁的<head>標簽的<style></style>標簽對中。

<head>

    ...

    <style type="text/css">

        ...此處寫CSS樣式

    </style>

</head>

3.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用@import 引入外部CSS文件，<style>標記也是寫在<head>標記中。

導入式會在整個網頁裝載完后再裝載CSS文件。

<head>

    ...

    <style type="text/css">

        @import "My.css"; 此處注意.css文件的路徑

    </style>

</head>

4.鏈接式
將一個獨立的.css文件引入到HTML文件中，使用<link>標記寫在<head>標記中。

鏈接式會以網頁文件主體裝載前裝載CSS文件。

<head>

    ...

    <link href="My.css" rel="stylesheet" type="text/css">

</head>

樣式應用順序：

行內樣式優先級最高
針對相同的樣式屬性，不同的樣式屬性將以合并的方式呈現
相同樣式并且相同屬性，呈現方式在<head>中的順序決定，后面會覆蓋前面屬性
!important 指定樣式規則應用最優先

.nick {
    color: yellow !important;
}

選擇器（Selector）

基本選擇器：

1.通用元素選擇器

* 表示應用到所有的標簽。

* {color: yellow}

2.標簽選擇器

匹配所有使用 div 標簽的元素（可以匹配所有標簽）

div {color: yellow}

3.類選擇器

匹配所有class屬性中包含info的元素。

語法：.類名{樣式}（類名不能以數字開頭，類名要區分大小寫。）

.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>

4.ID選擇器

使用id屬性來調用樣式，在一個網頁中id的值都是唯一的（是W3C規范而不是規則，所以不會報錯）。

語法：#ID名{樣式}（ID名不能以數字開頭）

#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>

組合選擇器：

1.多元素選擇器

同時匹配h3,h4標簽，之間用逗號分隔。

h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>

2.后代元素選擇器

匹配所有div標簽里嵌套的P標簽，之間用空格分隔。

    div p {color: yellow;}
<div>
    <p>Nick</p>
    <div>
        <p>Nick</p>
    </div>
</div>

3.子元素選擇器

匹配所有div標簽里嵌套的子P標簽，之間用>分隔。

    div > p {color: yellow;}
<div>
    <p>Nick</p>
    <p>Nick</p>
</div>

4.毗鄰元素選擇器

匹配所有緊隨div標簽之后的同級標簽P，之間用+分隔（只能匹配一個）。

    div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>

屬性選擇器：

1.[title] & P[title]

設置所有具有title屬性的標簽元素；

設置所有具有title屬性的P標簽元素。

    [title]
    {
        color: yellow;
    }
    p[title]
    {
        color: yellow;
    }
 
<div title>Nick</div>
<p title>Nick</p>

2.[title=Nick]

設置所有title屬性等于“Nick”的標簽元素。

    [title="Nick"]
    {
        color: yellow;
    }
<p title="Nick">Nick</p>

3.[title~=Nick]

設置所有title屬性具有多個空格分隔的值、其中一個值等于“Nick”的標簽元素。

    [title~="Nick"]
    {
        color: yellow;
    }
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>

4.[title|=Nick]

設置所有title屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以"Nick"開頭的標簽元素。

例：lang屬性："en"、"en-us"、"en-gb"等等

    [title|="Nick"]
    {
        color: yellow;
    }
 <p title="Nick-Jenny">Nick</p>

5.[title^=Nick]

設置屬性值以指定值開頭的每個標簽元素。

    [title^="Nick"]
    {
        color: yellow;
    }
<p title="NickJenny">Nick</p>

6.[title$=Nick]

設置屬性值以指定值結尾的每個標簽元素。

    [title$="Nick"]
    {
        color: yellow;
    }
<p title="JennyNick">Nick</p>

7.[title*=Nick]

設置屬性值中包含指定值的每個元素

[title*="Nick"]
    {
        color: yellow;
    }
 
<p title="SNickJenny">Nick</p>

偽類選擇器：

1. link、hover、active、visited

a:link（未訪問的鏈接狀態）,用于定義了常規的鏈接狀態。
a:hover（鼠標放在鏈接上的狀態）,用于產生視覺效果。
a:active（在鏈接上按下鼠標時的狀態）。
a:visited（已訪問過的鏈接狀態）,可以看出已經訪問過的鏈接。

    a:link{color: black}
    a:hover{color: yellow}
    a:active{color: blue}
    a:visited{color: red} 
<a href="#">Nick</a>

2. before、after

P:before 在每個<p>元素的內容之前插入內容;
P:after 在每個<p>元素的內容之后插入內容。

    p {
        color: yellow;
    }
    p:before{
        content: "before...";
    }
    p:after{
        content: "after...";
    }
 <p> Nick </p>

常用屬性

1. 顏色屬性：

color

HEX（十六進制色：color: #FFFF00 --> 縮寫：#FF0）
RGB（紅綠藍，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
RGBA（紅綠藍透明度，A是透明度在0~1之間取值。使用方式：color:rgba(255,255,0,0.5)）
HSL（CSS3有效,H表示色調，S表示飽和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
HSLA（和HSL相似，A表示Alpha透明度，取值0~1之間。）

transparent

全透明，使用方式：color: transparent;

opacity

元素的透明度，語法：opacity: 0.5;
屬性值在0.0到1.0范圍內，0表示透明，1表示不透明。
filter濾鏡屬性（只適用于早期的IE瀏覽器，語法：filter:alpha(opacity:20);）。

2. 字體屬性:

font-style: 用于規定斜體文本

normal 文本正常顯示
italic 文本斜體顯示
oblique 文本傾斜顯示

font-weight: 設置文本的粗細

normal（默認）
bold（加粗）
bolder（相當于<strong>和<b>標簽）
lighter （常規）
100 ~ 900 整百（400=normal，700=bold）

font-size: 設置字體的大小

默認值：medium
<absolute-size>可選參數值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
<relative-size>相對于父標簽中字體的尺寸進行調節。可選參數值：smaller、 larger
<percentage>百分比指定文字大小。
<length>用長度值指定文字大小，不允許負值。

font-family：字體名稱

使用逗號隔開多種字體（優先級從前向后，如果系統中沒有找到當前字體，則往后面尋找）

font：簡寫屬性

語法：font：字體大小/行高字體;（字體要在最后）

3. 文本屬性:

white-space: 設置元素中空白的處理方式

normal：默認處理方式。
pre：保留空格，當文字超出邊界時不換行
nowrap：不保留空格，強制在同一行內顯示所有文本，直到文本結束或者碰到br標簽
pre-wrap：保留空格，當文字碰到邊界時換行
pre-line：不保留空格，保留文字的換行，當文字碰到邊界時換行

direction: 規定文本的方向

ltr 默認，文本方向從左到右。
rtl 文本方向從右到左。

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

left
center
right

line-height: 文本行高

normal 默認

vertical-align: 文本所在行高的垂直對齊方式

baseline 默認
sub 垂直對齊文本的下標，和<sub>標簽一樣的效果
super 垂直對齊文本的上標，和<sup>標簽一樣的效果
top 對象的頂端與所在容器的頂端對齊
text-top 對象的頂端與所在行文字頂端對齊
middle 元素對象基于基線垂直對齊
bottom 對象的底端與所在行的文字底部對齊
text-bottom 對象的底端與所在行文字的底端對齊

text-indent: 文本縮進

letter-spacing: 添加字母之間的空白

word-spacing: 添加每個單詞之間的空白

text-transform: 屬性控制文本的大小寫

capitalize 文本中的每個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義僅有小寫字母。

text-overflow: 文本溢出樣式

clip 修剪文本。
ellipsis 顯示省略符號...來代表被修剪的文本。
string 使用給定的字符串來代表被修剪的文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style>
        div {
            width: 100px;
            height: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧</div>
</body>
</html>

text-decoration: 文本的裝飾

none 默認。
underline 下劃線。
overline 上劃線。
line-through 中線。

text-shadow：文本陰影

第一個參數是左右位置
第二個參數是上下位置
第三個參數是虛化效果
第四個參數是顏色
text-shadow: 5px 5px 5px #888;

word-wrap：自動換行

word-wrap: break-word;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            width: 150px;
            height: 160px;
            background-color: #FFA500;
            /*邊框陰影*/
            box-shadow: 10px 10px 5px #888;
            /*自動換行*/
            word-wrap: break-word;
        }
        h1 {
            text-shadow: 5px 5px 5px #888;
        }
    </style>
</head>
<body>
    <p>
        When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
    </p>
    <h1>索寧</h1>
</body>
</html>

a {
    text-decoration: none;
    /*去除a標簽下劃線*/
}

4. 背景屬性

background-color: 背景顏色

background-image 設置圖像為背景

url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); 圖片地址

background-image:linear-gradient(green,blue,yellow,red,black); 顏色漸變效果

background-position 設置背景圖像的位置坐標

background-position: center center; 圖片置中，x軸center，y軸center
1px -195px 截取圖片某部分，分別代表坐標x，y軸

background-repeat 設置背景圖像不重復平鋪

no-repeat 設置圖像不重復，常用
round 自動縮放直到適應并填充滿整個容器
space 以相同的間距平鋪且填充滿整個容器

background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動

background 簡寫

background: url("o_ns.png") no-repeat 0 -196px;
background: url("o_ns.png") no-repeat center bottom 15px;
background: url("o_ns.png") no-repeat left 30px bottom 15px;

5. 列表屬性

list-style-type: 列表項標志的類型

none 去除標志
decimal-leading-zero; 02.
square; 方框
circle; 空心圓
upper-alph; & disc; 實心圓

list-style-image：將圖象設置為列表項標志

list-style-position：列表項標志的位置

inside
outside

list-style：縮寫

頁面布局

1. 邊框

border-style：邊框樣式

solid 默認，實線
double 雙線
dotted 點狀線條
dashed 虛線

border-color：邊框顏色

border-width：邊框寬度

border-radius：圓角

1個參數：四個角度應用
2個參數：第一個參數應用于左上、右下；第二個參數應用于左下、右上
3個參數：第一個參數應用于左上；第二個參數應用于左下、右上；第三個參數應用于右下
4個參數：左上、右上、右下、左下（順時針）

border: 簡寫

border: 2px yellow solid;

box-shadow：邊框陰影

第一個參數是左右位置
第二個參數是上下位置
第三個參數是虛化效果
第四個參數是顏色
box-shadow: 10px 10px 5px #888;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            border:2px solid;
            border-radius:25px;
            width: 140px;
        }
    </style>
</head>
<body>
    <div>
         點贊哦！dear. 
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .radius1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 20px;
        }
        .radius2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 20px 35px;
        }
        .radius3 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
            border-radius: 20px 35px 50px;
        }
        .radius4 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 20px 35px 50px 60px;
        }
    </style>
</head>
<body>
    <div>
        <span class="radius1"></span>
        <span class="radius2"></span>
        <span class="radius3"></span>
        <span class="radius4"></span>
    </div>
</body>
</html>

邊框實現各種三角符號：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .triangle-one {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 50px green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-two {
            display: inline-block;
            border-top: 0 red solid;
            border-right: 50px green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-stree {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 0 green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-four {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 0 green solid;
            border-bottom: 0 yellow solid;
            border-left: 50px blue solid;
        }
 
        .triangle-five {
            display: inline-block;
            border: 50px transparent solid;
            border-top: 50px red solid;
        }
        .triangle-six {
            display: inline-block;
            border: 50px transparent solid;
            border-bottom: 50px yellow solid;
        }
        .triangle-seven {
            display: inline-block;
            border: 50px transparent solid;
            border-top: 60px red solid;
            border-right: 0;
        }
        .triangle-eight {
            display: inline-block;
            border: 50px transparent solid;
            border-left: 30px yellow solid;
            border-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="triangle-one"></div>
    <div class="triangle-two"></div>
    <div class="triangle-stree"></div>
    <div class="triangle-four"></div>
    <div class="triangle-five"></div>
    <div class="triangle-six"></div>
    <div class="triangle-seven"></div>
    <div class="triangle-eight"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back {
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
            background-color: #ddd;
            position: relative;
        }
        .back-in {
            position: absolute;
            width: 1020px;
            height: 45px;
            left: -20px;
            top: 50px;
            background-color: #2F4F4F;
        }
        .back-img {
            border: 20px solid transparent;
            border-top: 10px solid dimgrey;
            border-right: 0;
            display: inline-block;
            position: absolute;
            top: 95px;
            left: -20px;
        }
        .back-font {
            line-height: 9px;
            margin-left: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="back">
        <div class="back-in"><h3 class="back-font">妹子求關注 ^.^</h3></div>
        <div class="back-img"></div>
    </div>
</body>
</html>

2.★ 盒子模型

一個標準的盒子模型：

padding:用于控制內容與邊框之間的距離;

margin: 用于控制元素與元素之間的距離;

一個參數，應用于四邊。

　兩個參數，第一個用于上、下，第二個用于左、右。

　三個參數，第一個用于上，第二個用于左、右，第三個用于下。

邊框在默認情況下會定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因為body本身也是一個盒子，外層還有html，
在默認情況下，body距離html會有若干像素的margin，所以body中的盒子不會緊貼瀏覽器窗口的邊框了。

解決方法：
body {
    margin: 0;
}

3.★ display

none 不顯示。
block 顯示為塊級元素。
inline 顯示為內聯元素。
inline-block 行內塊元素（會保持塊元素的高寬）。
list-item 顯示為列表元素。

4. visibility

visible 元素可見
hidden 元素不可見
collapse 當在表格元素中使用時，此值可刪除一行或一列，不會影響表格的布局。

5.★ float 浮動

讓一行顯示兩個塊級標簽，會脫離文檔流

none
left 左浮動
right 右浮動

clear 清除浮動：

none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許兩邊有浮動對象

6. clip 剪裁圖像

rect 剪裁定位元素：

auto 默認值，無剪切
上-右-下-左（順時針）的順序提供四個偏移值
區域外的部分是透明的
必須指定 position:absolute;
例：clip:rect(0px,60px,200px,0px);

7. overflow 設置當對象的內容超過其指定高度及寬度時如何顯示內容

visible 默認值，內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，并且其余內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。

8.★ position 規定元素的定位類型

通過以下四種屬性進行定位：

left
top
right
bottom
z-index

9. z-index 元素層疊順序

z-index 僅在定位元素上有效（例：position:absolute;）
可以指定負數屬性值（例：-1;）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .z-index1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            z-index: -1;
        }
        .z-index2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 5;
        }
    </style>
</head>
<body>
    <div class="z-index1"></div>
    <div class="z-index2"></div>
</body>
</html>

10. outline 邊框輪廓

outline-width 輪廓寬度
outline-color 輪廓顏色
outline-style 輪廓樣式

11. zoom 縮放比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .zoom1 {
            zoom: 100%;
        }
        .zoom2 {
            zoom: 150%;
        }
        .zoom3 {
            zoom: 200%;
        }
    </style>
</head>
<body>
    <div class="zoom1">Nick 100%</div>
    <div class="zoom2">Nick 200%</div>
    <div class="zoom3">Nick 300%</div>
</body>
</html>

12. cursor 鼠標的類型形狀

鼠標放在以下單詞上，There will be a miracle：

url: 自定義光標

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style>
        body {
            cursor: url("mouse.png"), auto;
            /*圖片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
        }
    </style>
</head>
<body>
    <div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
</body>
</html>

Auto: 默認
Default: 默認
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help

not-allowed

13. transform、transition 動畫效果

transform 轉換，變形

origin 定義旋轉基點（left top center right bottom 坐標值） transform-origin: 50px 50px; transform-origin: left;。
rotate 旋轉 transform:rotate(50deg) 旋轉角度可以為負數，需要先定義origin。
skew 扭曲 transform:skew(50deg,50deg) 分別為相對x軸傾斜,相對y軸傾斜。
scale 縮放 transform:scale(2,3) 橫向放大2倍，縱向放大3倍；transform:scale(2) 橫豎都放大2倍。
translate 移動 transform:translate(50px, 50px) 分別為相對x軸移動,相對y軸移動。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>nick</title>
    <meta charset="utf-8" />
    <style type="text/css">
        div {
            border: 1px solid black;
            height: 30px;
            width: 30px;
            background-color: yellow;
 
            /*transform-origin: 50px 50px;*/
            transform-origin: left;
            transform: rotate(50deg);
            /*transform: skew(50deg,50deg);*/
            /*transform: translate(50px,50px);*/
            /*transform: scale(2);*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Transition 平滑過渡

transition-property：變換的屬性（none(沒有屬性改變)、all(所有屬性改變)、具體屬性）
transition-duration：變換持續時間
transition-timing-function：變換的速率（ease:(逐漸變慢)、linear:(勻速)、ease-in:(加速)、ease-out:(減速)、ease-in-out:(加速然后減速)、cubic-bezier:(自定義時間曲線））
transition-delay：變換延遲時間
transition：縮寫

#property 指定屬性對應類型

1、color： 通過紅、綠、藍和透明度組件變換（每個數值單獨處理），如：background-color，border-color，color，outline-color等CSS屬性；

2、length：真實的數字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等屬性；

3、percentage：真實的數字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等屬性；

4、integer 離散步驟（整個數字），在真實的數字空間，以及使用floor()轉換為整數時發生，如：outline-offset，z-index等屬性；

5、number真實的（浮點型）數值，如：zoom，opacity，font-weight等屬性；

6、transform list。

7、rectangle：通過x、 y、 width和height（轉為數值）變換，如：crop；

8、visibility：離散步驟，在0到1數字范圍之內，0表示“隱藏”，1表示完全“顯示”,如：visibility；

9、shadow：作用于color、x、y、和blur（模糊）屬性，如：text-shadow；

10、gradient：通過每次停止時的位置和顏色進行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數值以便執行動畫，如：background-image；

11、paint server (SVG)：只支持下面的情況：從gradient到gradient以及color到color，然后工作與上面類似；

12、space-separated list of above：如果列表有相同的項目數值，則列表每一項按照上面的規則進行變化，否則無變化；

13、a shorthand property：如果縮寫的所有部分都可以實現動畫，則會像所有單個屬性變化一樣變化。

#支持執行transition效果的屬性

Property Name    Type
background-color    as color
background-position    as repeatable list of simple list of length, percentage, or calc
border-bottom-color    as color
border-bottom-width    as length
border-left-color    as color
border-left-width    as length
border-right-color    as color
border-right-width    as length
border-spacing    as simple list of length
border-top-color    as color
border-top-width    as length
bottom    as length, percentage, or calc
clip    as rectangle
color    as color
font-size    as length
font-weight    as font weight
height    as length, percentage, or calc
left    as length, percentage, or calc
letter-spacing    as length
line-height    as either number or length
margin-bottom    as length
margin-left    as length
margin-right    as length
margin-top    as length
max-height    as length, percentage, or calc
max-width    as length, percentage, or calc
min-height    as length, percentage, or calc
min-width    as length, percentage, or calc
opacity    as number
outline-color    as color
outline-width    as length
padding-bottom    as length
padding-left    as length
padding-right    as length
padding-top    as length
right    as length, percentage, or calc
text-indent    as length, percentage, or calc
text-shadow    as shadow list
top    as length, percentage, or calc
vertical-align    as length
visibility    as visibility
width    as length, percentage, or calc
word-spacing    as length
z-index    as integer

鼠標放在以下圖片上，There will be a miracle：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>nick</title>
    <meta charset="utf-8" />
    <style type="text/css">
        .img-see-2016-7-2 {
            background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
            background-size: 660px;
            background-repeat: no-repeat;
            height: 300px;
            width: 600px;

            transition-duration: 30s;
            transition-timing-function: ease;
            transition-property: background-size;
        }
        .img-see-2016-7-2:hover {
            background-size: 2000px;
        }
    </style>
</head>
<body>
    <div class="img-see-2016-7-2"></div>
</body>
</html>

作者：suoning
原文鏈接：https://www.cnblogs.com/suoning/p/5625582.html

文是站在一個網頁設計師的角度，所寫的關于最佳字體排版實踐的手冊，包括字體排版設計、Web 字體、Web 樣式指導等四個方面，而且每一章后都有擴展閱讀幫你深入了解細節，全程高能干貨，建議閱讀。

簡介
字體排版設計

視覺層次
字體排版中的格式塔原則

字體

選擇字體
使用web字體
字體加載
OpenType的特性

Web 樣式指導

相對大小
容器
字體尺寸
垂直間隔
顏色
下劃線

總結

簡介

字體排版絕不僅僅是使用字體那么簡單，它包括了關于文字”看上去會是怎么樣？”的所有事情——例如文字的大小，行高，顏色甚至文字間留白這樣的細枝末節的小事。一個好的文字排版會為你所寫的內容定下情感基調，并且可以幫助讀者更好的理解其內容和語境。

為了讓你使用起來更像是在看一本參考書而不是說明書，本文將會非常精簡清晰，如果你想進一步的了解更多細節，可以點擊查看在每一章中的”擴展閱讀”去深入了解。

這本手冊將會在GitHub上開源，并且會持續更新一些最佳實踐的范例，希望你們喜歡！

字體排版設計

視覺層次

視覺層次是一種理念，它意在傳達頁面中的元素應該依照其重要性進行組織排版，以便讀者可以很容易的通覽整個頁面，找到相關的內容。一個好的視覺層次可以引導讀者在閱讀時候的視覺流向。視覺層次被廣泛運用于文字排版中，它構成了文字排版設計的理論基石。

請看下圖的”愛麗絲夢游仙境”的字體排版設計，它展現了一個清晰的視覺層次：

點擊這里查看網頁上的實際效果

視覺層次可以被分成以下4個部分：

字體大小 & 字體重量：設置字體大小和字體重量是兩種構建視覺層次的最簡單的方式。他們可以很容易地告訴讀者什么地方是最重要的，引導讀者的目光落到這里的內容上來。只是簡單地為文字加上這兩種樣式，文章的重點便一目了然了。
定位：元素定位是另外的一種構建視覺層次的方式，就像上圖中，文章的標題和作者信息通過置頂和居中表明了它們的重要性。
字體：通過使用有對比度的字體可以提高不同元素之間的辨識度，從而構建視覺層次
顏色：為重要的文字設置不同的顏色也是一種非常簡單的構建視覺層次的方式。然而使用這種方式的時候一定要小心，因為顏色的濫用可能會造成重點部分辨識度的降低。

擴展閱讀：

Visual Hierarchy： How Well Does Your Design Communicate?
Creating Exciting And Unusual Visual Hierarchies

字體排版中的格式塔原則

格式塔原則，或格式塔法則，是一種構建感性認知的規律。當我們觀察這個世界的時候，我們通常會意識到，一個復雜的場景是由多個在某些背景之上的物體構成的，而這些物體則是由更小的一些物體構成的，依此循環下去。

在字體排版中我們需要理解的兩個很重要的格式塔原則就是”距離原則”和”相似原則”。.

距離原則

為了更好地掌握元素定位的方法，了解距離原則是很重要的。距離原則表明，人們會將靠得近的物體視為有關聯的物體，反之，隔得比較遠的物體將會被看成屬于不同類別。

點擊此處查看原圖

在字體排版設計中，”距離”指的是通過設置行高、內間距和外間距所制造出來的留白空間。在兩段不同的段落之間應該留有明顯的并且易于區分的留白間隔，請看下面的例子：

注意啦，你覺得應該把內容相關的部分都擠到一個很小的空間中去嗎？當然不是這樣，自由隨意的留白也是很重要的。距離原則告訴我們，只需要為那些沒有關系的段落之間額外的加上一些易于區分的留白就可以了

相似原則

格式塔的相似原則告訴大家，看起來很像的東西會被認為是一類的東西。舉個例子，如果所有可點擊的文字被設置為天藍色，那么讀者就會認為文章中所有天藍色的文字內容都是可以點擊的。

在字體排版中，相似原則就意味著，擁有同樣功能的元素應該在樣式上保持一致。如果兩組元素的功能相似的話，那么它們也應該看起來很像才對。例如，兩篇同為博客帖子的文章應該看起來很像。而相反的，兩個功能不相同的元素也應該看起來不像。

擴展閱讀：

Gestalt Theory in Typography & Design Principles
Proximity， Uniform Connectedness & Good Continuation

字體

選擇字體

選擇字體是一個具有創造性和情感的過程。不同的字體可以傳達不同的情感，你可以盡情挑選一個合適的字體讓你的文字感情變得豐沛起來。

首先為你的文字的正文挑選一個合適的字體，當你需要搭配不同字體的時候，記得要保持正文字體的不變，然后試著依據這個字體選擇和它相搭配的其他字體。
使用一些例如TypeTester 和 TypeCast 這一類的工具會讓你進行字體選擇的時候輕松一些。
從他人處獲得靈感! Fonts In Use提供了大量的優秀的字體搭配范例。
有些字體本來就是為用作大標題而設計的，而有些字體天生就只適合那些小屏幕，你要依照每個字體的”天性”去使用它們。你可以在WebType 上面找到對于不同字體而言合適的尺寸。此外 TypeKit也標明了其上的字體是適合標題或者是正文。

擴展閱讀：

Selecting Typefaces For Body Text
Five Principles For Choosing And Using Typefaces
Best Practices For Combining Typefaces

使用web字體

我們使用以下的格式來聲明引入的web字體文件：

@font-face {
 font-family： 'Helvetica Neue';
 src： url('/assets/fonts/HelveticaNeue-Light.eot');
 src： url('/assets/fonts/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype')，
 url('/assets/fonts/HelveticaNeue-Light.woff2') format('woff2')，
 url('/assets/fonts/HelveticaNeue-Light.woff') format('woff')，
 url('/assets/fonts/HelveticaNeue-Light.ttf') format('truetype');
 font-weight： 300;
 font-style： normal;
}
@font-face {
 font-family： 'Helvetica Neue';
 src： url('/assets/fonts/HelveticaNeue-Bold.eot');
 src： url('/assets/fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype')，
 url('/assets/fonts/HelveticaNeue-Bold.woff2') format('woff2')，
 url('/assets/fonts/HelveticaNeue-Bold.woff') format('woff')，
 url('/assets/fonts/HelveticaNeue-Bold.ttf') format('truetype');
 font-weight： bold;
 font-style： normal;
}
@font-face {
 font-family： 'Helvetica Neue';
 src： url('/assets/fonts/HelveticaNeue.eot');
 src： url('/assets/fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype')，
 url('/assets/fonts/HelveticaNeue.woff2') format('woff2')，
 url('/assets/fonts/HelveticaNeue.woff') format('woff')，
 url('/assets/fonts/HelveticaNeue.ttf') format('truetype');
 font-weight： normal;
 font-style： normal;
}

為了達到最大程度上的兼容，我們建議使用上面列出的格式。或者，只使用 woff2 和 woff也會支持大部分的現代瀏覽器。

你需要為每個列出來的格式提供一個相應的字體文件。推薦使用 Transfonter 或者FontSquirrel’s Web Font Generator，這樣你就可以在只有一個字體文件的情況下，將其轉換成不同的文件格式。

盡可能的壓縮你的字體文件。點擊這里查看更多信息。

將多個同源字體文件（細體、常規、半粗體、粗體等等）合并成一個font-family，盡量不要為每個字體都起一個新的font-family的名字。

或者，你也可以通過線上字體資源服務，如Google Fonts 或者 Typekit引入你想要的字體。

擴展閱讀：

Further Hardening Of The Bulletproof Syntax
FontSquirrel： How To Use The Generator

加載字體

在你引入的字體被渲染出來之前，他們需要先進行加載。下面是三種在加載的時候可能會發生的事情：

引入的字體沒有被識別出來，字體應用了備用字體。
引入的字體雖然被識別出來但是沒有加載，他需要在下載完成之后才會被應用。
引入的字體被成功識別并迅速應用。

場景1只發生在你嘗試使用一個不存在的字體，或者聲明時候的src指向了一個壞鏈，這種情況可以并且應該徹底避免。接著我們跳到場景3，這種情況通常在字體被正確的緩存的時候發生，也是我們喜聞樂見的。場景2中包含著字體加載的過程，字體加載通常是難以避免的（至少是在第一次請求的時候），下面是幾種處理方式：

1. 文檔樣式閃爍方案（FOUT）

FOUT是指網頁會在切換到合適的網頁字體之前，使用默認或者備選字體顯示文字。這種情況的出現是因為只有當HTML和CSS都被下載完成之后，字體請求才會發出。這就意味著，在HTML被顯示出來而字體文件沒有被完全下載下來中間存在著一段”空檔”時間。 FOUT 算是對大部分的網頁而言的最佳選擇，主要是其他的選擇也許更糟。如果使用得到的話，FOUT 很難被用戶察覺出來。

2. 不可見文本閃爍方案（FOIT）

很多年前，一些現代瀏覽器開始使用一種新的技術來處理字體加載的問題 — FOIT. FOIT是指當瀏覽器檢測到字體正在加載的時候，隱藏應用這段字體的文字，直到字體完全下載完才將其顯示出來。然而我們應該避免這種做法雖然這樣做從理論上看起來還不錯，但是這會帶給那些網絡速度比較差的用戶十分糟糕的體驗。有可能會在最初的FOIT后出現FOUT，最壞的情況可能會是這段文字將永遠看不到了。

3. 白屏方案

即在字體加載完成之前，整個網頁都處于不可見的狀態，或者也可以采用顯示一個進度條.我們只推薦當FOUT 嚴重影響用戶體驗的時候使用這種方法。我們通常在一個網頁需要大面積顯示一個特定的字體的時候使用該方法，否則，FOUT 總會我們的第一選擇，因為”內容至上”。白屏方案與 FOIT很相似，但對于你來說，你擁有控制在什么時候給用戶展示你的內容的自由，這種感覺會似乎更棒一些，不是嗎？而且在FOIT方案中，不可見的文本有時候會給讀者帶來困惑，而徹底的白屏（或者一個進度條）會讓人很自然的覺得是一個正在加載的信號。

不管你是打算使用 FOUT 方案或者白屏方案，我們都推薦您使用Web Font Loader這個JavaScript庫. Web Font Loader 可以讓你對 @font-face加以控制，而且你也為字體加載的體驗添加控制事件。

注意：有一個W3C 字體加載 API也會實現同樣的功能，但是它現在的支持不是很好_

FOUT 方案

下面是一個使用 Web Font Loader 實現了 FOUT的例子：

<script type="text/javascript"> WebFontConfig = {
 google： { families： [ 'Lora：400，700，400italic，700italic：latin' ] }
 };
 (function() {
 var wf = document.createElement('script');
 wf.src = ('https：' == document.location.protocol ? 'https' ： 'http') +
 '：//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
 wf.type = 'text/javascript';
 wf.async = 'true';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(wf， s);
 })(); </script>
<noscript>
 <link  rel='stylesheet' type='text/css'>
</noscript>
<style> p {
 /* use fallback fonts */
 }
 .wf-active p {
 /* styles for custom fonts */
 } </style>

異步地使用 Web Font Loader 很重要，只有這樣做才不會延誤頁面其他部位的渲染。

寫樣式的時候，讓你的備用字體盡可能近的靠近你的實際字體，這樣才能最大程度的減少 FOUT造成的影響.點擊這里你將會看到一系列的備選字體. 使用這個工具你將很容易的看到備選字體和你引入的字體的對比效果.

白屏方案

下面是一個使用 Web Font Loader 實現了白屏方案的例子：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script> WebFont.load({
 google： {
 families： ['Raleway'， 'Oswald']
 }
 }); </script>
<noscript>
 <link  rel='stylesheet' type='text/css'>
</noscript>
<style></style>

在這個例子里面，備選字體不需要和你引入的字體看起來很像，因為我們不會用到 FOUT. 依照你自己的喜好去選擇備選字體吧。

如果你想要用一個進度條取代白屏，你可以使用Pace。這種方法在用戶體驗上效果會更好一些，特別是當字體文件很大的時候。

擴展閱讀：

Type Study： Choosing Fallback Fonts
FOUT， FOIT， FOFT
Web Font Optimization

OpenType 的特性

OpenType 的特性可以被視為文字進行字體排版時的可選項，它們被用來加強文字的表現和易讀性。

p {
 font-kerning： normal;
 font-variant-ligatures： common-ligatures contextual;
 -moz-font-feature-settings： "kern"， "liga"， "clig"， "calt";
 -ms-font-feature-settings： "kern"， "liga"， "clig"， "alt";
 -webkit-font-feature-settings： "kern"， "liga"， "clig"， "calt";
 font-feature-settings： "kern"， "liga"， "clig"， "calt";
}

OpenType 特性被放置于字體之中，這就意味著對于不同的字體，會有不同的特性，在使用這些特性之前，我們需要看一看我們的字體是否支持這些特性。

使用 font-feature-settings來激活 OpenType 特性. 由于目前對于這個屬性的支持不好，我們需要在屬性之前加上前綴。

Kerning kern， ligatures liga， contextual ligatures clig，和 contextual alternatives calt這四種適用于所有字體中 ######( 譯者注：font-feature-settings這種屬性僅支持拉丁文語系的字體使用，并不支持中文哦！ )

擴展閱讀：

Caring About OpenType Features
Death To Typewriters
Web Font Optimization

Web Style Guide

相對大小

盡可能的使用相對大小。

html { font-size： 100% }
p { font-size： 1em }
@media (min-width： 64em) {
 html {
 font-size： 112.5%;
 }
}

font-size： 100% 與瀏覽器的字體大小設定保持一致而不是去覆寫它，根據大多數的瀏覽器的默認設置，這里也可以用1em 代替表示 16px.
通過改變html 的 font-size會影響到所有單位為 em和rem 的元素.如果是對于響應式設計的網頁，這樣做還是比較實用的。
用戶的選擇也很重要，所有不要偏離 font-size： 100%和1em太遠.
對于font-size建議使用rem 和 em.
對于一些元素定位如margin， padding等等，建議使用 rem， em，或者 % 。
對于媒體查詢中尺寸建議使用em.
對于一些大的標題字或者配有圖片的字，可以使用FitText來實現標題的縮放。盡量避免使用vw 和 vh因為現在的支持還不是很好，難于精確的配置，并且對于一些瀏覽器的字體和縮放設置并不適配。

擴展閱讀：

Type Study： Sizing The Legible Letter
5 Useful CSS Tricks for Responsive Design
REM vs EM – The Great Debate
PX， EM or REM Media Queries?

容器

容器，或者稱為包裝，指的是用來包裹一個或者多個元素的HTML元素。它將元素分組，從而更好進行語義化、修飾以及布局。

html {
 box-sizing： border-box;
}
*，
*：before，
*：after {
 box-sizing： inherit;
}
.container {
 max-width： 67rem;
 padding-left： 1.5rem;
 padding-right： 1.5rem;
}

強烈建議使用 box-sizing： border-box. 點擊這里查看更多信息。
左/右內間距與最大寬度聯合使用可以很容易地創建一個移動端友好的容器。
要為容器選擇一個合適的寬度，既不能太大（因為太大的話讀者的眼睛難以聚焦）也不能太小（這樣讀者的眼睛需要經常移動才可以看清）。永遠記住，在進行網頁字體排版的時候，沒有一個適合所有字體、尺寸、行距和分辨率的鐵律，你需要自己來做決定。

擴展閱讀：

* { Box-sizing： Border-box } FTW
StackOverflow： Ideal Column Width For Paragraphs Online

字體大小

使用縮放模塊可以幫助你決定在你的元素上面應用怎樣的font-size .縮放模塊指的是依照其內容安排的一系列比較合適的字體大小的數值。

縮放模塊的說明. 點擊此處

我們可以在編寫CSS的一開始使用縮放模塊，將它作為一個參考。
值的注意的是，盡管不同的字體有著不同的大寫字母高度和x字母高度，可是大多數的模塊化縮放工具都沒有將這些考慮在內。
在你的樣式表中，建議將你所使用到的縮放模塊工具的配置信息寫在注釋之中。

響應式的縮放模塊

只使用單獨的一個縮放模塊方案并不一定適合所有分辨率的設備，為了解決這個問題，你可以依據用戶的設備的分辨率的不同提供不同的縮放方案

//Sass responsive modular scale
/* 
 * Modular scale
 * http://www.modularscale.com/?1.25&em&1.33&web&text
*/
$type-scale-large： (
 h1： 3.911rem，
 h2： 2.941rem，
 h3： 2.211rem，
 h4： 1.663rem，
 p： 1.25rem
);
/* 
 * Modular scale
 * http://www.modularscale.com/?1.25&em&1.25&web&text
*/
$type-scale-medium： (
 h1： 3.052rem，
 h2： 2.441rem，
 h3： 1.953em，
 h4： 1.563rem，
 p： 1.25rem，
);
/* 
 * Modular scale
 * http://www.modularscale.com/?1.1&em&1.25&web&text
*/
$type-scale-small： (
 h1： 2.686rem，
 h2： 2.148rem，
 h3： 1.719rem，
 h4： 1.375rem，
 p： 1.1rem
);
$breakpoint-medium： 75em;
$breakpoint-small： 45em;
@mixin size($level) {
 font-size： map-get($type-scale-large， $level);
 @media (max-width： $breakpoint-medium) {
 font-size： map-get($type-scale-medium， $level);
 }
 @media (max-width： $breakpoint-small) {
 font-size： map-get($type-scale-small， $level);
 }
}
// Example
.title {
 @include size(h1);
}

擴展閱讀：

More Meaningful Typography
The Typographic Scale

垂直距離

文字間的垂直距離是由 line-height， margin，和padding構建出來的.

line-height 不應該帶有單位。比較寬的容器里面文字的行高會大一些，而那些比較窄的容器里面行高相對來說小一些會比較合適。
為那些具有單方向的文本元素添加margin屬性，建議使用margin-bottom.
要遵循距離原則.

垂直節律

垂直節律是指元素之間的垂直間隔要保持一致性。這一點十分重要，它可以帶給讀者視覺上放松的享受，給他們一種親近的感覺。

Image source建立垂直節律很簡單。首先，確定你使用的基礎垂直內間距和基礎垂直外間距的數值。然后，為你的容器，文字性元素或者其他相關元素的單方向的外邊距（或者內邊距）應用這個數值。如果你需要制制造更大的間隔的話，應用這個數值的倍數就好啦!

將基礎間距的數值設置成與行高相同的數值，這樣你的文字就像寫在一個條格紙上那樣整齊，就像我們傳統的印刷字體設計的那樣。然而，想要文字擁有垂直節律不一定需要按照上面的方法來做，只要你設置了一個基礎間距，并且使得其他間距都是由這個間距成倍的得來的，那樣就可以了。

body { 
 line-height： 1.4; // Base line height
}
p { 
 font-size： 1.25em; // Base font size
 margin-bottom： 1.75rem; // Base vertical spacing： (1.4 * 1.25) = 1.75
}
h1 {
 font-size： 3em;
 margin-bottom： 3.5rem; // Double the base value for a larger gap (1.75 * 2) = 3.5
}
h2 {
 font-size： 2em;
 margin-bottom： 1.75rem;
}
h3 {
 font-size： 1.5em;
 margin-bottom： 1.75rem;
}
.page-container {
 padding： 3.5rem 2rem; // 3.5 is double the base value
}
/* Simple Sass Implementation */
$base-line-height： 1.4;
$base-font-size： 1.25rem;
$vertical-rhythm： $base-line-height * $base-font-size;
body { 
 line-height： $base-line-height;
}
p { 
 font-size： $base-font-size;
 margin-bottom： $vertical-rhythm;
}
h1 {
 font-size： 3em;
 margin-bottom： $vertical-rhythm * 2;
}
h2 {
 font-size： 2em;
 margin-bottom： $vertical-rhythm;
}
h3 {
 font-size： 1.5em;
 margin-bottom： $vertical-rhythm;
}
.page-container {
 padding： ($vertical-rhythm * 2) 2rem;
}

文字底部對齊基線網格

文字底部對齊基線是垂直節律的一個更為嚴格的實現。在網頁中，文字通常在line-height間居中對齊.但對于較大的文字來說會比較討厭，因為這樣做會導致在頂部和底部留有太多的空間。在傳統印刷的時候，這個問題一般會通過讓文字對齊基線網格的底部得以解決。

我們也可以通過為較大的文字添加一個負的margin-top和一個較小的margin-bottom，不需要使用基線網格而解決這個問題。

圖片資源為不同的字體樣式、字體大小和分辨率添加一個底部對齊的基線網格并不是一個很容易的方式，所以強烈建議你使用一個字體排版基線庫例如 Sassline 或者 MegaType.

注意，垂直節律只是一個建議，而且基線網格也只是想象出來的。所以我們不需要在每個使用場合都遵循這個規律，也不用在每個元素中都去追求像素級別的完美。

擴展閱讀：

Why is Vertical Rhythm an Important Typography Practice?
Aligning type to baseline the right way using SASS
Is Web Typography Completely Broken?
Single-direction Margin Declarations

顏色

顏色可以很大程度上的增加視覺辨識度，是字體排版中一個重要的組成部分。

不要隨心所欲的挑選顏色，建議使用顏色板，建議你使用 Material Design colors 和 Flat UI colors 中提供的顏色板進行顏色選擇.
不要過度濫用一個顏色，因為這樣會造成辨識度的降低，同樣也不要使用很多完全不同的顏色。
遵循相似原則.
不建議使用純黑 #000 作為你的正文顏色，你可以選擇一個非常灰的顏色如#333.
有時候，使用透明顏色比使用淺色會更好一些，如果你深入的了解，可以點擊這里。
確保文字和背景有較大的對比度，你可以使用這個對比度檢測工具幫助你進行選擇.

####擴展閱讀：

Magic Of CSS： Color
Google Style – Color

下劃線

在印刷品里，永遠都不要使用到下劃線，因為這樣做會影響文字的閱讀，重點是，它很丑！Practical Typography

一般的來說，在網頁中下劃線也會看起來并不美好！幸運的是， background-image 就包含一個方法，它可以使得下劃線變得好看一點。下面是Adam Schwartz使用Sass實現的下劃線的例子：

@mixin text-underline-crop($background) {
 text-shadow： .03em 0 $background， 
 -.03em 0 $background，
 0 .03em $background，
 0 -.03em $background，
 .06em 0 $background，
 -.06em 0 $background，
 .09em 0 $background，
 -.09em 0 $background，
 .12em 0 $background，
 -.12em 0 $background，
 .15em 0 $background，
 -.15em 0 $background;
}
@mixin text-background($color-bg， $color-text) {
 background-image： linear-gradient($color-text， $color-text);
 background-size： 1px 1px;
 background-repeat： repeat-x;
 background-position： 0% 95%;
}
@mixin text-selection($selection) {
 &：：selection {
 @include text-underline-crop($selection);
 background： $selection;
 }
 &：：-moz-selection {
 @include text-underline-crop($selection);
 background： $selection;
 }
}
@mixin link-underline($background， $text， $selection){
 @include text-underline-crop($background);
 @include text-background($background， $text);
 @include text-selection($selection);
 color： $text;
 text-decoration： none;
 *，
 *：after，
 &：after，
 *：before，
 &：before {
 text-shadow： none;
 }
 &：visited {
 color： $text;
 }
}
/* Example usage */
a {
 @include link-underline(#fff， #333， #0CBF);
}

SmartUnderline 是一個簡化這個工作的庫。建議你只在有鏈接的地方使用下劃線，這是大多是網站都遵循的規律，如果不這么做的話，可能會引起誤解。

擴展閱讀：

Crafting Link Underlines On Medium
Smarter Link Underlines For Every Website

總結

恭喜你，你已經快讀完這篇手冊了。在web，這種用戶可以在任何分辨率的設備上使用的媒介上進行字體排版是及其困難的。在很多年前，當我第一次開始設計網頁的時候，我發現幾乎找不到最新的關于最佳WEB字體排版實踐的信息。很多專家發表的博客文章內容相互矛盾，而且很多市面上的web字體排版的書籍也很少談及具體技術應用的細節。字體排版手冊希望可以解決這個問題，并且為菜鳥們提供應該了解的關于如何創建符合字體排版工業標準的全部知識。我希望這個成果可以令你滿意。

請私信我回復“666”，為嚴哥打Call~，還有更多驚喜哦~

.............................................................

UI嚴選—越努力，越幸運

在線咨詢

上一篇：HTML 基礎的<video> 標簽
下一篇：Event 對象之事件句柄　(Event Handlers)

您的項目需求

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

整合營銷服務商

Java 0基礎入門 （Html標簽的使用）

介

選擇器（Selector）

常用屬性

頁面布局

您的項目需求

Java 0基礎入門（Html標簽的使用）