CSS3文字样式总结篇

原创 程序媛_小发 随笔 CSS总结 348阅读 2018-05-03 16:07:17 举报

CSS3文字样式总结篇

一、字体(font-family)

用来控制文字的字体类型。
此处列举Dreamweaver默认的font-famil属性的字体集合(来自《DIV+CSS网页样式与布局实战详解》)

表1.1 Dreamweaver默认的font-family属性字体

Dreamweaver默认的font-family属性字体
宋体
新宋体
Arial,Helvetica,sans-serif
Times New Roman,Times,serif
Courier New,Courier,monospace
Georgia,Times New Roman,Times,serif
Verdana,Arial,Helvetica,sans-serif
Geneva,Arial,Helvetica,sans-serif
黑体
楷体_GB2312
仿宋_GB2312

从上面的表格可以看到,其中有的属性使用了逗号隔开,其意思为:当浏览器没有第一个字体库时,会使用下一个备选字体库。例如,如果font-family属性设置为:Times New Roman,Times,serif,则浏览器会寻找第一个存在的字体库。

二、大小(font-size)

CSS提供font-size来控制字体的大小,font-size允许使用百分号形式或者单位形式来进行字体大小的设置。
如:

font-size:20px;
font-size:200%;

使用百分号形式时,是相对于父节点的font-size的大小进行设置的,一般情况下body父节点的字体大小为16px。
除此之外,font-size还支持以下属性值的设置:xx-small(最小)、x-small(较小)、medium(中等)、large(大)、x-large(较大)以及xx-large(超大)。
还有一个是larger,一般是比父节点大4个像素。

三、类型(font-style)

CSS提供font-style来设置字体的类型,主要是针对斜体或者正体字型的设置,CSS允许4种font-style属性值的设置。
如下表:

表3.1 font-style属性的设置列表

描述
normal默认值。浏览器显示一个标准的字体样式
italic浏览器会显示一个斜体的字体样式
oblique浏览器会显示一个倾斜的字体样式
inherit规定应该从父元素继承字体样式

其中,italic以及oblique都是将文字设置为斜体。它们的样式效果是一样的。

四、粗细(font-weight)

CSS提供font-weight属性来控制字体粗细,其值可以使指定的数值或者关键字。

表4.1 font-weight属性值的设置列表

描述
normal默认值。不加粗
bold粗体
bolder比父节点字体粗
lighter比父节点字体细
100~900100、200、300、400、500、600、700、800、900

一般的现代浏览器只提供两级粗细字体,所以,从100~500都为不加粗字体,从600~900都为加粗字体。

示例代码:

五、颜色(color)

CSS提供color属性来控制文字的颜色,其值可以使关键字形式、十六进制形式、RGB形式以及inherit形式。

使用关键字形式进行设置举例:

color:red;

使用十六进制形式进行设置举例:

color:#ff0000;

使用RGB形式进行设置举例

color:RGB(255,0,0)

六、小型大写字体(font-variant)

CSS提供font-variant属性来控制文字的大小写控制,但是该属性较少使用,只需了解即可。

表6.1 font-variant属性值的设置列表

描述
normal默认值。大小写不变
small-caps英文小型大写字体
inherit和父节点一致

示例代码:

七、链接

CSS提供链接(瞄和anchor)标签<a>以及它的伪类选择符的样式。

表7.1 瞄标签和伪类选择符的属性值的设置列表

描述
link瞄标签的一般状态下使用该伪类的CSS样式
visited瞄标签的链接被单击后使用该伪类的CSS样式
active瞄标签的链接被单击到释放之间使用该伪类的CSS样式
hover鼠标在瞄标签的链接区域停留时使用该伪类的CSS样式

伪类选择符的使用如下形式:

选择符:伪类选择符 {属性:属性值;属性:属性值;...}

其中选择符可以是标签选择符、ID选择符或者CLASS选择符。

八、布局

涉及标签内部内容的布局,需要了解这些样式属性:
text-indet、text-align、word-spacing、text-transform、text-decoration和white-space。

1、text-indet

text-indet的功能是控制内部文字第一行的缩进。text-indent的值可以是单位形式的值,可以是百分号形式(基于父节点的宽度)的数值,也可以是indent。

2、text-align

text-align的功能是控制内部文字的横向排列。

表8.1 text-align的值及其功能的设置列表

描述
left默认值。内容往左边靠
center内容居中
right内容往右边靠
justify内容向两边伸展对齐
inherit和父节点一致

3、word-spacing

