视觉设计(1)

来轻松聊聊

本单元可以视为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;
}