目录

在这篇文章中你能看到有关于 CSS 样式设置的常用属性，文章的目录如下：

1、背景

（1）背景颜色

可以使用 background-color 属性为元素设置背景颜色，它接受任何合法的颜色值，默认是 transparent

p {background-color: gray;}

注意，background-color 属性不能继承

（2）背景图片

可以使用 background-image 属性为元素设置背景图片，它接受任何合法的 URL 用于指定图片地址，默认是 none

body {background-image: URL;}

注意，background-image 属性不能继承

（3）背景重复

可以使用 background-repeat 属性对背景图像进行平铺，其可选值有四个：

• repeat：在水平方向和垂直方向上都平铺
• repeat-x：在水平方向上平铺
• repeat-y：在垂直方向上平铺
• no-repeat：不允许图像在任何方向上平铺

（4）背景定位

可以使用 background-position 属性改变图像在背景中的位置，其可选值可以是关键字，关键字可以单独出现，也可以成对出现，一个对应水平方向，一个对应垂直方向，默认是 top left

• top：将背景图片定位到上方
• bottom：将背景图片定位到下方
• left：将背景图片定位到左方
• right：将背景图片定位到右方
• center：将背景图片定位到中间

body {     background-image: URL;    background-repeat: no-repeat;    background-position: top left;}

其可选值也可以是百分数值，表示图像处于元素的位置，默认是 0% 0%（与 top left 对应），如果只提供一个值，那么这个值将用于设置水平值，此时垂直值默认为 50%

body {     background-image: URL;    background-repeat: no-repeat;    background-position: 0% 0%;}

其可选值还可以是长度值，表示距离元素边框左上角的偏移量，默认是 0px 0px

body {     background-image: URL;    background-repeat: no-repeat;    background-position: 50px 100px;}

（5）背景关联

现在考虑下面一个问题：当文档向下滚动时，背景图像会随之滚动，但是当文档滚动到超过图像范围时，图像就会消失不见，我们应该怎么解决这个问题呢？其实很简单，只需可以设置 background-attachment 属性即可，其可选值有三个：

• scroll：默认值，背景图像随着页面滚动而滚动
• fixed：背景图片固定不变
• inherit：从父元素继承 background-attachment 属性的设置

2、文本

（1）文本颜色

可以使用 color 属性设置文本颜色，其可选值如下：

• 颜色名称
• 十六进制颜色表示
• RGB 代码颜色表示
• inherit：从父元素继承 color 属性

（2）文本方向

可以使用 direction 属性设置文本方向，其可选值如下：

• ltr：默认值，规定文本方向从左到右
• rtl：规定文本方向从右到左
• inherit：从父元素继承 direction 属性

（3）行间间隔

可以使用 line-height 属性设置行间的距离，即行高，其可选值如下：

• normal：默认值，定义标准的行间间距
• 数字：将此数字与当前字体尺寸相乘来确定行间间距
• 长度：设置固定的行间间距
• 百分数值：规定基于当前字体尺寸的百分比行间间距
• inherit：从父元素继承 line-height 属性

（4）字间间隔

可以使用 text-spacing 属性改变字间的间隔，其可选值如下：

• normal：默认值，定义标准的字间间距
• 长度：设置固定的字间间距，接受一个正长度值或负长度值，若为正，则增大字间距离；若为负，则减小字间距离
• inherit：从父元素继承 word-spacing 属性

注意：象形文字语言或非罗马书写体一般无法指定字间隔

（5）文本缩进

可以使用 text-indent 属性实现文本缩进功能，该属性可以让块级元素中的第一个内容行缩进一个给定的长度，其可选值如下：

• 长度：定义固定长度的缩进，可以设置负数，但是可能会超出浏览器窗口边界而不能显示
• 百分数值：规定基于父元素宽度的百分比文本缩进
• inherit：从父元素继承 text-indent 属性

（6）文本对齐

可以使用 text-align 属性控制元素中文本行相互之间的对齐方式，其可选值如下：

• left：左对齐，即把文本排列到左边，默认值

• right：右对齐，即把文本排列到右边

