Merit -- Rails badge system

為了某個專案必須實做所謂的「勳章系統」,稍微搜尋了一下發現 Merit 這套勳章系統,所以就直接套到開發中的專案上了。

Merit 因為才剛摸,我大概就只接觸了 Badge 功能,但是它還有 PointRanking 可以玩,之後我可能再補上相關的說明。

安裝 merit

  1. 在 Gemfile 中新增 gem 'merit'
  2. 執行 rails g merit:install
  3. 如果你要把勳章綁在 User 上就執行 rails g merit User
  4. 接著執行 rake db:migrate
  5. 編輯 #{Rails.root}/config/initializers/merit.rb -- 等等會解釋
  6. 編輯 #{Rails.root}/app/models/merit/* -- 等等會解釋

新增勳章

接下來來解釋一下步驟 5 的用途。

打開 #{Rails.root}/config/initializers/merit.rb 後你可以看到其實註解已經把設定講得算是蠻清楚的了,在 Merit.setup 的部分如果你的會員系統是用 devise 串且是掛在 User model 上的話這邊基本上都不需要改,但是如果你用的不是 ActiveRecord 而是 mongodb 的話,也是有選擇可以使用。

接下來講一下勳章新增的方式,其實語法就

Merit::Badge.create!({
  id: 1,
  name: "vip",
  level: 0,
  image: '/badges/vip-0.png',
  description: "加入會員, 成為酷客一員",
  custom_fields: { display_name: "會員勳章" }
})

這樣而已,你可以自己指定 level 等資訊,值得一提的是 custom_fields ,如果你需要串其他東西可以直接在裡面塞。

然後 name 這個欄位會跟步驟 6 設定的東西有關,所以我就設定英文了。

設定規則

取得勳章一定會有規則,那規則的設定則是寫在 #{Rails.root}/app/models/merit/badge_rules.rb 內。

如果每個剛註冊好的使用者都可以得到一個勳章的話,可以這樣寫:

grant_on 'users/registrations#create', badge: 'vip', model_name: 'User'

簡單解釋一下:

grant_on ROUTE, badge: BADGE-NAME, model_name: MODEL-NAME

  • ROUTE: 經過什麼 Controller / Action 後條件符合就會指派
  • BADGE-NAME: 被指派的勳章名稱,名稱就是步驟 5 中設定的 name
  • MODEL-NAME: 如果 model 與 route 同名的話,這邊不用設定,但是不同名的話就要指定了

除此之外還有其他參數可以設定

  • to: 指派給「誰」,這邊我還沒有特別玩過,如果沒指派的話預設值就是看誰去觸發 Rule 就是指派給誰
  • temporary: 有一些論壇系統有一種功能,就是當你積分到達多少的話你就會是怎樣的會員,但是如果減少到某個級別以下的時候會員等級會往下掉或者勳章取消,當這個欄位設定為 true 的時候就能夠有這種效果。
  • level: 指派第幾級的勳章
  • &block: 當有 block 的時候就可以檢查該物件是否符合某些條件,譬如說 user.comments.count === 10

與 devise 串一起的其他注意事項

這邊我測很久 .... 因為 grant_on 第一個參數吃的是 Rails route ,所以只要 Controller / Action 不對就永遠吃不到,這時候如果你要讓 devise 可以一起運作的時候你就一定要記得 overwrite Controller ,不可以用 devise 自己內建的來玩,不然會玩到天荒地老。

這部分可以參考 https://github.com/tute/merit/wiki/How-to-grant-badges-on-user-registration-using-Devise,但是裡面是錯的 ... XD

我剛有說,一定要 Controller#Action 正確,不然會吃不到,所以它的 grant_on 一定要寫成 users/registrations#create ... 如果寫成 registrations#create 就會永遠吃不到。

There was a problem with the editor -- git commit

最近幾天我在使用 Git command 進行 merge 的時候總是會噴這種錯誤,逼得我不得不使用 SourceTree 來進行手動 merge ,搞得我有點煩 ... 而發生這個問題的時間點是我更新了 .vimrc 之後的事情。

後來今天真的受不了,上網找了一下後發現解法是透過這段 git config --global core.editor /usr/bin/vim 直接強制設定 Git 的 core.editor 來解掉,會發生這問題的通常是在 OS X 上的樣子 ...

