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

Source: Internet
Author: User

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:




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




Specifies the width of the border.


Specifies the style of the border. For example, solid, dashed, dotted, none.


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 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.




The default value. The content is not trimmed and is rendered outside the element box.


The content is trimmed and the rest is not visible.


The content is trimmed, but the browser displays scroll bars to see the rest of the content.


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.