• center：居中对齐，即把文本排列到中间
• justify：两端对齐，常用于设置打印格式

• inherit：从父元素继承 text-align 属性

（7）字符转换

可以使用 text-transform 属性处理文本大小写问题，其可选值如下：

• none：默认值，标准文本
• capitalize：文本中的每个单词以大写字母开头
• uppercase：文本中都是大写字母
• lowercase：文本中都是小写字母
• inherit：从父元素继承 text-transform 属性

（8）文本装饰

可以使用 text-decoration 属性给文本添加装饰，其可选值如下：

• none：默认值，标准文本
• underline：在文本下添加一条线
• overline：在文本上添加一条线
• line-through：在文本中添加一条线
• blink：文本闪烁
• inherit：从父元素继承 text-decoration 属性

（9）空白符

可以使用 white-space 属性定义处理空白的规则，这里的空白指的是空格和回车，其可选值如下：

• normal（默认值）：合并空格，忽视回车，允许自动换行
• nowrap：合并空格，忽略回车，不允许自动换行
• pre：保留空格，保留回车，不允许自动换行
• pre-wrap：保留空格，保留回车，允许自动换行
• pre-line：合并空格，保留回车，允许自动换行
• inherit：从父元素继承 white-space 属性

3、字体

（1）字体系列

在 CSS 中，有两种字体系列：

• 通用字体系列：serif、sans-serif、monospace、cursive、fantasy
• 特定字体系列：例如 Times、Courier

我们可以使用 font-family 属性指定字体系列

p {font-family: serif;}/* 指定 serif 字体系列以后，浏览器会从 serif 系列中选择一种字体，并将其应用到 p 元素中 */

我们还可以设置具体的字体

p {font-family: Georgia;}

但是，这样存在一个问题，假如用户浏览器上没有安装 Georgia 字体该怎么办呢？所以，我们最好可以在指定具体字体后，再给定一个通用字体系列以备用

p {font-family: Georgia, serif;}

注意：如果字体名中有一个或多个空格，或者字体名中包括特殊符号，则需要添加引号

（2）字体风格

可以使用 font-style 属性设置字体风格，其可选值如下：

• normal：文本正常显示
• italic：文本斜体显示

• oblique：文本倾斜显示，与 italic 相似

• inherit：从父元素继承 font-style 属性

（3）字体加粗

可以使用 font-weight 属性设置字体粗细，其可选值可以是关键字：

• normal：默认值，定义标准字符
• bold：定义粗体字符
• bolder：定义更粗的字符
• lighter：定义更细的字符
• inherit：从父元素继承 font-weight 属性

也可以是从 100 到 900 的整百数字，它指定了 9 级加粗度，100 对应最细的字体，900 对应最粗的字体，而 400 相当于 normal，700 相当于 bold

（4）字体大小

可以使用 font-size 属性设置字体大小，其可选值可以是绝对值，也可以是相对值

• 绝对值将文本设置为固定大小，不允许用户在浏览器中改变，适用于输出尺寸固定的场合

• 相对值根据周围元素设置大小，允许用户在浏览器中改变文本大小

其值可以是直接指定字体大小的关键字：

从小到大排列为 xx-small、x-small、small、medium、large、x-large、xx-large

也可以是根据父元素设置字体大小的关键字：

smaller：比父元素更小 ； larger：比父元素更大

还可以是长度值，对于使用长度值，W3C 推荐使用 em 作为尺寸单位

再可以是百分数值，它会根据父元素设置字体大小

（5）简写属性

为了方便，我们可以只在 font 属性中设置所有有关字体的属性，排列顺序如下：

• font-style
• font-variant
• font-weight
• font-size / line-height
• font-family

p {font:italic arial,sans-serif;}

4、列表

（1）列表项标志

可以使用 list-style-type 属性设置列表项标志，其常见的值如下：

• none：无标记
• disc：实心圆，默认值
• circle：空心圆
• square：实心方块
• decimal：数字
• decimal-leading-zero：以 0 开头的数字
• lower-roman：小写罗马数字
• upper-roman：大写罗马数字
• lower-alpha：小写英文字母
• upper-alpha：大写英文字母
• lower-greek：小写希腊字母
• lower-latin：小写拉丁字母
• upper-latin：大写拉丁字母

