[CSS]網頁用的尺寸單位:PX 跟 EM 怎麼區分呀?等等,還有一個 REM...

CSS的語法中,常用的尺寸單位計有:PX(就是我們最熟悉的像素了)、PT、EM、REM、%(百分比)、CM(公分)、IN(英吋)...  
早期CSS還沒有很成熟的時候,字型單位比較常用的是 PT(Point),就像在 Word 裡面設定字體的級數,9級字、12級字這樣,9級字就是 9pt, 12級字就是 12 pt;  
不過 PT 這個單位近幾年就很少用到,幾乎是消失在江湖上了。  
另外像是公分、英吋等這類型的單位,主要是用來列印到紙張,所以也逐漸退出江湖(愛地球於是大家都少列印了)。  
所以這次的主題,就放在另外幾個 PX, EM, REM 上 ...full story ››

[CSS3:Word-Break]用CSS來設置中英文的文字斷行樣式

如果要運用CSS來設置文字斷行的規則,對應的語法就是: word-break。  
這個語法很好記憶,語法直接就是語意:文字斷行,  
Word-Break 在用法上,有三個屬性,分別是:Normal、Keep-All、Break-All。  
下面我們分別來聊一下這三種屬性各有哪些不同 ...full story ››

[CSS]如何讓別人無法列印你的網頁,簡單一行CSS搞定

有些時候,我們會希望某些網頁甚至整個網站,  
都不要讓別人可以列印出來,  
那要如何讓別人無法列印你的網頁呢?  
 
這個方法相當簡單,就用短短一行 CSS 就可以做到,  
例如說,  
如果我們是希望某個單一頁面無法被列印,  
那麼就直接在那個頁面中任何地方(當然最好是檔頭 <head></head>標籤內),  
加入下面的CSS碼 ...full story ››

[CSS]Font Awesome 真的算是網頁設計師的救世主

網頁設計,免不了的就是要有一些小圖示,  
特別是像設群分享網站的圖示(臉書、Google+、twitter、IG...),又好比下載啦、留言或是一些箭頭、指標等。  
做這些小圖示雖然不麻煩(經常作的朋友們一般都有範本了),  
不過面對現在不同的裝置螢幕尺寸,  
要不就是有時客戶有意見(或是自己看不順眼),想換換顏色跟大小,三不五時就要改圖,  
更討厭的是經常都要一個小圖做好幾個尺寸,再下CSS Code來配置,也是夠麻煩的。  
 
今天跟大家分享一個猶如救世主角色的工具,有了祂,那麼小圖示的問題不僅不麻煩,還可以在設計上更多選擇與彈性,  
這個工具就是:Font Awesome ...full story ››

[CSS]驗證一下,看網站是否已經行動最佳化了嗎?

從好幾年前開始,  
就不斷的有各個網路專家宣稱行動時代開始了,  
印象中已經有好幾個年,都被稱為所謂的行動元年,  
喊久了,似乎也就漸漸無感。  
 
專家們喊的趨勢是一回事,不管時間上準不準,方向是絕對錯不了的,  
而從流量分析上看起來,  
這兩年中,  
由行動裝置瀏覽的比例的確是很明顯的大幅增加,甚至已經完全超過50%以上了(依據我們自家的流量),  
除此外,  
Google 也多次聲明,會將一個網站行動化的好壞,也放入檢索排名的參考因素之一 ...full story ››

[CSS]響應式網站設計(RWD)如何擺平 Youtube 的影片

RWD(Responsive Web Design)的設計,其中一個問題就是 Youtube, Vimeo 等影片嵌入時,不會隨著網頁寬度自動縮放。  
雖然 RWD 這個我們稱為響應式網站設計的東西,是很方便好用,  
不用再大費周章針對不同的平台設計不同的系統,  
只要透過一個 CSS 的文檔,就可以一打十個 ^^  
 
但是只要頁面上有嵌入影片,那麼就會讓好辛苦設計的網頁,在手機上看時,  
出現討厭的橫向捲軸(造成可以左右移動)。  
 
解決方法其實不難,我們可以試著這樣做  
 
...full story ››

[CSS3]用純CSS語法畫一個正圓形

現在很多的網站,都很流行採用純CSS語法來設計樣式,  
特別是以往要用圖片來製作的,現在透過CSS3的標準語法,  
也可以取代一部分圖片使用。  
像是最常見的圓形或是箭頭等等...  
 
有朋友問如何用純CSS的語法,來畫一個正圓形呢?  
 
方法很簡單:  
先決定你的圓形要多大(寬與高),  
在這裡我先以80px為直徑,做一個黑色的正圓形 ...full story ››

[CSS文字垂直置中]行高(Line-Height)的妙用

當我們在使用CSS語法中的這個Line-Height(行高/行距)這個指令時,  
大多是用來設定一個文字段落中,行與行之間的距離,  
讓每一行文字能有些間距,不至於太過擁擠,不易閱讀。  
 
不過行高/行距(Line-Height)除了設定換行文字的間距外,  
還有一個妙用,  
就是在特定情境下,讓單行文字垂直置中。  
 
什麼意思呢?舉例來說好了,我們在網頁上弄了一個選單列,  
假設這個選單列我們希望他高度能有46px,  
裡面有幾個文字連結,文字大小為12級,  
看起來會像是下面 ...full story ››

[CSS:Justify]讓中英文混搭的文字,左右齊行

有朋友來信問說,  
在他的網頁上,常有中文混搭著英文或者是特殊符號,  
以致於在每一個段落的尾端,總是有點坑坑巴巴的,  
雖不至於有多難看,  
但總是希望能像在 Office Word 中那樣,  
能設定一下左右齊行的文字對齊方式。  
 
其實這個左右齊行的文字對齊功能,  
在CSS的語法裡,是一直都存在的喔,不過似乎較少人使用 ...full story ››

[CSS3:text-overflow]將過多的內文自動刪減為適合的長度

在設計或撰寫網頁內容時,有時候我們不希望某個區塊內的文字太長,導致整個版面顯得雜亂擁擠。  
例如在頁面側邊欄,我們經常會顯示『最新留言』、『最新文章』等等,如果這些文章標題的字數過多,礙於側邊欄的寬度,每一則顯示的文章標題就會自動換行,把整個側邊欄也擠的很長。感覺就會很雜亂 ...full story ››