| 网站首页 | 硬件维修 | 应用学院 | 网络组建 | 网站制作 | 菜鸟黑客 | 编程之道 | 数码大全 | 娱乐休闲 | 软件下载 | 在线视频 | 请您留言 | 技术论坛 | 
专 题 栏 目
最 新 热 门
最 新 推 荐
相 关 文 章
  • 用javascript连接access…

  • 使用Web标准建站第8天:CSS布…

  • 使用Web标准建站第9天:CSS布…

  • shtml网页SSI使用详解

  • HTML语言剖析(十二)多媒体…

  • 使用Web标准建站第7天:CSS入…

  • HTML中Access Key(存取键)…

  • 表格对决CSS--一场生死之战

  • CSS 循序渐进(一)画个瓢

  • CSS语法手册(六)分类属性

  • Q
    您现在的位置: 我是IT人 >> 网站制作 >> 网页设计 >> CSS >> 文章正文
    [图文]CSS 循序渐进(二)字的艺术           
    CSS 循序渐进(二)字的艺术
    作者:网络 文章来源:转载 点击数: 更新时间:2006-1-4
    [ 字体:缩小 正常 放大 | 双击自动滚屏 ]
    请选择合适的字体颜色:
     

       说到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] 下一页  

    文章录入:54iter    责任编辑:54iter 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    | 设为首页 | 加入收藏 | 联系站长 | 关于我们 | 友情链接 | 版权申明 |