word-spacing的功能是控制文字间空格的距离。实际上word-spacing属性的值是给每个空格添加的增量。word-spacing的值可以使单位形式的数值、normal以及inherit。

4、text-transform

text-transform的功能是控制英文的大小写。

表8.2 text-transform的值及其功能的设置列表

描述
none默认值。大小写不变
capitalize单词首字母必定大写、其他小写
uppercase全部字母大写
lowercase全部字母小写
inherit和父节点一致

5、text-decoration

text-decoration的功能是添加额外的文字修饰,例如下划线和闪烁效果。

表8.3 text-decoration的值及其功能的设置列表

描述
none默认值。没有额外效果
underline文字底部添加一条横线
overline文字顶部添加一条横线
line-through文字中间添加一条横线
blink文字闪烁效果(有的浏览器不支持该属性)
inherit和父节点一致

示例如下:

6、white-space

white-space的功能是控制文本当中的回车和空格等字符的显示

表8.4 white-space的值及其功能的设置列表

空白符换行符是否自动换行
pre-line合并保留
normal合并忽略
nowrap合并忽略
pre保留保留
pre-wrap保留保留

九、文字阴影

CSS3提供text-shadow来控制文字阴影,该属性有4个分量,分别表示横坐标便宜位置、纵坐标偏移位置、模糊半径和阴影颜色。

text-shadow的使用格式如下:

text-shadow:横坐标偏移位置 纵坐标偏移位置 模糊半径 阴影颜色,横坐标偏移位置 纵坐标偏移位置 模糊半径 阴影颜色,....

可以在同一个text-shadow标识下添加多个阴影样式。

示例代码:

十、文字变换速度控制

CSS3提供transition属性来控制某些事件发生后标签样式切换的动画效果。对于某些不支持CSS3的浏览器,如IE6、IE5,可以使用JavaScript进行控制。

不同的浏览器也可以使用自定义的transition属性。例如,Safari和Chrome浏览器使用-webkit-transition属性,Firefox浏览器使用-moz-transition属性,IE9浏览器使用-ms-transition属性,Opera浏览器使用-o-transition属性。

transition属性的设置如下:

transition:CSS属性的名字 变化时间 变化类型 等待时间,CSS属性的名字 变化时间 变化类型 等待时间,...

CSS属性的名字,如background-color、border以及color等等;
变化时间,填写的是变化的用时,如1s、500ms;
变化类型,填写的是变化的控制函数
等待时间,填写的是开始变化前的延时。

表10.1 变化类型(transition-timing-function)的值及其功能的设置列表

描述
linear规定以相同速度开始至结束的过渡效果(等于cubic-bezier(0,0,1,1))
ease规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))
ease-in规定以慢速开始的过渡效果(等于cubic-bezier(0.42,0,1,1))
ease-out规定以慢速结束的过渡效果(等于cubic-bezier(0,0,0.58,1))
ease-in-out规定以慢速开始和结束的过渡效果(等于cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

示例代码:

如果要将所有样式都以ease-in-out模式进行样式变换,则transition的值可以写为"all 1s ease-in-out 0s"。

十一、文字大小变化

CSS3提供tansform属性来控制标签样式的某些变化,例如大小、旋转、角度以及位置等要素。

表11.1 transform属性的变换举例和功能的描述列表

变换属性相关变换属性/举例功能描述
rotate(角度)举例:rotate(30deg)按指定的角度旋转,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转
scale(数值)scaleX(数值),scaleY(数值),举例scale(2)水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);scaleX仅在水平方向缩放,scaleY仅在垂直方向缩放
skew(角度)skewX(角度),skewY(角度),举例skew(30deg)元素在水平方向和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值扭曲变形);skewX仅使元素在水平方向扭曲变形;skewY仅使元素在垂直方向扭曲变形
translate(数值)translateX(数值),translateY(数值),举例translate(30px)水平方向和垂直方向同时移动(X轴和Y轴同时移动);translateX仅在水平方向移动;translateY仅在垂直方向移动
matrix(数值,数值,数值,数值,数值)举例:matrix(1,0,0,1,100,100)形状不变,纵向横向各自偏移100px进行样式的重新映射,前两个参数是第一个向量的变换系数,中间两个参数是第二个向量的变换系数,最后两个参数是样式的偏移位置

matrix执行的是这样的变换:一般的样式会在(1,0)和(0,1)两个方向向量上面进行映射,当通过matrix变换后会重新映射到新的方向向量上。

示例代码:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复