iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

你阿嬤成為網頁前端工程師的第一步系列 第 9

[Day 9]阿嬤都看得懂的基礎 CSS 樣式-文字篇與標籤換行 bug

阿嬤都看得懂的基礎 CSS 樣式-文字篇與標籤換行 bug

歡迎阿嬤們回到今天的戲說啊不是,是你阿嬤成為網頁工程師的第一步。昨天我們學會了 HTML 標籤怎麼寫,也學會將個別的 HTML 標籤穿上 CSS 樣式。我們稍微複習一下昨天的內容:

  • HTML 標籤由角號與其包裹起來的標籤名稱形成,不同的標籤名稱決定了這些 HTML 標籤對應到不同類型的網頁元素。例如,<p> 這個標籤對應的是文字段落元素,而 <div> 對應的是區塊元素。
  • 如果某個 HTML 標籤對應的元素有可能包含其他元素,這個 HTML 標籤會有另個成對的結束標籤,反之則否。結束標籤是在左角號與標籤名稱間,加入斜線 "/",例如 </p>。
  • 我們可以在個別的 HTML 標籤中加上行內樣式,作法是在 HTML 的標籤名稱與右角號間加上 "style",後面加上等號與一對引號,並且在引號內放入各種屬性的配對,這些配對用半形分號隔開。

因此,具備行內樣式的 HTML 標籤看起來長這樣:

<div style="width: 80%; height: 20%; background-color: pink"></div>

到這邊聽起來都很美好,只要我們把每個標籤可以有的屬性與值都學會,我們就是網頁工程師了對吧?那讓我們趕快來學學這些屬性和值吧!耶~本系列文章又要結束囉!作者表示爽!

這麼樂觀有衝勁是很好啦,我們就先來看看些常用的樣式吧!在網頁中,我們會看見哪些類型的元素,它們又具備哪些樣式呢?在網頁中,我們經常看見文字、圖片,還有就是昨天介紹的區塊。

在文字方面,大概可以想到和個別文字相關的屬性,例如字型、大小、粗細,這些屬性的前綴都是 font-,也可以想到和整行文字相關的屬性,例如對齊、裝飾、縮排、行高、字距等等。整行文字比較麻煩,多數屬性的前綴是 text-,其他就需要稍微記憶一下了!當然,文字相關的屬性也不只這邊介紹的這些,這邊只是列舉出比較常用的喔!

  • 字型:font-family,值就是字型名稱。
  • 字型大小:font-size,值可以是文字,例如 small, medium, large;但是這就有點難控。也可以是數字加上長度單位,長度單位可以先使用 px,例如 12px 就相當於常見的 12 點字。這邊要注意,數字和單位中間必須緊密貼合,不可以有空格喔!至於 px 是什麼,我們先就把它當作一個電腦中常見的絕對長度單位,在後面會詳細說明!
  • 字型粗細:font-weight,值可以是文字,例如 thin, normal, bold,不過通常會設定 100-900
  • 文字對齊:text-align,值是文字,例如 left, center, right。
  • 文字裝飾:text-decoration,這是增加底線 (underline)、刪除線 (line-through)、上置線 (overline) 的屬性;線條還可以選擇樣式和顏色,例如:波浪 (wavy)、虛線 (dashed)、紅色 (red)、藍色 (blue)。這些值之間記得要用空白隔開喔!
  • 文字外框:outline,值和文字裝飾相同。
  • 首行縮排:text-indent,值是數字加上長度單位。
  • 文字行高:line-height,值是數字加上長度單位。
  • 字距:letter-spacing,值是數字加上長度單位。
  • 文字顏色:其實就是 color,值目前先使用表示顏色的英文文字吧!之後我們會討論怎麼使用數字表達顏色喔!至於有哪些顏色的英文文字可以使用,可以參考這裡喔!

我們來寫幾個花俏繽紛的文字來玩玩吧!不過,在那之前,你阿嬤可能會很好奇,該怎麼在同一行的文字當中,對不同的文字增加不同的樣式呢?因為如果樣式只能夠寫在 p 標籤,那不就改樣式就會換行了?

有些阿嬤可能會說,我們學過預設不換行的標籤啊,像是 strong 就是。不過,strong 標籤會把文字變粗,那該怎麼辦呢?還是我們就把 strong 標籤中加上樣式,把 font-weight 改成 normal 就好了?這也是個方法,可是其實還有個更簡單的解法:我們可以使用 span 標籤。span 標籤預設不換行,也沒有其他的樣式,專門是為了給個別文字加上樣式,所使用的喔!

那我們就來嘗試看看 span 標籤吧!不過,在那之前,我們來想想怎麼寫比較好。我們可能會覺得,不就直觀寫成一行就好了?所以寫起來會看起來像這樣:

<p><span>哈</span><span>囉</span><span>阿</span><span>嬤</span><span>!</span></p>

也是可以,但是就連還沒加上樣式,看起來都還是太長了!

因此,在我們寫 HTML 時,通常會把各個標籤分行,並且把子元素的標籤作縮排,看起來會像這樣:

<p>
	<span>哈</span>
	<span>囉</span>
	<span>阿</span>
	<span>嬤</span>
	<span>!</span>
</p>

不過,當我們這樣作以後,會發現文字之間出現了奇怪的空格:

這其實是 HTML 換行時,在瀏覽器上渲染的 bug。無論是 span 或 div 標籤,都會發生這個問題。這個問題的解法,是把結束標籤的右角號移到下一行,和下個標籤連在一起

<p>
   <span>哈</span
  ><span>囉</span
  ><span>阿</span
  ><span>嬤</span
  ><span>!</span>
</p>

這樣就會恢復正常囉!

那就讓我們給阿嬤個炫炮的哈囉吧!

<p>
  <span style="font-weight:800; color: purple; text-decoration: underline dashed">哈</span
  ><span style="font-size:20px; color: darkblue; outline: solid 1px">囉</span
  ><span style="font-family:標楷體; font-weight: bold; color: red; text-decoration: overline wavy">阿</span
  ><span style="color: brown; outline: dotted 2px">嬤</span
  ><span style="color: green; outline: double 1px">!</span>
</p>


上一篇
[Day 8] 阿嬤都看得懂的替 HTML 標籤穿上行內樣式
下一篇
[Day 10] 阿嬤都看得懂的基礎 CSS 樣式-區塊篇
系列文
你阿嬤成為網頁前端工程師的第一步30

尚未有邦友留言

立即登入留言