我的一亩三分地 我就喜欢!
13fen  设为主页
 收藏本站
 
当前位置: > 一亩三分地:首页 > 网络学院 > 网页设计 > Html/Css > 样 式 表 全 接 触(3)
热门文章排行
热门文章排行 用CSS美化你的网页(11-24)
妙运用CSS样式表立刻改变鼠标的样式(12-07)
背景图的详细设定(12-07)
Xhtml(5):head区的其他设置(10-13)
让字体美起来 (1)(10-21)
精采文章排行
精采文章排行 HTML中meta作用(11-01)
奇妙的文字图形 font-family的非常用(11-01)
css网页设计技巧(11-01)
CSS制作的阴影链接文字(11-01)
CSS实现当前页的滑动门菜单效果方法(11-01)
技术专题推荐
网管论坛交流
 

样 式 表 全 接 触(3) 

作者:   来源:   点击:   日期:2006-10-13

三、样式表的属性

  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}



文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【论坛讨论

   相关文章:
·样 式 表 全 接 触(2) ·样 式 表 全 接 触(4)
·样 式 表 全 接 触(1) ·样 式 表 全 接 触(5)
·Xhtml(12):校验及常见错误 ·样 式 表 全 接 触(6)

   文章评论:(条)
  
 请留名: 匿名评论   点击查看所有评论 网管论坛
 

  责任编辑:一分  声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。