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-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, medium, 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(见文本属性)，内容的顺序为：font-style; font-variant; font-weight; font-size; line-height; font-family。可省略部分属性，属性值间用空格分开。 例子： 让字体美起来 你可能正建立自己在网上的家-WEB页，又或者它已经被你安置在网络某一角里。无论出于什么目的,你都希望有更多的指导,告诉你该如何更好的布置家。 在目前许多的指导中，他们都在诉说，应该加一点声音或者一个说话的场地。的确我们都需要它，但我希望关心更多WEB家里底层的东西，比如如何把字体弄的漂亮些，或者让页面颜变的活泼些，让访问者增加“看欲”，还有更多你曾经都没有关注的细微之处。今天，我们首先来探讨页面的字体。 一、html中定义字体 字体的确是很好打交道的，一开始制作页面，它就以默认的样式显示。随着逐步的深入，你会改变一下默认的设置，增大或者减小字体。 一般字体默认的标签格式：＜p＞田涛＜/p＞ 接下来，我们把字体设置为黑体或者宋体字样式，它的标签如下： ＜p＞＜font face="黑体"＞田涛＜/font＞＜/p＞ 在以上格式里，我们引出了字体的标签元素＜font＞＜/font＞.该标签具有下面三个属性值： size="..." 设置字体的大小，一般从1到7，它的默认值是+3，每次改变字体都是+3或者-3。 color="..." 字体颜的设置。定义颜可以利用RGB的16进制值，比如： color=“#ffffff” 。也可以直接利用颜英文来定义，比如： color=“white” face="..." 字体样式的设置，比如：face=“黑体”。或者 face=“黑体，宋体”。后者的格式，每当浏览器访问第一种字体失败后，浏览器就会访问第二种字体，依此类推。 下面是一个完整的字体格式： ＜font face="黑体" size="2" color="#FFFFFF"＞田涛＜/font＞ HTML还提供了以下字体样式标签： 1.六个标题样式 从h1到h6，如：＜h1＞＜font face="黑体" size="2"＞田涛＜/font＞＜/h1＞ 2.字体风格 斜体字：＜em＞田涛＜/em＞ 粗体字：＜strong＞田涛＜/strong＞ 斜体+粗体字：＜strong＞＜em＞田涛＜/em＞＜/strong＞ 3.定义文本 定义大字体 ＜big＞田涛＜/big＞ 定义小字体 ＜small＞田涛＜/small＞或者＜small＞＜small＞＜small＞田涛＜/small＞＜/small＞＜/small＞ 如果你在字体标签中设置了size="...",那么＜big＞标签将不起作用。cssclass属性 除了以上常用字体标签元素外，HTML还包含很多其它标签，但不我们不多用。 二.CSS(层叠样式表)改变字体 在过去页面上的字体是一成不变的，静静的呆在那。当DHTML(动态网页)出现后，我们能有更多方式控制字体了。一般来说，动态字体的实现核心是CSS(层叠样式表)加JavaScript。使用了以上两项技术后，字体就能产生许多变化。 1.CSS定义字体的标签元素 font-family: 设置字体字族。 ＜span rtcscls-1-s_r_0 rtcscls-1-r_5">黑体, 宋体(GB)"＞田涛＜/span＞ font-sytle:设置字体类型。 ＜span ＞田涛＜/span＞ font-weight:设置字体的字重。 ＜span ＞田涛＜/span＞ font-size:设置字体大小。 ＜span ＞田涛＜/span＞ font-decoration:修饰文本字体，比如带下划线“underline”。 ＜span ＞田涛＜/span＞ 对于以上的字体设置，我们可以采用一个方便的方×： ＜span rtcscls-1-s_r_0 rtcscls-1-r_5">黑体"＞田涛＜/span＞ 在style定义的次序是：font-style,font-weight,font-size,font-family. 2.CSS定义字体和＜font＞定义字体的冲突 对于CSS定义字体和＜font＞定义字体，我们都要注意以下问题，比如有以下字体设置： ＜span rtcscls-1-s_r_0 rtcscls-1-r_5">宋体(KSC); font-size: 200pt"＞＜font＞田涛＜/font＞＜/span＞ 这时侯字体大小将以font-size: 200pt的定义来设置。但如果你在＜font＞中加入size属性，比如： ＜span rtcscls-1-s_r_0 rtcscls-1-r_5">宋体(KSC); font-size: 200pt"＞＜font size="5"＞田涛＜/font＞＜/span＞ 这时侯，字体的大小以size的设置为准，font-size: 200pt将不起作用。其它的属性也是一样。如果你无需动态字体，就利用HTML4.0的＜font＞来定义字体，需要动态字体时，就需要使用CSS和JavaScritp来定义字体及引发事件。 3.定义CSS字体属性类 一般我们在制作动态字体时，我们会首先利用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＞中定义不同的字体样式，以便页面中根据不同字体加以引用。比如： ＜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＞ ＜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＞ ＜p＞＜a href="ah/"＞田涛＜/a＞＜/p＞ ＜/body＞ ＜/html＞ link定义的是链接在页面显示的颜(黑)及链接没有下划线，visited定义的是单击链接后的颜(白)，hover定义的是指向链接时的动态颜。以上实例表示，当指向链接“田涛”后字体颜从黑变成蓝，并加下划线，单击链接后，链接颜变成白。 例二 ＜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.JavaScript引发事件 ＜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.italic和H1.bold，然后利用JavaScript脚本定义函数 changeHead(),最后在需要的地方引发事件执行定义好的函数。这里我们引发了两个单击事件onmouseover和onmouseout。在这里我还要说一点，因为你定义了H1两个类H1.italic 和H1.bold，所以当你在引用时，要首先设置class="bold"，表示字体以bold样式出现。然后，移动鼠标到“田涛”上，触发了事件一，移开“田涛”时，触发了事件二。 对于动态字体，我们还有很多方×来完善它。只是在考虑利用动态字体时，需要了解不同浏览器会产生不一样的结果。这时侯，就需要不停测试，来到一个两全其美的方×。最后，希望你在看完这篇文章后，一点CSS及JavaScript的资料来看，因为它们才是实现所有“梦想”的工具。 |
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论