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 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231
| 1、font-family 功能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单。浏览器由前向后选用字体。powered by 25175.net 语法:{font-family:字体1,字体2, ... ,字体n} 例子: 字体 2、font-style 功能:使文本显示为扁斜体或斜体等表示强调 。 数值: normal - 正常 italic - 斜体 oblique - 偏斜体 例子: Normal Italic Oblique 3、font-variant 功能:用于在正常与小型大写字母字体间切换。 数值:normal - 如果该标志继承父元素的 small-caps 设置,则关键字 normal 将 font-variant 设置为正常字体。 small-caps - 把小写字母显示为字体较小的大写字母。 例子: FONT-VARIANT 4、font-weight 功能:用于设置字体灰度,生成字体的深,浅版本。 数值: 正常灰度 - normal 相对灰度 - bold, bolder, light, lighter 梯度灰度 - 取值如下:100, 200, 300, 400(相当于normal), 500, 600, 700(相当于bold), 800, 900。 例子: 字体灰度 5、font-size 功能:用各种度量单位控制文本字体大小。 数值:有四种数值方式 绝对尺寸- 用具体字号表定义字体大小,可以取下列数值之一:xx - small, x-small, small, medium, large, x-large, xx-large。不同字体有不同的数值。 相对尺寸 - larger, smaller,产生的尺寸是相对于父容器字号而言的。 长度 - 用毫米(mm),厘米(cm),英寸(in),点数(pt),象素(px),pica(pc),ex(小写字母x的高度)或em(字体高度)作为度量单位。 百分比 - 相对于其父元素字体大小的百分比。 例子:字体大小 6、font 功能:简写属性,提供了对字体所有属性进行设置的快捷方法。 语法:{font:字体属性1 字体属性2 ... 字体属性n} 数值:字体属性值为前面已列出的值,此外还可以设置行间距属性 line-height(见文本属性),内容的顺序为:font-style; font-variant; font-weight; font-size; line-height; font-family。可省略部分属性,属性值间用空格分开。 例子: FONT CSS语法手册(二)文本属性 1、letter-spacing 功能:控制文本元素字母间的间距,所设置的距离适用于整个元素。powered by 25175.net 数值: normal - 正常间距,将字符间的间距复位为所有字体和字号的正常间距。 长度 - 设置字间距长度,正值表示加进父元素中继承的正常长度,负值则減去正常长度。在数字后指定度量单位如下:mm, cm, in, pt(点数), px(象素), pc(pica), ex(小写字母x的高度), em(大写字母M的宽度)。 例子: Letter-Spacing 2、line-height 功能:设置元素中文本的行间距。 数值: normal - 正常高度,通常为字体尺寸的 1-1.2倍,这是缺省设置。 数字 - 设置元素中毎行文本的距离为字体尺寸乘以这个数字。例如字体尺寸为10点,设置line-height为2,则间距20点。 长度 - 用标准度量单位设置间距,有些是绝对的,有些是相对的,详见letter-spacing中的説明。 百分比 - 也字体尺寸的百分比设置间距。 例子: 这是第一行。 这是第二行。 这是第三行。 3、text-align 功能:在元素框中水平对齐文本。 数值: left - 左对齐 right - 右对齐 center - 居中 justify - 均匀分布, 生成等长的行 例子: 对左 居中 对右 4、text-decoration 功能:文本修饰,用于控制文本元素所用的效果,特别适用于引人注意的说明,警告等文本效果。 数值: none - 无文本修饰,缺省设置。 underline - 下划线。 overline - 上划线。 line-through - 删除线。 blink - 闪烁。 同一语句中可以组合多个关键字。 例子: underline overline 5、text-indent 功能:文本缩排,用于段落的第一行缩排上。 数值: 长度 - 设置首行缩排的尺寸为指定度量单位,有些单位是相对的,有些则是绝对的,祥见 letter-spacing 属性的说明部分。 百分比 - 以行长的百分比设置首行缩排量。 例子: 文本缩排,用于段落的第一行缩排上。 6、text-transform 功能:设置一个或几个元素的大写标准。 数值: none - 不改变文本的大写小写。 capitalize - 元素中毎个单词的第一个字母用大写。 uppercase - 将所有文本设置为大写。 lowercase - 将所有文本设置为小写。 例子: a text-transform example. a text-transform example. a text-transform example. 7、vertical-align 功能:垂直对齐。 数值: baseline - 对准两个元素的小写字母基准线。 sub - 下标。 super - 上标。 top - 顶部对齐。 text-top - 文本顶对齐。 middle - 中线对齐。 bottom - 底线对齐。 text-bottom - 字母底线对齐。 百分比 - 将线上元素基准线在父元素基准线基础上升降一定的百分比,和元素的 line-height 属性组合使用。 例子: a1x2 8、word-spacing 功能:控制文本中元素单词间的间距。设置的间距适用于整个元素,不能在某个单词间插入更大或更小的间距。 数值: normal - 正常间距。 长度 - 如果长度为正,则加进从父元素继承的正常长度,如果是负值,则减去。 例子: A Word Spacing Example CSS语法手册(三)文本填充,边框,边界和位置属性(一) 一、框填充属性powered by 25175.net 1、padding-bottom padding-left padding-top padding-right 功能:毎个容器都有边框,这些属性设置边框与框內元素间的距离。 数值: 长度 - 设置相对或绝对值。在数字后指定度量单位如下:mm, cm, in, pt, px, pc, ex, em。em 和 ex 设置产生相对于父字体的字体尺寸。 百分比 - 以父元素的百分比设置边框。 说明:填充值不能使用负值,但可以是小数。 [url=article.asp?typeid=]CSS[/url]yu/01/01.htm" target=_blank>例子 2、padding 功能:是个简写属性,用于设置上,下,左,右各个方向边框和内容元素的间距。 数值:同前。 说明:用单一值可以让毎边等距填充;如果用两个值,则第一个值用于上下填充,第二个值用于左右填充;如果用三个值,则赋于上边填充,左右填充和下边填充;如果用四个值,则分别用于上,右,下,左填充。可以混合数值类型。 例子 二、框边框属性 1、border-top border-bottom border-right border-left 功能:这四个属性都是简写属性,分别设置上,下,右,左的边框属性。缺省情况下,边框没有样式设置。 数值:共有三个边框属性 border-width: 取值为 thin, medium, thick或指定长度。 border-style: 设置用于修饰边框的底纹。可以设置下列样式:none, dotted,doshed, solid, double, groove, ridge, inset, outset。 border-color: 设置边框颜色。 例子 2、border-top-width border-bottom-width border-right=width border-left-width 功能:分别设置各个边框的厚度。 数值: thin - 细边框。 medium - 中等线宽。 thick - 粗线。 长度 - 用相对或绝对单位设置边框宽度。 例子 3、border-width 功能:简写属性,可同时设置四个边框的宽度。 数值: thin - 细边框。 medium - 中等线宽。 thick - 粗线。 长度 - 用相对或绝对单位设置边框宽度。 说明:见 padding 说明。 例子: 边框属性 4、border-color 功能:简写属性,设置四个边框的颜色值。 数值:可以用颜色名或RGB值。如果指定单个颜色,则四个边框都显示为这个颜色;如果指定两个颜色,则顺序为上下,左右;如果指定三种颜色,则顺序为上,左右,下;如果指定四种颜色,则顺序为上,右,下,左。 说明:颜色名如下 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, pURPle, red, silver, teal, white, yellow. 对于RGB值,可用三种方法指定 #rrggbb; rgb(r,g,b); rgb(r%,g%,b%) 例子: 边框颜色 5、border-style 功能:用于显示边框和指定边框样式。 数值: none - 不显示边框,为缺省值 dotted - 点线 dashed - 虛线 solid - 实线 double - 双线 groove - 3D陷入线 ridge - 3D山脊狀线 inset - 使页面有沉入感 outset - 使页面有浮出感 说明:并非所有浏览器都能显示ridge, inset, outset 之类的样式,有些浏览器将所有边框都绘制成实线。 Example1 Example2 6、border 功能:简写属性,设置所有边框属性。 数值: border-width - 取值 thin, medium, thick 或指定长度。 border-style - 取值 none, dotted, dashed, solid, double, groove, ridge, inset, outset border-color - 可用颜色名或RGB值。 说明:与其它简写属性不同的是,每个设置只能取一个值,这个属性均匀作用于框的各边。 例子: This Is A Example
|