CSS基础介绍(2)

来轻松聊聊

今天的内容将着重在版面配置，利用这些属性，可以让一个网页，从完全空白到能清楚的区分网页中各种功能的区块。

背景

背景设定如同border(边框)属性，可以使用background属性设定多种值，或另外以个别属性做设定，这边介绍常用的几种:
- background-color可以设定背景颜色，值为颜色名称、16进位制、rgba表示法。
- background-image是将图片设定为目标区域的背景，必须在属性内加入url("图片位址")，位址可以是本机图片或网路上的图片。
- background-repeat用於背景的重复形态，由於浏览器会预设将背景图片重复填满目标区域，若不希望重复，需要另外做调整。
- background-size用来调整背景尺寸，值可为%(原图的百分比)、宽高(设定背景的宽和高，若只给一个数值则为宽的长度、高为自动)、cover(以较短的一边等比放大至填满背景)、contain(维持原图大小)。
- background後可同时设定多种值，不必按顺序为:bg-img、repeat-style、position/bg-size(背景尺寸必须紧邻repeat之後并用/隔开)；background-color必须在最後。

范例

<!-- HTML -->
<body></body>
<!-- CSS -->
body {
  background: top/cover no-repeat url("https://i.ytimg.com/vi/Gy0muvjik6w/maxresdefault.jpg");
}

显示效果如下

外距和内距

一个HTML元素除了本身的大小，在网页中所占据的空间由三个属性来决定:border(边框)、padding、margin，HTML中所有元素的内外距都有预设值。
padding为内距，从边框往内至元素的垂直距离，有几种写法：
- padding: XX;，若只给一个值，则会设定为四边相同的内距。
- padding: XX XX XX;，给三个值，依序为上方、左=右、下方距离。
- padding: XX XX XX XX;，给四个值，依序为上方、右方、下方、左方距离。
- 也可以个别设定，padding-top、padding-bottom、padding-left、padding-right。
margin为外距，从边框往外的垂直距离，写法与padding相同，将padding改为margin即可。

范例

<!-- HTML -->
<div id="container">
  <div id="box">padding</div>
</div>
<!-- CSS -->
#container {
  background: yellow;
  padding: 15px 20px 15px;
}
#box {
  background: blue;
  color: #FFF;
  padding: 15px 20px 15px;
  margin: 20px 15px 10px 30px;
  border: 5px solid green;
}

显示效果如下

继承值与重要值

在HTML元素中，由巢状的结构组成。一层包着一层，外层称为父元素，相对於内层子元素，子元素会继承父元素的CSS属性。
class属性中，越後方的值，优先等级越高。
若有任何属性不想被继承的缘故意外覆盖，可於後方加上!important，则该属性将会最优先被显示来。
CSS属性的优先等级: !important > 标签内style > id选择器属性 > class选择器後方值 > class选择器前方值 > 标签选择器属性值 > 继承父元素的值。

范例

<!-- HTML -->
<h1 id="orange-text" class="pink-text blue-text" >Hello Everybody!</h1>
<!-- CSS -->
body {
  background-color: black;
  font-family: monospace;
  color: green;
}
h1{
  color: red;
}
#orange-text {
  color: orange;
}
.pink-text {
  color: pink;
}
.blue-text {
  color: blue;
}