2016-11-09 / JSN / 0 Comments / 14,290 次瀏覽
在 head 中加入外部引用 CSS,並指定 font-family。
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
* {
font-family: 'Noto Sans TC';
}
<body>
<H1>思源字體</H1>
<p>
從 Google 外部引用字體,非常的簡單。可以嘗試自行移除 font-family 查看效果。
</p>
</body>
可以參考 Google 官方說明。
我們可以看看線上範例:
2014-12-02 / JSN / 0 Comments / 1,384 次瀏覽
下面錄製了一些SUSY2的教學,網路影片教學中文的應該不多,大概就 Mr. liao 的 youtube 影片。大家也可以先去看看他的講解,我這邊的影片主要就是一個字一個字key進去囉。基本上可以讓你很快地進入狀況,但學習的條件,就是至少要懂CSS的進階語言SASS, SCSS。 有時間會錄製製作RWD版面的過程喔。
若想看其他的文字對於SUSY2的解說,可以參考:
陸續都還會有不定期更新SUSY2的筆記,也歡迎大家使用搜尋功能囉。
網路上也有一份有系統的 SASS/SCSS/SUSY 相關教學,可以參考廖洧杰的相關文章
2013-09-21 / JSN / 0 Comments / 574 次瀏覽
在 Google Chrome瀏覽器中
使用標籤input text的時候,由標點選會出現局色的外框
有時候在版面設計時會挺醜的
這時後使用CSS設定
.input {
outline:none;
}
Chrome瀏覽器就不會出現局色外框了~
這其實是在GOOGLE搜尋的框框中發現的XD
2013-06-08 / JSN / 0 Comments / 891 次瀏覽
Responsive Web Design
自適應的CSS寫法可參考
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
http://www.mrmu.com.tw/2011/04/06/css3-media-queries-liquid-layout/
首些我們要知道CSS的特性,對同一個class設定,下方設定會取代上方設定。
接著在此說明順序的問題:
範例A:
假設瀏覽器寬1920px,寬度是由小->大,但因為條件1符合、條件2符合、條件3符合,所以不管瀏覽器寬度怎麼改變,他始終顯示條件3(max-width: 1920px)的設定(使用紅字顏色),
不是因為沒套用條件1與條件2,而是被條件3給覆蓋了。
換句話說,因為不管瀏覽器寬度怎麼改變,都符合條件3的需求,所以會呈現條件3的CSS。
<style>
/* 寬度從0px - 600px 使用此設定 */
@media screen and (max-width: 600px)
{
.fontcolor { color:blue; }
}
/* 寬度從0px - 1280px 使用此設定 */
@media screen and (max-width: 1280px)
{
.fontcolor { color:green; }
}
/* 寬度從0px - 1920px 使用此設定 */
@media screen and (max-width: 1920px)
{
.fontcolor { color:red; }
}
</style>
<div class="fontcolor">
文字測試
</div>
範例B:
我們把範例A顛倒過來,情況就不同了。隨著瀏覽器拉寬拉窄,顏色會跟著變化。
概念也是由下方取代上方。
假設瀏覽器寬1500px,那剛好就會直接遇到條件一,繼下往下跑,因為條件二跟三都不符合,所以最終呈現條件一
假設瀏覽器寬1200px,條件一符合、條件二也符合,只有條件三不符合,所以最終呈現條件二
假設瀏覽器寬600px,條件一二三都符合,所以最終呈現條件三。
<style>
/* 寬度從0px - 1920px 使用此設定 */
@media screen and (max-width: 1920px)
{
.fontcolor { color:red; }
}
/* 寬度從0px - 1280px 使用此設定 */
@media screen and (max-width: 1280px)
{
.fontcolor { color:green; }
}
/* 寬度從0px - 600px 使用此設定 */
@media screen and (max-width: 600px)
{
.fontcolor { color:blue; }
}
</style>
<div class="fontcolor">
文字測試
</div>
像這種 @media screen and (max-width: 1280px)可以應用在不同手機、電腦、筆電的瀏覽器尺寸
依照不同瀏覽器寬選擇不同的CSS呈現,非常好用,不需要為了讓手機板是應寬度,
而重新寫一個給手機用的架構。
2013-04-11 / JSN / 0 Comments / 9 次瀏覽
以下是border-radius在每個瀏覽器不同的語法表示:
CSS3(還未正式發佈) |
Mozilla |
WebKit |
中文解說 |
border-radius |
-moz-border-radius |
-webkit-border-radius |
整體圓角 |
border-topright-radius |
-moz-border-topright-radius |
-webkit-border-topright-radius |
右上圓角 |
border-topleft-radius |
-moz-border-topleft-radius |
-webkit-border-topleft-radius |
左上圓角 |
border-bottomright-radius |
-moz-border-bottomright-radius |
-webkit-border-bottomright-radius |
右下圓角 |
border-bottomleft-radius |
-moz-border-bottomleft-radius |
-webkit-border-bottomleft-radius |
左下圓角 |
節錄自 http://blog.mukispace.com/css-border-radius/