Archive for 8月 2013
啟動 Gnome Shell 3.8 應用程式分類
最近因為對Ubuntu 的 Unity 感到有點厭倦了，太多的 bug 、需要大量的資源...種種的問題導致了我產生了想要轉其他的桌面環境的念頭，因為以前的使用習慣的關係，所以目前暫時 轉移到 Gnome 桌面環境，Gnome 相對於 unity 更為輕巧，動畫方面也很優雅，不像是 Unity 有些動畫給人的感覺有點多餘，整體上給我的感覺是很正向的， 有關於 Gnome Shell 的 preview 我會在不久的未來寫一篇新的文章，還請大家多多捧場。
用了 Gnome 以後，各項方面感受相對於 Unity 都很有蠻正向的回饋，但是一直以來，有個問題困擾著我，那就是在 Gnome Shell 3.8 的簡介裏面，他們新增
資料夾的功能，讓使用者可以把應用程式做分類，但是真的很悲劇，我怎麼試都試不出來 Orz
或許是因為可以自訂資料夾的原因，Gnome 3.8 也預設把應用程式分類關閉，所以在這樣前提下，使用上要找應用程式都要透過搜尋來找，說真的，
也不是不方便啦，就是有點麻煩就是了。
Step1：在搜尋框輸入 「dconf」，啟動 dconf editor 來編輯一些相關的設定
Step2：在 dconf 中沿著 org > gnome > shell 的順序可以得到如下的畫面
Step3：在右手邊的地方，我們需要修改的欄位是 app-folder-categories，而預設的內容是：['Utilities', 'Sundry'] ，我們將其修改為 ['Utilities', 'Games', 'Sundry', 'Office', 'Network', 'Internet', 'Graphics', 'Multimedia', 'System', 'Development', 'Accessories', 'System Settings', 'Other']，如此一來，幾乎所有的程式都會被分類到這裏面了，以下是分類過後的 Gnome Shell 樣子， 產生許多的資料夾，讓我恍然大悟的了解到，原來介紹上所提到的資料夾是這麼一回事。
以下為 Gnome 3.8 的宣傳影片
網頁程式學習 -- CSS選擇器
上一次我們談到了如何簡單的生成一個網頁文件，但是我們卻只能單調的對這個文件進行打字，以往我們在編輯文件的時候， 常常有許多的格式設定需要我們去煩惱，這些格式的設定在網頁上即是使用 CSS 來進行設定，為了對某個我們已經生成的物件進行設定， 我們需要先了解到如何對物件進行選擇，即是學習 CSS 選擇器。
在學習選擇器之前先聊聊幾個基本概念，如果有學過物件導向程式設計的朋友們應該對於「class」和「id」並不陌生， 「class」和「id」的概念在 CSS 的應用上是非常常見的，若是我們想要對於一群物件進行設定，而這些物件卻是不連續的出現在我們整份文件中， 那麼我們可以對這些我們欲設定的物件使用相同的「class」名稱，我們只要對這個「class」進行設定即可；相對於「class」的多個物件共用屬性， 「id」就是個別的一種屬性設定，我們在使用「id」的時候只能在同一份文件中出現一次，如果出現多次會造成混淆的現象。
舉例來說明 class 和 id 的關係就像是在每個人身上貼上標籤，台灣有 200 多萬個台北人，但是台北人中卻只有一個人的身份證字號跟你一樣，那個人就是你自己。
【註】class 以小數點「.」為開頭； id 以 Hash Tag 「#」為開頭
以下就要來一個一個的講解有關於 CSS 選擇器的內容了，上面廢話有點多orz
根據 w3c 的 css selector syntex，我們可以知道 CSS 選擇器大約有 10 種
Universal Selector 通用選擇器
使用* 作為篩檢對象，代表此網頁下所有的物件都遵守 *{} 裡的規則。
Type Selector 屬性選擇器
使用 Html Tag 作為篩檢對象的方法，稱作為屬性選擇器，屬性選擇器會把這份 HTML 文件中所有被選擇到的那種標籤都加上所設定的規則。
h4{
font-size:20px;
}
div{
background-color:black;
}
Descendant Selector後代選擇器
當兩個選擇器並排呈現的時候，瀏覽器會從外面往裏面選擇，可以當作是被限制範圍的其他選擇器，相同的只要符合選擇器所篩選的內容都會被套用這些規則。例如：
住在台北市的人 男生
這兩個篩選條件下的交集，會有很多的結果，這些結果都會套用我們所下的規則。
div a{
color:yellow;
}
nav li{
color:red;
}
Child Selector 子選擇器
子選擇器的意味和後代選擇器很類似，但是後代選擇器是對每個後代都作用，但是子選擇器只對緊緊跟在前一個選擇器後面那個作用，若是中間有其他的物件在中間， 那麼就不會套用選擇器的屬性，所以範圍更小了。例如：
坐在我附近的人 > 男生
在這個條件下，坐在我附近的人中可能有很多個男生，但是坐在我旁邊的男生可能只有兩個人，那麼 這個選擇器的條件就是選擇到這兩個男生，並對他們進行屬性上的設定。
div > a{
color:yellow;
}
Adjacent sibling selectors 相鄰選擇器
相鄰選擇器，應該是目前很少用到的一種選擇器，因為尚有部份瀏覽器不支援，我們都知道 HTML 的具有巢狀結構，而前面所提到的後代選擇器和子代選擇器， 都是針對巢狀結構的內層作用，而相鄰選擇器，則是針對同一層的其他元素進行作用，其中使用+ 來進行連接。
h1+h1{
color:red;
}
/*同層的的第二個 h1 會顯示紅色*/
h1+h1+h1{
color:blue;
}
/*同層的第三個 h1 會顯示藍色*/
Attribute selectors 屬性選擇器
屬性選擇器，是針對標籤裡頭的屬性做更進一步的修改。這個比較難解釋，直接看 code。
h1[class]{
color:red;
}
/*所有含有 class 屬性的 h1 都會受到影響*/
h1[class=title]{
color:red;
}
/*所有 class 屬性為 title 這個 class 者都會受到影響*/
h1[class~=title]{
color:red;
}
/*所有 class 屬性有 title 者都會受到影響*/
h1[class|=title]{
color:red;
}
/*class 的第一個為 title 者會受到影響*/
Class Selector
顧名思義，針對某個 class 進行定義屬性的方式，以. 為開頭進行定義。
.box{
background-color:black;
}
ID Selector
和 Class 選擇器類似，但是指針對某個特定的 ID 進行定義，使用# 為開頭進行定義。
#key{
color:white;
}
Pseudo-classes 偽類
這個東西嘛，其實就是常見的:hover :active :visited :link 除了常見的這些之外，還有其他三個 :first-child :focus :lang
p:first-child{
color:red
}
/*first-child 是第一個使用 p 這個標籤者會被設定屬性*/
p:lang(fr){
color:red;
}
/*符合屬性為 lang(fr) 的標籤才會被套用這個屬性*/
Pseudo-elements 偽元素
偽元素的使用和偽類的使用方法類似，皆是使用冒號接上元素名稱。目前偽元素有兩個:first-letter :first-line。
p:first-line{
color:red;
}
/*第1行 p 會成為紅色*/
p:first-letter{
color:red;
}
/*只有第一個字母會變成紅色*/