CSS 常用属性、函数实用指南

2023-09-20 14:23:51

CSS 常用属性、函数速览与案例详解

CSS 属性

颜色属性
- color：设置文本颜色。
- background-color：设置元素背景颜色。
文本属性
- font-family：设置文本字体。
- font-size：设置文本大小。
- font-weight：设置文本粗细。
- text-align：设置文本对齐方式。
边框属性
- border-width：设置边框宽度。
- border-style：设置边框样式。
- border-color：设置边框颜色。
定位属性
- position：设置元素定位方式。
- top、right、bottom、left：设置元素距离父元素的距离。

CSS 函数

颜色函数
- rgb()：根据红、绿、蓝三个颜色通道的值设置颜色。
- rgba()：在 rgb() 的基础上增加了透明度通道。
文本函数
- text-shadow()：为文本添加阴影效果。
- text-transform：转换文本大小写。
边框函数
- border-radius：设置边框圆角半径。
- box-shadow：为元素添加阴影效果。
定位函数
- calc()：进行数学运算，可以用于设置元素的位置、大小等。

案例演示

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #333;
      font-size: 24px;
      text-align: center;
    }

    p {
      color: #666;
      font-size: 16px;
      text-align: justify;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: 5px 5px 10px #888;
      position: absolute;
      top: 50px;
      left: 50px;
    }
  </style>
</head>
<body>
  <h1>CSS 常用属性、函数速览</h1>

  <p>本文为 CSS 常用属性和函数提供详细的解析和案例演示，帮助初学者快速掌握 CSS 基础知识，创作出美观实用的网页界面。</p>

  <div class="box"></div>
</body>
</html>