分享
 
 
 

CSS应用基础教程(4) 颜色背景

王朝html/css/js·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

本章CSS的主要作用

在前面的章节介绍完了声明与应用的方法及 一些特性之後,从这章开始,便要正式进入CSS的指令介绍了!本章有两个介绍的主 题,第一个部份介绍的是颜色与背景性质的CSS,其主要的作用在于设定元素的前景 颜色、背景颜色与背景图形等样式设定的性质;而第二部份为您介绍的是用于控制摆放 元素位置的CSS的指令。

颜色背景的CSS指令

color设定前景颜色

支持:IE3、IE4、NC4

适用:所有元素

可能值: <color> 设定颜色,请参考第一章颜色使用的相关说明

预设值:视浏览器而定

继承性:有

一般范例:SPAN { color : BLUE }

同轴范例:<SPAN style="color:BLUE">

background-color设定背景颜色

支持:IE4、NC4

适用:所有元素

可能值: <color> 设定颜色,请参考第一章颜色使用的相关说明

transparent 将父元素(颜色或图案)的背景透明化

预设值:transparent

继承性:无

一般范例:BODY { background-color : BLUE }

同轴范例:<BODY style="background-color:BLUE">

background-image设定背景图形

支持:IE4、NC4

适用:所有元素

可能值: <url> 设定图档URL,请参考第一章URL表示的相关说明

none 不使用背景图案

预设值:transparent

继承性:无

一般范例:

BODY { background-image : URL("http://yourweb/path/file_name") }

同轴范例:

<BODY style="background-image:URL('http://yourweb/path/file_name')">

background-repeat设定背景重复

支持:IE4、NC4

适用:所有元素

可能值: repeat 重复背景图形填满页面

repeat-x 水平方向重复背景图形

repeat-y 垂直方向重复背景图形

no-repeat 不重复显示背景图形

预设值:repeat

继承性:无

一般范例:BODY { background-repeat : repeat-x }

同轴范例:<BODY style="background-repeat: repeat-x">

background-attachment设定背景附著

支持:IE4、NC4

适用:所有元素

可能值: scroll 背景图形随著卷轴卷动

fixed 背景图形随著卷轴卷动(浮水印)

预设值:scrool

继承性:无

一般范例:BODY { background-attachment : fixed }

同轴范例:<BODY style="background-attachment:fixed">

background-position设定背景位置

支持:IE4、NC4

适用:区块元素

可能值: <percent> X% Y% 图形上X% Y%的点对准元素的X% Y%位置

<length> X Y 将图形左上角置于元素左上角水平 X垂直 Y之处

center 背景图形置于中央

left 背景图形对左边

right 背景图形对右边

top 背景图形对顶部

bottom 背景图形对底部

预设值:0% 0%

继承性:无

一般范例:BODY { background- position : 100% 50% }

同轴范例:<BODY style="background- position:100% 50%">

background综合设定背景性质

支持:IE3、IE4、NC4

适用:所有元素

可能值: background-color 设定背景颜色

background-image 设定背景图形

background-repeat 设定背景重复

background-attachment 设定背景附著

background-position 设定背景位置

预设值:无

继承性:无

一般范例:

BODY { BLUE url(image/gif) repeat-x fixed center }

同轴范例:

<BODY style="BLUE url(image/gif) repeat-x fixed center">

位置摆放的CSS指令

float设定浮动性质(多用于文绕图的情形)

支持:IE4、NC4

适用:区块元素或图形

可能值: left 元素靠左,文字围绕其右

right 元素靠右,文字围绕其左

none 以预设的方法显示

预设值:none

继承性:无

一般范例:DIV { float : right }

同轴范例:<DIV style="float:right">

clear设定清除性质(设定是否允许浮动元素之存在)

支持:IE4

适用:区块元素或图形

可能值: both 若两边有浮动元素,则该元素移至浮动元素下方

left 若左边有浮动元素,则该元素移至浮动元素下方

right 若右边有浮动元素,则该元素移至浮动元素下方

none 以预设的方法显示

预设值:none

继承性:无

一般范例:DIV { clear : right }

同轴范例:<DIV style="clear:right">

width设定宽度

支持:IE4、NC4

适用:区块元素或图形

可能值: <length> 长度单位,请参考第一章基本单位的相关说明

<percentage> 百分比,以父元素宽度为基准

auto 以固定比例自动变化大小

预设值:auto

继承性:无

一般范例:DIV { width : 300pt }

同轴范例:<DIV style="width:300pt">

height设定高度

支持:IE4、NC4

适用:区块元素或图形

可能值: <length> 长度单位,请参考第一章基本单位的相关说明

<percentage> 百分比,以父元素宽度为基准

auto 以固定比例自动变化大小

预设值:auto

继承性:无

一般范例:DIV { height : 300pt }

同轴范例:<DIV style="height:300pt">

position设定位置

支持:IE4、NC4

适用:区块元素

可能值: absolute 以父元素为基准,摆设在特定位置上

relative 以相邻元素为基准,摆设在特定位置上

static 预设位置,以该元素于原始码中位置而定

预设值:absolute

继承性:无

一般范例:DIV { position : static }

同轴范例:<DIV style="position:static">

top设定顶端位置

支持:IE4、NC4

适用:区块元素

可能值: <length> 长度单位,请参考第一章基本单位的相关说明

<percentage> 百分比,以父元素宽度为基准

auto 以正常方式显示

预设值:auto

继承性:无

一般范例:DIV { top : 30pt }

同轴范例:<DIV style="top:30pt">

left设定左端位置

支持:IE4、NC4

适用:区块元素

可能值: <length> 长度单位,请参考第一章基本单位的相关说明

<percentage> 百分比,以父元素宽度为基准

auto 以正常方式显示

预设值:auto

继承性:无

一般范例:DIV { left : 30pt }

同轴范例:<DIV style="left:30pt">

clip设定裁剪(设定某区域形状及大小,区域外通透)

支持:IE4、NC4

适用:区块元素

可能值: rect(top,right,bottom,left) 设定矩形之上右下左长度,会自动比对对边长度

一般 写法为rect(0,长度,长度,0)

不可以写为rect(0,0,长度,长度)

四个数值皆可以"auto"代替

auto 以正常方式显示

预设值:auto

继承性:无

一般范例:DIV { clip : rect(0,100px,50px,0) }

同轴范例:<DIV style="clip:rect(0,100px,50px,0)">

overflow设定溢位处理(控制当元素内容超过该元素大小时的显示方式)

支持:IE4

适用:区块元素

可能值: visible 元素将不会依所设订大小显示,而能看见所有内容

hidden 超过元素所设订大小之部份将被隐藏不予显示

scroll 如有必要出现卷轴可让使用者看到全部的内容

auto 以预设的方式显示

预设值:auto

继承性:无

一般范例:DIV { overflow : scroll }

同轴范例:<DIV style="overflow:scroll">

visibility设定可视度

支持:IE4、NC4

适用:所有元素

可能值: visible 设定该元素显示

hidden 设定该元素不显示,但仍占据空间

inherit 以父元素可视度决定

预设值:inherit

继承性:无

一般范例:DIV { visibility : hidden }

同轴范例:<DIV style="visibility:hidden">

z-index设定Z轴参数(三度空间)

支持:IE4、NC4

适用:区块元素

可能值: <number> 十进位数值,数值大的元素会出现在数值小的元素的上方

auto 当元素位置重复时,原始码中写在後面元素会出现在写在前面元素的上方

预设值:auto

继承性:无

一般范例:DIV { z-index : 3 }

同轴范例:<DIV style="z-index:3">

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有