我們常常在網頁設計的時候，會需要使用到Table表格來排版，有時候多少需要加一點顏色來美化
今天要教大家的是僅透過簡單的CSS語法，來讓Table表格達到奇偶底色相間，整個語法不需要用到任何javascript，但是，僅限使用在IE7版本以上，若IE7以下恐怕還是不支援（不過這年頭IE7以下直接可以捨棄掉了），但即使是如此，還是不影響整個程式上的運作，頂多也只是美觀上的問題而已。
首先，很簡單，僅需要加上以下兩行CSS語法，就可以達到Table的奇偶底色相間：
<style>
tr:nth-child(even) {
background: #CCC
}
tr:nth-child(odd) {
background-color: #FAFAFA;
}
</style>
接下來，我再加上表格的border語法，讓他有邊框：
table {
border: 1px solid #666;
border-collapse: collapse;
}
但這樣只有表格的邊邊有線框，所以我們再加上儲存格的邊框語法，這樣就更好看了一些：
tr, td {
border: 1px solid #666;
}
最後，我們還可以加上滑鼠移過後，會有不一樣的底色，整個Table的美化就大功告成了：
td:hover {
background-color: #E6FBFF;
}
你看，是不是很簡單呢？
英傑銳數位設計 發表在 痞客邦 留言(3) 人氣(3,831)
Font Awesome 一行語法，輕鬆在網頁加入ICON圖示
以往在網頁製作的時候，有時候要考慮到美編的內容，所以會在網頁中加入一些小ICON的圖示，一方面最主要用來增加網站的美觀；另外一方面則是用來讓瀏覽者好辨識該按鈕的內容，也就是我們俗稱的UI（User Interface - 使用者介面）
只不過以往的方法，對於網頁設計師人員相當麻煩，因為在網站設計的過程中，他們必須自行去網路蒐集或請美編人員設計這樣的ICON，再者，這些圖示ICON都還只是圖片檔，所以無形之中會造成以下幾點的缺點：
ICON風格都不大一樣，造成美觀上會有落差
製作速度慢，因為所有的ICON都要蒐集或是交由美編人員去製作
所有ICON都是使用圖示的方式，所以網站的流量較大，甚至有可能較慢
因為是圖片的關係，所以有時放大或縮小，會造成圖示的失真
有鑑於此，現在介紹大家一套
Font Awesome 的小套件，它的原理是把圖示ICON都製作成文字的字型 (Fonts)，然後再透過CSS的技術去呼叫圖示ICON出來，所以它擁有以下幾個優點：
圖示放大、縮小不失真
呼叫使用相當簡單，可變化多種模式
一個字型卻擁有超過400個圖示ICON
免費使用，不必擔心版權問題
不須要使用JavaScript，只須要懂CSS即可
支援LESS與SASS
這麼強大又好用的小套件，的確是可以幫助設計師們在網頁設計的過程中，加快製作的速度，但是，這樣的套件究竟要如何安裝並使用它呢？
如何安裝?
首先，你必須先去官方網站下載(Download)最新的版本
前往下載 >
緊接著，解壓縮，解完後應該可以看到以下幾個檔案：
如果使只要使用CSS，僅須要拷貝
"css" 與
"fonts" 兩個資料夾到你的目的地即可，所以安裝的步驟為以下：
解壓縮
拷貝資料夾(包含Fonts)到目的地
在<head>之中加入CSS語法
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
完成安裝!
那麼該如何使用它呢？
很簡單，你只須要在你的HTML網頁當中加入以下範例語法：
<i class="fa fa-camera-retro"></i> fa-camera-retro
就會產生，是不是很簡單呢？
官網也提供了更多的範例與圖示給各位網頁設計師們方便對照與使用，希望能幫助到大家!
Example >
英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(1,308)
RWD(Responsive Web Design)自適應網站的製作方式
首先，你必須先在網站開始的地方加上以下meta語法，用於規定裝置的的結構規則：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
其次，需將所有有圖片的地方，加上以下CSS語法，方便圖片按照螢幕寬度的自動縮放：
img {
height: auto;
max-width: 100%;
}
最後在CSS的地方加上以下規則（通常最少我們都分3個尺寸），讓不同寬度大小，給予新的不同CSS規則，就完成了：
// Media Query ，也就是當寬度 < 768 px 時將載入下面這段 CSS :
@media only screen and (max-width: 768px) {
//CSS的內容
....
}
// Media Query ，也就是當寬度 < 480 px 時將載入下面這段 CSS :
@media only screen and (max-width: 480px) {
//CSS的內容
....
}
// Media Query ，也就是當寬度 < 320 px 時將載入下面這段 CSS :
@media only screen and (max-width: 320px) {
//CSS的內容
....
}
你看，是不是蠻簡單的。不過在使用這項技術前，設計師必須具有一定的CSS基礎與Grid格線的概念，才更容易做出RWD的網站。
CSS Grid System 與 CSS Fluid Grid System 網頁版面
Grid 這個字有「格」的意思，沒錯，Gird System 就是把網頁變成有規則性大小的格子，我們以 Bootstrap 的 Grid System 來看，總共有 12 種欄寬，從大到小都有。我們就可以直接使用 Grid 網格系統，能讓開發過程變得很快。
部分文章出處：http://fundesigner.net/responsive-web-design-explain/
延伸閱讀：RWD (Responsive Web Design) 自適應網站的簡單介紹
英傑銳網路數位有限公司：Responsive Web Design 專業的RWD自適應網站製作公司
英傑銳數位設計 發表在 痞客邦 留言(2) 人氣(16,679)
DIV區塊內文字左右對齊的CSS語法
英文的單字長度都不大一樣，所以我們常常會碰到在某一區塊裡面，英文無法左右對齊的窘境；這時候我們可以使用CSS的一個對齊的語法--
text-justify 與
text-align
但是text-justify它有支援上的限制：
語法的其他參數：
要讓區塊內文字左右對齊的方式很簡單，語法的使用方式如下：
Firefox輸入text-align: justify;，文字即可左右對齊，但是，IE需再加上text-justify: auto;。
div {
text-align: justify; /* Firefox到此即可對齊 */
text-justify: auto; /* IE需再加上此行 */
}
讓我們來看看以下對齊好的範例，是不是相當的整齊呢？
英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(19,867)
英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(5,579)
CSS3各家瀏覽器的語法
IE9-ms-
Firefox 3.6 and earlier-moz-
Safari and Google Chrome-webkit-
Opera-o-
各瀏覽器對於HTML5及CSS3的支援程度
HTML5及CSS3正夯，但由於還在發展階段，各家瀏覽器支援程度不一，有時候試試新的語法，結果都看不到效果，此時您都不知道到底是瀏覽器沒有支援，還是自己語法寫錯。此時您就需要這個表：
http://www.findmebyip.com/litmus/這個表列出了幾個主流瀏覽器於HTML5以及CSS3的詳細支援程度，瀏覽器包括CHROME、OPERA、FIREFOX、SAFARI、IE等，而且還貼心的分了版本，讓您一目了然。（看完後，開始有衝動要去裝SAFARI了...因為它支援程度最好），該頁面還分了幾大部份：
CSS3 Properties：CSS3屬性支援列表CSS3 Selectors：CSS選擇器支援列表Web Applications：HTML5的Web應用功能支援列表 GFX & Embedded Content：HTML5的圖形及內嵌內容支援列表Web Forms 2.0：HTML5的新表單元件支援列表英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(2,961)
CSS3的介紹
CSS3的完全向下兼容，所以你不會有改變現有的設計。瀏覽器將永遠支持CSS2中。
CSS3的Modules
CSS3的分裂成 "Modlues"。舊規範已分割成小塊，還增加了新的。
一些最重要CSS3的Modules：
Selectors （選擇器）
Box Model （Box模組）
Backgrounds and Borders （ 背景和邊框 ）
Text Effects （文字特效）
2D/3D Transformations （ 2D/3D轉場 ）
Animations （ 動畫 ）
Multiple Column Layout （多欄位佈局）
User Interface （ 用戶界面 ）
CSS3的建議
由W3C的CSS3規範仍在發展。 然而，許多新的CSS3屬性在現階段瀏覽器上已經可以順利執行。
英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(1,205)
何謂CSS Sprite?
一般在做網頁時，都會加入許多圖示來讓整體網頁看起來更為活潑，不過你可能不知道，當一個頁面裡圖示越多，使用者就必須花更多時間來讀取這些零散的圖示，但透過CSS Sprites這項技術，可以幫你把所有圖示合併成一張大圖，在以CSS的定位方式來讓某圖示出現。
CSS Sprites Generator是一個幫你把圖片組合起來的網站工具，除了幫你組合起來之外，還會幫你算好位置並且顯示出來，讓你不必自己辛苦計算位置，因為CSS Sprites Generator會幫你搞定。
哪些知名網站使用這項技術呢?
最常見的Yahoo就是個很好的例子，我們常在Yahoo首頁看到網站的小圖示（如下圖）
其實這些圖示點滑鼠右鍵 "另存背景" 到電腦之後，你會發現居然是像這樣一整張的圖示（如下圖）
為何要使用CSS Sprite技術呢?有甚麼好處?
其實CSS Sprite技術不是甚麼新的技術，很早很早以前這項技術就廣為使用，使用CSS Sprite的目的是為了提升網頁頁面讀取的速度，可以有效降低圖片的HTTP請求數，尤其是你的網站有很多小圖示或圖片時，一張張上傳也很麻煩。
CSS Sprites Generator如何使用?
CSS Sprites Generator的頁面大致上非常簡單易懂，最初會有三個，如果不夠可以點 "Need More »" （每次增加三個）將你的圖片加進去，在點 Generate。
上傳完成後，會出現合併完成的 PNG 檔以及範例頁面，下方也會有詳細的 CSS 設定教學，告訴你要設定多少的 background-position 才能讓該圖示顯示出來。
官方網站
http://csssprites.com/
英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(2,263)
最近在網路上找到補強IE6.0、IE7.0、IE8.0的支援CSS3補丁
不過使用要注意以下的內容
IE-CSS3是什麼?
IE-CSS3是一段小型的Script，引入網頁的CSS之後可以使IE系列瀏覽器的使用者也看得到一些CSS3才有的新技術。ex:圓角、陰影等。
IE-CSS3是怎麼運作的?
該Script是透過VML(IE系列瀏覽器特有的向量繪圖語言)來模擬一些CSS3的效果。
如何使用?
一般我們設計可以讓FireFox、Safri與Google Chrome等瀏覽器產生圓角效果的CSS如下:
.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome *
border-radius: 15px; /* IE 6+ */
behavior: url(ie-css3.htc); /* 使用ie-css3 */
}
問題與解決辦法
使用者可以會在使用z-index屬性的時候遇到不正常顯示的問題，尤其是將一個套用了IE-CSS3的元素放在另一個之內的時候，以下有兩個方法解決：
將內部的元素z-index值設定的比外圍的大。
將內部的元素套用position屬性。
ex:position:relative; 或position:absolute;
官方網站
http://fetchak.com/ie-css3/
檔案下載
Download
英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(9,335)
CSS的語法為：
選取器 { 屬性：設定值；}
這篇就要來介紹選取器（Selector）的種類及應用。
選取器（Selector），也有人稱之為選擇器，不過 Dreamweaver 內稱之為選取器，小魚也跟著 Adobe 如此稱呼。
選取器，顧名思義就是選取您要定義 CSS 的位置。其種類大約分成以下幾種：
- Class selectors（Class選取器，Dreamweaver稱為類別選取器，這樣翻譯也對啦）
- ID selectors（ID選取器）
- Type selectors（型態選取器，Dreamweaver稱為標籤選取器，因為套用於HTML標籤）
- Universal selector（通用選取器）
- Attribute selectors（屬性選取器）
- Descendant combinator（後代選取器）
- Child combinator（子選取器）
- Adjacent sibling combinator（同層相鄰選取器）
- General sibling combinator（同層全體選取器）
- Pseudo-classes（偽類選取器）
- Pseudo-elements（偽元素選取器）
- Groups of selectors（群組選取器）
W3C 定義1~5為單純選取器 （Simple selectors），6~9為組合選取器（Combinators）。
Dreameaver則將4~12都歸類於
複合選取器 。
Class selectors（Class選取器）
「.」開頭，名稱可自訂，一張網頁可有多個class屬性值。
CSS
.emText { color:red;}
HTML
<p class="emText">此段會套用紅色</p>
ID selectors（ID選取器）
「#」開頭，名稱可自訂，
一張網頁只能有一個ID屬性值。
CSS
#emText { color:red;}
HTML
<p id="emText">此段會套用紅色</p>
Type selectors（型態選取器）
設定於HTML的標籤上，網頁上所有的標籤都會套用。
CSS
h1 {color:red;}
p {color:black;}
HTML
<h1> 標題會套用紅色</h1>
< p> 段落會套用黑色</p>
Universal selector（通用選取器）
使用字元「*」，整張網頁下的所有元素都會套用設定。
CSS
* {color:red;}
HTML
<h1> 標題會套用紅色</h1>
< p> 段落會套用紅色</p>
Attribute selectors（屬性選取器）
針對有套用特定屬性的標籤做CSS設定。例如：
E[att] //套用於含att屬性的E標籤（簡易屬性選取器）
E[att=val] //套用於att屬性值為val的E標籤（精確屬性選取器）
E[att~=val] //套用於att屬性值包含val的E標籤（部份屬性選取器）
CSS
div {color:black;}
div[title] {color:red;}
div[title=fishbecat] {color:green;}
div[title~=fishbecat] {color:blue;}
HTML
<div> 此區塊會套用黑色</div>
< div title="blog"> 此區塊會套用紅色</div>
< div title="fishbecat"> 此區塊會套用綠色</div>
< div title="fishbecat's blog">此區塊會套用藍色</div>
Descendant combinator（後代選取器）
E F，利用空白鍵區隔兩個元素，表示在 E 元素內的 F 元素才會套用。
CSS
a { color:black;}
h1 a { color:red;}
#wrapper a { color:green;}
HTML
<a> 只設定a標籤會套用黑色</a>
< h1>
< a>在h1裡的a標籤會套用紅色</a>
< /h1>
< div id="wrapper">
< a>在ID=wrapper裡的a標籤會套用綠色</a>
< /div>
Child combinator（子選取器）
E > F，利用>區隔兩個元素，表示在有父子關係的元素才會套用。與後代不同的是 E 及 F 元素之間不能再插入其它的元素，否則就不是父子關係了。
CSS
#wrapper > p{ color:red;}
#wrapper p { color:black;}
HTML
<div id="wrapper">
< p>在id=wrapper區塊裡的段落會套用紅色</p>
< /div>
< div id="wrapper">
< span>
< p>中間多了span就只會套用黑色</p>
< /span>
< /div>
Adjacent sibling combinator（同層相鄰選取器）
E + F，利用+區隔兩個元素，表示在與 E 同一層關係的相鄰 F 元素才會套用。
CSS
h1 { color:red;}
h1 + p { color:green;}
HTML
<h1>標題1會套用紅色</h1>
< p>跟h1相鄰的p會套用綠色</p>
< p>沒有跟h1相鄰的p會套用預設值</p>
General sibling combinator（同層全體選取器）
E ~ F，利用~區隔兩個元素，表示在與 E 同一層關係的 F 元素全部都會套用。
不過這是CSS 3的選取器。目前並沒有所有瀏覽器都支援，Dreamweaver CS4也沒支援。
CSS
h1 { color:red;}
h1 ~ p { color:green;}
HTML
<h1>標題1會套用紅色</h1>
< p>h1接下來p都會套用綠色</p>
< p>h1接下來p都會套用綠色</p>
Pseudo-classes（偽類選取器）
這個名詞可能許多人都覺得陌生，但提到a:link、a:visited、a:hover、a:active應該就很熟悉了吧！
:link //連結平常的樣式
:visited //連結查閱後的樣式
:hover //滑鼠滑入的樣式
:active //滑鼠按下的樣式
:focus //目標為焦點的樣式
:lang(E) //當語言為E的樣式
:first-child //第一個元素的樣式
CSS
p:first-child { color:red;}
p:lang(zh-TW) { color:green;}
HTML
<div>
< p>第一個 p 會套用紅色</p>
< p>其它的 p 不會變色</p>
< /div>
< div>
< p lang="zh-TW">語言為 zh-TW 會套用綠色</p>
< p lang="en">語言為 en 不會變色</p>
< /div>
Pseudo-elements（偽元素選取器）
其實偽元素選取器蠻多的，小魚就只先介紹 :first-line、:first-letter 這兩個元老級的偽元素。
:first-line //元素的第一行會套用
:first-letter //元素的第一個字母會套用
CSS
p:first-line { color:red;}
p:first-letter { color:green;}
HTML
<div>
< p>
第一行會套用紅色<br/>
第二行以後不會變色
< /p>
< /div>
< p>
第一個字會套用綠色<br/>
其它的字不會變色
< /p>
< /div>
Groups of selectors（群組選取器）
您還可以用「,」逗點區隔，同時對多個選取器定義樣式。
E, F, G，同時針對E、F、G元素設定樣式。
CSS
h1, h2, p {color:red;}
HTML
<h1>群組內的元素都套用紅色</h1>
< h2>群組內的元素都套用紅色</h2>
< p>群組內的元素都套用紅色</p>
< a>群組沒定義的元素不會變色</a>
文章來源出處 :小魚扮貓 - http://www.fishbecat.com/2010/03/css-selector.html
英傑銳數位設計 發表在 痞客邦 留言(0) 人氣(18,218)