噗浪CSS整理

呼......窗外陰雨綿綿，從上個週六（2010/3/06）傍晚開始，這天氣的轉變還真是快啊！原本短袖短褲上陣的我，隨著氣溫越來越低、風勢越來越強，先是加了一件長袖；後來又換上長褲；最後還得加件薄背心，才足以應付這惡劣的天氣（同時也為了預防感冒）。聽說又有新一波寒流即將來襲，噗友們出門在外，可要多加注意保暖，不要著涼感冒囉！^0^

咦？怎麼會提到這個？今天要和各位分享的是：《Plurk CSS語法教學》。其實說「教學」，對我而言，實在是太自不量力了，畢竟我不懂程式語言，以下我所分享的一切，都是網路上的先進大德、各路高手所熱情提供的，我只不過是收集過來，整理一番罷了。在「臉書」尚未在台灣造成風潮以前，噗友們對於「噗浪的CSS語法」的討論情形還算踴躍，不時有高手分享新的語法，讓噗浪的介面顯得更漂亮、更方便瀏覽。如今大家對於這方面的討論就沒這麼踴躍了，但還是有零星噗友（特別是新手），偶爾會有這方面的問題與困擾。所以今天就來做個《Plurk CSS語法－懶人包》吧（還真不要臉兼自不量力的說法啊！（被毆）！

好吧！話不多說、事不宜遲（謎之聲：難道你還想繼續廢話下去嗎？），咱們就進入正題吧！要談到「噗浪的CSS」，首先，就先來對「CSS語法」有個初步的認識吧！

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓我是分隔線，請注意裡頭的內容即可！↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

※文字的部份＝＝＝>
不管是文字或框線，顏色碼前面一定要加＃，這樣才會顯示出來。

文字顏色=color: #000;

文字大小=font-size: 8pt;

文字字體＝font-family: “arial”, dotum;

文字斜體＝font-style: italic;

小字體＝font-variant: small-caps;

字間距離＝letter-spacing: 1pt;

行高＝line-height: 15px; (亦可用百分比來顯示)

文字粗體＝font-weight: bold;

加底線＝text-decoration: underline;

加刪除線＝text-decoration: line-through;

加頂線＝text-decoration: overline;

刪除連線底線＝text-decoration: none;

首字大寫＝text-transform: capitalize;

英文大寫＝text-transform: uppercase;

英文小寫＝text-transform: lowercase;

文字靠左＝text-align: left;

文字靠中＝text-align: center;

文字靠右＝text-align: right;

文字分散對齊＝text-align: justify;

※背景/背景顏色的部份＝＝＝>

背景的顏色＝background: #e9e9e9;

背景圖片不重複＝background: url(圖片的真實位址) no-repeat;

背景重複＝background: url(圖片的真實位址) repeat;

背景Y軸重複＝background: url(圖片的真實位址) repeat-y;

背景X軸重複＝background: url(圖片的真實位址) repeat-x;

背景浮水印固定＝background: url(圖片的真實位址) fixed;

背景置中＝background-position: center;

背景靠左＝background-position: left;

背景靠右＝background-position: right;

背景靠上＝background-position: top;

背景靠下＝background-position: bottom;

簡易寫法＝＝＝>

background: url(位址) no-repeat top center fixed #fff;
●備註：位址請記得不是複製上方的網址，而是在圖片上方按右
鍵內容裡的那個網址！另外，那個「fixed」在噗浪裡頭很少會用到，
可以不用（但還是要看語法設定）。

※框線/全框線的部份＝＝＝>

border: 1px solid #000;
註：那個＃000 指的是框線的顏色；1px 指的是框線的粗細度，數字越大則越粗。

上框線＝border-top: 1px solid #000;

下框線＝border-bottom: 1px solid #000;

右框線＝border-right: 1px solid #000;

左框線＝border-left: 1px solid #000;

※框線種類＝＝＝>

直線＝solid

點線＝dotted

虛線＝dashed

雙線＝double

立體內凸＝groove

立體浮凸＝ridge

凹框＝inset

凸框＝outset

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑我是分隔線，請注意裡頭的內容即可！↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

現在，大家都對「基本的CSS語法」有了初步的認識吧？接下來，就來介紹「基礎的Plurk CSS語法」，也是早期我所使用的語法。其實我個人比較偏好「懶人更換主題法」，這是什麼意思呢？也就是說，我只要「更換背景圖片（全頁面式，非單一區塊）」即可擁有新的心情（不管心情是好是壞，XD）。這道理，就像是「更換作業系統的桌布」那樣，而不是整個「佈景主題」都更換。