參考文章:

五術基礎筆記

筆記

參考資料

五行

相生

木生火 => 火生土 => 土生金 => 金生水 => 水生木

相剋

木剋土 => 土剋水 => 水剋火 => 火剋金 => 金剋木

旺衰

四季 狀態

解說

「四季」指的不是春夏秋冬四季。每個季節都分為:孟、仲、季三個階段,所以春就有孟春、仲春、季春,夏就有孟夏、仲夏、季夏,秋冬亦是如此。所以,這邊所謂的四季就是指:「季春、季夏、季秋、季冬」四個,而「春夏秋冬」代表的就是「孟春、仲春、孟夏、仲夏 ... 」這樣。

干支

天干

天干
五行
陰陽

地支

地支
五行
陰陽
合、化、刑、沖、破、害
六合
組合 子丑 寅亥 卯戌 辰酉 巳申 午未
五行

六合屬於 平行關係

三會
組合 亥子丑 寅卯辰 巳午未 申酉戌
五行

三會屬於 方局 ,其中寅卯辰是孟春、仲春、季春,其餘排列亦同。

三合
組合 辰戌丑未 亥卯未 寅午戌 巳酉丑 申子辰
五行

三合是 三角關係

六沖
組合 子午 丑未 寅申 卯酉 辰戌 巳亥

六沖屬於 對角關係

六害
組合 子未 丑午 寅巳 卯辰 申亥 酉戌

六害屬於 垂直關係

六破
組合 午卯 辰丑 酉子 戌未 亥寅 申巳
  • 申刑寅、寅刑巳、巳刑申 - 恃勢之刑
  • 戌刑未、未刑丑、丑刑戌 - 無恩之刑
  • 子刑卯、卯刑子 - 無理之刑
  • 辰刑辰、午刑午、酉刑酉、亥刑亥 - 自刑

相刑屬於 三合三會橫對關係

記年月日時法

從甲子開始到癸亥剛好六十個,數數的方式是:甲子 => 乙丑 => 丙寅 => 丁卯 ... 辛酉 => 壬戌 => 癸亥

每次切換的時候,干支一起切換,所以不是地支全部跑完一次之後才更換天干,舉個例子:

甲子年甲子月甲子日甲子時 的下一個時辰是 甲子年甲子月甲子日乙丑時

Working with Rails - 開發環境

Working with Rails - 安裝開發環境

請原諒我,我只知道怎樣安裝 Mac 跟 Linux 的開發環境,所以如果你是 Windows user … 有兩個 Solution 可以解:

  1. 重灌成 Linux 或透過 VMWare or Virtual Box 安裝 Linux (推薦 Ubuntu)
  2. 買一台 Mac ,有很多店家都有分期零利率的方案,買一台 Mac mini 回家(不到兩萬塊)你就可以享受超棒的開發環境了 … (因為買來就可以跑 Ruby 了 …)

所以,請準備上述兩個東西的其中一種吧 …

Mac

Mac 的作業系統最後改名稱為 OS X 。

在 OS X 上我們其實已經有一個內建的 Ruby 版本可以用,版本是 1.8.7 ,這個非常的不夠用,所以我們還是得自己裝一點東西來用。

安裝 XCode

XCode 可以上去 App Store 上下載,這個工具是免費的,不過你可能需要一組 Apple ID ,辦一個是很值得的一件事 (你以後就會知道我為什麼這樣說了)。

安裝好 XCode 後按下 command + , 開啓偏好設定,在偏好設定裡面有一個「Download」的分頁,安裝「Command line tools」,這樣會安裝 gcc 等東西。

安裝 Homebrew

這個是用來安裝系統軟體的東西,像是 curl, wget, git … etc

請在你的 Mac 上執行這段程式碼: ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

裝好 homebrew 之後我們要來裝幾個比較重要的東西

brew install curl
brew install wget
brew install git
brew update
brew tap homebrew/dupes
brew install apple-gcc42

安裝 Imagemagick

之所以要安裝這個東西是因為未來可能會透過 rmagick 來裁切你上傳的圖片,這時候就得透過 imagemagick 來協助了。

不過在 OS X 10.8 之後 Apple 把 X11 support 拿掉了,所以必須手動下載安裝: http://xquartz.macosforge.org/landing/ 後再執行 brew install imagemagick就可以了。

