css使用小节

 什么是CSS?

CSS是Cascading Style Sheets的縮寫，我們中文稱為「串聯樣式表」CSS有甚麼好處？為甚麼要學呢？以下說明幾點你就會發現使用CSS的好處： 


■它能讓我們更精確的控制網頁版面的文字、背景、字型等...
■它能讓我們只修正一個CSS文件，便可同時更新眾多的網頁版面外觀及格式。
■它可以使html的文件內碼更精簡，縮小檔案下載的速度。
■適用於各種作業平台。

CSS串聯樣式表教學『文字屬性一覽』  
 
color : #999999 /*文字色彩*/
font-family : 細明體 /*文字字型*/
font-size : 9pt /*文字大小*/
font-style:itelic /*文字斜體*/
font-variant:small-caps/*小字體*/ 
letter-spacing : 1pt/*字間距離*/
line-height : 200% /*設定行高*/
font-weight:bold /*文字粗體*/
vertical-align:sub /*下標字*/
vertical-align:super/*上標字*/
vertical-align:top /*垂直向上對齊*/
vertical-align:bottom/*垂直向下對齊*/
vertical-align:middle/*垂直置中對齊*/
vertical-align:text-top /*文字垂直向上對齊*/
vertical-align:text-bottom/*文字垂直向下對齊*/ 
text-decoration:line-through/*加刪除線*/
text-decoration:overline /*加頂線*/
text-decoration:underline /*加底線*/
text-decoration:none /*刪除連結底線*/
text-transform : capitalize /*首字大寫*/
text-transform : uppercase /*英文大寫*/
text-transform : lowercase /*英文小寫*/
text-align:right /*文字靠右對齊*/
text-align:left /*文字靠左對齊*/
text-align:center /*文字置中對齊*/
text-align:justify /*文字分散對齊*/  
 


上方橘色垂直對齊方式用在表格範例說明：

<table border="0" width="100%" cellspacing="1" cellpadding="0" bgcolor="#FFFFFF" height="200">
    <tr>
      <td bgcolor="#F6F6F6" style="vertical-align:top"><img border="0" src="img/icon_bg.gif"></td>
      <td bgcolor="#F6F6F6" class="il" style="vertical-align:top">
      vertical-align:top 垂直向上對齊</td>         
    </tr>
    <tr>
      <td bgcolor="#F6F6F6" style="vertical-align:bottom"><img border="0" src="img/icon_bg.gif"></td>
      <td bgcolor="#F6F6F6" class="il" style="vertical-align:bottom">
      vertical-align:bottom 垂直向下對齊</td>         
    </tr>
  </table>


vertical-align:top 垂直向上對齊

vertical-align:bottom 垂直向下對齊

文字屬性範例：

<style type=text/css>
<!--
body{
font-family : 細明體 ; /*文字字型*/
font-size : 9pt ;/*文字大小*/
color : #993366 ; /*文字色彩*/
letter-spacing : 2pt ;/*字間距離*/
line-height : 300% ;/*設定行高*/
text-transform : capitalize; /*首字大寫*/
text-align:center; /*文字置中對齊*/
}
-->
</style>
CSS串聯樣式表教學『清單樣式屬性一覽』  
 
list-style-type:none /*不編號*/
list-style-type ecimal /*阿拉伯數字*/
list-style-type:lower-roman /*小寫羅馬數字*/
list-style-type:upper-roman /*大寫羅馬數字*/
list-style-type:lower-alpha /*小寫英文字母*/
list-style-type:upper-alpha /*大寫英文字母*/
list-style-type isc /*實心圓形符號*/
list-style-type:circle /*空心圓形符號*/
list-style-type:square /*實心方形符號*/
list-style-image:url(dot.gif) /*圖片式符號*/ 

清單樣式範例：  
這裡是 

小寫英文字母 

項目符號範例 
 <ol style="list-style-type:lower-alpha">
<li>這裡是</li>
<li>小寫英文字母</li>
<li>項目符號範例</li>
</ol>  
這裡是 

空心圓形 

項目符號範例 
　  <ul style="list-style-type:circle">
<li>這裡是</li>
<li>空心圓形</li>
<li>項目符號範例</li>
</ul>  
這裡是 

