1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178
| 三、框边界属性 1、margin-bottompowered by 25175.net margin-left margin-right margin-top 功能:这四个属性用来设置元素与其相邻元素间的距离,可以用长度或相对于其父文本的宽度的百分比来定义,也可以自动处理。 数值: 长度 - 设置元素相应边与框边缘之间的相对或绝对距离,有效单位为:mm, cm, in, px, pt, pica,ex, em ... 百分比 - 以父元素宽度的百分比设置边界尺寸。 auto - 自动,这个设置取浏览器的缺省边界。 [url=article.asp?typeid=]CSS[/url]yu/02/01.html>例子 2、margin 功能:简写属性,用于設置元素的所有边界。这是用于描述元素的内容的边缘到框边缘的距离的。这个区总是透明的,可以看到下面的页面背景。 数值: 长度 - 同前 百分比 - 以父元素宽度的百分比设置边界尺寸。 auto - 自动,这个设置取浏览器的缺省边界。 例子 四、框位置属性 1、height 功能:设置元素高度,浏览器按照这个高度调整图形。 数值: 长度 - mm, cm, px, pt, ..... auto - 自动。 2、width 功能:设置元素宽度,浏览器按照这个宽度调整图形。 数值: 长度 - mm, cm, in, px, pt, ...... 百分比 - 将图形尺寸设置为父元素宽度的百分比。 auto - 自动调整 3、float 功能:用于在普通元素流布置规则以外放上元素。 数值: none - 无改动。 left - 将其它元素内容放到浮动元素右边。 right - 将其它元素内容放到浮动元素左边。 4、clear 功能:用于允许或禁止指定元素旁边放置其它元素(通常是线上图形). 数值: none - 无限制。 left - 将元素放在左边浮动元素下面 right - 将元素放在右边浮动元素下面 both - 元素两边都不允许放置浮动元素 CSS语法手册(五)颜色和背景属性 1、color 功能:设置前景或元素的颜色。powered by 25175.net 数值:使用颜色关键字或RGB值。 例子: 文本颜色(关键字) 文本颜色(#rrggbb) 文本颜色[rgb(rr,gg,bb)] 文本颜色[rgb(r%,g%,b%)] 2、background-color 功能:设置页面或页面元素的背景颜色。 数值: 颜色 - 可用颜色名或RGB值 transparent - 透明,使页面背景为缺省背景。 例子: 背景颜色 3、background-image 功能:定义背景图形。 数值: none - 不用图形作背景 url - 提供图形文件的URL地址 说明:也可以包括background-color属性以便在找不到图形时代用 例子: 图形背景 4、background-repeat 功能:控制图形背景是否重复排列。 数值: repeat - 垂直和水平重复,缺省值 repeat-x - 水平重复 repeat-y - 垂直重复 no-repeat - 不重复 说明:这个属性和 background-image 和 background-position 属性一起使用。 例子: 水平重复排列 5、background-attachment 功能:指定元素的背景是随元素一起滚动还是固定在页面某个位置上。 数值: scroll - 随元素一起滚动 fixed - 固定 说明: 缺省值是 scroll,这个属性和 background-image 属性一起使用。 6、background-position 功能:用于在空间中定位元素背景 数值: 长度 - 相对或绝对单位设置元素框边缘的起点,并给出单位下的坐标。 百分比 - 用百分比表示框边缘上浏览器开始放图的位置。可以重复这个值也提供垂直和水平起点 垂直位置 - 设置竖直方向的起点,关键字为 top, center, bottom 水平位置 - 设置水平方向的起点,关键字 left, center, right 例如:top left, left top和0% 0% 都表示图形左上角从元素框左上角开始 例子: Body {background-image:url(logo.gif); background-position:50% 50%} 这个语句将 Body 基本类设置为背景图形在页面上居中显示。 7、background 功能:简写属性,可以设置所有背景属性。 数值: background-attachment background-color background-image background-position background-repeat 有关上述数值的细节,见各个属性部分。 CSS语法手册(六)分类属性 1、display 功能:改变元素的显示值,可以将元素类型线上,块和清单项目相互变换。powered by 25175.net 数值: none - 不显示元素 block - 块显示,在元素前后设置分行符 inline - 删除元素前后的分行符,使其并入其它元素流中 list-item - 将元素设置为清单中的一行 说明:可用 display 属性值生成插入标题和补加清单或让图形变成线上显示。 2、white-space 功能:控制元素內的空白。 数值: normal - 不改变,保持缺省值,在浏览器页面长度处换行。 pre - 要求文档显示中采用源代码中的格式。 nowarp - 不让访问者在元素內换行。 3、list-style-type 功能:指定清单所用的强调符或编号类型 数值: none - 无强调符 disc - 碟形强调符(实心圆) circle - 圆形强调符(空心圆) square - 方形强调符(实心) decimal - 十进制数强调符 lower-roman - 小写罗馬字强调符 upper-roman - 大写罗馬字强调符 lower-alpha - 小写字母强调符 upper-alpha - 大写字母强调符 例子: item1 item2 item3 4、list-style-image 功能:用于将清单中标准强调符换成所选的图形 数值: 无图形 url - 图形URL地址 例子: item1 item2 item3 5、list-style-position 功能:用于设置强调符的缩排或伸排,这个属性可以让强调符突出于清单以外或与清单项目对齐。 数值: inside - 缩排,将强调符与清单项目内容左边界对齐 outside - 伸排,强调符突出到清单项目内容左边界以外 6、list-style 功能:简写属性,将所有清单属性放在一条语句中。 数值: list-style-type list-style-position list-style-image 这些值的细节见各个属性部分。 例子: item1 item2 item3
|