整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
一篇：Java 0基礎(chǔ)入門（初識(shí)Html）
1.文本相關(guān)標(biāo)簽--標(biāo)題標(biāo)簽
<h#></h#>:一般用來創(chuàng)建各級(jí)不同的標(biāo)題，其中#的值可以為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>代碼請(qǐng)放在body中，然后再運(yùn)行。
還不清楚Html結(jié)構(gòu)的，請(qǐng)看上一篇文章。
運(yùn)行結(jié)果如下：
標(biāo)題標(biāo)簽運(yùn)行結(jié)果
字體大小隨著#值變大而變小
h標(biāo)簽會(huì)自動(dòng)換行
當(dāng)#的值超過6以后，就直接顯示成了普通文本。
2.文本相關(guān)標(biāo)簽--特殊符號(hào)
空格
小于(<) <
大于(>) >
版權(quán)號(hào)(? ) ?
注冊(cè)符(?) ?
3.文本相關(guān)標(biāo)簽--行的控制
段落標(biāo)簽<p>xxx</p>
相當(dāng)于在頁(yè)面中預(yù)留了一行空行，xxx是你在這個(gè)空行中填寫的內(nèi)容
換行標(biāo)簽<br>
ps：注意標(biāo)簽分為成對(duì)出現(xiàn)的和自閉合標(biāo)簽，書寫時(shí)要注意規(guī)范
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<h1>是一級(jí)標(biāo)題
</p>
<p>
<h2>是二級(jí)標(biāo)題
</p>
<h3>是三級(jí)標(biāo)題
<br>
<h4>是四級(jí)標(biāo)題
</body>
</html>3.圖像標(biāo)簽
基本用法：
<img src="img1.jpg" width="100px" height="200px" alt=”” title=””/>
src--圖片的路徑(相對(duì)路徑的寫法../)
width--圖片顯示時(shí)的寬度（不一定是實(shí)際），像素為單位，px可以不寫
height--圖片顯示時(shí)的高度（不一定是實(shí)際），像素為單位，px可以不寫
alt，title--鼠標(biāo)放在圖片上顯示的文字，幾乎每個(gè)標(biāo)簽都可以加這兩個(gè)屬性，圖片不存在時(shí)，圖片位置顯示設(shè)定的文字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
src屬性：當(dāng)前圖片的路徑
路徑：
(1)絕對(duì)路徑:一個(gè)完整的路徑，從ip開始到文件名結(jié)束
(2)相對(duì)路徑:要引用的圖片資源相對(duì)于當(dāng)前頁(yè)面的路徑
width屬性：顯示的寬度
heigth屬性:顯示的高度
1.如果只給定寬度或高度，那么另外一個(gè)高度或?qū)挾鹊闹? 會(huì)根據(jù)原圖的寬高比進(jìn)行自動(dòng)計(jì)算
2.如果同時(shí)給定了寬度和高度，并且不符合原圖的比例，
那么就會(huì)失真
-->
<!--絕對(duì)路徑-->
<img src="http://zt.tgbus.com/ff15coming/assets/images/bg_02.jpg" width="500px"/>
<!--相對(duì)路徑，圖片和文件在同一目錄下-->
<img src="001.jpg" height="300px"/>
<!--相對(duì)路徑，圖片所在的目錄和頁(yè)面同一級(jí)-->
<img src="img/002.jpg" width="100px" height="500px"/>
<!--
alt/title:
（1）鼠標(biāo)放在對(duì)應(yīng)圖片上時(shí)能夠顯示出對(duì)應(yīng)的說明性文字
（2）當(dāng)圖片不存在時(shí)，會(huì)在原來顯示圖片的地方加上說明性文字
（3）alt/title在不同瀏覽器中可能有兼容性問題，所以一起寫，作用是一樣的
（4）后面學(xué)習(xí)的標(biāo)簽中都可以加上這兩個(gè)屬性，來作為鼠標(biāo)放上去時(shí)的說明
-->
<img src="img/002.jpg" alt="圖片002" title="圖片002"/>
<img src="img1111/002.jpg" alt="圖片002" title="圖片002"/>
</body>
</html>4.文字布局--內(nèi)容分隔標(biāo)簽
用于在頁(yè)面上繪制水平線
<hr size="5" color="red" width="300" align="left">
<hr size="10" color="black" width="200">
<hr size="5" color="#0000FF" width="50%" align="right">
size--線的厚度
color--線的顏色，顏色的寫法支持多種形式
width--線的寬度
align--對(duì)齊方式（盡可能使用后面學(xué)習(xí)的CSS樣式來對(duì)齊）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
第一行
<!--分隔標(biāo)簽-->
<hr/>
第二行
<!--
size:線的厚度
color：線的顏色
align：對(duì)齊方式 left right
width：線的寬度（像素，相對(duì)于外部元素寬度的百分比）
-->
<hr size="5" color="red" width="300" align="left"/>
<hr size="5" color="#FF1493" width="30%" align="right"/>
<hr color="#D84D2A" />
</body>
</html>
5.文字布局--項(xiàng)目列表和編號(hào)（有序列表）
<ol type="1">
<li>填寫信息</li>
<li>收電子郵件</li>
<li>注冊(cè)成功</li>
</ol>
type值：(改變序號(hào)類型）
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 阿拉伯?dāng)?shù)字作為序號(hào)
a 小寫字母作為序號(hào)
A 大寫字母作為序號(hào)
i 羅馬數(shù)字的小寫形式
I 羅馬數(shù)字的大寫形式
-->
<ol type="I">
<li>第一項(xiàng)</li>
<li>第二項(xiàng)</li>
<li>第三項(xiàng)</li>
<li>第四項(xiàng)</li>
<li>第五項(xiàng)</li>
<li>第六項(xiàng)</li>
</ol>
</body>
</html>6.文字布局--項(xiàng)目列表和編號(hào)（無序列表）
<ul type="circle">
<li>如何激活會(huì)員名？</li>
<li>如何注冊(cè)淘寶會(huì)員？</li>
<li>注冊(cè)時(shí)密碼設(shè)置有什么要求？</li>
<li>支付寶認(rèn)證</li>
</ul>
type值：
disc：效果——實(shí)心黑色小圓點(diǎn)
square：效果——實(shí)心黑色小方塊
circle：效果——空心小圓點(diǎn)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
type屬性取值：
circle：空心圈
disc：實(shí)心圓
square：正方形
-->
<ul type="circle">
<li>第一項(xiàng)</li>
<li>第二項(xiàng)</li>
<li>第三項(xiàng)</li>
<li>第四項(xiàng)</li>
<li>第五項(xiàng)</li>
<li>第六項(xiàng)</li>
</ul>
</body>
</html>
7.預(yù)格式文本標(biāo)簽
pre：pre 元素可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。而文本也會(huì)呈現(xiàn)為等寬字體。
<pre> 標(biāo)簽的一個(gè)常見應(yīng)用就是用來表示計(jì)算機(jī)的源代碼
8.頁(yè)面鏈接
<a> 標(biāo)簽定義超鏈接，用于從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面。最重要的是href屬性，用于指定要跳轉(zhuǎn)的頁(yè)面的路徑。
相對(duì)路徑:指定從根目錄到文件的完整路徑。
絕對(duì)路徑:指定相對(duì)于當(dāng)前文件的文件位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
<a></a>:頁(yè)面鏈接
如果沒有給定href屬性，那么a標(biāo)簽之間的內(nèi)容以普通文本方式顯示
href:用來指定當(dāng)前鏈接要跳轉(zhuǎn)的路徑
路徑可以是相對(duì)路徑也可以是絕對(duì)路徑
-->
<a href="http://www.baidu.com" >百度</a>
<a href="圖像標(biāo)簽.html">圖像標(biāo)簽</a>
<!--圖片鏈接-->
<a href="http://zt.tgbus.com/ff15coming/">
<img src="http://zt.tgbus.com/ff15coming/assets/images/bg_02.jpg" width="500px"/>
</a>
<!--
阻止鏈接的跳轉(zhuǎn)行為
-->
<a href="#">淘寶</a>
<!--了解-->
<a href="javascript：void(0);">京東</a>
</body>
</html>
使用a標(biāo)簽制作錨點(diǎn)，實(shí)現(xiàn)跳轉(zhuǎn)到頁(yè)面指定位置
（1）本頁(yè)跳轉(zhuǎn)（頁(yè)面很長(zhǎng)，內(nèi)容很多，點(diǎn)擊a標(biāo)簽內(nèi)容，迅速定位到你要找的內(nèi)容）
<!--定義a標(biāo)簽，跳轉(zhuǎn)到指定錨點(diǎn)-->
<a href="#helpme">[新人上路]</a>
<!--定義一個(gè)錨點(diǎn)，給定name屬性-->
<a name="helpme">新人上路指南</a>
（2）其它頁(yè)跳轉(zhuǎn)（定位到1.html這種不是本頁(yè)面的，a標(biāo)簽name值為t2的內(nèi)容處）
<a href="1.html#t2">[新人上路]</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.定義要進(jìn)行點(diǎn)擊的鏈接
-->
<a href="#position1">位置1</a>
<a href="#position2">位置2</a>
<a href="#position3">位置3</a>
<!--
2.要跳轉(zhuǎn)的位置
-->
<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標(biāo)簽打開電子郵件發(fā)送窗口
這個(gè)方法是調(diào)用outlook客戶端，現(xiàn)在已經(jīng)很少用了！
在href前面加上mailto前綴，后面跟合法的郵箱地址
<a href="mailto:429661318@qq.com">
發(fā)送郵件
</a>
指定超鏈接在何處打開目標(biāo) URL
在href屬性存在的情況下，指定target屬性
_blank：在空白頁(yè)打開
_self：直接在本頁(yè)打開
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
target屬性：指定頁(yè)面的打開的地方
_self:在當(dāng)前頁(yè)打開
_blank:在空白頁(yè)打開
-->
<a href="http://www.baidu.com" target="_self">在當(dāng)前頁(yè)打開</a>
<a href="http://www.baidu.com" target="_blank">在空白頁(yè)打開</a>
</body>
</html>標(biāo)簽的學(xué)習(xí)就到這，下一篇會(huì)介紹表單、表單元素的寫法。喜歡的可以關(guān)注下，謝謝！！
下一篇：Java 0基礎(chǔ)入門 （Html表單、表單元素）
CSS 是什么？
CSS是Cascading Style Sheets的簡(jiǎn)稱，中文稱為層疊樣式表。
屬性和屬性值用冒號(hào)隔開，以分號(hào)結(jié)尾。
CSS 四種引入方式：
1.行內(nèi)式
行內(nèi)式是在標(biāo)簽的style屬性中設(shè)定CSS樣式。
<div style="..."></div>2.嵌入式
嵌入式是將CSS樣式集中寫在網(wǎng)頁(yè)的<head>標(biāo)簽的<style></style>標(biāo)簽對(duì)中。
<head>
...
<style type="text/css">
...此處寫CSS樣式
</style>
</head>3.導(dǎo)入式
將一個(gè)獨(dú)立的.css文件引入HTML文件中，導(dǎo)入式使用@import 引入外部CSS文件，<style>標(biāo)記也是寫在<head>標(biāo)記中。
導(dǎo)入式會(huì)在整個(gè)網(wǎng)頁(yè)裝載完后再裝載CSS文件。
<head>
...
<style type="text/css">
@import "My.css"; 此處注意.css文件的路徑
</style>
</head>4.鏈接式
將一個(gè)獨(dú)立的.css文件引入到HTML文件中，使用<link>標(biāo)記寫在<head>標(biāo)記中。
鏈接式會(huì)以網(wǎng)頁(yè)文件主體裝載前裝載CSS文件。
<head>
...
<link href="My.css" rel="stylesheet" type="text/css">
</head>
樣式應(yīng)用順序：
.nick {
color: yellow !important;
}基本選擇器：
1.通用元素選擇器
* 表示應(yīng)用到所有的標(biāo)簽。
* {color: yellow}2.標(biāo)簽選擇器
匹配所有使用 div 標(biāo)簽的元素（可以匹配所有標(biāo)簽）
div {color: yellow}3.類選擇器
匹配所有class屬性中包含info的元素。
語(yǔ)法：.類名{樣式}（類名不能以數(shù)字開頭，類名要區(qū)分大小寫。）
.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>4.ID選擇器
使用id屬性來調(diào)用樣式，在一個(gè)網(wǎng)頁(yè)中id的值都是唯一的（是W3C規(guī)范而不是規(guī)則，所以不會(huì)報(bào)錯(cuò)）。
語(yǔ)法：#ID名{樣式}（ID名不能以數(shù)字開頭）
#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>組合選擇器：
1.多元素選擇器
同時(shí)匹配h3,h4標(biāo)簽，之間用逗號(hào)分隔。
h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>
2.后代元素選擇器
匹配所有div標(biāo)簽里嵌套的P標(biāo)簽，之間用空格分隔。
div p {color: yellow;}
<div>
<p>Nick</p>
<div>
<p>Nick</p>
</div>
</div>3.子元素選擇器
匹配所有div標(biāo)簽里嵌套的子P標(biāo)簽，之間用>分隔。
div > p {color: yellow;}
<div>
<p>Nick</p>
<p>Nick</p>
</div>4.毗鄰元素選擇器
匹配所有緊隨div標(biāo)簽之后的同級(jí)標(biāo)簽P，之間用+分隔（只能匹配一個(gè)）。
div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>屬性選擇器：
1.[title] & P[title]
設(shè)置所有具有title屬性的標(biāo)簽元素；
設(shè)置所有具有title屬性的P標(biāo)簽元素。
[title]
{
color: yellow;
}
p[title]
{
color: yellow;
}
<div title>Nick</div>
<p title>Nick</p>2.[title=Nick]
設(shè)置所有title屬性等于“Nick”的標(biāo)簽元素。
[title="Nick"]
{
color: yellow;
}
<p title="Nick">Nick</p>3.[title~=Nick]
設(shè)置所有title屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于“Nick”的標(biāo)簽元素。
[title~="Nick"]
{
color: yellow;
}
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>4.[title|=Nick]
設(shè)置所有title屬性具有多個(gè)連字號(hào)分隔（hyphen-separated）的值、其中一個(gè)值以"Nick"開頭的標(biāo)簽元素。
例：lang屬性："en"、"en-us"、"en-gb"等等
[title|="Nick"]
{
color: yellow;
}
<p title="Nick-Jenny">Nick</p>
5.[title^=Nick]
設(shè)置屬性值以指定值開頭的每個(gè)標(biāo)簽元素。
[title^="Nick"]
{
color: yellow;
}
<p title="NickJenny">Nick</p>6.[title$=Nick]
設(shè)置屬性值以指定值結(jié)尾的每個(gè)標(biāo)簽元素。
[title$="Nick"]
{
color: yellow;
}
<p title="JennyNick">Nick</p>7.[title*=Nick]
設(shè)置屬性值中包含指定值的每個(gè)元素
[title*="Nick"]
{
color: yellow;
}
<p title="SNickJenny">Nick</p>偽類選擇器：
1. link、hover、active、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 {
color: yellow;
}
p:before{
content: "before...";
}
p:after{
content: "after...";
}
<p> Nick </p> 1. 顏色屬性：
color
transparent
opacity
2. 字體屬性:
font-style: 用于規(guī)定斜體文本
font-weight: 設(shè)置文本的粗細(xì)
font-size: 設(shè)置字體的大小
font-family：字體名稱
font：簡(jiǎn)寫屬性
3. 文本屬性:
white-space: 設(shè)置元素中空白的處理方式
direction: 規(guī)定文本的方向
text-align: 文本的水平對(duì)齊方式
line-height: 文本行高
vertical-align: 文本所在行高的垂直對(duì)齊方式
text-indent: 文本縮進(jìn)
letter-spacing: 添加字母之間的空白
word-spacing: 添加每個(gè)單詞之間的空白
text-transform: 屬性控制文本的大小寫
text-overflow: 文本溢出樣式
<!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: 文本的裝飾
text-shadow：文本陰影
word-wrap：自動(dòng)換行
<!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;
/*自動(dòng)換行*/
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標(biāo)簽下劃線*/
}4. 背景屬性
background-color: 背景顏色
background-image 設(shè)置圖像為背景
background-position 設(shè)置背景圖像的位置坐標(biāo)
background-repeat 設(shè)置背景圖像不重復(fù)平鋪
background-attachment 背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)
background 簡(jiǎn)寫
5. 列表屬性
list-style-type: 列表項(xiàng)標(biāo)志的類型
list-style-image：將圖象設(shè)置為列表項(xiàng)標(biāo)志
list-style-position：列表項(xiàng)標(biāo)志的位置
list-style：縮寫
1. 邊框
border-style：邊框樣式
border-color：邊框顏色
border-width：邊框?qū)挾?/strong>
border-radius：圓角
border: 簡(jiǎn)寫
box-shadow：邊框陰影
<!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>
點(diǎn)贊哦！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>邊框?qū)崿F(xiàn)各種三角符號(hào)：
<!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">妹子求關(guān)注 ^.^</h3></div>
<div class="back-img"></div>
</div>
</body>
</html>2.★ 盒子模型
一個(gè)標(biāo)準(zhǔn)的盒子模型：
padding:用于控制內(nèi)容與邊框之間的距離;
margin: 用于控制元素與元素之間的距離;
一個(gè)參數(shù)，應(yīng)用于四邊。
兩個(gè)參數(shù)，第一個(gè)用于上、下，第二個(gè)用于左、右。
三個(gè)參數(shù)，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)用于下。
邊框在默認(rèn)情況下會(huì)定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因?yàn)閎ody本身也是一個(gè)盒子，外層還有html，
在默認(rèn)情況下，body距離html會(huì)有若干像素的margin，所以body中的盒子不會(huì)緊貼瀏覽器窗口的邊框了。
解決方法：
body {
margin: 0;
}3.★ display
4. visibility
5.★ float 浮動(dòng)
讓一行顯示兩個(gè)塊級(jí)標(biāo)簽，會(huì)脫離文檔流
clear 清除浮動(dòng)：
6. clip 剪裁圖像
rect 剪裁定位元素：
7. overflow 設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度及寬度時(shí)如何顯示內(nèi)容
8.★ position 規(guī)定元素的定位類型
9. z-index 元素層疊順序
<!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 邊框輪廓
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 鼠標(biāo)的類型形狀
鼠標(biāo)放在以下單詞上，There will be a miracle：
url: 自定義光標(biāo)
<!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: 默認(rèn)
Default: 默認(rèn)
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 動(dòng)畫效果
transform 轉(zhuǎn)換，變形
<!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 平滑過渡
#property 指定屬性對(duì)應(yīng)類型
1、color： 通過紅、綠、藍(lán)和透明度組件變換（每個(gè)數(shù)值單獨(dú)處理），如：background-color，border-color，color，outline-color等CSS屬性；
2、length：真實(shí)的數(shù)字，如：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：真實(shí)的數(shù)字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等屬性；
4、integer 離散步驟（整個(gè)數(shù)字），在真實(shí)的數(shù)字空間，以及使用floor()轉(zhuǎn)換為整數(shù)時(shí)發(fā)生，如：outline-offset，z-index等屬性；
5、number真實(shí)的（浮點(diǎn)型）數(shù)值，如：zoom，opacity，font-weight等屬性；
6、transform list。
7、rectangle：通過x、 y、 width和height（轉(zhuǎn)為數(shù)值）變換，如：crop；
8、visibility：離散步驟，在0到1數(shù)字范圍之內(nèi)，0表示“隱藏”，1表示完全“顯示”,如：visibility；
9、shadow：作用于color、x、y、和blur（模糊）屬性，如：text-shadow；
10、gradient：通過每次停止時(shí)的位置和顏色進(jìn)行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動(dòng)畫，如：background-image；
11、paint server (SVG)：只支持下面的情況：從gradient到gradient以及color到color，然后工作與上面類似；
12、space-separated list of above：如果列表有相同的項(xiàng)目數(shù)值，則列表每一項(xiàng)按照上面的規(guī)則進(jìn)行變化，否則無變化；
13、a shorthand property：如果縮寫的所有部分都可以實(shí)現(xiàn)動(dòng)畫，則會(huì)像所有單個(gè)屬性變化一樣變化。#支持執(zhí)行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鼠標(biāo)放在以下圖片上，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
文是站在一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師的角度，所寫的關(guān)于最佳字體排版實(shí)踐的手冊(cè)，包括字體排版設(shè)計(jì)、Web 字體、Web 樣式指導(dǎo)等四個(gè)方面，而且每一章后都有擴(kuò)展閱讀幫你深入了解細(xì)節(jié)，全程高能干貨，建議閱讀。
目錄
簡(jiǎn)介
字體排版絕不僅僅是使用字體那么簡(jiǎn)單，它包括了關(guān)于文字”看上去會(huì)是怎么樣？”的所有事情——例如文字的大小，行高，顏色甚至文字間留白這樣的細(xì)枝末節(jié)的小事。一個(gè)好的文字排版會(huì)為你所寫的內(nèi)容定下情感基調(diào)，并且可以幫助讀者更好的理解其內(nèi)容和語(yǔ)境。
為了讓你使用起來更像是在看一本參考書而不是說明書，本文將會(huì)非常精簡(jiǎn)清晰，如果你想進(jìn)一步的了解更多細(xì)節(jié)，可以點(diǎn)擊查看在每一章中的”擴(kuò)展閱讀”去深入了解。
這本手冊(cè)將會(huì)在GitHub上開源，并且會(huì)持續(xù)更新一些最佳實(shí)踐的范例，希望你們喜歡！
字體排版設(shè)計(jì)
視覺層次
視覺層次是一種理念，它意在傳達(dá)頁(yè)面中的元素應(yīng)該依照其重要性進(jìn)行組織排版，以便讀者可以很容易的通覽整個(gè)頁(yè)面，找到相關(guān)的內(nèi)容。一個(gè)好的視覺層次可以引導(dǎo)讀者在閱讀時(shí)候的視覺流向。視覺層次被廣泛運(yùn)用于文字排版中，它構(gòu)成了文字排版設(shè)計(jì)的理論基石。
請(qǐng)看下圖的”愛麗絲夢(mèng)游仙境”的字體排版設(shè)計(jì)，它展現(xiàn)了一個(gè)清晰的視覺層次：
點(diǎn)擊這里 查看網(wǎng)頁(yè)上的實(shí)際效果
視覺層次可以被分成以下4個(gè)部分：
擴(kuò)展閱讀：
字體排版中的格式塔原則
格式塔原則， 或格式塔法則， 是一種構(gòu)建感性認(rèn)知的規(guī)律。當(dāng)我們觀察這個(gè)世界的時(shí)候，我們通常會(huì)意識(shí)到，一個(gè)復(fù)雜的場(chǎng)景是由多個(gè)在某些背景之上的物體構(gòu)成的，而這些物體則是由更小的一些物體構(gòu)成的，依此循環(huán)下去。
在字體排版中我們需要理解的兩個(gè)很重要的格式塔原則就是”距離原則”和”相似原則”。.
距離原則
為了更好地掌握元素定位的方法，了解距離原則是很重要的。距離原則表明，人們會(huì)將靠得近的物體視為有關(guān)聯(lián)的物體，反之，隔得比較遠(yuǎn)的物體將會(huì)被看成屬于不同類別。
點(diǎn)擊此處查看原圖
在字體排版設(shè)計(jì)中，”距離”指的是通過設(shè)置行高、內(nèi)間距和外間距所制造出來的留白空間。在兩段不同的段落之間應(yīng)該留有明顯的并且易于區(qū)分的留白間隔，請(qǐng)看下面的例子：
注意啦，你覺得應(yīng)該把內(nèi)容相關(guān)的部分都擠到一個(gè)很小的空間中去嗎？當(dāng)然不是這樣，自由隨意的留白也是很重要的。距離原則告訴我們，只需要為那些沒有關(guān)系的段落之間額外的加上一些易于區(qū)分的留白就可以了
相似原則
格式塔的相似原則告訴大家，看起來很像的東西會(huì)被認(rèn)為是一類的東西。舉個(gè)例子，如果所有可點(diǎn)擊的文字被設(shè)置為天藍(lán)色，那么讀者就會(huì)認(rèn)為文章中所有天藍(lán)色的文字內(nèi)容都是可以點(diǎn)擊的。
在字體排版中，相似原則就意味著，擁有同樣功能的元素應(yīng)該在樣式上保持一致。如果兩組元素的功能相似的話，那么它們也應(yīng)該看起來很像才對(duì)。例如，兩篇同為博客帖子的文章應(yīng)該看起來很像。而相反的，兩個(gè)功能不相同的元素也應(yīng)該看起來不像。
擴(kuò)展閱讀：
字體
選擇字體
選擇字體是一個(gè)具有創(chuàng)造性和情感的過程。不同的字體可以傳達(dá)不同的情感，你可以盡情挑選一個(gè)合適的字體讓你的文字感情變得豐沛起來。
擴(kuò)展閱讀：
使用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;
}
為了達(dá)到最大程度上的兼容，我們建議使用上面列出的格式。或者，只使用 woff2 和 woff也會(huì)支持大部分的現(xiàn)代瀏覽器。
你需要為每個(gè)列出來的格式提供一個(gè)相應(yīng)的字體文件。推薦使用 Transfonter 或者FontSquirrel’s Web Font Generator，這樣你就可以在只有一個(gè)字體文件的情況下，將其轉(zhuǎn)換成不同的文件格式。
盡可能的壓縮你的字體文件。 點(diǎn)擊這里 查看更多信息。
將多個(gè)同源字體文件（細(xì)體、常規(guī)、半粗體、粗體等等）合并成一個(gè)font-family， 盡量不要為每個(gè)字體都起一個(gè)新的font-family的名字。
或者，你也可以通過線上字體資源服務(wù)，如Google Fonts 或者 Typekit引入你想要的字體。
擴(kuò)展閱讀：
加載字體
在你引入的字體被渲染出來之前，他們需要先進(jìn)行加載。下面是三種在加載的時(shí)候可能會(huì)發(fā)生的事情：
場(chǎng)景1只發(fā)生在你嘗試使用一個(gè)不存在的字體，或者聲明時(shí)候的src指向了一個(gè)壞鏈， 這種情況可以并且應(yīng)該徹底避免。接著我們跳到場(chǎng)景3，這種情況通常在字體被正確的緩存的時(shí)候發(fā)生，也是我們喜聞樂見的。場(chǎng)景2中包含著字體加載的過程，字體加載通常是難以避免的（至少是在第一次請(qǐng)求的時(shí)候），下面是幾種處理方式：
1. 文檔樣式閃爍方案 （FOUT）
FOUT是指網(wǎng)頁(yè)會(huì)在切換到合適的網(wǎng)頁(yè)字體之前，使用默認(rèn)或者備選字體顯示文字。這種情況的出現(xiàn)是因?yàn)橹挥挟?dāng)HTML和CSS都被下載完成之后，字體請(qǐng)求才會(huì)發(fā)出。這就意味著，在HTML被顯示出來而字體文件沒有被完全下載下來中間存在著一段”空檔”時(shí)間。 FOUT 算是對(duì)大部分的網(wǎng)頁(yè)而言的最佳選擇，主要是其他的選擇也許更糟。如果使用得到的話，F(xiàn)OUT 很難被用戶察覺出來。
2. 不可見文本閃爍方案（FOIT）
很多年前，一些現(xiàn)代瀏覽器開始使用一種新的技術(shù)來處理字體加載的問題 — FOIT. FOIT是指當(dāng)瀏覽器檢測(cè)到字體正在加載的時(shí)候，隱藏應(yīng)用這段字體的文字，直到字體完全下載完才將其顯示出來。 然而我們應(yīng)該避免這種做法雖然這樣做從理論上看起來還不錯(cuò)，但是這會(huì)帶給那些網(wǎng)絡(luò)速度比較差的用戶十分糟糕的體驗(yàn)。有可能會(huì)在最初的FOIT后出現(xiàn)FOUT， 最壞的情況可能會(huì)是這段文字將永遠(yuǎn)看不到了。
3. 白屏方案
即在字體加載完成之前，整個(gè)網(wǎng)頁(yè)都處于不可見的狀態(tài)，或者也可以采用顯示一個(gè)進(jìn)度條.我們只推薦當(dāng)FOUT 嚴(yán)重影響用戶體驗(yàn)的時(shí)候使用這種方法。 我們通常在一個(gè)網(wǎng)頁(yè)需要大面積顯示一個(gè)特定的字體的時(shí)候使用該方法，否則，F(xiàn)OUT 總會(huì)我們的第一選擇，因?yàn)椤眱?nèi)容至上”。白屏方案與 FOIT很相似， 但對(duì)于你來說，你擁有控制在什么時(shí)候給用戶展示你的內(nèi)容的自由，這種感覺會(huì)似乎更棒一些，不是嗎？而且在FOIT方案中， 不可見的文本有時(shí)候會(huì)給讀者帶來困惑，而徹底的白屏（或者一個(gè)進(jìn)度條）會(huì)讓人很自然的覺得是一個(gè)正在加載的信號(hào)。
不管你是打算使用 FOUT 方案或者白屏方案， 我們都推薦您使用Web Font Loader這個(gè)JavaScript庫(kù). Web Font Loader 可以讓你對(duì) @font-face加以控制， 而且你也為字體加載的體驗(yàn)添加控制事件。
注意： 有一個(gè)W3C 字體加載 API也會(huì)實(shí)現(xiàn)同樣的功能，但是它現(xiàn)在的 支持不是很好_
FOUT 方案
下面是一個(gè)使用 Web Font Loader 實(shí)現(xiàn)了 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 很重要，只有這樣做才不會(huì)延誤頁(yè)面其他部位的渲染。
寫樣式的時(shí)候，讓你的備用字體盡可能近的靠近你的實(shí)際字體，這樣才能最大程度的減少 FOUT造成的影響.點(diǎn)擊 這里你將會(huì)看到一系列的備選字體. 使用 這個(gè)工具你將很容易的看到備選字體和你引入的字體的對(duì)比效果.
白屏方案
下面是一個(gè)使用 Web Font Loader 實(shí)現(xiàn)了白屏方案的例子：
<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>
在這個(gè)例子里面，備選字體不需要和你引入的字體看起來很像，因?yàn)槲覀儾粫?huì)用到 FOUT. 依照你自己的喜好去選擇備選字體吧。
如果你想要用一個(gè)進(jìn)度條取代白屏，你可以使用Pace。這種方法在用戶體驗(yàn)上效果會(huì)更好一些，特別是當(dāng)字體文件很大的時(shí)候。
擴(kuò)展閱讀：
OpenType 的特性
OpenType 的特性可以被視為文字進(jìn)行字體排版時(shí)的可選項(xiàng)，它們被用來加強(qiáng)文字的表現(xiàn)和易讀性。
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 特性被放置于字體之中，這就意味著對(duì)于不同的字體，會(huì)有不同的特性，在使用這些特性之前，我們需要看一看我們的字體是否支持這些特性。
使用 font-feature-settings來激活 OpenType 特性. 由于目前對(duì)于這個(gè)屬性的支持不好，我們需要在屬性之前加上前綴。
Kerning kern， ligatures liga， contextual ligatures clig， 和 contextual alternatives calt這四種適用于所有字體中 ######( 譯者注：font-feature-settings這種屬性僅支持拉丁文語(yǔ)系的字體使用，并不支持中文哦！ )
擴(kuò)展閱讀：
Web Style Guide
相對(duì)大小
盡可能的使用相對(duì)大小。
html { font-size： 100% }
p { font-size： 1em }
@media (min-width： 64em) {
html {
font-size： 112.5%;
}
}
擴(kuò)展閱讀：
容器
容器，或者稱為包裝，指的是用來包裹一個(gè)或者多個(gè)元素的HTML元素。它將元素分組，從而更好進(jìn)行語(yǔ)義化、修飾以及布局。
html {
box-sizing： border-box;
}
*，
*：before，
*：after {
box-sizing： inherit;
}
.container {
max-width： 67rem;
padding-left： 1.5rem;
padding-right： 1.5rem;
}
擴(kuò)展閱讀：
字體大小
使用 縮放模塊 可以幫助你決定在你的元素上面應(yīng)用怎樣的font-size .縮放模塊指的是依照其內(nèi)容安排的一系列比較合適的字體大小的數(shù)值。
縮放模塊的說明. 點(diǎn)擊此處
響應(yīng)式的縮放模塊
只使用單獨(dú)的一個(gè)縮放模塊方案并不一定適合所有分辨率的設(shè)備，為了解決這個(gè)問題，你可以依據(jù)用戶的設(shè)備的分辨率的不同提供不同的縮放方案
//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);
}
擴(kuò)展閱讀：
垂直距離
文字間的垂直距離是由 line-height， margin， 和padding構(gòu)建出來的.
垂直節(jié)律
垂直節(jié)律是指元素之間的垂直間隔要保持一致性。這一點(diǎn)十分重要，它可以帶給讀者視覺上放松的享受，給他們一種親近的感覺。
Image source建立垂直節(jié)律很簡(jiǎn)單。首先，確定你使用的基礎(chǔ)垂直內(nèi)間距和基礎(chǔ)垂直外間距的數(shù)值。然后，為你的容器，文字性元素或者其他相關(guān)元素的單方向的外邊距（或者內(nèi)邊距）應(yīng)用這個(gè)數(shù)值。如果你需要制制造更大的間隔的話，應(yīng)用這個(gè)數(shù)值的倍數(shù)就好啦!
將基礎(chǔ)間距的數(shù)值設(shè)置成與行高相同的數(shù)值，這樣你的文字就像寫在一個(gè)條格紙上那樣整齊，就像我們傳統(tǒng)的印刷字體設(shè)計(jì)的那樣。然而，想要文字擁有垂直節(jié)律不一定需要按照上面的方法來做，只要你設(shè)置了一個(gè)基礎(chǔ)間距，并且使得其他間距都是由這個(gè)間距成倍的得來的，那樣就可以了。
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;
}
文字底部對(duì)齊基線網(wǎng)格
文字底部對(duì)齊基線是垂直節(jié)律的一個(gè)更為嚴(yán)格的實(shí)現(xiàn)。在網(wǎng)頁(yè)中，文字通常在line-height間居中對(duì)齊.但對(duì)于較大的文字來說會(huì)比較討厭，因?yàn)檫@樣做會(huì)導(dǎo)致在頂部和底部留有太多的空間。在傳統(tǒng)印刷的時(shí)候，這個(gè)問題一般會(huì)通過讓文字對(duì)齊基線網(wǎng)格的底部得以解決。
我們也可以通過為較大的文字添加一個(gè)負(fù)的margin-top和一個(gè)較小的margin-bottom，不需要使用基線網(wǎng)格而解決這個(gè)問題。
圖片資源為不同的字體樣式、字體大小和分辨率添加一個(gè)底部對(duì)齊的基線網(wǎng)格并不是一個(gè)很容易的方式，所以強(qiáng)烈建議你使用一個(gè)字體排版基線庫(kù)例如 Sassline 或者 MegaType.
注意，垂直節(jié)律只是一個(gè)建議，而且基線網(wǎng)格也只是想象出來的。所以我們不需要在每個(gè)使用場(chǎng)合都遵循這個(gè)規(guī)律，也不用在每個(gè)元素中都去追求像素級(jí)別的完美。
擴(kuò)展閱讀：
顏色
顏色可以很大程度上的增加視覺辨識(shí)度，是字體排版中一個(gè)重要的組成部分。
####擴(kuò)展閱讀：
下劃線
在印刷品里，永遠(yuǎn)都不要使用到下劃線，因?yàn)檫@樣做會(huì)影響文字的閱讀，重點(diǎn)是，它很丑！Practical Typography
一般的來說，在網(wǎng)頁(yè)中下劃線也會(huì)看起來并不美好！幸運(yùn)的是， background-image 就包含一個(gè)方法，它可以使得下劃線變得好看一點(diǎn)。 下面是Adam Schwartz使用Sass實(shí)現(xiàn)的下劃線的例子 ：
@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 是一個(gè)簡(jiǎn)化這個(gè)工作的庫(kù)。建議你只在有鏈接的地方使用下劃線，這是大多是網(wǎng)站都遵循的規(guī)律，如果不這么做的話，可能會(huì)引起誤解。
擴(kuò)展閱讀：
總結(jié)
恭喜你，你已經(jīng)快讀完這篇手冊(cè)了。在web，這種用戶可以在任何分辨率的設(shè)備上使用的媒介上進(jìn)行字體排版是及其困難的。在很多年前，當(dāng)我第一次開始設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，我發(fā)現(xiàn)幾乎找不到最新的關(guān)于最佳WEB字體排版實(shí)踐的信息。很多專家發(fā)表的博客文章內(nèi)容相互矛盾，而且很多市面上的web字體排版的書籍也很少談及具體技術(shù)應(yīng)用的細(xì)節(jié)。字體排版手冊(cè)希望可以解決這個(gè)問題，并且為菜鳥們提供應(yīng)該了解的關(guān)于如何創(chuàng)建符合字體排版工業(yè)標(biāo)準(zhǔn)的全部知識(shí)。我希望這個(gè)成果可以令你滿意。
請(qǐng)私信我回復(fù)“666”，為嚴(yán)哥打Call~，還有更多驚喜哦~
.............................................................
UI嚴(yán)選—越努力，越幸運(yùn)
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
