200809191327[CSS自定樣式教學]Xuite自定樣式CSS入門第一課

寫過不少有關Xuite版型(CSS樣式)的文章,不過都是直接講改版的東西,規劃很久想要好好整理成一系列的CSS樣式(Blog部落格版型)的教學,但是一直沒有空寫,本來想是一次寫玩,所以籌劃很久(謎之聲:根本是狗貓太懶在找藉口)。現在不景氣很多金融機構都可以貸款或是分期付款,所以狗貓也來分期寫好了!不過我這要算是不定期的喔!沒辦法先講好多久一期

要講是入門篇,那就講點基本的概念,CSS是什麼?為什麼要用CSS來改部落格的版面樣式?
嗯!CSS原文是Cascading Style Sheets的縮寫,可以參考http://www.w3.org/Style/CSS/ 的說明,簡單的說:它是製作網頁時,用來定義像是字體大小、顏色、字型、背景色、資訊顯示位置等等版面美工的一種程式語言,它搭配網頁顯示的HTML(HyperText Markup Language)語法來構成完整的Web網頁顯示成果,現在W3C組織努力定義標準的CSS以及HTML給予各家瀏覽器(Microsoft IE, Mozilla Firefox, Opera, Apple Safari, ......)開發商來遵循,不過目前還是有著不同的支援程度上的不同,CSS有CSS level 1, CSS level 2, CSS level 3等不同版本,不同版本的瀏覽器也是可能出現支援的CSS level不同!

部落格平台為什麼要開發出CSS+HTML的網頁混搭模式??由於CSS+HTML去組成基本的網頁的好處是,HTML是可以由平台業者將服務功能寫好,至於資訊呈現則可以由單獨的CSS檔去定義,這時是交給專業美工或是部落客個人都是可以的,因為CSS+HTML它將工作切割開來了!![備註]這裡講HTML是可以由平台業者將服務功能寫好,也不是說部落客沒有辦法自己加HTML,現在的BSP(Blog Service Provider)也會提供像是自由欄位(自訂欄位)這樣的機制讓部落客自己增加HTML語法!!所以說:部落客如果會CSS+HTML,幾乎可以做到非常多樣化的網頁效果。這裡的自由欄位,有些部落格平台比較開放,甚至於開放加入Javascript語法(Xuite平台就是最開放的一家),可以加Javascript的好處在於可以做動態網頁(動態網頁指的就是會變動的頁面或是資料),不像單純的HTML語法只能做靜態頁面(靜態網頁指的是固定不動的頁面或是資料)。

