追蹤
快樂整年- Happy New Year
關於部落格
  • 142449

    累積人氣

  • 0

    今日人氣

    10

    追蹤人氣

css基本語法-flash8

中文版 - Macromedia Flash Player 8 JAVA 軟體免費下載 【什麼是HTML? 】 HTML是一種網頁的格式,全名為 HyperText Markup Language,是一種網頁設計的標準語言,包含了很多特殊的標記,讓瀏覽器解讀,然後顯示在螢幕上。對於一些舊瀏覽器,支援的標籤越少。至今,HTML以出了第四個版本。而審核方面則由W3C(負責WWW發展的委員會)負責了。 ----------------------------------------------------------------------------- 【CSS是什麼碗糕?】要講CSS之前,先要概略知道HTML 4.0這個東西。HTML 4.0大家或多或少有有聽說過吧!有人亦稱之為Dynamic HTML(動態語言)。工友在這裡簡單的介紹一下這東西,Dynamic HTML實際上包含了三大要素,那就是「傳統的HTML」、「Script語言」以及「CSS」,換言之,您要完全操作Dynamic HTML語言,那麼以上三項要素您都要相當熟捻才行。 「傳統的HTML」,也就是所謂的HTML3.2,在上一個系列的教學文章已經涵蓋其大部分,若是您還不太熟,建議您K完後再來看這一系列文章比較好一點。至於,「Script語言」則是指javascript或是VBScript語言,這部份若是想學好,那又要花一番工夫了!等到這一系列寫到一個段落後,我們再來謝謝這方面的文章吧!而剩下的「CSS」就是這一系列文章要說明的玩意兒啦! CSS是「Cascading style Sheets」的縮寫,Cascading是串接、連接之意;style則是風格、款式之意;Sheets則是一頁紙、表的意思。所以呢,要以中文來解釋CSS的話呢,您可以稱之為「串接樣式表」。很奇怪的一串名詞對不對,其實,當您CSS用習慣後,您會發現它會這樣被稱呼還蠻貼切的。【CSS能做什麼?】 CSS能做什麼?可做的事可多著,不過,以最簡單的方式來比喻其功能的話,我們可以說它是網頁的美容師,凡是網頁上看得到的文字、圖片、表格、表單都有它發揮的空間,文字方面,您可以利用CSS來隨意設定字體大小(不再像HTML最大只能到size=7而已),設定行距、間距、去除連結底線…等。 您也可以利用CSS將圖片或文字精準的定位在網頁上的某一個地方,更可以更改表單、表格的框線、顏色…等,您甚至可以更改滑鼠形狀或是做出類似簡報的轉場效果。這些只是工友隨便舉幾個效果而已,實際上,若是要認真講解,是可以寫成一本書的。所以,今天這一系列工友盡量以一些實用的技巧,來介紹CSS,若是看完這篇教學後,還覺得意猶未盡的讀者,可以自行去買相關的書籍來閱讀喔!

基本語法====================================
<style type=text/css>
<!--
body,table{
color : #999999 ; /*文字色彩*/
font-family : 細明體 ; /*文字字型*/
font-size : 9pt /*文字大小*/
}
-->
</style>

文字屬性一覽================================
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/*上標字*/
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 /*文字置中對齊*/

背景語法===================================
<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>

背景屬性一覽================================
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軸的位置*/

連結語法====================================
<style type=text/css>
<!--
A:link/*超連結*/
{color : #999999 ; /*文字色彩*/}                                      
A:visited/*瀏覽過的超連結*/
{color : #999999 ; /*文字色彩*/}                                     
A:active/*按下連結*/
{color : #999999 ; /*文字色彩*/}                                
A:hover/*滑鼠移至連結*/
color : #000000 ; /*文字色彩*/
font-weight:bold; /*文字粗體*/
-->
</style>

連結屬性一覽==================================
A/*所有超連結*/
A:link/*超連結文字格式*/
A:visited/*瀏覽過的連結文字格式*/
A:active/*按下連結的格式*/
A:hover/*滑鼠移至連結*/
text-decoration:none;/*刪除連結線*/}
{cursor:s-resize;/*滑鼠指標樣式*/
font-weight:bold; /*文字粗體*/
border : 1px dotted #cc3300 ; /*文字框線*/}

滑鼠指標樣式一覽===============================
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:nono  預設

彩色捲軸=======================================
<style type=text/css>
<!--
BODY{
SCROLLBAR-FACE-COLOR: #FFFFFF; /*捲軸顏色*/
SCROLLBAR-HIGHLIGHT-COLOR: #336699; /*捲軸左與上內邊框*/
SCROLLBAR-SHADOW-COLOR: #336699;/*捲軸右與下內邊框*/
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; /*捲軸左與上外邊框*/
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;/*捲軸右與下外邊框*/
SCROLLBAR-ARROW-COLOR: #336699; /*捲軸箭頭*/
SCROLLBAR-TRACK-COLOR: #FFFFFF; /*捲軸底色*/
}
-->
</style>

刪除捲軸=====================================
<style type=text/css>
<!--
BODY{overflow:hidden; /*刪除捲軸*/}
-->
</style>

<style type=text/css>
<!--
BODY{overflow-x:hidden; /*刪除水平捲軸*/}
-->
</style>

<style type=text/css>
<!--
BODY{overflow-y:hidden; /*刪除垂直捲軸*/}
-->
</style>

滑鼠移過連結位移============================
<style type="text/css">
<!--
a:hover{position:relative;top:1px;left:1px;}
-->
</style>
說明:
在a:hover 滑鼠移至連結的屬性做文字位置的變化
top:1px;left:1px 位移數值
right:1px;bottom:1px 可改變位移方向

表格透明效果================================
<style type=text/css>
<!--
table{FILTER: Alpha(opacity=60);/*表格透明*/}
-->
</style>
說明:
opacity=60 設定透明度(值越小越透明)

相簿設定
標籤設定
相簿狀態