Html5与Css3知识点拾遗(六)

时间:2025-04-06 18:34:55

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)/当前字体尺寸