我習慣修改CSS語法到一定階段之後，就不去更動它；因為套用了新的主題，意味著很多地方（細節）也都跟著變動；如此一來，好不容易已經習慣使用了，套用了新主題之後，又要花時間來適應。不過這種問題是見仁見智啦，像我本身就喜歡把「發噗框、噗文回應框、獨立噗文的回應框」都把它放大，好方便預覽輸入的文字，但並非每個噗友都喜歡這種作法，所以我到別人家要回應對方的噗文，就很不習慣對方的小框框，XD。像是有個噗友，我每次去她家看，發現每次的佈景主題都不同，似乎同一個主題所維持的時間，都不超過一個禮拜，還真是善變的女孩兒啊！（被踹飛

喔對了，每段CSS語法的說明文字，要記得放在兩個雙斜線+雙米號裡面，例如像這樣：/*頁首的BAR左半部*/。而這個「雙斜線+雙米號說明」，不管你要放在語法前面還是後面都可以（就是不要放在語法裡面，否則語法會不能套用，XD）。那個「雙米號」一定要寫，否則語法會失效，噗浪頁面就會呈現出系統預設的樣式。至於裡頭的說明文字，不管多長多短，都不會影響語法的套用（反正說明文字一定要擺在「雙斜線+雙米號」的裡頭就對啦！）

↓↓↓↓以下就是我早期愛用的語法，當然也是別人寫好的，XD。不過這只是範例說明，直接套用可能會產生錯誤，因為這語法我已經很久不用了，XD↓↓↓↓

