2015-09-22CSS：border、background、表格、超链接、overflow、firebug

1、CSS的border属性

⑴定义和用法

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

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

border-width

border-style

border-color

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

      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、表格样式

⑴表格的标题

<table border=“1”>
    <caption>2004~2007年度收入</caption>
    <tr><th>2004</th><th>2005</th><th>2006</th><th>2007</th></tr>
    <tr><td>1234</td><td>2345</td><td>3456</td><td>4567</td></tr>
</table>

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"

示例代码：

<table summary="This table shows the yearly income for years 2004 through 2007" border="1">
      <caption>年度收入 2004 - 2007</caption>
      <tr>
           <th></th>
           <th scope="col">2004</th>
           <th scope="col">2005</th>
           <th scope="col">2006</th>
           <th scope="col">2007</th>
      </tr>
      <tr>
           <th scope="row">拨款</th>
           <td>11,980</td>
           <td>12,650</td>
           <td>9,700</td>
           <td>10,600</td>
      </tr>
      <tr>
           <th scope="row">捐款</th>
           <td>4,780</td>
           <td>4,989</td>
           <td>6,700</td>
           <td>6,590</td>
      </tr>
      <tr>
           <th scope="row">投资</th>
           <td>8,000</td>
           <td>8,100</td>
           <td>8,760</td>
           <td>8,490</td>
      </tr>
      <tr>
           <th scope="row">募捐</th>
           <td>3,200</td>
           <td>3,120</td>
           <td>3,700</td>
           <td>4,210</td>
      </tr>
      <tr>
           <th scope="row">销售</th>
           <td>28,400</td>
           <td>27,100</td>
           <td>27,950</td>
           <td>29,050</td>
      </tr>
      <tr>
           <th scope="row">杂费</th>
           <td>2,100</td>
           <td>1,900</td>
           <td>1,300</td>
           <td>1,760</td>
      </tr>
      <tr>
           <th scope="row">总计</th>
           <td>58,460</td>
           <td>57,859</td>
           <td>58,110</td>
           <td>60,700</td>
      </tr>
</table>

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 属性规定当内容溢出元素框时发生的事情。

6、一个工具

FireFox浏览器的插件Firebug