圖片式符號 

項目清單範例 
 <ul style="list-style-image:url(img/dot.gif)">
<li>這裡是</li>
<li>圖片式符號</li>
<li>項目清單範例</li>
</ul>  
 

 


CSS串聯樣式表教學『背景屬性一覽』  
 
background-color:#F5E2EC /*背景色彩*/
background-image : url(image/bg.gif) /*背景圖片*/
background-attachment : fixed /*固定背景*/
background-repeat : repeat /*重複排列-網頁預設*/
background-repeat : no-repeat /*不重複排列*/
background-repeat : repeat-x /*在x軸重複排列*/
background-repeat : repeat-y /*在y軸重複排列*/
background-position : 90% 90% /*背景圖片x與y軸的位置*/ 

背景樣式範例： 
假設下方的一個框框都代表一個網頁，我們來看看背景的排列變化：妳可以直接使用框框內的語法在之間，前方的body就是代表在整個網頁定義背景樣式。 
 


↓將背景放在網頁x軸90% y軸90%的地方，且固定不隨者捲動

<style type=text/css>
<!--
body{
background-image : url(image/bg.gif); /*背景圖片*/
background-repeat : no-repeat; /*不重複排列*/
background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-attachment : fixed;/*固定背景*/
}
-->
</style>


↓將背景排列在網頁x軸，且固定不隨者捲動

<style type=text/css>
<!--
body{
background-image : url(image/bg.gif); /*背景圖片*/
background-repeat : repeat-x;/*在x軸重複排列*/
background-attachment : fixed;/*固定背景*/
}
-->
</style>


↓將背景排列在網頁y軸，且固定不隨者捲動

<style type=text/css>
<!--
body{
background-image : url(image/bg.gif); /*背景圖片*/
background-repeat : repeat-y;/*在y軸重複排列*/
background-attachment : fixed;/*固定背景*/
}
-->
</style>

 


CSS串聯樣式表教學『連結屬性一覽』  
 
A/*所有超連結*/
A:link/*超連結文字格式*/
A:visited/*瀏覽過的連結文字格式*/
A:active/*按下連結的格式*/
A:hover/*滑鼠移至連結*/ 

滑鼠游標樣式： 
cursor:crosshair 十字型 cursor:s-resize 箭頭朝下 
cursor:move 十字箭頭 cursor:e-resize 箭頭朝右 
cursor:help 加一問號 cursor:w-resize 箭頭朝左 
cursor:n-resize 箭頭朝上 cursor:ne-resize 箭頭朝右上 
scursor:nw-resize 箭頭朝左上 cursor:text 文字I型 
cursor:se-resize 箭頭斜右下 cursor:sw-resize 箭頭斜左下 
cursor:wait 漏斗 cursor:none  預設 
使用游標圖案(IE6) cursor:url("圖檔名.cur") 
 
 


連結樣式範例一之文字屬性： 
接下來的範例我們來套用"文字屬性"來做超連結的效果
 

