H5学习之02css属性（全）

---

本篇内容：

• 1，字体属性：(font)
• 2，文本属性: (text)
• 3，背景属性：（background）
• 4，超链接属性：（a:）
• 5，列表属性：（list）
• 6，轮廓属性:（Outline）
• 7，表格属性:（table）

---

1，字体属性：(font)

Snip20170122_11.png

• 1.1，font-style：(字体风格)

• inherit; (继承);

• oblique;(偏斜体)

• italic;(斜体)

• normal;(正常)

• 1.2， font-weight:（文字粗细）

• 100-900; (整百数值)

• bold; （加粗）

• bolder; (比加粗还要粗)

• lighter; （细文字）

• normal; (正常)

• 1.3，font-size:（字体大小）

• 20px; （数值）

• inherit;

• medium;

• large;

• larger;

• x-large;

• xx-large;

• small;

• smaller;

• x-small;

• xx-small;

• 1.4, font-family:（字体类型）
  font-family:“字体1”, "字体2"; 如果后面有多个参数以逗号隔开，则后面的选项是前面的备选方案，即第一个字体不存在的时候选择第二个，如果第二个也不存在，依次选择后面的字体

• "宋体";

• 常用字体： (font-family):Courier New, Courier, monospace, Times New Roman, Times, serif, Arial, Helvetica, sans-serif, Verdana

• 1.5, font-variant: (大写字体或者正常字体)

• normal 默认值。浏览器会显示一个标准的字体。

• small-caps 浏览器会显示小型大写字母的字体。

• inherit 规定应该从父元素继承 font-variant 属性的值。

• 合写：font
  合写font的时候的顺序参考：

Snip20170123_12.png

/*1，size必须放在family前面，并且必须放在style和weight两个属性后面*/
/*2，style和weight可以省略，且这两个属性位置可以换*/
/*3,如果其他什么不对，可以看错误提示*/
font:900 italic 20px "Athelas";

2，文本属性: (text)

Snip20170123_13.png

• 2.1，color:（字体颜色）

• color_name 规定颜色值为颜色名称的颜色（比如 red）。

• hex_number 规定颜色值为十六进制值的颜色（比如 #ff0000）。

• rgb_number 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。

• inherit 规定应该从父元素继承颜色。

• 2.2，direction: （方向）

• ltr 默认。文本方向从左到右。

• rtl 文本方向从右到左。

• inherit 规定应该从父元素继承 direction 属性的值。

• 2.3，line-height: (行高)

• normal 默认。设置合理的行间距。

• number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

• length 设置固定的行间距。

• % 基于当前字体尺寸的百分比行间距。

• inherit 规定应该从父元素继承 line-height 属性的值。

• 2.4，letter-spacing: （字符间距，指每个字母之间的间距，后面的word-spacing是指单词之间的间距）

• normal 默认。规定字符间没有额外的空间。

• length 定义字符间的固定空间（允许使用负值）。

• inherit 规定应该从父元素继承 letter-spacing 属性的值。

• 2.5， text-align: （字符对齐）

• left 把文本排列到左边。默认值：由浏览器决定。

• right 把文本排列到右边。

• center 把文本排列到中间。

• justify 实现两端对齐文本效果。

• inherit 规定应该从父元素继承 text-align 属性的值。

• 2.6，text-decoration：(字符装饰)

• none 默认。定义标准的文本。

• underline 定义文本下的一条线。

• overline 定义文本上的一条线。

• line-through 定义穿过文本下的一条线。

• blink 定义闪烁的文本。

• inherit 规定应该从父元素继承 text-decoration 属性的值。

• 2.7，text-indent：（字符缩进）

• length 定义固定的缩进。默认值：0。

• % 定义基于父元素宽度的百分比的缩进。

• inherit 规定应该从父元素继承 text-indent 属性的值。

• 2.8，text-transform：(字符变形，用于控制元素中的字母大小写)

• none 默认。定义带有小写字母和大写字母的标准的文本。

• capitalize 文本中的每个单词以大写字母开头。

• uppercase 定义仅有大写字母。

• lowercase 定义无大写字母，仅有小写字母。

• inherit 规定应该从父元素继承 text-transform 属性的值。

• 2.9, unicode-bidi: (设置文本方向)

• 2.10，white-space：（空白空间：设置元素中空白的处理方式）

• normal 默认。空白会被浏览器忽略。

• pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。

• nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
  标签为止。

• pre-wrap 保留空白符序列，但是正常地进行换行。

• pre-line 合并空白符序列，但是保留换行符。

• inherit 规定应该从父元素继承 white-space 属性的值。

