*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2013年9月16日 星期一

CSS 的文字魔術


CSS的文字布局


Regardless of the theme, websites are a medium for providing information to an audience. Although a few websites are purely image-based, most websites rely heavily on text to communicate with the audience.
Vest, J., Crowson, W. & Pochran, S. (2005). Web design. p. 51. New York: Thomson.




Div + CSS + 文字布局
教學影音video

字型
<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 字型語法的運用範例。<br>
</div>
font-family: 字型;
font-family: 微軟正黑體;
font-family: 新細明體;
font-family: 標楷體;
這是中文字的文字布局 CSS 字型語法的運用範例。




大小
<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 字的大小語法運用範例。<br>
</div>
font-size: 字的大小;
font-size: 1.6em;
font-size: 95%;
font-size: 17px;
這是中文字的文字布局 CSS 字的大小語法運用範例。




粗細
<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 字的粗細語法運用範例。<br>
</div>
font-weight: 字的粗細;
font-weight: normal;
font-weight: bold;
font-weight: bolder;
這是中文字的文字布局 CSS 字的粗細語法運用範例。




行距
<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 行距的語法運用範例。<br>
</div>
line-height: 行距的高;
line-height: 0.9em;
line-height: 2em;
line-height: 20px;
這是中文字的文字布局 CSS 行距的語法運用範例。




字間距
<div style="font-family: 微軟正黑體; font-size: 1.4em; font-weight: normal; line-height: 1.6em; letter-spacing: 0.1em;">
這是中文字的文字布局 CSS 字間距的語法運用範例。<br>
</div>
letter-spacing: 字與字的距離;
letter-spacing: 0.3em;
letter-spacing: 1em;
letter-spacing: -3px;
這是中文字的文字布局 CSS 字間距的語法運用範例。




非常重要的補充:CSS的三種使用方式。


影音教學內容:
<style>
.word031001 {
font-family: Verdana, '微軟正黑體';
font-size: 1.06em;
font-weight: normal;
line-height: 1.6em;
text-align: left;
padding: 0.5em;
}

.word031002 {
-webkit-box-shadow: 2px 2px 2px 2px silver;
}

#i031001 {
border: 1px solid red;
background-color: lightgreen;
}
</style>


沒有留言:

張貼留言