CSS属性小结

文本

1、font-size: 12px: 字体大小

2、color: red: 字体颜色

3、font-style:italic; 字体倾斜

4、font-family: “TimesNew Roman”,Arial,宋体 字体样式

5、font-weight:bold; 字体加粗

6、line-height: 1.5;行高

7、text-indent: 2em;首行缩进

8、text-decoration:[underline][line-through][overline];加下划线/删除线/上划线

9、text-align:[left][right][center][justify];文字靠左/靠右/居中/两端对齐

10、background-color;gray: 背景色

11、padding: 20px; 文字边距

12、text-transform:[capitalize][ uppercase][lowercase]; 首字母大写/单词大写/单词小写

13、word-spacing:10px; 单词间距

14、letter-spacing:2px; 字母间距（默认一个汉字为一个字母）

15、border: 1px redsolid; 加段落边框

图片

1、width: 150px[20%];图片宽度[相对父DOM节点缩放]

2、height: 180px; 图片高度

3、float: left; 图片/文本/盒子悬浮

4、margin: 5px; DOM节点的间距

5、border: 1px redsolid[dashed][dotted]; 图片边框线条宽度/线条颜色/实线[虚线][点画线]

6、border-[top][bottom][left][right]:1px red solid; 分别设置边框线条样式

7、vertical-align:[baseline][top][middle][bottom][text-bottom][20px];垂直对齐[基准线][贴顶部][居中][贴底部][文本贴底部][相对基准线20px]

8、clear: [left][both];取消悬浮

整体页面

1、margin: 0px; 页面内容与浏览器边框的间距

2、background-color:#DFDFDF; 页面背景色

3、background-image:url(../**.jpg); 背景图片

4、background-repeat:repeat-x; 图片左右平铺

盒子

1、border

2、padding

3、margin

4、clear

5、float

6、position: [static][relative][absolute][fixed];默认/相对/绝对/固定定位 (固定定位以浏览器边框为准)

[top][right][buttom][left]: 10px;

7、z-index: 0; 值大的显示在上方

8、display: [inline][block];将元素变为[内联][块级]元素

表格

1、 border

2、 border-spacing: 0px;单元格间距

3、 border-collapse: [separate][collapse];边框分离/合并

4、 padding

5、 width

6、 height

7、 table-layout: [auto][fixed];表格宽度自动/固定

超链接

1、 a: [link][visited][hover]{} 普通的链接,已访问的链接,指针位于链接上方

2、 伪按钮

列表

1、 list-style-type: [none][square][circle];

2、 list-style-image: url(‘../image.png’); 前缀符号改为图片

3、 border-bottom:1px solid #9F9FED; 添加下划线