September 17, 2004

CSS語法教學攻略篇_[Andyliu.Desing]

標準語法大整理 ▍CSS 標準語法大整理 [ Version:1.1 Power by Andy Liu . ]
█ 事前準備:
文章用色說明:紅字:語法的指令 綠字:指令的參數 紫字:語法註解 昨天將CSS「邊框」的語法整理好之後(已經放在▍留言區域大動工(含表單設計) [ Version 2.0 ]這篇教學裡面 ),今天想一想,乾脆來將CSS的標準語法作一次的整理好囉!也方便大家以後查詢指令方便。(當然我也很需要^^) 整理的CSS語法包括下列幾種:
  • 背景控制
  • 邊框控制
  • 文字控制
  • 文字連結控制
  • 滑鼠樣式控制
  • 方框控制(邊界、欄位間距)
PS 如果你不清楚語法究竟要怎樣加入或設定?請見文章最下面的「實際操作」。

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


/* 語法開始 */

body{ /* body 是可以依照需要作改變的,下面的內容才是重要的! */ background-image:url(圖片位址); /* 圖片連結位置 */ background-attachment:fixed; /* 圖片位置是否要固定 */ background-repeat:no-repeat; /* 圖片是否要重複顯示 */ background-position:right; /* 圖片對齊格式 */ width:400px; /* 文字區塊的寬度 */ }
  1. /* XXX */(註解):註解幫助自己看懂,這部分程式不會執行!XXX可以自行填寫!

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

  3. background-image(背景影像):看你的圖片位址在何處就怎麼寫!只要填在url()的()裡面即可!

  4. background-attachment(背景附著):在這裡你可以決定背景圖片的位置。 屬性有:scroll:隨著捲軸捲動 inherit:繼承之前的設定 fixed:固定不動

  5. background-repeat(背景重複):看看背景圖片是不是要重複顯示。 屬性有:repeat:重複顯示 no-repeat:不重複顯示 repeat-x:只在X軸重複顯示 repeat-y:只在Y軸重複顯示

  6. background-position(背景位置):決定背景要置中、靠左、靠右的設定。 屬性有:left:靠左對齊 center:置中對齊 right:靠右對齊 top:向上對齊 bottom:向下對齊 inherit:傳統繼承(預設)

  7. width(寬):文字區塊的寬度 (可以不設定,系統會自動設定大小)

  8. 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; /* 邊框顏色 */ }
  1. XXX:請各位先注意XXX的部分,這裡XXX代表著是邊框的上下左右。 屬性有:top:上方 bottom:下方 left:左邊 right:右邊
  2. Width(寬):邊框寬度。屬性有:N px:像素 N pt:點 N in:英吋 N %:百分比 (N為大小,必須為正整數)
  3. Style(樣式):邊框樣式。屬性有:dotted:點狀線 dashed:虛線 solid:實線 double:雙實線 groove溝道狀 ridge山脊狀inset凹陷狀 outset凸起狀
  4. 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; /* 文字對齊方式(垂直) */ letter-spacing: 120%; /* 單字間距 */ word-spacing: 120%; /* 字母間距 */ text-indent: 10px; /* 文字縮排 */ }
  1. color(顏色):設定字體顏色。屬性為:color:#XXXXXX (XXXXXX 為顏色代碼)
  2. font-family(文字字型):設定文字字型。屬性為:font-family:"XXX" (XXX為字體顏色)
