H5学习之02css属性（全）

2017-01-23 本文已影响97人张不二01

本篇内容：

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 属性的值。