来轻松聊聊

今天将接续前篇的内容，分享许多排版时常用的效果。

不透明度

• opacity属性可以决定元素的不透明程度，值的范围是从0~1之间含小数点任一数字。预设值为1，代表完全不透明，数字越小越透明。值设定为inherit，将可以继承父元素的不透明度。

范例

<!-- HTML -->
<h1>我不透明</h1>
<h2>稍微透明</h2>
<h3>有点透明</h3>
<h4>我是谁 我在哪</h4>
<!-- CSS -->
h1 {
  opacity: 1;
}
h2 {
  opacity: 0.7;
}
h3 {
  opacity: 0.3;
}
h4 {
  opacity: 0;
}
h4:hover {
  opacity: 1;
  color: blue;
}

显示效果如下

上方为不同的不透明度所产生的效果，可以看到<h4>的不透明度为0，尽管背景有颜色依然不会显现。

我设定将游标移至<h4>上的时候，不透明度为1、颜色为蓝色，可由此看出不透明度的效果差异。

大小写转换、行高、:hover选择器

• 大小写转换通常用在英文系文字，藉由text-transform属性与给其不同的值来达到转换的目的，常见的属性值如下:
  • none为预设值，维持原有状态。
  • lowercase可以使文字全部小写表示。
  • uppercase可以使文字全部大写表示。
  • capitalize会让每一个词汇的第一个字母大写表示。
  • initial会让文字使用预设值表示。
  • inherit会继承父元素的属性值。
• line-height为行高属性，用来调整文字行与行之间的距离，单位为距离。
• hover有悬浮的意思，在CSS选择器後方加上:hover，代表当游标移至目标元素时应产生的效果。

范例

<!-- HTML -->
<p>Today is a wonderful day. But I have to finish this article. Thanks for reading. Let's have fun with programming.</p>
<!-- CSS -->
p:hover {
  line-height: 40px;
  text-transform: uppercase;
}

显示效果如下

上方为文字原有的状态。

可以看到上方，将游标移至文字范围中，行高和大小写的变化。

定位

• position为定位属性，为网页排版中最重要的元素之一，依据不同的属性值，给予元素不同的定位方式。定位元素的内容与理论比较进阶，这边就藉由范例简单做介绍。
  • static为静止状态，维持元素预设的位置。
  • absolute会将元素从原有的定位清除，定位点在原来位置的左上角。若为元素加上上下左右任一距离属性，则定位点会变为整个画面的左上角。
  • relative会保留原来的区域，藉由其他属性来改变元素相对其原来的位置。
  • sticky可以使元素在网页滚动而超出元素可以完整显示的范围时，维持在一个固定位置，其定位会类似於relative。
  • fixed可以使元素在网页滚动时，维持在一个固定位置，而且定位会类似於absolute。

范例

<!-- HTML -->
<div id="container">
  <div class="box box-1"></div>
  <div class="box box-2"></div>
  <div class="box box-3"></div>
</div>
<!-- CSS -->
#container {
  height: 400px;
  background: orange;
}
.box {
  width: 100px;
  height: 100px;
  border: 6px solid green;
}
.box-1 {
  background: blue;
}
.box-2 {
  position: relative;
  top: 30px;
  left: 30px;
  background: gray;
}
.box-3 {
  position: absolute;
  background: blue;
}

显示效果如下

之後的文章，可能会更专注在介绍程序语法，若有任何问题，也欢迎在下方留言或者私讯我哦!

内容来源:
freeCodeCamp|CodePen