安裝 MySQL

brew install mysql

安裝 RVM 與 Ruby 2.0

curl -L https://get.rvm.io | bash -s stable --autolibs=enabled (這個是在 RVM 的 Github 首頁看到的教學)

安裝好之後,執行底下兩行

. ~/.profile
source ~/.profile

這樣 rvm 就安裝好了,開始安裝 ruby 2.0

brew install libyaml
rvm pkg install openssl
rvm install 2.0.0 --with-openssl-dir=$HOME/.rvm/usr --verify-downloads 1

安裝好之後執行 rvm use 2.0.0 --default (這樣會設定成此電腦的預設版本)

安裝 Rails

安裝之前,我們要先執行以下這段 script

echo "gem: --no-ri --no-rdoc" > ~/.gemrc

然後再

gem i rails
gem i mysql2
gem i capistrano capistrano-ext

安裝好用工具 powder

Pow 是 37 Signals 開發出來的一個很棒的東西,讓你檢視自己的開發進度時不需要用 http://localhost:3000 這種需要 port number 的網址,可以用 http://blog.dev 這樣的網址。

而 powder 是一個讓 pow 可以更容易使用的工具,我們將透過 powder 來安裝 pow。

gem i powder
powder install

這樣就可以了。

開發工具

在開發工具上面,以前我會推薦 Textmate 這套來開發,不過現在我會推薦 Sublime Text 2 來開發撰寫,底下是我常用的工具:

  • Google Chrome
  • Sublime Text 2
  • iTerm 2 (終端機軟體,非常好用)
  • Sequel Pro (MySQL Client,以前叫做 CocoaMySQL ,很好用)

Linux

(TODO)

cancan 筆記

Cancan 筆記

簡介

cancan 是一套 Rails 的權限設定 Gem ,最常見用的地方就是我們需要針對使用者或者管理者進行權限控管的時候我們可以針對該 user 的 role 來判定它能夠有什麼樣的權限。

以往常見的做法是:

Helper:

def editable?(user)
  if user.has_role? :admin
    link_to("編輯", edit) + link_to("刪除", destroy)
  elsif user.has_role? :member
    link_to("編輯", edit)
  else
    ""
  end
end

View:

<%= editable?(user) %>

但是用了 cancan 之後我們可以用

Ability.rb

def intialize(user)
  
  if user.blank?
    basic
  elsif user.has_role? :admin
    admin_only
  elsif user.has_role? :member
    members_only
  else
    basic
  end
end

def basic
  can :read, [ Post, Comment ]
end

def members_only
  can [ :create, :update ], [ Post, Comment ]
end

def admin_only
  can :manage, :all
end

如此一來,我們就可以在 view 裡面這樣做

<% if can? :create, Post %>
  <%= link_to("新增", new_post_path) %>
<% end %>

<% if can? :manage, Post %>
  <%= link_to("文章管理", admin_posts_path) %>
<% end %>

這主要是 cancan 可以用的情境。

Before we start

我想,各位可以先去閱讀 xdite 寫的三篇 cancan 介紹文章:

  1. Cancan 實作角色權限設計的最佳實踐(1)
  2. Cancan 實作角色權限設計的最佳實踐(2)
  3. Cancan 實作角色權限設計的最佳實踐(2)

看完之後其實你就會用 cancan 了 … XD

但是我在看完之後其實還是有點一知半解,在 Custom Action 的時候不知道該怎樣設定自訂的 action ,所以我讀了一下文件後知道了一件事:讀官方文件很重要啊!!!

自訂 Action

廢話不多說,假設我們想要做一個 like 的動作,我們可以這樣做:

can :like, Post

然後在前端這樣寫:

<%= link_to_if(can?(:like, Post), "Like (Y)", like_post_path(post)) %>

其實就只是這樣而已 …

現在正在研究 nested resources 的部分。

Working With Rails - 前言

Working with Rails

前言

我的目的: Know how to work with Rails within a week.

在 Ruby on Rails (以後我會用 Rails 來稱呼它) 界裡面有一位 xdite 前輩已經寫過一本 Rails 101 不是嗎?為什麼還要再寫一本呢?其實真正的原因是我想要藉這個機會

  1. 練習文筆
  2. 寫內部教育訓練文件
  3. 重新熟悉過 Rails
  4. 做筆記