例如要用新細明體就是:font-family:"新細明體" ★注意:你所設定的字型必須對方的電腦也有這樣的字型,當別人在瀏覽網頁時,才能正常顯示喔!
  1. font-size(文字大小):設定文字大小。屬性有:N px:像素 N pt:點 (N必須為正整數)
  2. font-style(文字樣式):設定文字樣式。屬性有:normal:正常 italic:斜體 oblique:偏斜體
  3. line-height(文字行高):設定文字行高。屬性有:N %:百分比 (100為正常值 150 就是1.5倍 依此類推) N px:像素 N pt:點 (N必須為正整數)
  4. font-weight(文字粗細):設定文字粗細。屬性有:normal:正常 bold:粗體 bolder:特粗 細體:lighter 另外你也可以直接設定為:font-weight: N; (N為正整數 起始值為100)
  5. font-variant(文字變形):設定文字變形。屬性有:normal:正常 small-caps:小型大寫字.
  6. text-transform(文字大小寫):設定文字大小寫。屬性有:capitalize:字首大寫 uppercase:全部大寫 lowercase:全部小寫
  7. text-decoration(文字裝飾):設定文字裝飾。屬性有:underline:底線 overline:上端線 line-through:刪除線 blink:文字閃爍 none:無線(亦可刪除連結底線)
  8. vertical-align(上下標字型):設定上下標字型。屬性有:super:上標字 sub:下標字
  9. text-align(文字對齊)決定 文字水平對齊方式。屬性有:left:靠左對齊 center:置中對齊 right:靠右對齊
  10. vertical-align(垂直對齊):決定 垂直對齊方式。屬性有:top:向上對齊 bottom:向下對齊 inherit:傳統繼承(預設)
  11. letter-spacing(單字間距 )設定單字間距。屬性有:N %:百分比 (100為正常值 150 就是1.5倍 依此類推) N px:像素 N pt:點 (N必須為正整數)
  12. word-spacing(字母間距):

    74推薦此文章
    Today's Visitors: 3 Total Visitors: 84117
Personal Category: 網誌教學 Topic: creation / design
[Trackback URL]
1 2 3 4 Next
  • 【。感動是因為真實。】 at September 5, 2005 02:42 PM Trackback | prosecute
  • -- 超 詳 細 -- 本篇文章引用自此

  • CSS語法 【心情隨記】 at October 10, 2005 01:18 PM Trackback | prosecute
  • 最近開始想要好好玩一下blog了這麼一來學習CSS語法就變成不可避免的了參考了許多BBS及BLOG之後,終於給我找到一個相當詳盡的說明了非常感謝此網誌的

  • CSS教學 【chang_inzaghi】 at December 6, 2005 11:19 AM Trackback | prosecute
  • 最近開始想要好好玩一下blog了這麼一來學習CSS語法就變成不可避免的了參考了許多BBS及BLOG之後,終於給我找到一個相當詳盡的說明了非常感謝此網誌

  • CSS教學 【chang_inzaghi】 at December 6, 2005 11:33 AM Trackback | prosecute
  • 最近開始想要好好玩一下blog了這麼一來學習CSS語法就變成不可避免的了參考了許多BBS及BLOG之後,終於給我找到一個相當詳盡的說明了非常感謝此網誌

  • CSS教學 【chang_inzaghi】 at December 6, 2005 11:41 AM Trackback | prosecute
  • 本篇文章引用自此

  • css語法//* 【﹡ 賓 a 心情札記 //】 at January 3, 2006 09:56 PM Trackback | prosecute
  • 本篇文章引用自此

  • css 【* ~ ㄌㄚ˙ 來屬於我的網誌天地囉 ~ *】 at March 6, 2006 01:15 AM Trackback | prosecute
  • 本篇文章引用自此 超讚的教學說明!!

  • CSS 標準語法大整理 【Amy & Jazz\'s LoVe Life】 at April 7, 2006 08:45 AM Trackback | prosecute
  • 本篇文章引用自此

  • CSS表準語法 【天橋上的黑色日記本】 at April 14, 2006 08:54 PM Trackback | prosecute
  • http://www.wretch.cc/blog/trackback.php?blog_id=tjliu&article_id=889860

  • ∮語法 【♥ 旋轉 ▒ ▒ ▒】 at June 14, 2006 07:30 PM Trackback | prosecute
  • 本篇文章引用自此

  • .. 【快樂.憂愁.悲傷.痛苦.全都在這裡.】 at July 23, 2006 09:09 PM Trackback | prosecute
  • 本篇文章引用自此

  • CSS語法教學 【萌え!萌元素收集站】 at August 3, 2006 01:42 PM Trackback | prosecute
