iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
1
Modern Web

~網頁入門~系列 第 9

Day09-HTML(5) – CSS樣式 Styles

上一篇講圖片時,有提到 style 屬性。提到網頁的樣式,當然就會想到 CSS 囉~ 那麼首先來介紹一下,有哪些方式可以在 HTML 裡使用 CSS 樣式吧!

將 CSS 添加到 HTML 的方法有以下三種:

1. 行內樣式(Inline Styles)

在 HTML 的標籤裡使用 style 屬性
https://ithelp.ithome.com.tw/upload/images/20190925/20120959DBYubW3QZX.jpg

2. 內部樣式表(Internal Style Sheet)

<head>中加入<style>元素
https://ithelp.ithome.com.tw/upload/images/20190925/20120959lS4RHsMDqB.jpg

3. 外部樣式表(External Style Sheet)

<head>中加入<link>標籤使用外部 CSS 文件
https://ithelp.ithome.com.tw/upload/images/20190925/20120959UZkR4AnWb1.jpg
https://ithelp.ithome.com.tw/upload/images/20190925/20120959jCkmLx5pQt.jpg

上面三種方法都會跑出以下頁面↓
https://ithelp.ithome.com.tw/upload/images/20190925/20120959dLRwzI7FfG.jpg

若是有重複定義樣式時,由內而外越接近 html 元素的優先權就越高

行內樣式(Inline Style) > 內部樣式表(Internal Style Sheet) > 外部樣式表(External Style Sheet)


知道了怎麼添加CSS樣式之後,接著來介紹一些常用的樣式吧!

背景顏色

background-color 屬性可以改變背景的顏色,用法就像上面範例中的

<body style="background-color:powderblue;">

冒號後面寫上想要的顏色,再用分號結束。至於顏色的部分,可以去網路上查,或是直接到下面這個連結看看 點我

文字顏色

<h1 style ="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

使用color屬性,寫法跟改背景色一樣。

字型

使用font-family屬性,例如 :

<h1 style ="font-family: fantasy;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

https://ithelp.ithome.com.tw/upload/images/20190925/20120959BcQHYn69ox.jpg

字型可參考這個網站 點我

字體大小

使用font-size屬性,有很多不同的值,可參考 點我,不過還是以 px 為最常用的單位,例如 :

<p style="font-size: 8px;">This is a paragraph.</p>

https://ithelp.ithome.com.tw/upload/images/20190925/201209599bgTT4HpsP.jpg

文字對齊

使用text-align屬性,就像是 word 文件裡的置左、置右、置中
https://ithelp.ithome.com.tw/upload/images/20190925/20120959FBz7KF1G8b.jpg
https://ithelp.ithome.com.tw/upload/images/20190925/20120959aPsQam12yY.jpg

樣式之多根本講不完,之後應該還會再出現很多好用的樣式,今天就先講到這,先來做個小總結。

Style 用法 :

style =”屬性:屬性內容;”


上一篇
Day08-HTML(4) - 圖片
下一篇
Day10 – HTML(6) – 超連結、網頁書籤
系列文
~網頁入門~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言