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