登錄站點

請由此登入

技術敎學 - 自定義風格

  • 虫二

    *CSS* CSS之入門認識 ~(上編)

    虫二 2013-05-24 23:43

    此篇文章並非教學文章,而是讓大家在開始學習製作主頁風格前,先就CSS本身做一個初步的認識,什麼是選擇器?什麼是屬性?設定值又是什麼?這些在本文都有作一些解說,以下正文開始:

    一、 CSS簡介

    CSS 的全名為 Cascading Style Sheets,是一種樣式表 (Stylesheet) 語言。它的目的是為了對像 XHTML HTML 之類的標記語言 (markup language) 提供一個顯示層。

    簡單來說,HTML文件就是在主頁上所看到的個人資料,日誌,音樂等等,不論是文字或是影音的資料。CSS則是為了使這些資料容易被人讀取,而為的一種排版樣式。

    二、 CSS語法

    CSS的語法很簡單,它使用一組英語詞來表示不同的樣式和特徵。CSS即是以下面的方式呈現:

    選擇器 { 屬性1 設定值1 屬性2 設定值2 ………}

    注意* 每個文字跟文字,文字跟標點符號之間的『空格』是必須的

    若以房子來比喻,「整個主頁的CSS」就是一棟房子,「選擇器」指的是每個房間,「屬性」則是在房間裡的傢俱、燈飾等擺設,而「值」則是指擺設的大小,顏色,位置等。

    (1) 選擇器(Selector

    bodywrapobarheader等,多個選擇器之間可以用半形逗號(,)隔開。選擇器後須將屬性跟設定值包括起來則用({ })

    (2) 屬性(property

    目的在控制選擇器的樣式。即color(顏色<通常指文字顏色>)、font-size(字型)、background(背景)、border(邊框)、width(寬)、height(高)等。屬性跟屬性間由()隔開,而屬性與值之間則為()。

    (3) 值(value

    指屬性接受的設定值,多個值之間大都以『空格』隔開。像是希望文字顏色是紅的,則在color後面加上red變成這樣à { color : red } 其中的red即是設定值。

    以下是一些屬性與設定值之間的搭配用法:

    【長度單位】

    單位

    單位說明

    範例

    pt

    Point,就像是Word裡面的Point一樣大小

    font-size:10pt

    px

    Pixels,依您螢幕解析度而決定大小

    font-size:10px

    pc

    Pica6Pica是一英吋

    font-size:10pc

    mm

    公厘,用過尺...這個設定值完全不會因為其他設定而改變

    font-size:10mm

    cm

    公分,不會因為使用者設定而改變

    font-size:10cm

    %

    百分比,大部分是指所在位置寬度或者長度百分比

    font-size:10%

    【顏色表示】à用在[]的部份

    表示方式

    表示方式說明

    範例

    #rrggbb

    可以用Windows色彩選擇工具找到

    color:#feefc7

    rgb(#,#,#)

    用數字來表示紅色藍色以及綠色的混合...也可以用Windows色彩選擇工具找

    color:rgb(135,255,124)

    rgb(%,%,%)

    用百分比來代表紅色藍色以及綠色的強度來混合顏色

    color:rgb(70%,35%,41%)

    顏色名稱

    用顏色的名稱來指定艷色

    color:brown

  • 怡臻
    #1
    怡臻 2013-05-25 00:05
    鴨子聽雷 霧剎剎
  • 虫二
    #2
    虫二 2013-05-25 00:09
    怡臻: 鴨子聽雷 霧剎剎
    如果有心,總會學會的。慢慢來!
  • 怡臻
    #3
    怡臻 2013-05-25 00:14
    虫二: 如果有心,總會學會的。慢慢來!
    嗯嗯~
  • haha
    #4
    haha 2013-05-25 00:34
    看见就头痛或是头大了。
  • 虫二
    #5
    虫二 2013-05-25 00:36
    haha: 看见就头痛或是头大了。
    有關這方面是要傷點腦的。
  • haha
    #6
    haha 2013-05-25 00:38
    虫二: 有關這方面是要傷點腦的。
    可不可以拒绝一切让我头痛的学习了呢?懒人呀!
    不被迫到最后都不会去学的人哦!
  • 虫二
    #7
    虫二 2013-05-25 00:44
    haha: 可不可以拒绝一切让我头痛的学习了呢?懒人呀!
    不被迫到最后都不会去学的人哦!
    有的。只要有人幫妳弄好後。然後妳覆制貼上,是最快方法。
  • haha
    #8
    haha 2013-05-25 00:50
    虫二: 有的。只要有人幫妳弄好後。然後妳覆制貼上,是最快方法。
    Ya!正是想要这些服务,嘻嘻!
  • 虫二
    #9
    虫二 2013-05-25 00:51
    haha: Ya!正是想要这些服务,嘻嘻!
  • haha
    #10
    haha 2013-05-25 00:54
    虫二:
    话说弄这个有啥用啊?
  • haha
    #11
    haha 2013-05-25 00:54
    是空间背景设计么?
  • 虫二
    #12
    虫二 2013-05-25 01:02
    haha: 话说弄这个有啥用啊?
    取悅自己囉。
  • 椰絲酒吧
    #13
    椰絲酒吧 2013-05-25 02:10
    半形逗號....對我來說,新名詞。
  • 虫二
    #14
    虫二 2013-05-25 02:12
    椰絲酒吧: 半形逗號....對我來說,新名詞。
  • 椰絲酒吧
    #15
    椰絲酒吧 2013-05-25 02:19
    虫二:
    逗號 就 逗號,為什麼....半形?
  • 虫二
    #16
    虫二 2013-05-25 02:24
    椰絲酒吧: 逗號 就 逗號,為什麼....半形?
    (,)
  • 椰絲酒吧
    #17
    椰絲酒吧 2013-05-25 02:27
    虫二: (,)
    在我眼裡,這是逗號,為什麼叫 "半形" 逗號? 全形逗號長什麼樣?
  • 虫二
    #18
    虫二 2013-05-25 02:28
    椰絲酒吧: 在我眼裡,這是逗號,為什麼叫 "半形" 逗號?全形逗號長什麼樣?
  • 椰絲酒吧
    #19
    椰絲酒吧 2013-05-25 02:32
    虫二:
    不考你了!你上床睡覺。晚安!  我要去吃午飯了! 等你睡醒聊
你還不是該群組正式成員,不能參與討論。 現在就加入