ESTABLISHED 2015
TAKASHI
/* part of CSS */ 結果成現:
/* text style */
.text-sample {
font-family: sans-serif;
font-size: 4em;
font-weight: bold;
margin: 20px;
}
.text-default {
color: #6cf;
}
.text-rainbow {
color: #f3c;
}
/* text shadow */
.text-shadow-simple{
text-shadow: 2px 2px 1px rgba(0,0,0,0.2);
}
.text-shadow-rainbow {
behavior: url("PIE.htc");
text-shadow: 3px 3px 0 #ff3, 6px 6px 0 #3f3, 9px 9px 0 #39f;
}
<!-- part of HTML -->
<!DOCTYPE html>
<html>
<head>
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">-->
<!--initial-scale表示初始縮放--> <!--maximum-scale表示最大縮放比例-->
<meta name="viewport" content="width=device-width">
<!--最初執行viewport meta
是網頁HTML的一種META標籤
viewport標籤一般是響應式網頁設計
用來設定移動裝置瀏覽網頁的寬度
和基本設定-->
<!--content="width=device-width"
為了讓整個頁面寬度與手機可視寬度相同，
如此就可以簡單相容於不同機型螢幕大小-->
<meta charset="utf-8"> <!--萬國碼-->
<title>第一技_奪命彩虹</title>
<link rel="stylesheet" href="special_rainbow.css">
<!-- link rel="stylesheet" ==> 告訴瀏覽器你link進來的是個樣式表文件-->
<!--利用<link >空標籤指定CSS樣式外部檔"special_rainbow.css"放在上層的"stylesheet"目錄之下。-->
</head>
<body>
<!-- text-shadow -->
<!--<div class="text-shadow-simple text-default text-sample">TAKASHI的CSS教學示範</div>-->
<div class="text-shadow-rainbow text-rainbow text-sample">TAKASHI的CSS教學示範</div>
</body>
</html>
