2015-09-22css:border, background, tables, hyperlinks, overflow, firebug

1. css border attribute ⑴ definition and usage

The border shorthand property sets all border properties in a declaration.

The following properties can be set sequentially:

Border-width

Border-style

Border-color

If you do not set one of these values, there will be no problems, such as Border:solid #ff0000; is also allowed.

Value	Describe
Border-width	Specifies the width of the border.
Border-style	Specifies the style of the border. For example, solid, dashed, dotted, none.
Border-color	Specifies the color of the border.

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

　　

⑵ set the top, bottom, left, and right of border respectively

      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 property ⑴ background color

Background-color: #0000FF;

　　

⑵ background image

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

　　

⑶ Background Image Repeat

background-repeat:repeat;/* Default Value */

　　

Background-repeat:repeat-x;

　　

Background-repeat:repeat-y;

　　

Background-repeat:no-repeat;

　　

⑷ Background Image location

background-position:50px 100px;

　　

⑸ stretching the background image

      Background-repeat:no-repeat;      Background-size:cover;

　　

⑹ Background Image fixed

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

　　

3. Table Style ⑴ The title of the table

<table border= "1" >    <caption>2004~2007 Annual revenue </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;}

　　

⑵ the border of a table

table{      border:1px solid red;}

　　

⑶ border overlap

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

　　

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

　　

⑷ header, column headers for rows

th scope= "col" th scope= "Row"

　　

Example code:

<table summary= "This table shows the yearly income for years 2004 through" border= "1" > <caption> annual Revenue 2004-2007</caption> <tr> <th></th> <th scope= "col" &GT;2004&LT;/TH&G           T <th scope= "col" >2005</th> <th scope= "col" >2006</th> <th scope= "col" >2007 </th> </tr> <tr> <th scope= "Row" > Appropriations </th> <td>11,980</      td> <td>12,650</td> <td>9,700</td> <td>10,600</td>           </tr> <tr> <th scope= "Row" > Donations </th> <td>4,780</td>      <td>4,989</td> <td>6,700</td> <td>6,590</td> </tr> <tr> <th scope= "row" > Investment </th> <td>8,000</td> <td>8,100 </td>           <td>8,760</td> <td>8,490</td> </tr> <tr> < Th scope= "Row" > Fundraising </th> <td>3,200</td> <td>3,120</td> &LT;TD >3,700</td> <td>4,210</td> </tr> <tr> <th scope= "Row" ; Sales </th> <td>28,400</td> <td>27,100</td> <td>27,950</ td> <td>29,050</td> </tr> <tr> <th scope= "Row" > Miscellaneous fees &LT;/TH&GT           ; <td>2,100</td> <td>1,900</td> <td>1,300</td> <td>1 ,760</td> </tr> <tr> <th scope= "Row" > Total </th> <td>58,460& lt;/td> <td>57,859</td> <td>58,110</td> &LT;TD&GT;60,700&LT;/TD&G      T </tr></table> 

　　

4, Hyperlink ⑴ Remove the underline of hyperlinks

a{      Text-decoration:none;}

　　

⑵ effect

a:link{      color:red;/* not accessed color */} a:visited{      color:green;/* already visited color */} a:hover{      color:blue;/* mouse hover color */      Cursor:pointer;} a:active{      color:orange;/* The color of the mouse click */}

　　

5. CSS Overflow Properties

All major browsers support the overflow property. The overflow property specifies what happens when the content overflows the element box.

Value	Describe
Visible	The default value. The content is not trimmed and is rendered outside the element box.
Hidden	The content is trimmed and the rest is not visible.
Scroll	The content is trimmed, but the browser displays scroll bars to see the rest of the content.
Auto	If the content is trimmed, the browser displays scroll bars to see the rest of the content.

6. A tool

Plugin Firebug for Firefox browser

2015-09-22css:border, background, tables, hyperlinks, overflow, firebug