/*全頁面背景修改（這裡就是可以放置背景圖片的語法區域，只要更換裡頭的圖片位址，背景圖片就會更換了，但是要注意圖床有無外連限制，不可外連的圖床空間，圖片不會在噗浪頁面正常顯示。至於圖片位址後的「repeat（no-repeat）」指的是要不要讓圖片重複堆疊（端看圖片的尺寸大小）。「center, top, bottom, right, left」指的是圖片的擺放位置，不過相對位置不能同時寫上，例如不能同時寫「top bottom」，要嘛就靠上，要嘛就靠下，左右亦同。）*/
body, html {
background: url(http://i.imgur.com/xUtFa.jpg) repeat center ; color: #fff; font-family: "Century Gothic"; font-size: 12px; }

/*頁首的BAR左半部*/
#top_bar .content a{color: #FFFFF0; font-weight: normal; }
#top_bar .content a:hover{font-weight: normal; }
#top_bar .content a#edit_link{font-weight: bold; }

/*頁首的BAR右半部*/
#top_login a{color: #FFFFF0; font-weight: normal; }

/*河道底色或圖案*/
#dynamic_logo {filter:alpha(opacity=0) ; -moz-opacity:0; opacity: 0;}
#timeline_holder {background: transparent; border: none; }
#timeline_holder #timeline_cnt #time_show {background: transparent; }
#timeline_holder #timeline_cnt #display_options_holder {}
#timeline_holder #timeline_cnt .day_start {background: transparent; } /*換日線*/
#timeline_holder #timeline_bg .bottom_start , .bottom_end {background: transparent; color: #fff; }
#timeline_holder #bottom_line {background: transparent; border-bottom: 1px solid #999; }
.day_bg .div_inner{background: none; border: none; }

/*河道上浪友發的浪*/
.plurk_cnt {background:#ffffff ; filter: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; border: none; -moz-border-radius:20px 1px 20px 1px; }
a.name{color: #111; font-family: "Century Gothic"; }
.text_holder {color: #2D4B78; font-family: "Century Gothic"; font-size: 13px; }

/*河道下方更新通知*/
#updater {background: transparent; border:0; }
#updater #noti_np #noti_np_text{color:#fff; }/*左*/
#updater #noti_np a{color:#fff; }
#updater #noti_re #noti_re_view #noti_re_text {color:#fff; }
#updater #noti_re #noti_re_view a{color:#aaa; }

/* 整個控制面板底圖 */
#plurk-dashboard{background: transparent; border: none; }

/*控制面板鍵入訊息處*/
#plurk_form{color: #fff; font-size: 18px; }
#main_poster{}
#main_poster .qual_holder{color: #fff; font-wight: bold; font-size: 28px; }
textarea#input_big.content {height: 70px; wrap: soft; border: 1px solid #aaa; }
#cur_time{font-size: 18px; }

/*控制面板更改plurk私密、語系和選項等等*/
#more_options {border: none; }
#more_options a#more_options_link {}
#more_options #plurk_to{color:#000; }
#more_options #more_options_holder{}

/*控制面板頭像和年紀、位置標示處*/
#dash-profile{width: 210px; color: #fff; line-height: 18px; padding: 8px; margin: 8px; }
#dash-profile #full_name , color: greenyellow{font-size:15px; }
#dash-profile #span_years , skyblue{font-size:15px; }
#profile_pic{width: 149px; border:none}/*個人圖像大小的控制*/

/*控制面板自介*/
#dash-additional-info{width: 210px; height: 200px; color: #111; line-height: 18px; background:#ffffff ; filter: alpha(opacity=60); opacity: 0.6; -moz-opacity: 0.6; border: none; -moz-border-radius:20px 1px 20px 1px; padding: 8px; margin: 5px; }
#dash-additional-info {color: #000; font-family: "Century Gothic"; font-size: 15px; line-height: 18px; }
#dash-additional-info #about_me{color: #000; }
#dash-additional-info #about_me a{color: #C34B00; text-decoration: none; }
#dash-additional-info #about_me a:hover{text-decoration: underline; }

/*控制面板STATS欄位(Karma等等數據欄位)*/
#dash-stats{width: 210px; height: 280px; color: #111; line-height: 18px; background:#ffffff ; filter: alpha(opacity=60); opacity: 0.6; -moz-opacity: 0.6; border: none; -moz-border-radius:20px 1px 20px 1px; padding: 8px; margin: 5px; }
#dash-stats h2{font-size: 15px; color: #000; background: none; border: none; }
#dash-stats a{color: #1E0F78; }
#dash-stats #karma {color: #C00; }
#dash-stats table tbody tr th{font-size: 12px; color: #333; }
#dash-stats table tbody tr td{font-size: 12px; color: #784B00; }

/*控制面板朋友 friend 欄位*/
#dash-friends {width: 210px; height: 280px; color: #111; line-height: 18px; background:#ffffff ; filter: alpha(opacity=60); opacity: 0.6; -moz-opacity: 0.6; border: none; -moz-border-radius:20px 1px 20px 1px; padding: 8px; margin: 5px; }
#dash-friends a{color: #1E0F78; }
#dash-friends h2{font-size: 15px; color: #000; background: none; border: none; }
#dash-friends #friend_holder{border: none; }

/*控制面板粉絲 FANS欄位*/
#dash-fans{width: 210px; height: 280px; color: #111; line-height: 18px; background:#ffffff ; filter: alpha(opacity=60); opacity: 0.6; -moz-opacity: 0.6; border: none; -moz-border-radius:20px 1px 20px 1px; padding: 8px; margin: 5px; }
#dash-fans a{color: #1E0F78; }
#dash-fans h2{font-size: 15px; color: #000; background: none; border: none; }

#footer{color: #f0f0f0; }
#footer a{color: #f0f0f0; }

#input_small {height: 70px;}
td.td_cnt textarea { height:100px; }

/*這個是在個人自介，放置「小圖示」的語法，可以凸顯個人特色，XD。看個人要不要加啦！因為放個小圖示有時候會在「個人自介」這個區域不協調，就是小圖示的位置要調整，也就是padding的數字都要微調，才不會產生衝突感，而這件事情本身是挺耗時的。*/
#location{padding-right:18px; padding-top:6px; padding-bottom:6px; background:url(http://i529.photobucket.com/albums/dd333/KururuSocho/misc/Taiwan_Light.png) right no-repeat;}

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑我是分隔線，請不用理我！↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

接下來，就是我「現正使用中」的語法了，可以說是「進階版的Plurk CSS語法」，以後應該也不會更換它了吧？畢竟修改語法真的曠日廢時，不應該在這上面浪費太多時間啊！（笑。老樣子，這套語法同樣也是別人寫的，只是我又添加了自己喜歡的語法而已，稍後會附上原始語法。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓我是分隔線，請不用理我！↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

/*噗浪背景CSS - Rilakkuma Cafe（原始CSS來源）*/
/*design by Be Myself Inc. M6*/
/*此佈景主題安裝網址（非M6原版，而是「馬力歐」版本，XD）：http://www.plurk.com/installDesign/3460622-27f0f47007*/

/*主背景*/
body, html{
background:url(http://i.imgur.com/xUtFa.jpg) center bottom no-repeat; background-color:#494949;
color: #f19db4;
font-size: 13px;
font-family: "Microsoft JhengHei"; }

/*語言字型*/
body.language-large-font{font-size:12px !important; font-family: "Microsoft JhengHei"; }

更多文章

更多討論

精選試用心得