CSS-Style样式

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 中的
 标签。
nowrap / [nəʊ][ræp]/包: 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
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 规定应该从父元素继承轮廓宽度的设置。

end

你可能感兴趣的:(CSS-Style样式)