創作內容

0 GP

CSS 標準語法大整理

作者:Awesome│2009-12-06 09:29:35│巴幣:0│人氣:861
此篇為引用性質如有侵權請通知版主,版主將立刻刪除
 
--------------------------------------------------------------------------------
▓ 語法說明 -- 游標設定:
--------------------------------------------------------------------------------

/*游標*/
BODY {
cursor:url(游標檔圖片檔網址1)};
a:hover {
cursor:url(游標檔圖片檔網址2)};

body裡面放游標代表著一般時候的游標
hover裡面放游標代表當滑鼠移到超連結時候的游標
CSS的游標得用cur檔(靜態游標)、ani檔(動態游標)或ico檔,不支援gif、bmp、jpg檔案


--------------------------------------------------------------------------------
▓ 語法說明 -- 背景控制:
--------------------------------------------------------------------------------

/*背景控制*/

   body{

   background-image:url(圖片位址); /* 圖片連結位置 */
   background-attachment:fixed; /* 圖片位置是否要固定 */
   background-repeat:no-repeat; /* 圖片是否要重複顯示 */
   background-position:right; /* 圖片對齊格式 */
   width:400px; /* 文字區塊的寬度 */
}


/* XXX */(註解):註解幫助自己看懂,這部分程式不會執行!XXX可以自行填寫!

textarea(文字區塊):這個部分稱作CSS樣式定義類別,一般來說可以自己定義名稱,但是由於這裡我們是要定義HTML語法的標籤,所以是不能更改的!必須使用textarea。當然如果要定義<h1>,就改為h1!(★注意: 不用"<>")

background-image(背景影像):看你的圖片位址在何處就怎麼寫!只要填在url()的()裡面即可!
background-attachment(背景附著):在這裡你可以決定背景圖片的位置。
屬性有:scroll:隨著捲軸捲動 inherit:繼承之前的設定 fixed:固定不動
background-repeat(背景重複):看看背景圖片是不是要重複顯示。
屬性有:repeat:重複顯示 no-repeat:不重複顯示 repeat-x:只在X軸重複顯示 repeat-y:只在Y軸重複顯示
background-position(背景位置):決定背景要置中、靠左、靠右的設定。
屬性有:left:靠左對齊 center:置中對齊 right:靠右對齊 top:向上對齊 bottom:向下對齊 inherit:傳統繼承(預設)
width(寬):文字區塊的寬度 (可以不設定,系統會自動設定大小)
height(高):文字區塊的高度 (可以不設定,系統會自動設定大小)

  PS1  其餘在「textarea」裡面還能夠加上許多設定。例如邊線、文字顏色等等!因為部屬於這部分的討論範圍!暫時就不列出來!

  PS2 如果你不使用背景影像的話,只想用純顏色當背景時,可以將background-image(背景影像)用background-color(背景顏色)取代!但是盡量避免兩個語法同時使用!

     範例:background-color:#FF6600; 綠色的部分就是填上自己喜歡的顏色!


--------------------------------------------------------------------------------
▓ 語法說明 -- 邊框控制:
--------------------------------------------------------------------------------

/*邊框控制*/

/* 分成上下左右(4部分) 寬度樣式顏色(3部分) 總計12(4x3)行 */

body { /* body 是可以依照需要作改變的,下面的內容才是重要的! */

border-XXX-width: 1px; /* 邊框寬度 */
border-XXX-style: dotted; /* 邊框樣式 */
border-XXX-color: #0066FF; /* 邊框顏色 */

}

XXX:請各位先注意XXX的部分,這裡XXX代表著是邊框的上下左右。
屬性有:top:上方 bottom:下方 left:左邊 right:右邊
Width(寬):邊框寬度。屬性有:N px:像素 N pt:點 N in:英吋 N %:百分比 (N為大小,必須為正整數)
Style(樣式):邊框樣式。屬性有:dotted:點狀線 dashed:虛線 solid:實線 double:雙實線 groove:溝道狀 ridge:山脊狀inset:凹陷狀 outset凸起狀
Color(顏色):邊框顏色。屬性為:#XXXXXX (XXXXXX為顏色代碼)
/* 語法開始:寫法二 -- 精簡寫法,功用一樣 */

/* 只分成上下左右(4部分) 寬度樣式顏色並列在同一行程式 */

body {
border-XXX: width style color; /* 邊框 寬度 樣式 顏色 */
}

★注意:相關的語法大致和第一種都像同,只是寫法不一樣!假設我要設定上方邊框為寬度一像素、虛線、紅色,就可以寫成:

border-top: 1px dashed #FF0000; /* 邊框 寬度 樣式 顏色 */
/* 語法開始:寫法三 -- 最為精簡、但有限制 */
/* 使用時機:當上下左右、寬度、樣式、顏色都要設定一樣的時候 */

body {
border: width style color; /* 邊框 寬度 樣式 顏色 */
}

★注意:相關的語法大致和第二種都像同,只是這部分 border-XXX 改為 border 。因為此時我們已經不用在設定上下左右了!


--------------------------------------------------------------------------------
▓ 語法說明 -- 文字控制:
--------------------------------------------------------------------------------

/* 語法開始 */

body { /* body 是可以依照需要作改變的,下面的內容才是重要的! */

color: #006699; /* 文字顏色 */
font-family:"Times New Roman"; /* 文字字型 */
font-size: 14pt; /* 文字大小 */
font-style: normal; /* 文字樣式 */
line-height: 1.5px; /* 文字行高 */
font-weight: bold; /* 文字粗細 */
font-variant: normal; /* 文字變形 */
text-transform: capitalize; /* 文字大小寫 */
text-decoration: underline overline line-through blink; /* 文字裝飾 */
vertical-align: super ; /*文字上、下標字*/
text-align: center; /* 文字對齊方式(水平) */
vertical-align: top; /* 文字對齊方式(垂直) */

<st></st>


--------------------------------------------------------------------------------
▓ 語法說明 -- 卷軸設定:
--------------------------------------------------------------------------------
body{
SCROLLBAR-FACE-COLOR: 色碼; /*設定軸面顏色*/
SCROLLBAR-HIGHLIGHT-COLOR:色碼; /*設定軸面三角左邊顏色*/
SCROLLBAR-SHADOW-COLOR: 色碼; /*設定軸面三角右邊顏色*/
SCROLLBAR-3DLIGHT-COLOR: 色碼; /*設定左立體邊顏色*/
SCROLLBAR-DARKSHADOW-COLOR: 色碼; /*設定右立體面顏色*/
SCROLLBAR-ARROW-COLOR: 色碼; /*設定箭頭的顏色*/
SCROLLBAR-TRACK-COLOR: 色碼; /*設定軸軌的顏色*/
}
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=120725
Some rights reserved. 姓名標示-非商業性 2.5 台灣

相關創作

留言共 1 篇留言

假柏斯
好久不見了朋友 還記得我嗎 最近我有想玩天堂m 你要和我一起玩嗎 http://lineage-m.cf

12-06 14:02

我要留言提醒:您尚未登入,請先登入再留言

喜歡★zoyrtglk 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:聽聽這些歌吧^_0... 後一篇:CSO【攻略】基本指導&...

追蹤私訊切換新版閱覽

作品資料夾

girl950422會通靈的人們
有沒有人有解夢的能力啊......看更多我要大聲說昨天14:33


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】