三、样式表的属性
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),如果在该计算机中安装了这种字体,就使用它。飞飞,Asp技术乐园如果没有安装,则移向下一种字体(Times),如果这种字体也没有安装,则移向第3种字体.你可以在列表中加入任何种字体名称。当你对一种字体在不同的操作平台上的名称没有把握时,这样做是一种好办法。另外你也可以一次性的定义所有的属性。飞飞Asp@技术乐园例如:
BODY{fotn-family:宋体,Arial;font-weight:bolder;fint-size:10pt;color:blue}
四、样式表的定位
CSS定位的"positon"属性能够使用两种方法定位HTML元素:相对定位和绝对定位。所谓相对定位是指允许元素在相对于文档布局的原始位置上进行偏移;而绝对定位允许元素与原始的文档布局分离且任意定位。CSS的定位属性共有9个,分别是:
position、left、top、width、height、overflow、z-index和visibility position
positon的属性值有absolute、relative和static三个。当使用绝对定位元素absolute时,被定位元素是独立的,它与上下级元素都无关,完全独立于其他内容。当使用相对定位relative时,该元素对于上一级元素的位置进行布局定位;通过相对定位,使用脚本语言就能实现动画效果了。
left、top
CSS在格式化文档时,是将对象放置在一个个的容器里,再进行格式化;这个容器的左上角就是定位的参考点。left值就是容器的左上顶点到上级左边界的距离;"top"就是容器左上顶点到上级元素上边界的距离。
width、height
适用于绝对定位的元素,"width"和"height"定义了元素所占空间的大小。可用百分比或数字定义。飞飞Asp技术~乐园
overflow
此属性定义了元素的内容超出容器的宽度和高度后,浏览器怎样处理。其属性值有四个,分别是:
visible:无论定义的width和height是多少,其超出部分都无条件显示。
hidden:超出定义的容器的宽度和高度部分将被剪切。
scroll:浏览器将提供一组滚屏工具。
auto:根据浏览器的不同而不同,通常会提供一组滚屏工具。
|
| [上一页] [下一页] |