css+html复合结构

CSS中的常用复合写法

1. 表格常用属性
2. 字体属性的复合写法
3. 背景图片的复合写法
4. 边框的复合写法
5. 内边距（padding）的复合写法
6. 外边距（margin）的复合写法

一、表格常用属性：

属性	含义
cellpadding="5px"	表格内容和单元格边缘之间的距离为5px
cellspacing="0"	单元格之间的距离
border-collapse: collapse;	合并相邻的边框
colspan="2"	合并行
rowspan="2"	合并列

二、字体属性的复合写法：

• font：font-style font-weight font-sizene-height font-family;
• 顺序不能调换，含义如下：

  属性	说明
  font-style	定义字体的风格（italic，倾斜）
  font-weight	定义字符的粗细，值由100到900，注意不加单位。400 等同于 normal（标准字体），而 700 等同于 bold（加粗）。
  font-size	设置字体的尺寸。
  line-height	设置字体的行高。
  font-family	规定元素的字体系列。（'Microsoft YaHei' 、serif）

三、背景图片的复合写法：

1. background: black url(“images/logo.jpg”) no-repeat fixed center top;

 1. 背景的复合写法没有顺序的，但是一般习惯性的写成如下的顺序，如果不设置则可以省略。
 2. 背景颜色 图片地址 是否平铺 背景图片固定 图片位置。 
 3. 颜色还可以用rgba()来代替。

2. background-position: right;

  此时 水平一定是靠右侧对齐 ， 第二个参数省略，则在 y 轴方向上是垂直居中显示的。

3. background-position: top;

 第一个参数是top，即y轴 顶部对齐， 第二个参数省略，则在x 轴方向上是 水平居中显示的。

4. background-attachment: fixed;

 背景图片固定，不会随着滚动条的滑动而滚动。

四、边框的复合写法

• border: 5px solid red;
• border-top: 5px solid red;
• 边框的复合写法是没有顺序的，一般习惯性的写法是：边框宽度、边框样式、边框颜色。

五、内边距（padding）的复合写法

写法	说明
padding: 1px;	一个参数，说明上下左右都有1像素的内边距
padding: 1px 2px;	两个参数，说明上下内边距是1像素，左右内边距是2像素
padding: 1px 2px 3px;	三个参数，说明上内边距是1像素，左右内边距是2像素，下内边距是3像素
padding: 1px 2px 3px 4px;	四个参数，此时按顺时针方向匹配值，上内边距是1像素，右内边距是2像素，下内边距是3像素，左内边距是4像素

六、外边距（margin）的复合写法

• margin的复合写法和padding的复合写法的参数含义完全一样。