CSS是英文的Cascading Style Sheets縮寫,中文叫作串連樣式表,
正因為它的作用是將網頁中的區域串成完整的樣式,
所以我們看到的CSS標籤(如 body, #content, #links...) 都是從html 原始碼中來的喔!


如何看一個網頁有哪些標籤,其實很簡單。
在Firefox, Chrome, 中,直接 Ctrl + U 就可以觀看原始碼,
在IE, Safari 中則是[檢視]»[原始碼] (或按右鍵, 檢視原始碼)

以下圖為例子


看到紅框的部份, 我們可以分析出 在CSS中 將有下列標籤
#main{}
#content{}
#article-area{}
#article-box{}
.article{}
.article-head{}
.publish{}
.title{}
.title a{}
.article-body{}
.article-content{}



我們在CSS中就可以針對這些標籤來做變化。
但為什麼會有 # 和 . 的不同呢?
仔細看原始碼中, 標籤是用"id"的, 這是在頁面中獨立存在的(如 id="main") 我們就用 #
而標籤用"class" 是在頁面中會多次出現的區塊(如 class="article") 就用 .

痞客邦部落格因為都是用同一份html架構, 所以大家的CSS才能互相使用分享...
若在一般網頁或其它部落格平台, 用什麼CSS標籤則是看網頁設計師如何編寫了。
所以無名小站, yahoo...部落格CSS, 也就絕對不適用於痞客邦唷!!

相同的, 即便是痞客邦相簿的CSS, 也不能放到部落格中,
因為它們的html架構不同, 放錯肯定是大跑版喔~
這是大家都要用的基本概念喔!

而在pixnet的痞客模版中,總共有哪些標籤,哪些區塊包著哪些區塊,
大家可以參考最新的架構表唷!!

有問題歡迎提出,
小編會儘量替大家解答的喔~ :D

themes 發表在 痞客邦 PIXNET 留言(38) 人氣()


留言列表 (38)

發表留言
  • cobi
  • 底線

    請問一下後台的這個樣式
    http://panel.pixnet.cc/theme/blog/5704
    要怎麼樣把超連結的底線拿掉呢?
    我看css裡面已經有加text-decoration:none;
    可是怎麼還是有底線呀?
    謝謝
  • 那個底線是用 border (框線) 寫成的~
    所以先找到
    .article a { color: #87a019; border-bottom: 1px solid #87a019; }
    再把 border-bottom: 1px solid #87a019; 刪掉即可

    themes 於 2010/07/15 16:22 回覆

  • cobi
  • 感謝感謝
    底線已經不見了
  • Rumi 麻麻
  • 請問以下這個樣式是二欄式的
    http://panel.pixnet.cc/theme/blog/6908
    我要如何改成三欄(主文在中間),請指導,謝謝
  • 此樣式使用的圖, 本身就有寬度限制,
    所以無法改成三欄,
    會由破圖的狀況喔.... 請多包涵

    themes 於 2011/05/19 18:51 回覆

  • 消失的幻影
  • 請問我要自訂#links-row-3 是pixnet設定成不能增加嗎?
  • 是的, html架構本身並無 links-row-3 喔....

    themes 於 2011/05/19 18:50 回覆

  • Claire❤毓婷
  • 請問,最近新的樣式都沒有顯示每篇文章的人氣,我要怎麼修改程式碼呢??? 希望可以教我,謝謝!!^^
  • Claire❤毓婷
  • 請問,最近新的樣式都沒有顯示每篇文章的人氣,我要怎麼修改程式碼呢??? 希望可以教我,謝謝!!^^
  • Alice
  • 請問小編~

    我最近改了-珍珠(痞客模板) 這個樣式
    但是我發現頁尾的翻頁數字變成看得到.可是點不到?
    我翻遍css實在是找不到改的地方~也不曉得這是什麼問題~
    可以幫我解答一下嗎?不然完全無法翻頁啊~ >"<
    拜託了~謝謝小編!
  • 可能是拿掉footer 後, page 就被擋住了
    試著在
    .page{}中加上 padding-bottom:40px;
    應該就可以了

    themes 於 2011/07/27 13:18 回覆

  • May
  • 請問: 這個版模http://panel.pixnet.cc/theme/blog/6832
    要如何才能拿掉人氣呢?

    請指教, 謝謝.
  • 如果是指每篇文章的人氣
    在CSS中自行加上
    span.author-views{display:none;}
    就可以了

    themes 於 2011/07/27 13:10 回覆

  • May
  • 謝謝小編前次的解答, 現在有另兩個小問題請教:

    1. 我想加大字體, 但如何加寬文章區塊? 而不用每次放寬螢幕的縮放比例.
    2. 文章後的(繼續閱讀) 字體的顏色如何改成藍色?

    麻煩您告知. 謝謝.

    PS. 我的版模 http://panel.pixnet.cc/theme/blog/6832
  • 古道遊蹤
  • 小編 你好
    我想要將部落格 右側欄寬度縮小 讓內容框 加寬 如何修改呢 ? 請你教一下
    謝謝
  • 目前您使用的預設樣式不適修改任何寬度喔
    因為很多圖片都是搭配好的,
    一改寬度可能就會破版, 變醜...

    建議您挑選其它樣式,
    如果寬還是不符合您的需求
    您可以在CSS編輯中 修改 #content 和 #links 的 寬度(width)
    但務必記得 #links 減了多少, #content 就要加多少喔 (可以少, 但不能多出)
    反之亦然

    themes 於 2011/11/04 10:16 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 東方足跡
  • 請問一下唷~~

    http://dodo0716.pixnet.net/blog 這一個版型是否能夠改CSS呢?
    我希望能夠將中間文章區塊的空間加大,
    當然~~我知道兩旁邊緣的空間也會跟著縮小,
    是否能夠教我中間文章區塊的空間語法是什麼呢?
    謝謝您唷!
  • 這個版型的文章寬度是由#content來決定的(因為其內部的div 均沒有設定寬度),只要改#content的寬即可,但文章和側欄的區塊要重新定位喔

    themes 於 2012/09/05 15:31 回覆

  • 東方足跡
  • 我明白~~#content 目前已經知道,
    但~~文章和側欄的區塊要重新定位 的語法~~是否請您告訴我呢?
    我知道 文章是#content
    側欄是#links
    但重新定位的語法~~我就不清楚了。
    謝謝您!
  • 痞客邦的側欄分為links-row-1 與links - row -2兩個,即為左側欄與右側欄
    請用margin-left語法來設定即可

    themes 於 2012/09/17 08:46 回覆

  • 514寶寶
  • 您好,

    請問我部落格上每篇文章的標題都畫了底線, 請問如何移除?
    謝謝
  • 請在css中加入:text-decoration: none;即可

    themes 於 2013/05/13 10:47 回覆

  • 514寶寶
  • 要在css的哪一區 加?
  • 您好,請進入部落格的管理後台,在左邊側欄最下方有一個點擊:自定樣式>CSS原始檔編輯,在下方的編輯區中貼入並儲存即可

    themes 於 2013/05/14 10:54 回覆

  • 514寶寶
  • 我發現我所有的國字都被標底線!!!
    可否煩您到我blog看一眼, 謝謝.
  • 514寶寶
  • 有關底線的問題:

    我試過把text decoration: none; 貼到css很多地方 也有貼到最後面 還是沒用喔
    可否麻煩您到我的blog試一次 看看是否跟版模有關 以前不會這樣啊
  • 514寶寶
  • 拜託,拜託!
    整個部落格的國字都是底線, 看了頭暈
    麻煩幫我看一下好嗎? 您建議的方式我都試過了!

    請問有人在嗎???
  • 您好,請刪除您所添加的text-decoration,並置換css最上方中的 a 如下(之前請您加的是要放在大括弧中) :
    a {
    text-decoration:none !important;
    color:#000;
    }


    themes 於 2013/05/16 09:30 回覆

  • 514寶寶
  • 大大感謝, 終於把討厭的底線除掉了, 耶! 謝謝.

    BUT BUT 為什麼不是 貼text-decoration:none; 就OK
    而要貼 text-decoration:none !important; 呢?

    願聞其詳! 謝謝
  • a2534749a
  • 可以請教一個問題嗎?
    為什麼我的痞客邦的文章標題永遠都是標楷體QQQQQQQ
    為什麼求解阿 (揮旗子
  • 您好,請檢查您是否有安裝「justFont就是字」這支blog app,如果有的話請設定您想要的字型,如此即可修正
    更多資訊請參考痞客邦應用市集http://appmarket.pixnet.tw/,謝謝

    themes 於 2013/05/21 09:28 回覆

  • cmood22
  • 請問,如何同http://panel.pixnet.cc/theme/blog/7849此模板一樣
    將每篇文章的個人分類以及top隱藏呢?
  • 在css的編輯中,兩個class: .refer , .back-to-top,將其設定為display:none即可

    themes 於 2013/09/16 16:40 回覆

  • 訪客
  • 我是26樓,謝謝您
  • 不客氣,請愛用^^

    themes 於 2013/09/16 18:07 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • ART HOME
  • 您好~目前套用的版型是「摘月亮給你」略作修改(http://arthome.pixnet.net/blog),公告標題的陰影想拉掉,把#spotlight h5的text-shadow:1px 1px 0 #E4D7CA;}刪除後,標題是我想要的,可日期那邊都跑掉了,請求協助...感恩...^^
  • 您好,刪除以下即可
    #spotlight h5{
    color:#ffb0b0;
    font-family:"微軟正黑體";
    font-size: 12px;
    margin-bottom: 5px;
    /* text-shadow:1px 1px 0 #E4D7CA; */}

    themes 於 2014/04/17 10:28 回覆

  • ART HOME
  • 感恩捏...没問題了...^^~*
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Anna
  • 我想請教一下,如何在文字中有連結?
  • 您好,可以將您要設定超連結的文字選取起來,點擊上方文字編輯器中的「連結」按鈕即可設定

    themes 於 2015/01/23 10:19 回覆

  • 戴狐狸面具的阿野
  • 想請問一下
    關於你最上方的部落格標題
    如何讓它變成圖片模式可連結而原本的文字去除?
    有點像目錄改成圖片的那種

    因為剛好在找此教學點了你的某篇教學文發現你使用中的剛好是我在尋找的