所以,我才會再搞出這樣的一本書。

目前這一篇算是簡單地介紹,然後我大概會這樣寫這本書 …

開發的成品一樣是一個 Blog ,只因為一個 Blog 的練習就會擁有許多跟 Rails 基本會用到的東西。

  • CRUD
  • RESTful
  • 套件安裝 / 應用
  • Relationship
  • test
  • deploy

其中,因為 test 我還在學,所以這部分著墨的部分暫且不多,敬請見諒。

如何學習 Rails?

我回想 2006 年的時候我到底是怎樣從 PHP 來到 Rails 這個世界的?以及我是怎樣踏入並且開始能夠真正的去撰寫出一個網站的?那是好幾年前的事情了,當時的 Rails 版本還沒有到 1.1.6 而我在當時只不過是個小鬼 … 嗯,總之,我學 Rails 的方式很簡單,就是「不要問,做就對了」。

Rails 有兩個重要的觀念:

  • DRY (Don't Repeat Yourself) - 不要重造輪子
  • Convention Over Configuration - 慣例優於配置

第一點很簡單,別人有的我們就拿來用,沒特殊必要就不要重新再開發出一個一樣的東西。不過,第二點到底是什麼意思呢?其實在以前開發網站的時候,我們可以看到一些 Manifest 來設定某些專案,像是 .Net framework 就有一些設定檔來設定專案的基本資料,譬如像是命名、規範等等。

可是在 Rails 當中,這件事情不是最重要的,因為 Rails 已經給你了一些規範,你只要照著規範遵守就好,沒有必要再透過其他設定檔(這邊指的是開發的時候)來設定你的 Application 的開發流程與方式。

這樣的一個情況會導致有些學過其他 framework 或者其他語言的人開始就會覺得說 奇怪,為什麼這邊是這樣? 的感覺,但這個在 Rails 裡面是不足為奇的,因為大家都這麼做 … 所以社群才會強大起來。 Rails 是一個規範用很大的 Web framework ,所以當社群都用同樣的 rule 在走的時候,你能夠想像這樣壯大會有多快嗎 …

所以,先做再說,其他的以後再問吧 :)

關於本書

好啦,開始來列一下大綱,免得我寫到失控

  1. 安裝開發環境
  2. 開始建立一個 Rails 專案
  3. Controller,初次見面,你好
  4. Route,初次見面,你好
  5. Model,初次見面,你好
  6. View,初次見面,你好
  7. Scaffold,初次見面,你好
  8. Gemfile,初次見面,你好
  9. 開始建立 Blog
  10. 文章系統
  11. 評論系統
  12. Model!請告訴我如何建立關聯
  13. Route!請告訴我如何建立網址
  14. Controller!請告訴我如何綁定關係
  15. View!請告訴我如何使用 partial
  16. 換掉吧!那內建的 form_for
  17. 改用吧! Bootstrap 不好嗎?
  18. Hello … 咖啡 Script
  19. Hello … SCSS
  20. Helper … Help me!
  21. 人家喜歡有會員
  22. Facebook 登入不好嗎?
  23. 差不多該公開了哦

反正這本書就當做作功德,但是我個人接受捐款哦 ;)

Redis 筆記 (一)

Redis 筆記

Set (集合)

sadd

這可以把東西加到集合內,所以就是:sadd key value1 value2 value3

範例:sadd tools mac iphone ipad

scard

可以透過scard key的方式取得該key有多少values

範例:scard tools 這樣會回傳 4

smembers

可以撈出某個key的所有結果

範例:smembers tools

sismember

可以知道某個key中有沒有某個value,如果有就會是1,沒有就是0

範例:

  • sismembers tools pc => 這樣會是0
  • sismembers tools mac => 這樣當然會是1

srem

把某個value從set中移除,如果這個值不存在就會忽略

範例:srem tools pc => 會被忽略

sinter

取出兩個以上的集合的交集

範例:

smember apple #=> iphone ipad mac macbook
smember tools #=> iphone ipad macbook
sinter apple tools #=> iphone ipad macbook

Hash (雜湊)

hset

這個是設定一個新的Hash,它包含了一個集合名稱、key跟value

範例:hset me name HeChien

hget

然後透過hget把某個hash的某個key讀出來

