使用CSS定義頁面元素的外觀樣式

005008發表於2019-06-05
CSS

CSS在網頁裡的作用，我分成兩塊：一是定義頁面元素的外觀樣式，二是定義頁面元素的排版佈局。本篇就通過例子來說明：如何使用CSS來定義頁面元素的樣式？

回到我們的按鈕例子：頁面上有一個按鈕，目前是沒有任何自定義樣式的，只有一個預設的樣式。

<html>
  <head>
    <title></title>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button onclick="buttonHandler()">
      按鈕
    </button>
  </body>
</html>
複製程式碼

1、設定按鈕的寬度和高度

<html>
  <head>
    <title></title>
    <style>
      /* 元素通過選擇器與樣式關聯 */
      .button {
        /* 設定按鈕高度 */
        height: 32px;
        /* 設定按鈕內邊距 */
        padding: 0 15px;
      }
    </style>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">
      按鈕
    </button>
  </body>
</html>
複製程式碼

這裡沒有直接設定按鈕的寬度，而是設定了按鈕內邊距，這樣按鈕的寬度會根據文字的長度而撐開。

2、設定按鈕的樣式

<html>
  <head>
    <title></title>
    <style>
      /* 元素通過選擇器與樣式關聯 */
      .button {
        /* 設定按鈕高度 */
        height: 32px;
        /* 設定按鈕內邊距 */
        padding: 0 15px;
        /* 設定背景顏色 */
        background-color: #1890ff;
        /* 設定邊框顏色 */
        border-color: #1890ff;
        /* 設定文字的顏色 */
        color: #fff;
        /* 設定字號 */
        font-size: 14px;
        /* 設定圓角 */
        border-radius: 4px;
        /* 給文字加上陰影 */
        text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
        /* 給邊框加上陰影 */
        box-shadow: 0 2px 0 rgba(0,0,0,0.045);
      }
    </style>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">
      按鈕
    </button>
  </body>
</html>

複製程式碼

現在這個按鈕就長得和ant-design一樣了，我填加了註釋來說明不同屬性的作用。通過設定不同屬性的值，CSS支援你把頁面元素定義成自己想要的任何外觀！其它的屬性可以查閱CSS文件。

3、通過CSS偽類讓按鈕的樣式響應互動

<html>
  <head>
    <title></title>
    <style>
      /* 元素通過選擇器與樣式關聯 */
      .button {
        /* 設定按鈕高度 */
        height: 32px;
        /* 設定按鈕內邊距 */
        padding: 0 15px;
        /* 設定背景顏色 */
        background-color: #1890ff;
        /* 設定邊框顏色 */
        border-color: #1890ff;
        /* 設定文字的顏色 */
        color: #fff;
        /* 設定字號 */
        font-size: 14px;
        /* 設定圓角 */
        border-radius: 4px;
        /* 給文字加上陰影 */
        text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
        /* 給邊框加上陰影 */
        box-shadow: 0 2px 0 rgba(0,0,0,0.045);
      }
      /* CSS偽類 */
      .button:hover {
        /* 設定透明度 */
        opacity: 0.8;
      }
    </style>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">
      按鈕
    </button>
  </body>
</html>
複製程式碼

當滑鼠經過按鈕的時候，按鈕會變成半透明。

4、給按鈕新增（過渡）動效

<html>
  <head>
    <title></title>
    <style>
      /* 元素通過選擇器與樣式關聯 */
      .button {
        /* 設定按鈕高度 */
        height: 32px;
        /* 設定按鈕內邊距 */
        padding: 0 15px;
        /* 設定背景顏色 */
        background-color: #1890ff;
        /* 設定邊框顏色 */
        border-color: #1890ff;
        /* 設定文字的顏色 */
        color: #fff;
        /* 設定字號 */
        font-size: 14px;
        /* 設定圓角 */
        border-radius: 4px;
        /* 給文字加上陰影 */
        text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
        /* 給邊框加上陰影 */
        box-shadow: 0 2px 0 rgba(0,0,0,0.045);
        /* 設定透明度變化時的過渡效果 */
        transition: opacity 0.5s;
      }
      /* CSS偽類 */
      .button:hover {
        /* 設定透明度 */
        opacity: 0.2;
      }
    </style>
    <script>
      function buttonHandler() {
        alert('Hello')
      }
    </script>
  </head>
  <body>
    <button class="button" onclick="buttonHandler()">
      按鈕
    </button>
  </body>
</html>
複製程式碼

為了讓效果看起來明顯，我將滑鼠經過時的透明度設定成了0.2。設定transition屬性後，按鈕的透明度變化就會有一個過渡效果，而不是直接從1變成0.2。

小結

還想增加一個動畫的例子，但是為了避免程式碼越加越長，必須來個總結了。

本篇涉及到的問題有點多：

  • 例子裡講CSS樣式寫在頁面的style標籤裡，還有其它的方式？
  • 什麼是選擇器？除了通過.開頭的類選擇器，還有哪些？
  • 設定高度的時候，用到的單位px是什麼意思，還支援哪些單位？
  • 按鈕的背景可以是一個顏色，也可以是一張背景圖？
  • 除了可以響應滑鼠經過，還支援哪些偽類？
  • 過渡效果和動畫？
  • ...

每一行程式碼都可以挖掘問題！下一篇例子關於如何使用CSS進行頁面佈局。

相關文章