CSS常见属性和属性值

1.1 CSS 长度和颜色设置

三种长度单位：  px   em  %
三种颜色设置方式：  颜色名   rgb()   十六进制

1.2 CSS 选择器

标签名选择器
类名选择器
ID名选择器
全局选择器

行内式 > ID名选择器 > 类名选择器 > 标签名选择器 > 全局选择器

1.3 盒子模型

1. 元素的三种显示模式
   块级元素： 独占一行 可以设置宽高
   行内元素： 不会独占一行 无法设置宽高
   行内块元素： 不会独占一行，可以设置宽高
   
2. 如何设置元素的显示模式
   display: none / inline / inline-block / block

1.4 常用 CSS 属性

1. 字体属性
   font-family
   font-size
   font-weight	normal/bold/lighter/ 100~900
   font-style   normal/italic
   font


2. 文字颜色
   color


3. 文本属性
   letter-spacing  字母间距
   word-spacing    单词间距
   text-decoration   none/underline/overline/line-throuth
   text-indent	   首行缩进
   text-align      left/center/right
   vertical-align  baseline / top / bottom / middle
   line-height	   行高
   

2 CSS 常用属性

2.1 背景属性

属性名	作用	属性值
background-color	背景颜色	颜色
background-image	背景图像	url(图片路径)
background-repeat	背景图像重复	repeat： 水平方向和垂直方向都重复。 **repeat-x：**只在水平方向重复。 **repeat-y：**只在垂直反选重复。 **no-repeat：**不重复。
background-position	背景图像的位置	使用关键字设置位置或者使用长度表示的坐标
background-attachment	设置背景图像固定 本质上设置的是图像在元素上坐标体系。	scroll： 默认值，背景图像随元素滚动。 fixed： 背景图像固定（background-position 坐标系是视口）
background	复合属性	子属性的值，多个值有空格隔开

① background-position 设置背景图像的位置

使用关键字设置图像位置：

设置两个值作为属性的值，使用空格隔开，先写水平方向位置，再写垂直方向位置

水平方向位置： left、right、center
垂直方向位置： top、bottom、center

background-posotion: right bottom;

使用长度表示的坐标设置图像位置：

元素左上角作为坐标原点，x轴方向从左到右，y轴方向从上到下； 设置两个长度作为x坐标和y坐标，设置的是图像左上角在元素上的位置。

background-position: 10px 20px;

省略写法: 只设置一个值：

使用的是关键字：浏览器根据关键字自动判断设置的是水平位置还是垂直位置，另外取默认值 center
使用长度： 该长度被作为x坐标，垂直位置使用 center

background-position: bottom;  /* center bottom */
background-position: right;  /*right center*/
background-position: 100px;  /*100px center*/

② background 复合属性

把子属性的值作为background的值
没有数量要求也没有顺序要求

background: #f90;
background: #f90 url(images/bg.gif);
background: #f90 url(images/bg.gif) no-repeat;
background: #f90 url(images/bg.gif) no-repeat 100px 100px;

2.2 鼠标光标属性

属性名	作用	属性值
cursor	设置鼠标光标在元素上的样式	default： 默认样式。 pointer： 小手。 move： 移动十字图标。

/* 自定义鼠标光标样式 */
cursor: url(images/arrow.ico), pointer;

2.3 列表属性

属性名	作用	属性值
list-style-type	设置列表项图标样式	none： 没有图标，最常用。 **disc：**实心圆。 **decicmal：**数字。 …
list-style-image	自定义列表项图标	url(图片路径)
list-style-position	列表项图标的位置	outside： 图标在 li 的外面。 inside： 图标在 li 的里面。
list-style	复合属性	多个子属性的值，多个值用空格隔开。 没有属性和数量要求

注意： 列表属性只有设置给 ul、ol、li 元素才会生效。

2.4 表格属性

属性名	作用	属性值
table-layout	设置列宽固定（列宽等分）	**auto：**自动，默认值。 fixed： 固定，列宽等分。
border-collapse	设置合并单元格边框	collapse： 合并单元格边框
border-spacing	设置单元格之间的间距 生效前提：不能设置 border-collapse	长度
empty-cells	设置空单元格是否显示 生效前提：不能设置 border-collapse	show： 显示，默认值。 hide： 空单元格不显示。
caption-side	设置表格标题在表格上面还是下面	top： 标题在表格上面。 **bottom：**标题在表格下面。

注意： 表格相关 CSS 属性只有设置给 table 元素才有效果！