創作內容

83 GP

CSS 標準語法大整理

作者：夏日薔薇│2007-09-01 13:38:48│巴幣：10│人氣：13134

噗
剛剛才知道小屋又多了個CSS語法編輯功能，感覺小屋越來多元化，越好玩囉
丟幾個常用的CSS語法上來與大家分享。

不知站方有沒有開放背景音樂在小屋內?
嗯~星期一來去問問XD
有開放話我在將放置背景音樂教學丟上來
--------------------------------------------------------------------------------
▓ 語法說明 -- 游標設定：
--------------------------------------------------------------------------------

/*游標*/
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: 色碼; /*設定軸軌的顏色*/
}

喜歡 83 收藏 409 引用 2 留言推上首頁檢舉

引用網址：https://home.gamer.com.tw/TrackBack.php?sn=504152
Some rights reserved. 姓名標示-非商業性 2.5 台灣

相關創作

同標籤作品搜尋：|CSS教學|

留言共 110 篇留言

嗯：
背景音樂好像還沒開放......

09-01 13:46

水野天成：
本篇留言已被〔janeyang〕刪除

09-01 13:50

夏日薔薇：
XD拍寫不小心刪到09-01 20:24

クラリス：
看起來是不錯用的東西啊=ˇ=
雖然說早就會了XD

09-01 14:01

cfevenfish：
建議語法和說明的文字顏色可以改成不一樣的
這樣可以更容易教會想學習的人喔 XDD

感謝教學！

09-01 15:23

夏日薔薇：
有空再用-.-09-01 20:21

卡爾．Ｊ．山德羅：
看起來不錯
改天來試試
GP給予^^
我可以順便收藏起來嗎^^?

09-01 16:27

夏日薔薇：
歡迎~好東西要與好朋友分享^^~09-01 20:29

悠之柚：
@~@看起來很好用…借收藏一下嘿，謝謝~

09-01 17:59

遺忘：
看起來好迷的東西..帶回家好好收藏@@謝謝分享..

09-01 18:12

夏日薔薇：
歡迎~好東西要與好朋友分享^^~09-01 20:29

小小喵兒：
不推就說不過去囉~

09-01 18:47

