CSS 样式
背景
| 属性 | 音标 | 翻译 | 描述 |
|---|---|---|---|
| background | [ˈbækgraʊnd] | 背景 | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | [əˈtætʃmənt] | 附件 | 背景图像是否固定或者随着页面的其余部分滚动。 scroll/[skrəʊl]/纸卷 默认值。背景会随着页面其余部分的滚动而移动。 fixed/[fɪkst]/固定的当页面的其余部分滚动时，背景图像不会移动 inherit/[ɪnˈherɪt]/继承规定应该从父元素继承 |
| background-color | ['kʌlə(r)] | 颜色 | 设置元素的背景颜色。 |
| background-image | [ˈɪmɪdʒ] | 形象 | 把图像设置为背景。 |
| background-position | [pəˈzɪʃn] | 位置 | 设置背景图像的起始位置。 top/ [tɒp]/顶部 left/ [left]/左边 right/ [raɪt]/右边 bottom/ [ˈbɒtəm]/底部 center/['sentə]/中心 |
| background-repeat | [rɪˈpi:t] | 重复 | 设置背景图像是否及如何重复。 repeat/重复默认背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。 inherit 规定应该从父元素继承 background-repeat 属性的设置。 |
文本
| 属性 | 音标 | 翻译 | 描述 |
|---|---|---|---|
| color | ['kʌlə(r)] | 颜色 | 设置文本颜色 |
| direction | [dəˈrekʃn] | 方向 | 设置文本方向。 ltr 默认。文本方向从左到右。 rtl 文本方向从右到左。 inherit 规定应该从父元素继承 direction 属性的值。 |
| line-height | [laɪn][haɪt] | 行高 | 设置行高 |
| letter-spacing | [ˈletə(r)] [ˈspeɪsɪŋ] | 信-间距 | 设置字符间距。 normal 默认。规定字符间没有额外的空间。 length 定义字符间的固定空间（允许使用负值）。 inherit 规定应该从父元素继承 letter-spacing 属性的值。 |
| text-align | [tekst] [əˈlaɪn] | 文本-排列 | 对齐元素中的文本。 left/ [left]/左边: 把文本排列到左边。默认值：由浏览器决定。 right/[raɪt]/右边：把文本排列到右边。 center/ ['sentə] /中心:把文本排列到中间。 justify/[ˈdʒʌstɪfaɪ]/整理版面: 实现两端对齐文本效果。 inherit/[ɪnˈherɪt]/继承:规定应该从父元素继承 text-align 属性的值。 |
| text-decoration | [tekst] [ˌdekəˈreɪʃn] | 文本-装饰 | 向文本添加修饰。 none/[nʌn] /无: 默认。定义标准的文本。 underline /[ˌʌndəˈlaɪn] /下划线: 定义文本下的一条线。 overline / ['əʊvəlaɪn]/跨线: 定义文本上的一条线。 line-through/[laɪn][θru:] /通过线: 定义穿过文本下的一条线。 blink /[blɪŋk]/眨眼: 定义闪烁的文本。 inherit/[ɪnˈherɪt]/继承: 规定应该从父元素继承 text-decoration 属性的值。 |
| text-indent | [ɪnˈdent] | 缩进 | 缩进元素中文本的首行。 |
| white-space | [waɪt][speɪs] | 白色-空间 | 设置元素中空白的处理方式。 normal / [ˈnɔ:ml]/正常的： 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap / [nəʊ][ræp]/包: 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。pre-wrap /[p(r)][ræp]/预先包装/ 保留空白符序列，但是正常地进行换行。 pre-line /[laɪn]/线/ 合并空白符序列，但是保留换行符。 inherit / [ɪnˈherɪt] /继承/ 规定应该从父元素继承 white-space 属性的值。 |
| word-spacing | [wɜ:d] [ˈspeɪsɪŋ] | 单词-间距 | 设置字间距。 |
字体
| 属性 | 音标 | 翻译 | 描述 |
|---|---|---|---|
| font | [fɒnt] | 字体 | 简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
| font-family | [fɒnt] [ˈfæməli] | 字体-家庭 | 设置字体系列。 可以把多个字体名称作为一个“回退”系统来保存。 如果浏览器不支持第一个字体 |
| font-size | [fɒnt] [saɪz] | 字体-大小 | 设置字体的尺寸。 |
| font-style | [fɒnt] [staɪl] | 字体-风格 | 设置字体风格。 normal / [ˈnɔ:ml]/正常的/ 默认值。浏览器显示一个标准的字体样式。 italic / [ɪˈtælɪk] /斜体/ 浏览器会显示一个斜体的字体样式。 oblique /[əˈbli:k]/倾斜的/ 浏览器会显示一个倾斜的字体样式。 inherit/ [ɪnˈherɪt]/继承/ 规定应该从父元素继承字体样式。 |
| font-weight | [fɒnt] [weɪt] | 重量 | 设置字体的粗细。 normal/[ˈnɔ:ml] /正常的/ 默认值。定义标准的字符。 bold /[bəʊld]/粗体字/ 定义粗体字符。 bolder 定义更粗的字符。 lighter / [ˈlaɪtə(r)] /较轻的/ 定义更细的字符。 |
链接
| 属性 | 音标 | 翻译 | 描述 |
|---|---|---|---|
| a:link {color:#FF0000;} | [lɪŋk] | 链接 | /* 未被访问的链接 */ |
| a:visited {color:#00FF00;} | ['vɪzɪtɪd] | 参观 | /* 已被访问的链接 */ |
| a:hover {color:#FF00FF;} | [ˈhɒvə(r)] | 悬停 | /* 鼠标指针移动到链接上 */ |
| a:active {color:#0000FF;} | [ˈæktɪv] | 积极的 | /* 正在被点击的链接 */ |
| text-decoration | [tekst] [ˌdekəˈreɪʃn] | 文本-装饰 | 文本修饰/属性大多用于去掉链接中的下划线： |
列表
| 属性 | 音标 | 翻译 | 描述 |
|---|---|---|---|
| list-style | [lɪst] [staɪl] | 列表-样式 | 简写属性 list-style:square inside url('/i/arrow.gif'); 可以按顺序设置如下属性： list-style-type list-style-position list-style-image |
| list-style-image | [lɪst] [staɪl] [ˈɪmɪdʒ] | 列表-样式-图像 | 将图象设置为列表项标志。 list-style-image:url("/i/arrow.gif"); URL 图像的路径。 none/[nʌn]/无/ 默认。无图形被显示。 inherit / [ɪnˈherɪt]/继承/ 规定应该从父元素继承 list-style-image 属性的值。 |
| list-style-position | [lɪst] [staɪl] [pəˈzɪʃn] | 位置 | 设置列表中列表项标志的位置。 inside/[ˌɪnˈsaɪd] /里面/ 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 outside /[ˌaʊtˈsaɪd]/外部/ 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 inherit /[ɪnˈherɪt] /继承/ 规定应该从父元素继承 list-style-position 属性的值。 |
| list-style-type | [lɪst] [staɪl] [taɪp] | 类型 | 设置列表项标志的类型。 none/[nʌn]/无/ 无标记。 disc /[dɪsk] /圆盘/ 默认。标记是实心圆。 circle/[ˈsɜ:kl]/圆圈/ 标记是空心圆。 square/[skweə(r)] /正方形的/ 标记是实心方块。 decimal /[ˈdesɪml]/十进位的/ 标记是数字。 decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。) lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。) upper-roman 大写罗马数字(I, II, III, IV, V, 等。) |
表格
| 属性 | 音标 | 翻译 | 描述 |
|---|---|---|---|
| border-collapse | [ˈbɔ:də(r)] [kəˈlæps] | 边境-崩溃;倒塌;折叠 | 设置是否把表格边框合并为单一的边框。 separate /[ˈseprət]/分离/ 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse /[kəˈlæps]/折叠/ 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 inherit /[ɪnˈherɪt] /继承/ 规定应该从父元素继承 border-collapse 属性的值。 |
| border-spacing | [ˈbɔ:də(r)] [ˈspeɪsɪŋ] | 边框-间距 | 设置分隔单元格边框的距离。 |
| caption-side | [ˈkæpʃn] [saɪd] | 字幕-边 | 设置表格标题的位置。 caption-side:bottom; caption-side:top; caption-side:inherit; |
| empty-cells | [ˈempti] ['selz] | 空的细胞 | 设置是否显示表格中的空单元格。 empty-cells:hide; hide /[haɪd] /隐藏/ 不在空单元格周围绘制边框。 show / [ʃəʊ]/显示/ 在空单元格周围绘制边框。默认。 inherit /[ɪnˈherɪt] /继承/ 规定应该从父元素继承 empty-cells 属性的值。 |
| table-layout | [ˈteɪbl] [ˈleɪaʊt] | 桌子-布局 | 设置显示单元、行和列的算法。 table { table-layout:fixed; } automatic/[ˌɔ:təˈmætɪk]/自动的/ 默认列宽度由单元格内容设定。 fixed /[fɪkst]/固定的/ 列宽由表格宽度和列宽度设定。 inherit/[ɪnˈherɪt] /继承/ 规定应该从父元素继承 table-layout 属性的值。 |
轮廓
| 属性 | 音标 | 翻译 | 描述 |
|---|---|---|---|
| outline | [ˈaʊtlaɪn] | 轮廓线 | 在一个声明中设置所有的轮廓属性。 outline:#00FF00 dotted thick; |
| outline-color | [ˈaʊtlaɪn] ['kʌlə(r)] | 轮廓-颜色 | 设置轮廓的颜色。 |
| outline-style | [ˈaʊtlaɪn] [staɪl] | 轮廓-样式 | 设置轮廓的样式。 none 默认。定义无轮廓。 dotted 定义点状的轮廓。 dashed 定义虚线轮廓。 solid 定义实线轮廓。 double 定义双线轮廓。双线的宽度等同于 outline-width 的值。 groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 inherit 规定应该从父元素继承轮廓样式的设置。 |
| outline-width | [ˈaʊtlaɪn] [wɪdθ] | 轮廓-宽度 | 设置轮廓的宽度。 thin 规定细轮廓。 medium 默认。规定中等的轮廓。 thick 规定粗的轮廓。 length 允许您规定轮廓粗细的值。 inherit 规定应该从父元素继承轮廓宽度的设置。 |
