当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > CSS 循序渐进(二)字的艺术

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

HTML/XHTML教程 中的 CSS 循序渐进(二)字的艺术


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 58 ::
收藏到网摘: n/a

说到CSS,笔者用的最多的还是它的排版和字型设计功能。因为网页嘛,最终还是要做给人家看的,要传递信息给对方的,所以不管怎么说,这种传递形式非常重要,具体说来,也就是字的控制和版面的控制。另外一个很重要的原因就是中文相当难处理,Windows自带的中文字库很少,而中文的美术效果又很难做,远不如英文那么随随便便写几个字就很舒服。所以借助CSS的帮助就更显得有必要。好,废话也不多说了。大家还是跟我一起看一看CSS到底对字能起些什么作用吧。

   首先,给朋友们说说样式表关于字型的一些功能。总的说来,主要是字体(font)、大小(size)、字体粗细(Weight)、字体变形(Variant)、字体风格(Style)、修饰(Decoration)、Case(大小写)等等。下面笔者向大家详细介绍一下。请注意,本文所用的Style例子都是采用的调用外部文件的形式,且只是外部文件css1.css的内容,大家看的时候注意了。要是想使用它们,如上节所说的,在HTML文件的文件头说明部分中加入< LINK REL=STYLESHEET HREF="CSS1.CSS">就可以了。

   好,下面先给大家看一个例子:
   P {
   text-align: left;
   font-size: 25pt;
   font-family: "隶书", "宋体";
   letter-spacing: 3px;
   color:navy;
   line-height:30pt;
   text-indent: .5in;
   border: solid 2pt;
   }

   链入网页以后出来的效果如下图:

   现在就对上面这段代码进行详解。首先,P就是表示是对文件中的所有< p>< /p>容器中的内容进行的定义。大括号内就是对各项属性所规定的值。对于一个定义的格式往往是:

   属性:值

   中间以分号隔开。

   Text-align:left表示段落是居左对齐,font-size:15pt,表示字体大小为15pt,font-family:隶书,宋体 表示所采用的字体。这里要说明一下,这里使用了几种字体,并分别用逗号隔开,表示第一、第二、第三字体,也就是说如果客户机的系统内有第一种字体的话就采用它,如果没有再查看有没有第二种,第三种,倘若都没有则使用缺省字体。letter-spacing:3px就说明字间宽为3px.color:navy,则表示颜色为天蓝色,line-height:12pt表示行高为12pt(这里的行高是连同字高一起计算的)。text-indent:.5in表示段落首行的缩进的多少,这里是.5in.border:solid 1pt表示边框是宽度为1pt的实心边框。

   大家对照一下图看看属性与效果之间的关系。看看写Style是不是很简单呢?有关字体和排版的属性还有几项,下面就列表向大家说明。

   字体参数(Font Properties):

参数

含义

举例

Font-size

字体大小

Small,midium

Font-Style

字体风格

Normal,italic

Font-family

选用字体

宋体,fantasy

Font-weight

字体粗细

Bold,bolder

   文本参数(Text Properties):

参数

含义

举例

Line-Height

行距

1.2,18pt