昨日夢醒今日醉：
大人，我要推走了((ヾ(○･ω･)ﾉ推

09-01 20:19

夏日薔薇：
歡迎~好東西要與好朋友分享^^~09-01 20:30

Kakugentei：
寫的真完整，讓我收藏一下咩

09-01 20:50

啦啦噗：
收藏︿︿～～推～

09-01 21:07

威爾伊斯麥海德：
感謝分享，收藏加推推

09-01 21:12

弘羽：
收藏加推

09-01 21:46

弘羽：
背景試出來了。請問哪裡可以選找自己喜歡游標圖樣呢？

09-01 22:18

伊比魯斯：
感謝教學。

09-01 22:22

瑜：
謝謝分享
好東西與好朋友分享
我帶回家了喔!ＸＤＤ

09-02 03:02

瑜：
差點忘了呢ＸＤＤ

09-02 03:04

Carnival〞喵：

感謝分享

讓我更加了解 ˋˇˊ

( 快 .. 快點打包回家 ˇ／／／ˇ　收藏+ )

09-02 03:08

芷諾：

那個請問，為何移到超連結時的滑鼠游標，

我放上與正常狀態下時同樣的游標，

卻不會顯示移到超連結時的滑鼠游標呢？

正常狀態下時的游標有顯示的說？

(感謝大大您的分享。)

09-02 03:28

夏日薔薇：
要有兩張不一樣的游標檔圖檔才可以喔^^

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

09-02 12:15

成小玉：
感謝!!

09-02 05:43

＊氣質淑女熊吉妹＊：
感謝分享~!!
原來巴哈有提供CSS修改呀~(遲鈍...剛才發現XD)

09-02 05:51

冷焰封情：
好棒的文章^^
真的受用無窮^^
也請讓小的收藏^^
謝謝大大的用心與分享^^

09-02 06:06

阿葉神：
感謝分享呀！
我偷走了！（囧

不過我現在也在找方法貼上背景音樂

我在想是不是取消此設定囧

09-02 06:14

letmedo：
謝謝分享摟~~^_^~

09-02 07:17

嵐檒：
背景音樂好像還沒開放......

09-02 09:10

Minnie：
謝謝分享^O^

09-02 15:12

窮途末路的灰塵：
感謝分享

09-02 16:31

小剛使出喬伊小姐：
好複雜

不過不得不推+收藏@@

09-02 16:38

J i l l ~*：
要去哪貼這些語法 = =?

09-02 17:08

夏日薔薇：
佈置小屋>CSS語法09-02 17:14

愛彌莎：
那想問看看，有沒有辦法讓滑鼠移到按鈕的時候可以改變造型這樣@@
還是根本沒開放?

09-02 17:19

夏日薔薇：
a:hover {
cursor:url(游標檔圖片檔網址)};
09-02 18:21

愛彌莎：
唔...不是這種的@@
是指移到"按鈕" 連結滑鼠變化的可以
就是有些按鈕會回到原始的"HAND" 讓我很苦惱阿，不能統一格式怪怪的Q"Q

09-02 19:52

夏日薔薇：
將你的語法+圖檔連結丟上來看看吧@@~09-02 20:40

雷卡‧路迪‧亞斯：
是要將網址放在哪呢??

太久沒用css語法的東西，所以看不懂.....

09-02 21:07

夏日薔薇：
正常的~因為大家都一樣XD09-03 17:33

夏日薔薇：
==第一行請自動忽略XD第一行要回給下面的朋友才對

background:url(網址放這邊)
括弧要留喔09-03 17:36

愛彌莎：
A:hover{color:#37B7FF;CURSOR:n-resize;text-decoration:none;}

可是有些地方會變箭號，有些卻還是變手ˊˋ
唔..應該是沒開放修改這個吧QQ"

以你的版看，我點留言的按鈕，滑鼠也是變手
點其他的文字連結，就還是洋蔥這樣

09-02 21:18

夏日薔薇：
正常的~因為大家都一樣XD09-03 17:34

誠實豆沙包：
複雜研究中

先收藏喔~~~~

09-02 23:07

誠實豆沙包：
求救...

我只有連結時有變圖案,一般狀況下則沒變

請問body 大小寫有關係嗎?需要空格嗎?

09-03 00:09

誠實豆沙包：
嗯...突然又可以了= =

09-03 00:29

夏日薔薇：
囧09-03 17:32

星名皇：
@@css語法一w一

我收藏拉XD

做游標做游標～～～

做好了ＸＤ｜｜｜

09-03 07:27

哎呀芽：
好棒好棒!先收再說:D

09-03 13:40

Glass：
啊啊，太棒了

直接打包帶走，會不會被抗議順手牽羊？　=　=+

09-03 15:28

夏日薔薇：
不會^^09-03 17:31

水靈雲兒：
感謝分享~≧▽≦

我收走囉~！！慢慢研究^_^~

09-03 16:48

白菊：
感謝分享

打包收藏^^

09-03 17:10

Secret：
感謝分享^^~

09-03 21:55

沁〃娃娃：
卷軸設定是什麼?

09-04 00:42

夏日薔薇：
就是將您的卷軸改成您要的顏色09-05 16:26

焱雁：
推推~~
收藏起來囉^^"

09-04 10:48

糖水‧不加糖：
讚

09-04 21:17

小屋因故停止更新：
很~~~棒~~~
GJ呀~厲害極了
收藏^^

09-05 00:45

雪落封塵：
偷偷抱走　≧ω≦　
再偷偷啾一個　（．◎．）
冏　嘴巴太大　>"<
再來一次 (●3●)

09-05 18:18

枕小路：
感謝你的教學~獲益良多

09-05 22:29

叫我鈺姊：
你說的好清楚
我看的好模糊啊啊啊~~(毆)

不管了拉~先收藏再說XD

09-06 16:53

夏日薔薇：
有笑點XD09-06 17:25

NexT：
感謝您的整理，讓我懂了不少‧‧

09-06 17:14

君翔：
推文順便做打包( ′▽`)-o圖

09-06 21:47

木壴寸：
我拿去收藏囉!

09-07 06:12

憐嶽：
感謝分享＞口＜！

不過還是有一些看不懂＝　＝＋

先借走啦ＸＤ！

09-07 09:05

✿：
感謝分享收藏囉^^
還有加好友ˊ口ˋ

09-08 17:05

38°C的雪娘：
請問"勳章"這二的文字的顏色怎麼改呢?
沒看到設定耶?

09-08 19:40

雪藏黃貓：
感謝分享
借收藏囉!

09-08 22:00

阿爾比雷歐：
蠻詳細的教學在嚇就先吃下拉XD
另外回覆上面有人提出的疑問關於背景音樂的問題!
在下前陣子也在找~!但是後來發現某網站上有這條說明!
CSS並不支援音樂播放語法~!這類的需要用到HTML語法內鑲!
而且CSS語法裡面是沒有<>這種語法的!
所以想要有背景音樂等等還是要等巴哈開放支援HTML語法才行喔QQ

09-11 10:58

夏日薔薇：
XD
應該不會開放了吧
板權問題09-11 15:04

小月：
多謝整理，讓我這個初學者了解不少XD
收藏一下~

09-12 13:52

*~雪球~*：
大大....能給一下如何在"我要留言"+圖圖的語法嗎?

09-15 19:38

偽。學姊：
部落格已經改了一段落才發現這篇><
我會收下來慢慢看的
謝謝您細心整理喔

09-22 00:24

Yanos：
太棒了~~~加收藏!!!!

09-27 23:47

日無光：
這東西真好
可是碰到了小小的疑問
就是
背景控制的背景圖片一直出不來
除了用巴哈的網址圖有出來
其他的相簿什麼一概出不來
怎麼辦

10-03 20:18

夏日薔薇：
外面的相簿有些是沒辦法當圖檔空間使用的
就像yahoo那樣10-05 16:25

秋姬絲茉茉：
好物~

10-03 23:10

上杉達也：
= ="

我想問一下..要把語法放在哪裡....

我果然不適合搞這個= =+

還是期待跟無名一樣有人提供作好的好了XD!

10-07 10:25

夏日薔薇：
小屋設定佈置小屋自訂面板管理小屋聯播付費資訊我的帳戶

自訂面板<=這裡10-08 19:55

天才小釣獸：
那請問捲軸的改變要貼在哪個目錄下呢？

另外背景呢？

大小要多少？

問題真多吼(=口="")

XDD

煩請解答囉XD

10-08 20:52

夏日薔薇：
貼在
/*－－－－－－－－－整體頁面設定－－－－－－－－－*/
下面
圖檔大小沒限制10-08 21:14

天才小釣獸：
還有邊框=口=~

差點忘記

另外滑鼠的是貼在

/*－－－－－－－－－整體頁面設定－－－－－－－－－*/

這裡咩？

10-08 20:53

夏日薔薇：
yes10-08 21:14

上杉達也：
那個麻0.....0

我想問一下要怎麼把喜歡的圖片寫成有網址的@@?

10-10 01:40

夏日薔薇：
找空間上傳@@10-11 12:50

公主‧公主：
讚

10-10 11:34

無心插柳柳業餘：
十分感謝︿︿～

10-11 14:43

蒼痕：
感恩　研究中　...

10-11 18:48

藍琉璃：
謝謝謝謝，有您的註解，做起自己家的裝潢來會更容易的。
萬分感激不盡。

10-18 09:58

吉米魂：
對初學的偶來說
真是太感動啦~~~~

10-21 18:21

桃之夭夭：
實用好文章~收藏ING~~

10-24 09:21

逆言：
很棒,最基礎的東西

10-27 16:07

居家型暗黑凶宅：
決對好文!!

10-28 00:21

蕭瑟印：
很棒喔我推~

11-01 01:25

花漓：
太強了..

11-04 19:57

黃橘子：
實用的css語法!!真是太棒了~~推啦

11-05 20:43

飛明神將：
推了帶走...

11-13 16:42

白夏光云：
收藏去！！

11-15 03:36

薇兒：
想請問薔薇大大
像這樣的語法要怎麼做呢
妳的部落閣點小屋首頁及個人部落閣
圖片會變成銀杏葉
我的小屋
那邊還是變成藍色底
這個要怎麼使用語法呢

還有一個問題就是
要像這樣回覆留言的分隔線的語法要怎麼做呢
點我看圖

麻煩大大為我解惑

11-19 00:48

薇兒：
再請問薔薇大大
今天好不容易玩會了小屋首頁及個人部落格的圖片
那麼
在勇造旁邊的小屋圖片該如何改呢
我的小屋

上方主圖我會改了
那麼勇造旁邊的圖該怎麼改呢
再度麻煩大大解惑了

11-19 03:22

Jigang：
謝謝分享XD

11-22 10:53

玖月：
有空也來佈置一下小屋=ˇ=

11-27 13:16

月♀°：
推一下囉~不推對不起自己!!

11-27 15:14

齊木黑昀☆QMA★：
別刪我= =
我只是路過的路人
因為最近在忙小屋
來參考資料的
你的資料我就不客氣的收下了
哇哈哈哈哈

12-22 03:29

混沌的六翼天使：
我不小心把右邊最新文章.今日訪客等的連結弄到最下面了.但我又不知是動到哪裡......是否能告訴我要在那裡還原以及如何還原回去?拜託!

12-24 02:14

混沌的六翼天使：
我弄回來了!抱歉!當我沒問...

12-24 11:22

亞蕾克希兒：
請問我也想在留言區弄張圖
相妳有棵聖誕樹在留言區
語法我這樣寫：
/*留言和回應區插圖*/
textarea {
background: url(http://i245.photobucket.com/albums/gg59/Claire5266/product_thumbphp.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 10px;
padding-right: 10px;
height:195px;
}
但是就是沒圖出來囧rz

12-30 19:42