《css语法手册》由会员分享，可在线阅读，更多相关《css语法手册（37页珍藏版）》请在金锄头文库上搜索。
1、CSS 语法手册 字体属性 1、font-family 能：用于改变 HTML 标志或元素的字体，你可设置一个可用字体清单。浏览器由前向后选用字体。 语：font-family:字体 1,字体 2, . ,字体 n 2、font-style 能：使文本显示为扁斜体或斜体等表示强调 。 数值： normal - 正常 italic - 斜体 oblique - 偏斜体 3、font-variant 能：用于在正常与小型大写字母字体间切换。 数值：normal - 如果该标志继承父元素的 small-caps 设置，则关键字 normal 将 font-variant 设置为正常字体。 small
2、-caps - 把小写字母显示为字体较小的大写字母。 4、font-weight 能：用于设置字体灰度，生成字体的深，浅版本。 数值： 正常灰度 - normal 相对灰度 - bold, bolder, light, lighter 梯度灰度 - 取值如下：100, 200, 300, 400(相当于 normal), 500, 600, 700(相当于 bold), 800, 900。 5、font-size 能：用各种度量单位控制文本字体大小。 数值：有四种数值方式 绝对尺寸- 用具体字号表定义字体大小，可以取下列数值之一： xx - small, x-small, small, med
3、ium, large, x-large, xx-large。不同字体有不同的数值。 相对尺寸 - larger, smaller，产生的尺寸是相对于父容器字号而言的。 长度 - 用毫米(mm) ，厘米(cm)，英寸(in)，点数(pt)，象素(px) ，pica(pc)，ex( 小写字母 x 的高度)或 em(字体高度)作为度量单位。 百分比 - 相对于其父元素字体大小的百分比。 6、font 能：简写属性，提供了对字体所有属性进行设置的快捷方 。 语：font: 字体属性 1 字体属性 2 . 字体属性 n 数值：字体属性值为前面已列出的值，此外还可以设置行间距属性 line-height(
4、见文本属性)，内容的顺序为：font-style; font-variant; font-weight; font-size; line-height; font-family。可省略部分属性，属性值间用空格分开。 例子： 让字体美起来 你可能正建立自己在网上的家-WEB 页，又或者它已经被你安置在网络某一角里。无论出于什么目的,你都希望有更多的指导,告诉你该如何更好的布置家。 在目前许多的指导中，他们都在诉说，应该加一点声音或者一个说话的场地。的确我们都需要它，但我希望关心更多 WEB 家里底层的东西，比如如何把字体弄的漂亮些，或者让页面颜色变的活泼些，让访问者增加“看欲” ，还有更多你曾经
5、都没有关注的细微之处。今天，我们首先来探讨页面的字体。 一、html 中定义字体 字体的确是很好打交道的，一开始制作页面，它就以默认的样式显示。随着逐步的深入，你会改变一下默认的设置，增大或者减小字体。 一般字体默认的标签格式：p田涛/p 接下来，我们把字体设置为黑体或者宋体字样式，它的标签如下： pfont face=黑体田涛/font/p 在以上格式里，我们引出了字体的标签元素font/font.该标签具有下面三个属性值： size=. 设置字体的大小，一般从 1 到 7，它的默认值是+3 ，每次改变字体都是+3 或者-3。 color=. 字体颜色的设置。定义颜色可以利用 RGB 的 1
6、6 进制值，比如： color=“#ffffff” 。也可以直接利用颜色英文来定义，比如： color=“white” face=. 字体样式的设置，比如：face=“黑体”。或者 face=“黑体，宋体”。后者的格式，每当浏览器访问第一种字体失败后，浏览器就会访问第二种字体，依此类推。 下面是一个完整的字体格式： font face=黑体 size=2 color=#FFFFFF田涛 /font HTML 还提供了以下字体样式标签： 1. 六个标题样式 从 h1 到 h6，如：h1font face=黑体 size=2田涛/font /h1 2. 字体风格 斜体字：em田涛/em 粗体字：s
7、trong 田涛 /strong 斜体+粗体字：strongem田涛/em/strong 3. 定义文本 定义大字体 big田涛/big 定义小字体 small田涛/small或者smallsmallsmall田涛/small/small/small 如果你在字体标签中设置了 size=.,那么big标签将不起作用。 除了以上常用字体标签元素外，HTML 还包含很多其它标签，但不我们不多用。 二.CSS(层叠样式表)改变字体 在过去页面上的字体是一成不变的，静静的呆在那。当 DHTML(动态网页) 出现后，我们能有更多方式控制字体了。一般来说，动态字体的实现核心是 CSS(层叠样式表)加 Ja
8、vaScript。使用了以上两项技术后，字体就能产生许多变化。 1.CSS 定义字体的标签元素 font-family: 设置字体字族。 span style=font-family: 黑体, 宋体(GB) 田涛 /span font-sytle:设置字体类型。 span style=font-style: normal田涛/span font-weight:设置字体的字重。 span style=font-weight: bold田涛/span font-size:设置字体大小。 span style=font-size: 14pt田涛/span font-decoration:修饰文本字体
9、，比如带下划线“underline”。 span style=text-decoration: underline田涛/span 对于以上的字体设置，我们可以采用一个方便的方： span style=font:normal bold 14pt 黑体田涛/span 在 style 定义的次序是：font-style,font-weight,font-size,font-family. 2.CSS 定义字体和font定义字体的冲突 对于 CSS 定义字体和font定义字体，我们都要注意以下问题，比如有以下字体设置： span style=font-family: 宋体(KSC); font-siz
10、e: 200ptfont田涛/font/span 这时侯字体大小将以 font-size: 200pt 的定义来设置。但如果你在font中加入 size 属性，比如： span style=font-family: 宋体(KSC); font-size: 200ptfont size=5田涛/font/span 这时侯，字体的大小以 size 的设置为准，font-size: 200pt 将不起作用。其它的属性也是一样。如果你无需动态字体，就利用 HTML4.0 的font来定义字体，需要动态字体时，就需要使用 CSS和 JavaScritp 来定义字体及引发事件。 3. 定义 CSS 字体属
11、性类 一般我们在制作动态字体时，我们会首先利用 CSS 定义出页面字体的整个属性，然后在页面中引用，而不用对每段文本进行设置，这也是实现动态字体首先一步。 html head style type=text/css .tt2 font-family:黑体; font-size: 16px; font-style: normal; line-height: 17px /style /head body p class=tt2田涛/p /body /html 在以上代码中，“田涛” 两个字引用了.main_2 类定义的字体样式。当然你可以在style/style中定义不同的字体样式，以便页面中根据
12、不同字体加以引用。比如： html head style type=text/css .tt1 font-family:宋体; font-size: 15px; font-style: normal; .tt2 font-family:黑体; font-size: 16px; font-style: normal; /style /head body p class=tt1田涛/p p class=tt2田涛/p /body /html 三. 让字体动起来 要让字体动起来，我们可以利用本身 CSS 的事件或者让 JavaScript 引发事件。 1.CSS 引发事件 例一 html head
13、style type=text/css !- a:link color: black; text-decoration: none a:visited color: white; text-decoration: none a:hover color: blue; text-decoration: underline - /style /head body pa href=http:/ /body /html link 定义的是链接在页面显示的颜色 (黑色)及链接没有下划线， visited 定义的是单击链接后的颜色(白色)，hover 定义的是指向链接时的动态颜色。以上实例表示，当指向链接“
14、田涛”后字体颜色从黑色变成蓝色，并加下划线，单击链接后，链接颜色变成白色。 例二 html head title/title /head body p onmouseover=this.style.fontSize=200 onmouseout=this.style.fontSize=100田涛 /p /body /html 以上实例是利用内联改变字体样式，当鼠标指向“田涛”时字体因为定义了this.style.fontSize=200，这两个字放大至 200pt,当鼠标移开“田涛”时，因定义了this.style.fontSize=100，这两个字体缩小到 100pt. 2.JavaScri
15、pt 引发事件 html head style H1.italic font-style:italic H1.bold font-style:bold; /style /head body script language=JavaScript function changeHead() if (H1_1.className=bold) H1_1.className=italic else H1_1.className=bold; /script h1 id=H1_1 class=bold onmouseover=changeHead() onmouseout=changeHead()田涛 /h1 /body /html 在上面的实例当中，我们首先定义了两个 CSS 类 H1.i