• 2.11, word-spacing: (字间隔，属性增加或减少单词间的空白，前面的letter-spacing是指每个字母之间的间距)

• normal 默认。定义单词间的标准空间。

• length 定义单词间的固定空间。

• inherit 规定应该从父元素继承 word-spacing 属性的值。

3，背景属性：（background）

Snip20170123_15.png

• 3.1, background-attachment: (北京粘附：设置背景图像是否固定或者随着页面的其余部分滚动)

• scroll 默认值。背景图像会随着页面其余部分的滚动而移动。

• fixed 当页面的其余部分滚动时，背景图像不会移动。

• inherit 规定应该从父元素继承 background-attachment 属性的设置。

• 3.2, background-color: (背景颜色)

• color_name 规定颜色值为颜色名称的背景颜色（比如 red）。

• hex_number 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。

• rgb_number 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。

• transparent 默认。背景颜色为透明。

• inherit 规定应该从父元素继承 background-color 属性的设置。

• 3.3，background-image：（背景图片）

• url('URL') 指向图像的路径。

• none 默认值。不显示背景图像。

• inherit 规定应该从父元素继承 background-image 属性的设置。

• 3.4，background-position：(背景位置)

Snip20170123_16.png

• 3.5，background-repeat：（背景重复）
• repeat 默认。背景图像将在垂直方向和水平方向重复。
• repeat-x 背景图像将在水平方向重复。
• repeat-y 背景图像将在垂直方向重复。
• no-repeat 背景图像将仅显示一次。
• inherit 规定应该从父元素继承 background-repeat 属性的设置。

4，超链接属性：（a:）

• 设置链接的样式

• 能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）

• 链接的特殊性在于能够根据它们所处的状态来设置它们的样式

• 链接的四种状态：

  • a:link - 普通的、未被访问的链接
  • a:visited - 用户已访问的链接
  • a:hover - 鼠标指针位于链接的上方
  • a:active - 链接被点击的时刻

• 实例

a:link {color:#FF0000;}     /* 未被访问的链接 */
a:visited {color:#00FF00;}  /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */

5，列表属性：（list）

Snip20170123_17.png

• 5.1， list-style-image:（列表图片样式）

• URL 图像的路径。

• none 默认。无图形被显示。

• inherit 规定应该从父元素继承 list-style-image 属性的值。

• 5.2， list-style-position：(列表位置样式)

• inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。

• outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

• inherit 规定应该从父元素继承 list-style-position 属性的值。

• 5.3，list-style-type：(列表类型样式)

Snip20170123_18.png

6，轮廓属性:（Outline）

Snip20170123_19.png

• 6.1，outline-color：（轮廓颜色）

• color_name 规定颜色值为颜色名称的轮廓颜色（比如 red）。

• hex_number 规定颜色值为十六进制值的轮廓颜色（比如 #ff0000）。

• rgb_number 规定颜色值为 rgb 代码的轮廓颜色（比如 rgb(255,0,0)）。

• invert 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。

• inherit 规定应该从父元素继承轮廓颜色的设置。

• 6.2，outline-style：（轮廓样式）

Snip20170123_20.png

• 6.3，outline-width：（轮廓宽度）
• thin 规定细轮廓。
• medium 默认。规定中等的轮廓。
• thick 规定粗的轮廓。
• length数值 允许您规定轮廓粗细的值。
• inherit 规定应该从父元素继承轮廓宽度的设置。

7，表格属性:（table）

Snip20170123_21.png

• 7.1, border-collapse: (边框塌陷，设置表格的边框是否被合并为一个单一的边框)

表格边框塌陷.gif

• separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

• collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

• inherit 规定应该从父元素继承 border-collapse 属性的值。

• 7.2，border-spacing：（表格边框间距：设置分隔单元格边框的距离）

• length length
  规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。
  如果定义一个 length 参数，那么定义的是水平和垂直间距。
  如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

• inherit 规定应该从父元素继承 border-spacing 属性的值。

• 7.3，caption-side：（标题位置）

• top 默认值。把表格标题定位在表格之上。

• bottom 把表格标题定位在表格之下。

• inherit 规定应该从父元素继承 caption-side 属性的值。

• 7.4，empty-cells：（空白单元格是否显示）

• hide 不在空单元格周围绘制边框。

• show 在空单元格周围绘制边框。默认。

• inherit 规定应该从父元素继承 empty-cells 属性的值。

• 7.5，table-layout：（表格布局算法）

• automatic 默认。列宽度由单元格内容设定。

• fixed 列宽由表格宽度和列宽度设定。

• inherit 规定应该从父元素继承 table-layout 属性的值。