範例:hget me name => HeChien

hgetall

可以透過hgetall把某個hash的key/value都列出來

範例:hgetall me

hlen

取得某個hash中有多少key

範例:

hmset me name "HeChien" age 25
hlen me

hmset

可以同一時間內設定某個hash中多個key/value pair

範例:hmset me name "HeChien" age 25

hmget

可以同一時間內取得某個hash中多個key/value

範例:hmget me age name sex 回傳值會根據給的順序來排列,找不到的key會回傳(nil)

hexists

判斷某個hash是否存在

範例:hexists me

hdel

透過hdel就把某個hash的某個key給刪掉

範例:hdel me name

其他可以看的hash相關的

  • hincrby
  • hincrbyfloat

其他

del

不管是什麼key,都直接可以把設定好的值都歸零清空

範例:del tools 這樣tools會變成空集合

CodeIgniter 筆記 (二)

前言

今天晚上又開始繼續研究CodeIgniter,這次開始挑戰DB的新增了 ... (抖)

在實作一個功能的時候想起Rails的方便,不禁悲從中來,不過我還是得繼續寫下去 ... (泣)

Okay,在Rails中我們要做新增資料的時候習慣幹一件事就是把newcreate分開,new本身就只是一個load model初始資料等等用的action,真正在儲存資料的時候是拉到create去做。

所以,在CI裡面我也這樣幹了,然後把Controller內的東西寫到routes去,所以routes.php中有兩段會長這樣

$route['users/new'] = "users/new";
$route['users/create'] = "users/create";

Okay … Good,然後我們也就在users.php這個Controller中寫這樣

  public function new() {
  }
  
  public function create() {
  }

存檔,重新整理首頁(就是/index.php/users這頁),然後 … 爛了 ...

WHY!!!!!!

後來直覺,可能是new這個名稱衝到,我就把route改成這樣

$route['users/new'] = "users/add";

當然Controller的 public function new 改成 public function add,然後重整一次,一切都好了耶 =////= …

Helper

form helper

Okay, good!! keep going,我們就開始要來建立表單了 … 這時候我發現到原來CI也是有helper這種東西的,然後因為Rails裡面有個很屌的form_for可以用,所以我想也許CI也會有,但是 … 我錯了 (遮臉)

引入helper的方式跟Rails不太一樣,Rails基本上自動會load,可是在CI裡面要自己手動load或者寫在application/config/autoload.php內,所以這個部分要小心點。

我很懶,就把url這個helper給拉到autoload.php內註記一下,寫在$autoload['helper'] = array('url');內就可以了,然後在users.php這個Controller的add() action內,我們還要load一個form helper,寫這樣:$this->load->helper('form');

然後我們就可以動手寫view了,自己在application/views/users底下建立new.php,然後裡面就寫上

<h1>新增E-mail</h1>
<hr />
<?php echo form_open('users/create'); ?>
  <p>
    <label for="email">E-mail</label><br />
    <input type="text" name="email" id="email" />
  </p>
  <p>
    <input type="submit" value="送出" />
  </p>
</form>

好了,看到那段 form_open('users/create') 嗎?其實就只是幫你轉那個URL而已 … Orz

url helper

然後我們要在users/index裡面加上這一段

<?php
  echo anchor('users/new', "新增一筆記錄");
?>

這段就像是Rails裡面的link_to啦,只不過link_to是把顯示文字擺在第一個參數,而anchor則是反過來。

Model 與新增資料

view這邊搞定後,我們要開始著手進行資料儲存的工作,這個部分我們必須去找user_model.php談談,要對它新增這樣的一段code

  public function new_user(){

    $data = array(
      'email' => $this->input->post('email')
    );

    return $this->db->insert('users', $data);
  }

然後回傳可能會是true / false,這個部分我不知道 … (文件似乎沒寫,我找不到),所以有了這個之後我們就可以在Controller內進行處理

Controller 對結果的處理與判定

所以,我們要開始撰寫create這個action了

  public function create() {

    $this->load->model('user_model');

    if($this->user_model->new_user()){
      redirect(site_url('users'), 'location', 301);
    } else {
      redirect(site_url('users/new'), 'location', 301);
    }
  }

