數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

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>


沒有留言:

張貼留言