（2）列表项图像

可以使用 list-style-image 属性设置列表项图像，其可选值如下：

• none：无图像，默认值
• URL：任何有效的图像路径
• inherit：从父元素继承

（3）列表项位置

可以使用 list-style-position 属性设置列表项位置，其可选值如下：

• inside：列表项标志放置在文本以内，且环绕文本根据标记对齐
• outside：默认值，列表项标志放置在文本以外，且环绕文本不根据标记对齐
• inherit：从父元素继承

（4）简写属性

同样的，我们可以只在 list-style 属性中设置所有有关列表的属性，排列顺序如下：

• list-style-type
• list-style-position
• list-style-image

ul {list-style: square inside url('URL')}

5、表格

（1）表格边框

可以使用 border 属性为表格设置边框，事实上，border 属性不仅仅适用于设置表格，还可以用于设置其它元素边框，其需要指定三个值，分别对应边框宽度，边框样式和边框颜色

table, th, td {border: 1px solid blue;}

（2）边框距离

可以使用 border-spacing 属性设置边框间的距离，其可选值如下：

• 长度值 长度值：一个用于指定水平间距，另一个用于指定垂直间距
• 长度值：同时用于设置水平间距和垂直间距
• inherit：从父元素继承 border-spacing 属性

（3）边框合并

可以使用 border-collapse 属性指定是否将表格边框合并成单一边框，其可选值如下：

• separate：默认值，边框分开显示，不忽略 border-spacing 和 empty-cells 属性
• collapse：将边框合并为单一边框，且忽略 border-spacing 和 empty-cells 属性
• inherit：从父元素继承 border-collapse 属性

（4）宽度高度

可以使用 width 属性指定表格宽度，使用 height 属性指定表格高度

（5）空单元格

可以使用 empty-cells 属性指定是否显示表格中的空单元格，其可选值如下：

• show：默认值，在空单元格周围绘制边框
• hide：不在空单元格周围绘制边框
• inherit：从父元素继承 empty-cells 属性

（6）表格布局

可以使用 table-layout 属性指定表格布局，其可选值如下：

• automatic：默认值，列宽由单元格内容确定
• fixed：列宽由表格宽度和列宽度确定
• inherit：从父元素继承 table-layout 属性

（7）文本对齐

可以使用 text-align 属性设置水平对齐方式，使用 vertical-align 属性设置垂直对齐方式

对于水平对齐方式来说，其可选值有：

• left：左对齐，默认值
• right：右对齐
• center：居中对齐

对于垂直对齐方式来说，其可选值有：

• top：顶端对齐
• bottom：底端对齐
• center：居中对齐，默认值

（8）标题位置

可以使用 caption-side 属性设置标题位置，其可选值如下：

• top：默认值，表格标题位于表格之上
• bottom：表格标题位于表格之下
• inherit：从父元素继承 caption-side 属性

6、轮廓

轮廓是指绘制于元素周围的一条线，其位于边框边缘的外围，可起到突出元素的作用

（1）颜色

可以使用 outline-color 属性设置轮廓颜色，其可选值如下：

• 颜色名称
• 十六进制值颜色
• RGB 代码颜色
• inherit：从父元素继承 outline-color 属性

（2）样式

可以使用 outline-style 属性设置轮廓样式，其可选值如下：

• none：无轮廓，默认值
• dotted：点状轮廓
• dashed：虚线轮廓
• solid：实线轮廓
• double：双线轮廓，宽度等于 outline-width 的值
• inherit：从父元素继承 outline-style 属性

（3）宽度

可以使用 outline-width 属性设置轮廓宽度，其可选值如下：

• thin：细轮廓
• medium：中等轮廓
• thick：粗轮廓
• 长度值：指定固定的轮廓粗细
• inherit：从父元素继承 outline-width 属性

（4）简写属性

为了方便，我们可以只在 outline 属性中设置所有有关轮廓的属性，排列顺序如下：

• outline-color
• outline-style
• outline-width

p {outline:blue dashed thick;}

参考资料：