看到redirectsite_url嗎?這兩個都是我們一開始引入的url helper提供的內容,詳細提供的功能可以來這邊看
http://ellislab.com/codeigniter/user-guide/helpers/url_helper.html

至於我一開始說的Rails的方便的部分是 … 當資料新增失敗的時候,我們可以用render :new來停止跳頁,直接把new這個action的template給render到前端,並且把曾經填入的欄位給預填上去了,不過找來找去沒在CI找到同樣的功能 … (哭)

CodeIgniter 筆記 (一)

CodeIgniter

簡單做個筆記免得我到時候忘記,這真的是一個很神奇的Web framework (跟Rails比起來) …

建立一個新的Project

從官方網站 http://www.codeigniter.org.tw 下載下來後解壓縮,然後你的project叫做什麼就把資料夾名稱改成什麼這樣就好了。

  • rails的做法是rails new project_name

建立Controller

自己在application/controllers/資料夾中建立name.php的檔案就可以了,至於內容要填入

<?php

class Name extends CI_Controller {

  public function index($page = 'home')
  {
  }
}

這樣的code,其中$page = 'home'這段還不知道用意 …

注意哦,那個name的意思是你要叫什麼就打什麼,譬如是Users這個Controller你就建立users.php,然後class name是Users這樣。

  • rails的做法是 rails g controller name

Route

這是我覺得最神奇的地方 … 花了半個小時才發現自己錯在哪裡

假設我有一條route是 /users 這樣,我可以這樣寫設定

$route['users'] = "users/index";

它會自動mapping到users這個controller底下的index action這樣,但是我在瀏覽器上不管怎樣測試都失敗,後來我就在URL上寫成/index.php/users,然後就 … 過了 -_-

  • rails 的route我就不講了 … 很多種搭配,還有RESTful,CI看起來似乎並沒有RESTful的玩法在。

Model

它的model的建立方法是在application/models/底下建立name_model.php檔案,然後在Controller中用$this->load->model('name_model');來把它拉進來。

假設我們現在要有一個User model,所以我們先建立application/models/user_model.php,然後裡面寫

<?php
class User_model extends CI_Model {

  public function __construct()
  {
    $this->load->database();
  }

  public function all_users(){

    $query = $this->db->get('users');
    return $query->result_array();
  }
}

(附帶一提,有趣的是,CI的ORM也叫做ActiveRecord)

好,其中$this->db->get('users');這部分的作用就是跟db說它要撈users這個表。

(另外,如果要加上where的條件的時候,可以用$this->db->get_where('users', array('condition_1' => '1'));這種形式的語法來做)

然後我們就可以在controller中這樣撈資料:

$data["users"] = $this->user_model->all_users();

接著,view的部分就可以用foreach把$users的東西給dump出來 ...

  • rails建立model的方式是rails g model name

View

為什麼要把View拆開來說呢?因為 … 它很神奇

首先,似乎沒有像Rails有application.html.erb這個東西的概念,它的layout是另外自己拼湊出來的 … 我在我的Controller中寫了如下的code

$this->load->view('templates/header', $data);
$this->load->view('users/index', $data);
$this->load->view('templates/footer', $data);

然後,要自己在application/views/底下建立templatesusers兩個資料夾,自己建立header.php, footer.php以及在users底下建立index.php然後自己load進來,反正在CI裡面什麼都要自己load就對了XD

那第二個參數的$data幹嘛用的?其實就是把Controller的變數扔到前端用的,在Rails裡面這部分直接設定成instance variable就可以了,不過因為PHP的特性或者是CI的架構,這部分只能另外傳。

呼 …

先這樣吧,MVC都有基礎的認識了,剩下就是看文件然後自己幹一套系統出來,以上。

CSS 教學 (二)

前言

如果想要閱讀HTML教學系列,請看

CSS的教學,請看

本片(?)開始

在前一篇教學中我只簡簡單單的介紹了CSS的語法,其實它的語法格式真的很簡單,就是

選擇器 {
  屬性: 屬性值;
}

這樣的方式來描述被選擇器選到的元素應該要有怎樣的呈現方式。昨天舉的例子就是

h2 {
  color: green;
}

