在前一篇文章《當CSS遇上變數、函式,就變成SASS啦~ SASS安裝教學》有教到要如何安裝SASS,而在這篇文章中,則是要教大家如何使用SASS ,這篇文章會提到SASS裡面的四個特色:變數(Variables)、函式(Mixin)、繼承(extend)、巢狀撰寫(Nesting)
分類: CSS
當CSS遇上變數、函式,就變成SASS啦~ SASS安裝教學
同時會寫程式跟CSS的人應該都會有一種想法,就是想要讓CSS裡面可以使用變數、函式這些寫程式才有的東西,因為很多CSS語法其實是重複的,如果可以有變數,有函式,那撰寫CSS的速度就會變快很多,一般來講這夢想是不可能實現的… 不過今天要跟大家介紹一個新的玩具,他叫做SASS,透過SASS,你可以讓CSS變得很不一樣~
【CSS 3】透過transform: rotate做出圖片、網頁傾斜的效果
之前新聞曾報導,在手機版的Google網頁裡面搜尋「傾斜」的話,得到的網頁會往右邊斜,這其實並不是很難做出來的效果,只要使用一行CSS語法就可以達到了,因為他已經是CSS 3的標準之一囉~ 目前來講這個傾斜的CSS 3語法IE系列還不支援(包含IE 9),另外就是說使用的時候不是一行就能,而是要分成很多行,因為每種瀏覽器對應的語法都不太相同,這點應該在日後會改善
【CSS 3】純粹使用CSS就可以讓你的網站擁有圓角效果!
在CSS 2的時代,我們如果要讓圖片、div標籤擁有圓角效果其實是蠻麻煩的,簡單點的用法是套用jQuery裡面別人幫你寫好的Function,如果喜歡自己搞的話,就必須要設計圓角圖,然後讓圓角圖去重疊,反正就是很複雜就對了,但是在CSS 3裡面,你不在需要用那麼麻煩的東西,直接在CSS語法裡面設定就可以了!
如何判斷瀏覽器是IE並套用相應的程式碼? (If IE技巧)
如果你是一個網頁設計師,那當你在設計網頁時最討厭的一件事一定是:瀏覽器相容性,每一種瀏覽器對於CSS、JavaScript的支援都不一樣,往往你的CSS語法用Cgrome瀏覽器看的時候很正常,可是換成Firefox卻會有不同效果出現,而這種情況又以IE最常發生,因為IE對於CSS、JavaScript的支援度最差,別的瀏覽器可能是效果不同,IE卻有可能是沒有效果… 所以這篇文章就是要教大家如何去針對IE瀏覽器或非IE瀏覽器套用特定的程式碼、CSS語法
W3C驗證 – 了解你網站的CSS是否符合標準
關於W3C:
W3C是一個致力於網頁標準化的組織,W3C這個組織負責制定各種網業相關的東西,例如標準的CSS4以及XHTML都是由W3C制定的,為甚麼要制定這些呢?其實原因很簡單,不知道大家有沒有想過網頁是要在不同瀏覽器上顯示的,如果每間瀏覽器所要使用的語法都不同那網頁設計師啟不是很累?但是要讓所有的瀏覽器廠商都再一起至定一個標準又也些問題,我想最主要是因為大家都在競爭吧,就因為這樣而出現了W3C這個組織,由公正的第三方來制定,而各家瀏覽器廠商(如IE.Opera.Firefox)則必須要遵守這些基本的語法,當然如果各家瀏覽器要自己增加一些語法也不是不行,話說回來也不是所有瀏覽器都遵守W3C的規範,像IE這種大牌的就不遵守,所以很多網頁設計師都對IE又愛又恨(愛是因為很多人都用IE,恨是因為IE很不守規則) 講到這裡我想大家都對W3C這個組織有一定了解了吧,以下我要敎各位如何檢查網頁是否符合標準