<style type=text/css>
<!--
A{font-size : 9pt; /*文字大小*/
text-decoration:none;/*刪除連結線*/}
A:link/*超連結*/ 
{color : #999999 ; /*文字色彩*/}                                       
A:visited/*瀏覽過的超連結*/
{color : #999999 ; /*文字色彩*/}                                      
A:active/*按下連結*/ 
{color : #999999 ; /*文字色彩*/}                                 
A:hover/*滑鼠移至連結*/ 
{cursor:s-resize;/*滑鼠指標樣式*/
color : #000000 ; /*文字色彩*/
font-weight:bold; /*文字粗體*/
text-transform : uppercase; /*英文大寫*/}
-->
</style>

連結樣式範例二之邊框屬性： 
在來的範例我們來套用"邊框屬性"來做超連結的效果

<style type=text/css>
<!--
A{font-size : 10pt; /*文字大小*/
text-decoration:none;/*刪除連結線*/}
A:link/*超連結*/ 
{color : #999999 ; /*文字色彩*/}                                       
A:visited/*瀏覽過的超連結*/
{color : #999999 ; /*文字色彩*/}                                      
A:active/*按下連結*/ 
{color : #999999 ; /*文字色彩*/}                                 
A:hover/*滑鼠移至連結*/ 
{cursor:se-resize;/*滑鼠指標樣式*/
color : #000000 ; /*文字色彩*/
border : 1px dotted #cc3300 ; /*文字框線*/}
-->
</style>


連結樣式範例三之立體按鈕效果：

單純的文字連結，只用CSS就可以變成特別的立體按鈕，width: 2cm; /* 連結寬度範圍 */，代表連結文字的寬度範圍，就是說按鈕效果的大小，如果你不設定這行按鈕就會依你的連結文字多與少而變得不規則，複製下方語法於之間，你就會發現網頁所有連結都會變成立體按鈕喔!很神奇吧!


<style type=text/css>
<!--
A/*所有超連結*/
{
font-family:細明體;/* 文字字型 */
color: #ffffff;/* 文字色彩 */
font-size:9pt;/* 文字大小 */
width: 2cm; /* 連結寬度範圍 */
line-height: 13pt; /* 行高 */
text-align: center; /* 水平置中 */
text-decoration: none; /* 刪除底線 */
background-color: #E8BBD1; /* 背景色彩 */
border-top: 2px solid #E8BBD1; /* 上邊框色彩 */
border-left: 2px solid #E8BBD1; /* 左邊框色彩 */
border-right: 2px solid #cc6699; /* 右邊框色彩 */
border-bottom: 2px solid #cc6699; /* 下邊框色彩 */
}
A:link/*超連結*/
{color: #ffffff; }
A:visited /*瀏覽過的超連結*/
{color: #ffffff}
A:active /*按下連結*/
{color: #ffffff}
A:hover /*滑鼠移至連結*/
{
color: #000000;/* 文字色彩 */
border-top: 2px solid #cc6699; /* 上邊框色彩 */
border-left: 2px solid #cc6699; /* 左邊框色彩 */
border-right: 2px solid #E8BBD1; /* 右邊框色彩 */
border-bottom: 2px solid #E8BBD1; /* 下邊框色彩 */
}
-->
</style>
 
 

 

 


CSS串聯樣式表教學『『邊框屬性一覽』  
 
border-top : 1px solid #6699cc /*上框*/
border-bottom : 1px solid #6699cc /*下框*/
border-left : 1px solid #6699cc /*左框*/
border-right : 1px solid #6699cc /*右框*/
■若四邊你要設為相同寬的框線及色彩，就直接一起宣告，如下：
border: 1px solid #6699cc /*四邊框*/ 
 

邊框樣式運用範例：

■邊框虛線效果就把solid的地方改為dashed。
例如：border: 1px dashed #6699cc /*邊框*/

■框架設粗一點就改變1px設為2px以上。
例如：border : 2px dashed #6699cc /*邊框*/

■每一個#6699cc都代表每一邊框的色彩你可設為不同色彩。

以下為邊框其他樣式：

border : 1px solid/*實線框*/ 

border : 3px double/*雙線框*/ 　 

border : 3px groove/*立體內凸框*/

border : 3px ridge/*立體浮凸框*/

border : 3px inset/*凹框*/

border : 3px outset/*凸框*/

邊框樣式範例解說： 
多行表單邊框樣式範例↓  

<style type=text/css>
<!--
textarea
{border-top : 2px dotted #6699cc;
border-bottom : 2px dotted #6699cc ;
border-left : 2px dotted #6699cc ;
border-right : 2px dotted #6699cc}
-->
</style>

表格邊框樣式範例↓

<style type=text/css>
<!--
table{border-top : 2px dotted #6699cc;
border-bottom : 2px dotted #6699cc ;
border-left : 2px dotted #6699cc ;
border-right : 2px dotted #6699cc}
-->
</style>

圖片邊框樣式範例

<img border="0" src="img/img_21.jpg" style="border: 2px solid #CCCCCC"> 
 


CSS串聯樣式表教學『表單樣式』  
 
一般常見的表單如下：
■<input type="text" name="T1" size="15">文字方塊
■<input type="submit" value="submit" name="B1">按鈕
■<input type="checkbox" name="C1">核取方塊
■<input type="radio" value="V1" checked name="R1">選擇鈕
■<textarea rows="1" name="S1" cols="15"></textarea>多行文字方塊
■<select size="1" name="D1"><option>選項1</option>
<option>選項2</option></select>下拉式功能表  
 

美化表單範例一：

<style type=text/css>
<!--
input,select,textarea
{
color : #999999; /*文字色彩*/
font-size : 9pt ; /*文字大小*/
background-color : #EFEFEF ; /*背景色彩*/
border-top : 1px double #EFEFEF ;/*上框*/ 
border-bottom : 1px double #CCCCCC  ;/*下框*/ 
border-left : 1px double #EFEFEF  ; /*左框*/
border-right : 1px double #CCCCCC  ; /*右框*/
}
-->
</style>


標籤元素邊界值  
 
設定標籤元素邊界值 
margin-top:10px; /*上邊界*/
margin-right:10px; /*右邊界值*/
margin-bottom:10px; /*下邊界值*/
margin-left:10px; /*左邊界值*/
margin:10px; /*四邊界一起宣告相同值*/
margin:10pt 20pt 0pt 15pt; /*宣告四邊不同值順序為上、右、下、左*/  
 
網頁邊界範例 
為甚麼要介紹這個呢?一般我們在製作網頁時，內容與邊界總會有距離，如果你想讓內容貼緊網頁邊緣用這個就對啦!!當然文字是比較不需要的，要讓表格貼緊呢？來看兩個範例  

<style type=text/css>
<!--
BODY{margin:0px;/*內容貼緊網頁邊界*/}
-->
</style>

 
 


標籤元素邊框空白值  
 
標籤元素內容和標籤元素邊框之間的空白設定 
padding-top:10px; /*上邊框留空白*/
padding-right:10px; /*右邊框留空白*/
padding-bottom:10px; /*下邊框留空白*/
padding-left:10px; /*左邊框留空白*/
padding:10px; /*四邊框留空白一起宣告相同值*/
padding:10pt 20pt 0pt 15pt; /*宣告四邊不同值順序為上、右、下、左*/
 
 

空白邊框屬性範例 
例如下方表格在儲存格內宣告邊框空白樣式


儲存格四邊空白設為style="padding:10pt"

儲存格四邊空白設為style="padding:25pt"

儲存格四邊空白設為style="padding:10pt 20pt 0pt 15pt"
 
 


表格重疊  
 
製作物件重疊效果必須加上position屬性，屬性值有：
static ：無定位
relative ：依物件左上角為基準點取相對位置
absolute ：依網頁左上角為基準點取絕對位置  
 


步驟一、複製語法貼於之間

<style type=text/css>
<!--
.tab{position:relative;top:10px;left:30px}
-->
</style>


步驟二、在你要位移的表格(表格二)標籤加入CLASS="tab" 
當然不只用在表格用在區塊<DIV>也可以!甚至於圖片都可以~ 
 


方法二■直接拷貝單獨宣告語法

<table border="1" cellspacing="0" width="100">
<td width="258">這是表格一
<table border="1" width="180" cellspacing="0" cellpadding="0" bgcolor="#C0C0C0" height="30" style="position:relative;top:10px;left:30px">
<tr><td width="100%">加入另一個表格叫表格二</td></tr></table></table>


主要就在這裡style="position:relative;top:10px;left:30px"

CSS串聯樣式表教學『圖片樣式』  
 
設定標籤元素與文字間的相對位置 
img{float:left} /*圖片靠左，文字圍繞在右方*/
img{float:right} /*圖片靠右，文字圍繞在左方*/
圖片框線運用 
img{border: solid 1px #999999}/*圖片都設為灰色框線*/
img{border:none}/*刪除網頁所有圖片框線*/  
 


運用範例： 
這就是文字圍繞
圖片右邊範例
單獨宣告的話要放在圖片標籤裡
例如：<img border="0" src="po.gif" style="float:left">  
這就是文字圍繞
圖片左邊範例
單獨宣告的話要放在圖片標籤裡 
例如：<img border="0" src="po.gif" style="float:right"> 
但要文字靠右要另外宣告文字樣式喔! style="text-align:right"