CSS實例代碼：用樣式來美化網頁

CSS是一種用於描述網頁樣式的語言，可以控制網頁中的文字、顏色、布局等多種方面的顯示效果。本文將從多個方面介紹CSS的實例代碼，幫助讀者更好地理解樣式的使用及其效果。以下是幾個可供參考的實例：

一、控制字體和顏色

  p {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
  }

上述代碼可以將所有段落的字體設為Arial，字號設為16px，顏色設為#333，使得頁面的文字更加清晰易讀。

二、設置背景顏色和圖片

  body {
    background-color: #f0f0f0;
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }

上述代碼將頁面的背景顏色設置成了#f0f0f0，同時添加了一張名為image.jpg的背景圖片，並設置了圖片不重複出現，並且在任何分辨率下都能完全填滿頁面。

三、創建交互效果

  button {
    background-color: #4CAF50;
    border: none;
    border-radius: 5px;
    color: #fff;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition-duration: 0.4s;
  }

  button:hover {
    background-color: #fff;
    color: #4CAF50;
  }

上述代碼創建了一個按鈕的樣式，並添加了鼠標懸浮時的交互效果，讓用戶感受到頁面的動態反饋。

四、實現響應式布局

  .container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .box {
    width: calc(33.33% - 20px);
    margin: 10px;
    height: 200px;
    background-color: #ddd;
  }

  @media (max-width: 768px) {
    .box {
      width: calc(50% - 20px);
    }
  }

  @media (max-width: 480px) {
    .box {
      width: calc(100% - 20px);
    }
  }

上述代碼通過CSS3的Flex布局實現了一個容器和容器中的元素之間的排列和分布，同時添加了響應式設計，讓元素的大小依據不同的屏幕大小而變化。

本文介紹了CSS的不同用例和方法，並提供了部分實例代碼，幫助讀者在創建網頁時更加靈活地使用樣式，從而構建更加美觀、易用的界面。