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 href='http://fonts.googleapis.com/css?family=Lora：400，700，400italic，700italic' 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 href='https://fonts.googleapis.com/css?family=Raleway|Oswald' 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标签的使用）