99265.COM BETA | 新设计 新视觉 回首页 | 登录

今天是:
您现在的位置: 新视觉 >> 教程 >> 网页 >> css >> 教程正文:CSS初级教程 文本
CSS初级教程 文本
作者:未知 文章来源:蓝色理想 添加时间:2008-3-13

你可以用大量的属性来改变文本的大小和形态,概括如下: 字串5

字体font-family

字串9

这是字体本身的名称,如“Times News Roman”,“Arial”或者“Verdana”(又如“宋体”等中文字体名称--译者著)。
你指定的字体必须存在在用户的电脑上,所以在CSS使用字体会存在某种程度上的不确定性。有少量“安全”的字体(最常用的是Arial,Verdana和Times New Roman)。但你可以指定不止一种字体,只要用半角英文逗号,隔开就行。这样做的目的是如果用户的电脑上没有你指定的第一个字体,浏览器会逐遍寻找罗列的字体直到找到电脑上安装有的字体为止。这很有用因为不同的电脑有时侯有不同的安装字体。所以,例子font-family: arial, helvetica的目的就是用在PC(一般情况下有arial字体而没有helvetica字体)和Apple Mac上(一般有helvetica字体而没有arial字体)。
注意:如果一个字体的名称超过一个单词,它应该用英文双引号括起来,如:font-family: "Times New Roman"。

字串5

字体尺寸font-size 字串3

定义字体的尺寸。必须小心──像标题一样的文本不应该是段落中的大字体而已,你应该使用标题标签(h1,h2 等)。甚至,在练习中,你可以使段落文本字体尺寸大于标题(不推荐使用,如果你明智的话)。 字串7

字体加粗font-weight 字串3

这用来声明文本粗细与否。实际应用中一般只有两种形式:font-weight: bold(粗体)和font-weight: normal(普通)。在理论上,它们的值有bolder(更粗),lighter(更细),100,200,300,400,500,600,700,800或者900,但许多浏览器会摇摇头,说:“我不认为这样”,所以使用bold和normal是比较安全的。

字串7

字体样式font-style 字串7

这定义文本正斜与否。可以这样使用 font-style: italic(倾斜)或者font-style: normal(正常)。

字串1

文本装饰text-decoration 字串9

这用来声明文本是否有划线。可以这样使用:
text-decoration: overline──文本上面的划线。
text-decoration: line-through──穿过文本的删除线。
text-decoration: underline──这应该只使用在连接中,因为用户一般认为连接才有下划线。
这个属性通常用来装饰连接,而 text-decoration: none则是表示没有任何划线。 字串4

文本转换text-transform 字串1

这可以转换文本的大小写。
text-transform: capitalize把每个单词的首字母转换成大写。
text-transform: uppercase把所有的字母都转换成大写。
text-transform: lowercase把所有的字母都转换成小写。
text-transform: none?你自己试一试啦。

字串8

body {
font-family: arial, helvetica, serif;
font-size: 0.8em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
文本间距 字串2

字母间隔letter-spacing和文本间隔 word-spacing属性分别用在字母间和单词间的距离。它们的值可以是长度或者默认的普通normal。
line-height属性为比如段落等元素设置行高,它并不改变字体的尺寸。它的值可以是长度,百分比或者默认的normal。
文本水平对齐text-align属性将对元素里的文本向左、右、中间或者两端对齐,自然,它们的值分别left(左)、 right(右)、center(中间)或者 justify(两端)。
文本缩进text-indent属性依据你设置的长度或者百分比值对文本段落的第一行进行缩进。在印刷中经常会用到这样的格式,然而在像网页这样的电子媒体中并不常用。

字串4

p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5em;
text-align: center;
}

字串3

  • 上一篇教程:

  • 下一篇教程:
  • 打印此文 』『关闭窗口
    【相关文章】
  • 常用CSS命名参考

  • css控制图片水平垂直居中

  • 【免责声明】
    本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。如果本站转载的文章有任何版权问题或任何异议,请惠赐:99_265#163.com。
    推荐文章
  • 此栏目下没有推荐教程
  • 热门文章
    普通教程CSS导航菜单
    普通教程框架和滑动门技术分析
    普通教程“网页滚动条”设置技巧
    普通教程“mailto”标签应用技巧
    普通教程实用HTML文件的增强标记
    普通教程CSS兼容要点分析
    普通教程获得本页面URL地址的JS代码
    普通教程什么是XHTML?
    普通教程常用CSS命名参考
    普通教程效果直逼flash的Div+Css+Js菜单
    普通教程用代码实现页面内文字的滚动详…
    普通教程十步学会用css建站
    普通教程双击鼠标滚动屏幕的代码
    普通教程meta标签之详解
    普通教程网页中实现细线边框的两种方法
      © 2007 新视觉. 99265.com  关于新视觉 - 广告服务 - 版权申明 - 联系我们 - 皖ICP备05001767号.