CSS基礎介紹(2)

13th鐵人賽 css教學 html教學前端網頁

JackyHuang

2021-09-06 19:03:06

1219 瀏覽

來輕鬆聊聊

今天的內容將著重在版面配置，利用這些屬性，可以讓一個網頁，從完全空白到能清楚的區分網頁中各種功能的區塊。

背景

背景設定如同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;
}