2015-09-22CSS: 境界線、背景、表、ハイパーリンク、オーバーフロー、firebug_html/css_WEB-ITnose

1. CSS ボーダー属性

⑴定義と使用法

border 短縮属性は、1 つのステートメントですべてのボーダー属性を設定します。

次の属性を順番に設定できます:

border-width

border-style

border-color

値のいずれかを設定しなくても、問題はありません。たとえば、border:ソリッド #ff0000; も許可されます。

値	説明
border-width	は境界線を指定します幅。
border-style	境界線のスタイルを指定します。たとえば、実線、破線、点線、なしなどです。
border-color	境界線の色を指定します。

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

⑵枠線の上下左右をそれぞれ設定します

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

3 . テーブルスタイル

⑴テーブルのタイトル

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

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

⑵テーブルの枠線

<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;}

4. ハイパーリンク

⑴ハイパーリンクの下線を削除します

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>

5. CSS オーバーフロー属性

すべての主要なブラウザがサポートしています。オーバーフロープロパティ。 overflow 属性は、コンテンツが要素のボックスからオーバーフローした場合に何が起こるかを指定します。

値	説明
visible	のデフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。
hidden	コンテンツはトリミングされ、残りのコンテンツは非表示になります。
scroll	コンテンツはトリミングされますが、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。
auto	コンテンツがトリミングされると、ブラウザーには残りのコンテンツを表示するためのスクロール バーが表示されます。

6.

FireFox ブラウザ プラグイン Firebug