2015-09-22CSS：border、background、表格、超链接、overflow、firebug_html/css_WEB-ITnose

1、CSS的border属性

⑴定义和用法

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

border-width

border-style

border-color

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

值	描述
border-width	规定边框的宽度。
border-style	规定边框的样式。例如，solid、dashed、dotted、none。
border-color	规定边框的颜色。

      width:200px;      height:200px;      border:1px dashed red;

　　

⑵分别设置border的上、下、左、右

      width:200px;      height:200px;      border-right:1px dashed red;      border-left:1px dashed red;      border-top:1px solid red;      border-bottom:1px dotted red;

　　

2、CSS的background属性

⑴背景颜色

background-color:#0000FF;

　　

⑵背景图片

background-image:url("../image/clear.png");

　　

⑶背景图片重复

background-repeat:repeat;/*默认值*/

　　

background-repeat:repeat-x;

　　

background-repeat:repeat-y;

　　

background-repeat:no-repeat;

　　

⑷背景图片位置

background-position:50px 100px;

　　

⑸拉伸背景图片

      background-repeat:no-repeat;      background-size:cover;

　　

⑹背景图片固定

body{      background-image:url("../image/clear.png");      background-repeat:no-repeat;      background-attachment:fixed;}

　　

3、表格样式

⑴表格的标题

2004~2007年度收入

2004	2005	2006	2007
1234	2345	3456	4567

　　

table{      caption-side:bottom;}

　　

⑵表格的边框

table{      border:1px solid red;}

　　

⑶边框重叠

th,td{      border:1px solid red;}

　　

th,td{      border:1px solid red;}table{      border-collapse:collapse;}

　　

⑷行的表头、列的表头

th scope="col"th scope="row"

　　

示例代码：

年度收入 2004 - 2007

	2004	2005	2006	2007
拨款	11,980	12,650	9,700	10,600
捐款	4,780	4,989	6,700	6,590
投资	8,000	8,100	8,760	8,490
募捐	3,200	3,120	3,700	4,210
销售	28,400	27,100	27,950	29,050
杂费	2,100	1,900	1,300	1,760
总计	58,460	57,859	58,110	60,700

　　

4、超链接

⑴去掉超链接的下划线

a{      text-decoration:none;}

　　

⑵效果

a:link{      color:red;/*未访问时的颜色*/} a:visited{      color:green;/*已经访问过的颜色*/} a:hover{      color:blue;/*鼠标悬停的颜色*/      cursor:pointer;} a:active{      color:orange;/*鼠标点击时的颜色*/}

　　

5、CSS的 overflow 属性

所有主流浏览器都支持 overflow 属性。overflow 属性规定当内容溢出元素框时发生的事情。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

6、一个工具

FireFox浏览器的插件Firebug