当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 样 式 表 全 接 触(3)

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教程 中的 样 式 表 全 接 触(3)


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

三、样式表的属性

  1、背景属性 
  对于背景颜色和背景图片大家都比较熟悉,这里介绍两个比较有趣的背景图案属性background-attachment此属性有两个值:scroll 和 fixed;scroll是初始值,产生的效果是常见的背景图案随页面上的文字一起流动。fixed属性是指背景静止不动,文字在背景上流动的特殊效果,例如:body{background-attachment:fixed} 。background-position

此属性是设置背景图案的起始位置,可分别用百分比和长度值来设定,初始值为0和0,例如:body{background-position:50% 50%}

  2、文本属性

  这里介绍几个常用的文本属性:"text-decoration ""text-aling""line-heigth""text-indent"。

  text-decoration相信大家对这个属性都不会陌生,如我们常在网上看到的没有下划线的超链接,就是通过设置这个属性来实现的。其常用的属性值有4个,分别是:

属性值         说明       

none          无 

underline       下划线

overline       上划线

lineth-rough     删除线

有上面的属性值以后,我们就可以去掉超链接中的下划线了,设置如下:A:link{text-decoration:none}

  text-align这个属性定义了文本的对齐方式,其作用与HTML中的"align"相似。其定义的对齐方式有四种,分别是:

left         左对齐

right         右对齐

center         居中

justify        两端对齐

  line-height这个属性用来定义文本行高,即相邻的两行文字间的距离,此属性可用数字、长度、百分比来定义。例如:

body{line-heigth:1.5;font-size:10pt}

body{line-heigth:150%;font-size:10pt}

这两个定义产生的行高都是15pt;即行高属性值乘以字体大小。

  text-indent此属性定义文本首行的缩进方式,也即是在用WORD软件时所见的首行缩进的效果;此属性值可以为负。例如:

P{text-indent:5em}

p{text-indent:-5em}

将上面任何一句加到HTML中,就可以看到效果了。

  3、字体属性

字体属性是使用最多的,CSS的字体的常用属性包括:

font-family    匹配字体 BODY{font-family:Arial,Times,impact}

font-weight     字体精细 p{font-weight:bolder}设置字体为加粗

font-size      字体大小 body{font-size:10pt}

font-family 字形 p{font-family:italic}设置字体为斜体

其中的font-family的含义:首先寻找字体的名称(Arial),如果在该计算机中安装了这种字体,就使用它。如果没有安装,则移向下一种字体(Times),如果这种字体也没有安装,则移向第3种字体.你可以在列表中加入任何种字体名称。当你对一种字体在不同的操作平台上的名称没有把握时,这样做是一种好办法。另外你也可以一次性的定义所有的属性。例如:

BODY{fotn-family:宋体,Arial;font-weight:bolder;fint-size:10pt;color:blue}