1 2 3 4 Next

Reply
1 2 3 4 5 6 7 8 9 10 Next
  • 1樓

    1樓搶頭香

    好詳細喔^^,超棒
    我會常常來參考的~
    感恩~

  • ukyo at September 17, 2004 02:21 PM comment | Homepage
  • 2樓

    2樓頸推

    Thank!
    如果有發現錯字還是錯誤在告訴我喔!

  • tjliu at September 17, 2004 09:36 PM comment | email Homepage
  • 3樓

    3樓坐沙發

    加油加油..
    寫的很詳細歐~

  • DIESEL6945 at September 18, 2004 10:07 AM comment | email Homepage
  • 4樓

    福樓

    Thank^^

  • tjliu at September 18, 2004 10:12 AM comment | email Homepage
  • 5樓

    專業的5樓

    哇哇
    猴塞雷

  • LION at September 23, 2004 10:16 PM comment | Homepage
  • 6樓

    6樓

    你好
    請問一下這語法也可以用在BLOGGER系統裡面嗎?

  • 黃色小鐵人 at September 24, 2004 10:43 PM comment
  • 7樓

    7樓

    當然拉!CSS語法是通用的^^

  • tjliu at September 24, 2004 11:10 PM comment | email Homepage
  • 8樓

    8樓

    老實講覺得每次來都會學到不少東西。
    雖然有一些是已經會的,但仍然可以學到沒學過的
    可謂是人上有人
    只可惜我的懶人個性告訴我,我的網址這樣就夠了
    否則我也想多花點力氣去搞...
    還是非常感謝你熱心的教學
    看到你的網誌都會覺得心曠神怡...

  • cheepman at September 26, 2004 02:20 AM comment | Homepage | prosecute
  • 9樓

    9樓

    謝謝你喔!
    其實太過花俏也不好不是嗎?
    重要的還是內容的部分阿!^^

  • tjliu at September 26, 2004 06:31 PM comment | email Homepage | prosecute
  • 10樓

    10樓

    我又來撒尿了

    寫的很好耶...

    看不出來你是個頑皮的小孩

  • 王同學 at October 5, 2004 08:49 PM comment
  • 11樓

    11樓

    我大概知道你是誰囉~
    不過你怎麼會晃到我這邊阿?

    對囉! 我怎麼不像頑皮的小孩阿?
    哈哈!應該是文藝青年嗎?

  • tjliu at October 6, 2004 07:51 AM comment | email Homepage | prosecute
  • 12樓

    12樓

    非常有用的教學,多謝分享!

  • jimmylin at October 30, 2004 12:16 PM comment | Homepage
  • 13樓

    13樓

    to jimmylin:

    在請多多支持囉!^^

  • tjliu at October 30, 2004 08:00 PM comment | prosecute
  • 14樓

    14樓

    哇我的天阿
    你把網誌改的像網站了
    厲害!

  • drurumi at October 31, 2004 12:01 AM comment | prosecute
  • 15樓

    15樓

    to drurumi:

    怎麼說呢?^^
    難怪有些人都分不清
    我的個人網站和這裡的分別

  • tjliu at October 31, 2004 09:14 AM comment | email Homepage | prosecute
  • 16樓

    16樓

    請問~
    按鈕按下去或滑鼠停在上面的時候
    背景和字型要改變的話
    語法要加在哪邊?
    input的下面嗎?

  • 水梨 at May 16, 2005 09:32 PM comment
  • 17樓

    17樓

    to 水梨:

    如果是連結字型要改變,就加在

    a {font-weight:normal; font-size:10pt; color:#298bd3; text-
    decoration:none;}
    a:link {font-weight:normal; font-size:10pt; color:#298bd3; text-
    decoration:none;}
    a:visited {font-weight:normal; font-size:10pt; color:#298bd3; text-
    decoration:none;}
    a:active {font-weight:normal; font-size:10pt; color:#0033cc; text-
    decoration:none;}
    a:hover {font-weight:normal; font-size:10pt; color:#0033cc; text-
    decoration:none;}

    這些語法裡面。
    看要那邊變化,就加在那邊!

    Input 使只表單欄位!

  • tjliu at May 16, 2005 10:20 PM comment | email Homepage | prosecute
  • 18樓

    18樓

    噢@@"
    謝謝解說啊>ˇ<

  • 水梨 at May 17, 2005 12:24 AM comment
  • 19樓

    19樓

    to 水梨:

    希望對你有幫助囉^^

  • tjliu at May 17, 2005 10:11 AM comment | email Homepage | prosecute
  • 20樓

    20樓

    請問大大:
    我的博客的文章內容回應的字體真的好小,也沒有區隔線來分隔上
    下的留言,請問該如何更改這兩個地方呢?
    請指導一下吧!謝謝您。

  • ironhao at May 27, 2005 11:20 PM comment | prosecute
  • 21樓

    21樓

    to ironhao:

    你可以嘗試修改 .comments-body {}
    這個部分,下面我附上我的原始碼,你再參考看看!

    .comments-body {
    font-weight:normal;
    font-size:small;
    background:#fff;
    padding-bottom:10px;
    color:#333333;
    line-height:140%;
    padding-top:10px;
    border-bottom:#999 1px dotted;
    font-family:"Times New Roman", Times, serif;
    }

  • tjliu at May 27, 2005 11:53 PM comment | email Homepage | prosecute
  • 22樓

    22樓

    謝謝tjliu的熱情指導,已經解決問題了。
    再若若的請教一下:
    日誌如果要用網址連結其他網站,要用哪個語法才會另開一個視
    窗,而不會開在原本那個網頁裡面呢?
    三Q。。。

  • ironhao at May 28, 2005 09:27 AM comment | prosecute
  • 23樓

    23樓

    to ironhao:

    在HTML語法裡面

    <a href="連結網址">連結顯示文字</a>
    你在這個語法當中加上 target="_blank"
    如下面

    <a href="連結網址" target="_blank">連結顯示文字</a>

    這樣即可以讓連結開在新的視窗!

  • tjliu at May 28, 2005 10:47 AM comment | email Homepage | prosecute
  • 24樓

    24樓


    太感謝你啦
    真是我等文盲的救世主。。。

  • ironhao at May 28, 2005 03:11 PM comment | prosecute
  • 25樓

    25樓

    to ironhao:

    說的太誇張了喔!不用這麼客氣^^

    有空多多留言喔...

  • tjliu at May 28, 2005 03:17 PM comment | email Homepage | prosecute
  • 26樓

    26樓

    對我這程式白痴來說
    你真是神ㄟ~
    從小布那連過來
    現在正在學作網頁
    有問題的話要請你多多指教喔

  • dorishu505 at May 30, 2005 12:13 PM comment | prosecute
  • 27樓

    27樓

    to dorishu505:

    OK~歡迎你的到來^^

  • tjliu at May 30, 2005 12:38 PM comment | email Homepage | prosecute
  • 28樓

    28樓

    嗯...
    我想請問一下 如果要讓背景可以整張展開要怎麼用?
    一直沒有人可以給我這個解答...
    拜託告訴我好嗎?
    謝謝!!

  • wing0503 at June 4, 2005 02:47 AM comment | email | prosecute
  • 29樓

    29樓

    to wing0503:

    原則上
    如果你的圖片不夠到整個畫面大小的話
    在CSS背景的語法當中
    是只有提供「重複」、「不重複」的語法
    因為無名的是用CSS控制版面配置
    所以無法支援展開圖片的功能

    所以你的背景圖片一定要本來的大小就
    符合你要使用的...

  • tjliu at June 4, 2005 09:35 AM comment | email Homepage | prosecute
  • 30樓

    30樓

    不好意思~~
    我還是看不清楚超連結的底線要怎麼刪
    我已經試過1個多小時還是沒辨法成功>""<(快瘋了)

  • peggy at June 6, 2005 11:43 PM comment | email
1 2 3 4 5 6 7 8 9 10 Next
No one can comment

誰來收藏
Loading ...
unlog_NVPO 0