快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

齐博国际网址:CSS应用基础教程(4) 颜色背景



本 章 C S S 的 主 要 作 用

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

颜 色 背 景 的 C S S 指 令

color 设定前景颜色

支 持:IE3、IE4、NC4

适 用:所有元素

可能值:设定颜色,请参考第一章颜色应用的相关阐明

预设值:视浏览器而定

承袭性:有

一样平常典型:SPAN { color : BLUE }

同轴典型:

background-color 设定背景颜色

支 持:IE4、NC4

适 用:所有元素

可能值:设定颜色,请参考第一章颜色应用的相关阐明

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

预设值:transparent

承袭性:无

一样平常典型:BODY { background-color : BLUE }

同轴典型:

background-image 设定背景图形

支 持:IE4、NC4

适 用:所有元素

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

none 不应用背景图案

预设值:transparent

承袭性:无

一样平常典型:

BODY { 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 }

同轴典型:

background-attachment 设定背景附著

支 持:IE4、NC4

适 用:所有元素

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

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

预设值:scrool

承袭性:无

一样平常典型:BODY { bac齐博国际网址kground-attachment : fixed }

同轴典型:

background-position 设定背景位置

支 持:IE4、NC4

适 用:区块元素

可能值:

X% Y% 图形上X% 齐博国际网址Y%的点对准元素的X% Y%位置

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

center 背景图形置于中央

left 背景图形对 左边

right 背景图形对 右边

top 背景图形对 顶部

bottom 背景图形对 底部

预设值:0% 0%

承袭性:无

一样平常典型:BODY { 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 }

同轴典型:

位 置 摆 放 的 C S S 指 令

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

支 持:IE4、NC4

适 用:区块元素或图形

可能值: left 元素*左,翰墨环抱其右

righ齐博国际网址t 元素*右,翰墨环抱其左

none 以预设的措施显示

预设值:none

承袭性:无

一样平常典型:DIV { float : right }

同轴典型:

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

支 持:IE4

适 用:区块元素或图形

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

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

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

none 以预设的措施显示

预设值:none

承袭性:无

一样平常典型:DIV { clear : right }

同轴典型:

width 设定宽度

支 持:IE4、NC4

适 用:区块元素或图形

可能值:长度单位,请参考第一章基础单位的相关阐明

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

auto 以固定比例自动变更大年夜小

预设值:au齐博国际网址to

承袭性:无

一样平常典型:DIV { width : 300pt }

同轴典型:

height 设定高度

支 持:IE4、NC4

适 用:区块元素或图形

可能值:长度单位,请参考第一章基础单位的相关阐明

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

auto 以固定比例自动变更大年夜小

预设值:auto

承袭性:无

一样平常典型:DIV { height : 300pt }

同轴典型:

position 设定位置

支 持:IE4、NC4

适 用:区块元素

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

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

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

预设值:abs齐博国际网址olute

承袭性:无

一样平常典型:DIV { position : static }

同轴典型:

top 设定顶端位置

支 持:IE4、NC4

适 用:区块元素

可能值:长度单位,请参考第一章基础单位的相关阐明

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

auto 以正常要领显示

预设值:auto

承袭性:无

一样平常典型:DIV { top : 30pt }

同轴典型:

left 设定左端位置

支 持:IE4、NC4

适 用:区块元素

可能值:长度单位,请参考第一章基础单位的相关阐明

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

auto 以正常要领显示

预设值:auto

承袭性:无

一样平常典型:DIV { 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) }

同轴典型:

overflow 设定溢位处置惩罚(节制当元素内容跨越该元素大年夜小时的显示要领)

支 持:IE4

适 用:区块元素

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

hidden 跨越元素所设订大年夜小之部份将被暗藏不予显示

scroll 如有需要呈现卷轴可让应用者看到整个的内容

auto 以预设的要领显示

预设值:auto

承袭性:无

一样平常典型:DIV { overflow : scroll }

同轴典型:

visibility 设定可视度

支 持:IE4、NC4

适 用:所有元素

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

hidden 设定该元素不显示,但仍盘踞空间

inherit 以父元素可视度抉择

预设值:inherit

承袭性:无

一样平常典型:DIV { visibility : hidden }

同轴典型:

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

支 持:IE4、NC4

适 用:区块元素

可能值:十进位数值,数值大年夜的元素会呈现在数值小的元素的上方

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

预设值:auto

承袭性:无

一样平常典型:DIV { z-index : 3 }

同轴典型:

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: