iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
1
自我挑戰組

迷路的前端工程系列 第 11

第十一日:文字大小

  • 分享至 

  • xImage
  •  

第十日回顧:
在昨天,介紹了有關 CSS 元素的盒子模型,有了這概念後再講解其他屬性和畫面呈現將會比較不會有疑惑,廢話不多說,馬上來開始今天的主題吧~

文字,一個基本到不能在基本的東西,卻被許多設計師玩出了不同的花樣,雖然我們不是設計師但基本的文字操作還是要有些的,今天就讓我們先從文字開始著筆吧

首先先介紹文字大小的標準,現在有兩套比較常用的分別是 px 以及 rem,1px 也就是 1 像素,而 1rem 為根據瀏覽器設定下一個 m 的大小,不過由於現在許多網頁都需要適應不同的設備,因此個人認為在文字選擇上 rem 將會是比較適合的選擇。

p { font-size: 2rem;}

而我們除了文字大小當然也會想更改文字字型,因此這邊再提供更改文字字型的方法

* { font-family: Arial,sans-serif,"Courier New";}

font-family 提供了網頁更改文字字型的方法,不過需要使用者有先下載該字型,需要注意的是若字型名稱為兩分開的單字需要用引號把它給包起來

而後,我們介紹一些文字比較特別的更改方式:

p { font-weight: bold} 粗體文字
p { font-style: italic/oblique} 斜體文字/文字傾斜
p { text-transform: uppercase/lowercase/capitalize ;} 文字大寫/小寫/首字大寫
p { text-decoration: underline/line-through/none} 文字增加底線/中間增加刪節線/不要任何線

這邊有個很有用的東西是 text-decoration:none,對 a 標籤設置此屬性後可以取消超連結的底線

今天針對文字大小的處理就到此為止啦,明天中秋節,祝佳節愉快

小抱怨專區:
Hibernate你真的很麻煩...還我中秋啊


上一篇
第十日:CSS之盒子模型
下一篇
第十二日:顏色
系列文
迷路的前端工程16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言