講半天還沒真的講CSS!不過要認識或是學會設計CSS,其實也還是要懂一點HTML,因為它們有點算是雙胞胎,是要彼此相關的!我們先看一下CSS語法大概長什麼樣子↓(部份資料取自http://www.w3.org/Style/LieBos2e/enter/)

H1 { color: green }


What you see above is a simple CSS rule that contains one rule. A rule is a statement about one stylistic aspect of one or more elements. A style sheet is a set of one or more rules that apply to an HTML document. The rule above sets the color of all first-level headings (h1).

在{}大刮號裡面就是在定義字體、大小、顏色、背景、‧‧‧等的語法,前面的H1則是叫Selector(選擇器?好怪的翻譯,不管它),這個H1就跟HTML很有關係啦!是什麼關係?這是HTML語法中表示first-level headings,第一層標題(H1),以我們看某網頁的頁面原始碼xxx.html的部份,長得像這樣↓
<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    H1, H2 { color: green }
  </STYLE>

  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific
        composer. Among his works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
    <H2>Historical perspective</H2>
    <P>Bach composed in what has been referred to as
      the Baroque period.
  </BODY>
</HTML>
就是第一層標題,所以它們將會顯示成綠色(因為H1, H2 { color: green }

所以Selector是跟頁面原始碼HTML的各個區塊的Selector是相互對應的關係!有關基本入門的CSS中文資料,可以參考http://css.1keydata.com/tw/,這個網站整理的算是不錯,可以有一個基本概念喔!
像是基本的CSS宣告型式↓
選擇器 {
  屬性:設定值;
  ...
}
在一個選擇器 (Selector) 中,可以設定的屬性數目沒有限制。
選擇器主要有三種:型類 (Type) 選擇器、Class 選擇器、和 ID 選擇器。

型類有的就是HTML語法中, 像<body>, <h1>, <p>, <a>這一些! 
至於Class 選擇器、和 ID 選擇器則是使用者自己取的名稱的選擇器!

在CSS樣式中除了單純的每個選擇器都去定義CSS外,也有不同的設定方式,其中一個是群組設定CSS(CSS grouping),另外一個是CSS樣式的繼承兩種。
群組設定CSS:就是有許多選擇器(Selectiors),它們都有共同的樣式,那麼就將它們設定在一起,簡化語法,例如前面的↓
H1, H2 { color: green }  
其實就是CSS grouping,它將H1, 與H2的顏色定義寫在一起!

CSS樣式繼承,這部份就像是父母親將基因遺傳給小孩一樣,所以如果B選擇器是位於A選擇器內,A稱為父選擇器,B稱為子選擇器,我們還是以上面的HTML語法為例↓
<HTML>
  <TITLE>Bach's home page</TITLE>
  <STYLE>
    H1, H2 { color: green }
  </STYLE>

  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific
        composer. Among his works are:
    <UL>
      <LI>the Goldberg Variations
      <LI>the Brandenburg Concertos
      <LI>the Christmas Oratorio
    </UL>
    <H2>Historical perspective</H2>
    <P>Bach composed in what has been referred to as
      the Baroque period.
  </BODY>
</HTML>
它的結構就是像下圖一樣↓


把它想成族譜,就很容易看出各代的關係,祖先是HTML,下一代為TITLE及BODY,然後BODY的下一代有H1, P, UL,依此類推!所以HTML是BODY的爸爸!在HTML裡面的CSS定義會繼承到TITLE與BODY裡面去,當然我們另外在BODY定義的CSS是會取代掉它老爸的CSS樣式定義!在套用CSS樣式時,它的原則是套用離自己越近的定義,採逐層往上搜查的模式(往父執輩找CSS樣式定義,一旦找到有定義就用了!)

那我們來看一下Xuite Blog部落格的HTML頁面族譜,我先省略細部的,先抓大概的族譜架構先介紹,然後再旁系各別介紹其他的細部"子孫"。

<html> 
 <body>
  <div id="container">
      <div id="banner">
  
      </div>
      <div id="linksLeft">
  
      </div>
      <div id="linksRight">
 
      </div>
      <div id="mid">

      </div>
      <div id="footer">

      </div>
  </div>
 </body>
</html>


我們可以看到的架構是html>body>container是單脈相傳,然後在container下展開成五個部份:banner, linksLeft, linksRight,mid, footer ,我把它畫成區塊式的方式如下圖↓

祖先的框會包圍其子孫的概念,將每一個部份用區塊的概念表示出來如上圖,至於在container裡面的五個孩子,我用一般Xuite Blog裡面基本的位置來顯示他們的關係位置,就是banner(檔頭或是叫"天")在上方,footer(檔尾或是叫"地"),然後中間有三欄分別是左欄(linksLeft)、中間欄(mid)與右欄(linksRight)。

下一篇

平均分數:0 顆星    投票人數:0
我要評分:
回應

瘋狂亂收藏家、收藏CPU、手表以及Xuiters

今天去哪玩??
天氣
累積 | 今日
loading......
訂閱狗猫電子報

輸入你的email address:

Delivered by FeedBurner

    沒有新回應!
關鍵字
Xuite電影貼紙
平均分數:0 顆星
投票人數:0
我要評分:





Powered by Xuite
Re:[固定左右欄寬,中間欄浮動寬度的版型分享],By 框框的家 ~ 部落格版型 於2014-08-17
Re:[固定左右欄寬,中間欄浮動寬度的版型分享],By 框框的家 ~ 部落格版型 於2014-08-17
Re:[Cheap Louboutins],By Cheap Louboutins 於2014-07-29
Re:[コーチ ビジネスバッグ 70213],By コーチ ビジネスバッグ 70213 於2014-07-15
Re:[[CSS樣版分享]修改官方版本至1280...],By YuCih的部落格 於2014-03-18
Re:[【轉帖】秋楓枯黃色系面版 [三欄式]],By YuCih的部落格 於2014-03-04
Re:[[CSS樣版分享]新版隨螢幕大小變動寬度...],By 歡迎蒞臨 Kittyli Blog 於2014-02-16
Re:[[新版CSS]自定CSS將Blog底圖換...],By 歇即菩提 於2013-09-24
CSS樣版三欄兩欄倒數冬季計時居家黑色系右欄藍色風水自由欄位語法播放器保健浮動寬度步道如果劇團兒童劇行動夢想iPAD兩欄右CSS語法裝潢border耶誕iPhone影音系統家具手機家具客廳望洋山L型Pixar幾何影音播放器邊框粉紅標題名稱基礎入門圖片縮小Style Information訊息中心餐廳童話故事文章鎖密碼鎖more
不顯示的自由欄位