一, 字体(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~900 | 100、200、300、400、500、600、700、800、900 |
一般的现代浏览器只提供两级粗细字体, 所以, 从 100~500 都为不加粗字体, 从 600~900 都为加粗字体.
示例代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- #DIV1{
- font-weight: 100;
- }
- #DIV2{
- font-weight: 500;
- }
- #DIV3{
- font-weight: 600;
- }
- #DIV4{
- font-weight: 900;
- }
- #DIV5{
- font-weight: bold;
- }
- #DIV6{
- font-weight: bolder;
- }
- #DIV7{
- font-weight: lighter;
- }
- </style>
- </head>
- <body>
- <div id="DIV1">
文字 100
- </div>
- <div id="DIV2">
文字 500
- </div>
- <div id="DIV3">
文字 600
- </div>
- <div id="DIV4">
文字 900
- </div>
- <div id="DIV5">
文字 bold
- </div>
- <div id="DIV6">
文字 bolder
- </div>
- <div id="DIV7">
文字 lighter
- </div>
- </body>
- </html>
五, 颜色(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 | 和父节点一致 |
示例代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- body{
- font-variant: small-caps;
- }
- #font1{
- font-variant: normal;
- }
- #font2{
- font-variant: inherit;
- }
- </style>
- </head>
- <body>
- this is Font style(small-caps)
- <div id="font1">
- this is Font style(normal)
- </div>
- <div id="font2">
- this is Font style(inherit)
- </div>
- </body>
- </html>
七, 链接
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 | 和父节点一致 |
示例如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- body{
- text-decoration: none;
- }
- #font1{
- text-decoration: underline;
- }
- #font2{
- text-decoration: overline;
- }
- #font3{
- text-decoration: line-through;
- }
- #font4{
- text-decoration: blink;
- }
- #font5{
- text-decoration: inherit;
- }
- </style>
- </head>
- <body>
文字
<div id="font1">
文字
- </div>
- <div id="font2">
文字
- </div>
- <div id="font3">
文字
- </div>
- <div id="font4">
文字
- </div>
- <div id="font5">
文字
- </div>
- </body>
- </html>
- 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 标识下添加多个阴影样式.
示例代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- div{
- border: #FF0000 1px solid;
- width: 600px;
- font-family: "黑体";
- font-size: 50px;
- }
- #DIV1{
- color: #FF0000;
- text-shadow: 2px 2px 0px #000;
- /* 只有一个阴影 */
- }
- #DIV2{
- color: #FFF;
- text-shadow: 0 0 10px #fff,0 0 15px #fff,0 0 40px #ff00de,0 0 40px #ff00de;
- /* 含有四个阴影 */
- }
- </style>
- </head>
- <body>
- <div id="DIV1">
CSS3 文字阴影效果
- </div>
- <div id="DIV2">
CSS3 文字阴影效果
- </div>
- </body>
- </html>
十, 文字变换速度控制
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 之间的数值。 |
示例代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- div{
- border: #FF0000 1px solid;
- width: 400px;
- font-family: "黑体";
- font-size: 30px;
- }
- #DIV1{
- color: #FF0000;
- background-color: #FFF;
- -webkit-transition: backgroung-color 1s ease-in-out 0s,color 1s ease-in-out 0s;/* 用于 Safari 和 Chrome 浏览器 */
- -moz-transform: backgroung-color 1s ease-in-out 0s,color 1s ease-in-out 0;/* 用于 FireFox 浏览器 */
- -ms-transition: backgroung-color 1s ease-in-out 0s,color 1s ease-in-out 0; /* 用于 IE9 浏览器 */
- -o-transition: backgroung-color 1s ease-in-out 0s,color 1s ease-in-out 0; /* 用于 Opera 浏览器 */
- transition: backgroung-color 1s ease-in-out 0s,color 1s ease-in-out 0; /*CSS3 标准 */
- }
- #DIV1:hover{
- color: #00FF00;
- background-color:#000;
- }
- </style>
- </head>
- <body>
- <div id="DIV1">
文字变换速度控制
- </div>
- </body>
- </html>
如果要将所有样式都以 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 变换后会重新映射到新的方向向量上.
示例代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- div{
- border: #FF0000 1px solid;
- width: 400px;
- font-family: "黑体";
- font-size: 30px;
- }
- div:hover{
- transform-origin:left top;
- -webkit-transform-origin:left top;/* 用于 Safari 和 Chrome 浏览器 */
- -moz-transform-origin:left top;/* 用于 FireFox 浏览器 */
- -o-transform-origin:left top;/* 用于 Opera 浏览器 */
- -ms-transform-origin:left top;/*IE9*/
- transform:scale(2);
- -webkit-transform: scale(2);/* 用于 Safari 和 Chrome 浏览器 */
- -moz-transform: scale(2);/* 用于 FireFox 浏览器 */
- -o-transforms:scale(2);/* 用于 Opera 浏览器 */
- -ms-transform: scale(2);/*IE9*/
- }
- </style>
- </head>
- <body>
- <div>
文字大小变化
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/48075/b570e8baf7829b40a40fd697b2b04735.html