Category Archives: CSS

[CSS]normalize.css

一般狀況下,開發網頁時為了避免一些瀏覽器元素樣式的差異,通常都會使用一切 reset.css 這種概念的東西去處理,不過很多時候這件事都只是自己在維護。

現在已經有不錯使用的套件了,normalize.css 就是在處理這樣的問題,也可以透過多種方式安裝。

bower 範例

Continue Reading

[CSS]pseudo-element

實際上來說,CSS 中的偽元素在HTML上是不存在的,使用的時機通常都是針對某樣元素特殊處理時才會用到

常用的 pseudo-element:

::first-line

可以指定 p 元素第一行的樣式 ::first-letter

可以指定 p 元素第一個字的樣式 ::selection

定義使用者反白後的效果 ::before

在元素之前插入內容 ::after

在元素之後插入內容

範例 HTML

first-line and first-letter

selection

Continue Reading

[CSS]position 固定位置

在一些常看到的選單製作,有些會有捲動捲軸時選單不受影響的效果(像是永遠置於最上方)

這種效果可以利用 CSS 的 position 製作出來

HTML

CSS

Continue Reading

[HTML]自製簡易Lightbox Loading特效

在網路上常會看到許多當點擊後,四周畫面一黑,然後出現一些文字訊息方塊的特效

這種Lightbox Loading的效果,網路上有許多很完整的套件

但如果只是為了做個轉換的特效,可以自己快速做一個,不一定還要去引用其他套件

以下做個簡單的範例: HTML

CSS

jQuery

Continue Reading

[CSS]!important

CSS的!important語法是用來定義樣式的最高優先權

範例 字型顏色正常狀況下為藍色

使用!important後為紅色

Continue Reading

[CSS]text-indent:-999px 替代方法

在CSS中,如果要將div中的文字蓋掉只顯示背景,通常會用以下做法

不過這樣子對瀏覽器來說會有效能上的問題,因為瀏覽器必須真的render出-999px 因此,有個可以達到一樣效果但效能較好的替代方法

Continue Reading

[CSS]column

CSS3提供了column屬性,透過column屬性可以很快速的針對元素做分欄

使用時請注意瀏覽器支援問題

出師表範例 HTML

CSS

Continue Reading

[CSS]Compass取代CSS

Compass是sass延伸出來的工具,可以將sass或scss的語法compile成CSS語法

使用sass的好處就是可以以程式的角度去撰寫CSS(變數、巢狀、迴圈、繼承)

由於Compass是用Ruby開發的,所以需要先安裝Ruby

接著再用gem安裝Compass

建立Compass專案

建立完後,Compass會產生一些檔案,其中config.rb是專案的設定檔,產生完後先手動把設定檔裡的資料夾建一建

接著就可以在sass目錄裡開發(注意:如果使用scss的人,檔案名稱必須命名為xxx.scss,而sass則要命名為sass,不然compile會出錯)

編輯完後到專案根目錄下compile

成功後config.rb的css路徑裡就會有css檔產生出來囉

scss基本語法 變數及運算

巢狀

父選擇器(Parent Selector)

Mixins

Mixins加入參數

官方的Mixins

繼承

條件判斷

迴圈

引入(import) a.scss

b.scss

test.scss

Continue Reading