這樣。選擇器表明了會找出所有的h2標籤,並且將顏色設定為綠色(green),不過這裡說的是什麼顏色呢?答案是字體顏色。在CSS當中顏色有好幾種,像是背景顏色(background-color)、邊框顏色(border-color)等,但是跟字體的顏色設定有關的就很單純只是color這樣,不需要寫成font-colortext-color,沒有這回事,因此在撰寫的過程當中要注意一下這一點。

來個簡單的小範例好了

所以我決定先給一個簡單的HTML片段,請各位自己開啟一個檔案練習一下。如果不知道該怎樣撰寫HTML的話,請閱讀本文一開始提到的文章連結,讀完之後再繼續進行本篇的練習吧。

這部份是 HTML

<h1>XXX 的自我介紹</h1>
<h2>您好,請詳閱我的自我介紹哦</h2>
<p>您好,這是我的自我介紹,我叫做<span id="name">XXX</span>,目前<span id="age">OO</span>歲,住在<address>台灣</address></p>

這部份是 CSS

h1, h2 {
  
  color: #E6E3E4;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 12px;
  font-weight: lighter;
}

span {
  color: red;
}

span#name {
  font-size: 16px;
}

#age {
  font-weight: bolder;
}

address {
  color: #A0F2C4;
}

解說時間

wow ... 好多沒看過的東西,什麼font-family, font-size, font-weight, px ... etc,這到底是什麼啊?

px

這是一個單位,叫做像素(pixel),所以簡寫為px

在CSS裡面,可以用到的單位非常的多種,像是em, pt, px, in,甚至是百分比符號%也可以,可以查表來知道說大概有哪些單位可以用。

其中,em是一個參考用的單位,這個以後會介紹,這個會根據前一段的大小設定而影響到結果。

font-family, font-size, font-weight

font的意思是「字」,所以我們可以猜到font-size是字的大小、font-weight是字的寬度,那什麼是font-family呢?字的家族?嘿對,簡單的說就是「字體名稱」的意思。

只是在這個地方,為什麼font-family的設定是"Helvetica Neue", Helvetica, sans-serif呢?這個代表的是在設定字體的時候可以一次設定多個不同的字體,不過會有所謂的一個優先權在。

在這邊要講一下,如果有做過網頁的經驗的人應該會發現一件事,當你的字體用了什麼「華康少女體」之類的字體的時候,別人的瀏覽器中看到的字體會跟你在製作的過程當中會有不一樣的結果,會這樣的原因是字體必須要你安裝在電腦內它才能夠呈現在瀏覽器上面。

也就是說,當我指定「華康少女體」的時候,瀏覽器會問作業系統說:「欸,系統兄,啊你那邊有沒有『華康少女體』咧?有的話幫我叫它過來一下,我這段字要用它的風格呈現到畫面上。」然後作業系統就去找了,如果找到的話就會把「華康少女體」丟給瀏覽器讓瀏覽器自己處理後面的事情,如果沒有,那瀏覽器也只好摸摸自己的鼻子用預設的字體來顯示文字。

可是如果指定的過程當中有多個字體的話呢?那它會一個一個問作業系統說有沒有存在,然後就會發生上述故事的內容那樣,最後如果都找不到就用預設字體顯示文字。

網頁設計跟瀏覽器之間其實是沒有連在一起的,當你設計好的網頁丟到網路上時所有在你電腦內看到很完美的東西,在別人的電腦裡都只是個屁,就是IE only的網站一樣 ....

h1, h2

有驚訝到嗎?選擇器可以設定多個。當你這樣設定的時候在語意上就會是「所有的h1h2標籤」都會被設定到。

span#name 跟 #age

為什麼同樣是span標籤,而nameage這兩個id卻有不同的寫法呢?其實這兩種寫法的差別就只是在一個有明確指定出是span標籤中id為name的那個,一個只指定是id為age的那個,如此而已。

所以就算span#name寫成#name也是可以的;當然#age也可以寫成span#age

好啦,出個作業

我想,光是看教學肯定不夠的,所以來出個作業吧 ... 寫好的程式碼可以貼到http://gist.github.com上面貼給我,或者直接在http://codepen.io/http://jsfiddle.net等網站張貼程式碼,然後再把網址留在回應上,我們可以一起討論哦^_^

宣傳一下我開設的Facebook社團:為薄滴賽 - https://www.facebook.com/groups/web.design.tw/,這裡可以討論Apple、Web Design、Web Development、Design等內容,歡迎加入哦^_^