Html5与Css3知识点拾遗（六）

web字号

px（）

百分比（较常用）

em（最常用）：一般1em=16px，相对单位。以父元素作参照系,父元素大小是不确定的

body{

    font-size:100%;    /*父元素默认为16px*/

}

h1{

    font-size:2.1875em; /*35px/16px*/

}

css3新增：rem，以根元素为参照系，根元素大小是确定的

html{

    font-size:100%;     /*通常为16px*/

}

h1{

    font-size:2.1875rem; /*35px/16px*/

}

使用关键字：xx-small、x-small、small、large、x-large、xx-large、

行高

line-hight：n；

n是数字（最常用方法），与字体的乘积为行高

混合属性

font设置步骤

前三顺序随意：

字型（normal、italic/oblique）

粗细（normal、bold、bolder、lighter、100~900的倍数）

取消或设置小型大写字母（normal、small-caps）

按顺序：

字体大小

/行高

空格优先次序输入字体系列，以“，”分隔

.p{

    font:italic small-caps bold .875em/1.3 "Palayino Linotype",Palatino,serif;

}

/**斜体，小型大写字母，加粗，字号，行高，字体类型、备选字体/

设置背景

背景图片： background-image：url(01.png)

是否重复：background-repeat：repeat-x/repeat-x/no-repeat/repeat(默认)

起始位置： background-position：100px 100px;(或者top（页面位置）,center（显示位置）)

是否滚动：background-attachment：fixed/scroll(默认)/local

css3新增

background-clip：border-box(默认)

background-origin:padding-box(默认)

都接受相同的值：content-box包含内容，padding-box包含内容和内边距

background-size

contain：在显示图像完整宽高的情况下，尽可能的扩大图像的尺寸。背景图像可能不会填充整个背景区域

cover：在填充元素整个背景区域的情况下，让图像尽可能地小。图像的一部分可能会超出元素的范围，因而不可见

px、百分比或auto

控制间距

字间距：单词之间

word-spacing：0.4em

字偶距：字母之间

letter-spacing：0.4em

添加缩进

text-indent：2em

默认情况下对em、strong、cite等内联元素没有效果

仅适用块级元素。设置为dispay：block；或display：inline-block变为行内元素，就可以强制为其应用text-indent属性

对齐文本

text-align：justify 文本两端对齐

仅适用块级元素。设置为dispay：block；或display：inline-block变为就可以强制为其应用text-indent属性

文本大小写

text-transform

uppercase：大写

lowercase：小写

none：用于消除继承

capitalize：每个单词首字母都大写

小型大小写

font-variant

使用：samll-caps

取消：none

换行

text-wrap：normal；

装饰文本

text-decoration

underline：下划线

overline：上划线

line-through：删除线

none：没有

a:link{

text-decoration:none;

}

a:hover{

text-decoration:underline;

}

设置空白属性

white-space

pre：浏览器显示原文本中所有空格和回车

nowrap：文本全部显示在一行。可以手动创建br换行，但还是尽量避免而去用css控制

normal：正常

引用服务端字体

@font-face{

    font-family:WebFont;

    /*ttf:o,otf:t*/

    src:(xxx.ttf)format("truetype");

    font-weight:normal;

}

div{font-famliy:WebFont;}

若客户端有这个字体

@font-face{

    font-family:MyArial;

    src:local("Arial"),/*客户端字体*/

        url("xxx.otf");/*服务端字体*/

}

div{font-famliy:MyArial;}

修改字体种类而保持尺寸一致

font-size-adjust

aspect=height/字体大小

浏览器实际显示的aspect=（实际使用的aspect/修改前aspect）/当前字体尺寸