來輕鬆聊聊

本單元可以視為CSS基礎介紹的進階內容，相對於基礎篇會提供更多實用的且更接近實際網頁開發的範例。接下來就讓我們開始吧!

文字對齊

• text-aling可以將文字水平對齊，依據不同的值會有不同的效果。
  • text-align: justify;可以使文字在行內平均分散，左右貼齊邊緣，原有的空格可能會被放大。
  • text-align: center;會使文字以中央垂直線為準，左右半邊相互對稱。
  • text-align: left;是預設值，為靠左對齊。
  • text-align: right;為靠右對齊，即為預設值的相反方向。

範例

<!-- HTML -->
<div id="box">
  <h2 id="title">Jacky's Blog</h2>
  <p id="date">2021/1/1</p>
  <p id="content">今天學習到如何將文字對齊，可以靠左對齊、靠右對齊、置中對齊、平均分散。</p>
  <a href="#">聯絡我</a>
</div>
<!-- CSS -->
#box {
  height: 200px;
  width: 200px;
  border: 1px solid;
  padding: 10px;
}
#title {
  text-align: center;
}
#date {
  text-align: right;
}
#content {
  text-align: justify;
}

顯示效果如下

文字效果標籤

• 除了能用CSS來改變文字的外觀，也有一些HTML標籤能直接產生效果。接續上個範例，請注意與原來的差異。
  • <strong>標籤使文字變為粗體。
  • <u>標籤為文字加上底線，u為underline的縮寫。
  • <em>標籤使文字變為斜體。
  • <s>標籤會在文字上加上刪除線。

範例

<div id="box">
  <h2 id="title"><u>Jacky's Blog</u></h2>
  <p id="date"><strong>2021/1/1</strong></p>
  <p id="content">今天學習到如何將文字對齊，可以<s>靠左對齊、靠右對齊</s>、置中對齊、平均分散。</p>
  <a href="#"><em>聯絡我</em></a>
</div>

顯示效果如下

水平線、空格

• <hr>為horizontal rule的縮寫，意思為水平分隔線，沒有結束標籤。
• <br>為blank rule的縮寫，用來加上空格，沒有結束標籤。

範例

<h1>Title</h1>
<hr />
<h3>Chapter</h3>
<p>contentcontentcontentcontentcontentcontentcontentcontentcontent</p><br />
<p>contentcontentcontentcontentcontentcontentcontentcontentcontent</p>
<p>contentcontentcontentcontentcontentcontentcontentcontentcontent</p>

顯示效果如下

區塊陰影

• 若在網頁中，想要一些區域有一點立體感，可以使用box-shadow這個CSS屬性，為其加上陰影。根據屬性值的不同，會產生不同的效果。屬性值依序為:
  • offset-x屬性值為水平方向產生陰影，正值為向右，負值為向左，單位為距離，可以為0。
  • offset-y屬性值為垂直方向產生陰影，正值為向下，負值為向上，單位為距離，可以為0。
  • blur-radius為模糊程度，單位為距離，不允許負值。可以不做設定，優先性大於spread-radius。
  • spread-radius為擴散程度，單位為距離，正值為擴大陰影，負值為縮小，預設為0，可以不做設定。
  • color屬性值決定陰影的顏色。

範例

<!-- HTML -->
<div id="box">
  <h2 id="title">Jacky's Blog</h2>
  <p id="date">2021/1/1</p>
  <p id="content">今天學習到如何將文字對齊，可以靠左對齊、靠右對齊、置中對齊、平均分散。</p>
  <a href="#">聯絡我</a>
</div>
<!-- CSS -->
#box {
  height: 200px;
  width: 200px;
  border: 1px solid;
  padding: 10px;
  box-shadow: 10px 15px 20px olive;
  // 給2個值依序為offset-x, offset-y
     給3個值依序為offset-x, offset-y, blur-radius
     給4個值依序為offset-x, offset-y, blur-radius, spread-radius
}
#title {
  text-align: center;
}
#date {
  text-align: right;
}
#content {
  text-align: justify;
}

顯示效果如下

內容來源:
freeCodeCamp|CodePen