CSS3学习教程，从入门到精通，CSS3 属性语法知识点及案例代码（4）

CSS3 属性语法知识点及案例代码

一、CSS3 文本属性

1. 颜色相关属性

color：设置文本颜色。
text-shadow：设置文本阴影。

2. 字体相关属性

font-family：设置字体系列。
font-size：设置字体大小。
font-weight：设置字体粗细。
font-style：设置字体风格（如斜体）。

3. 文本修饰属性

text-decoration：设置文本装饰（如下划线）。
text-align：设置文本对齐方式。
line-height：设置行高。
letter-spacing：设置字母间距。
word-spacing：设置单词间距。

4. 文本转换属性

text-transform：设置文本转换（如大写、小写）。

二、CSS3 盒模型属性

1. 外边距属性

margin：设置外边距。
margin-top、margin-right、margin-bottom、margin-left：分别设置上、右、下、左边的外边距。

2. 内边距属性

padding：设置内边距。
padding-top、padding-right、padding-bottom、padding-left：分别设置上、右、下、左边的内边距。

3. 宽度和高度属性

width：设置元素宽度。
height：设置元素高度。

4. 边框属性

border：设置边框。
border-width、border-style、border-color：分别设置边框的宽度、样式和颜色。
border-radius：设置边框圆角。

三、CSS3 背景属性

1. 背景颜色和图像

background-color：设置背景颜色。
background-image：设置背景图像。
background-repeat：设置背景图像是否重复。
background-position：设置背景图像的位置。
background-size：设置背景图像的大小。
background-attachment：设置背景图像是否固定或滚动。

四、CSS3 盒子阴影和轮廓

1. 盒子阴影

box-shadow：设置盒子阴影。

2. 轮廓

outline：设置轮廓。
outline-width、outline-style、outline-color：分别设置轮廓的宽度、样式和颜色。

五、CSS3 二维转换

1. 基本转换

transform：设置元素的二维转换。
transform-origin：设置转换的原点。

六、CSS3 动画

1. 关键帧动画

@keyframes：定义动画的关键帧。
animation：应用动画。
animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state：分别设置动画的名称、持续时间、速度曲线、延迟、迭代次数、方向、填充模式和播放状态。

七、CSS3 多列布局

1. 多列属性

column-count：设置列数。
column-width：设置列宽。
column-gap：设置列之间的间隔。
column-rule：设置列之间的分隔线。

八、CSS3 弹性布局

1. 弹性容器属性

display: flex：将元素设置为弹性容器。
flex-direction：设置主轴方向。
flex-wrap：设置是否换行。
justify-content：设置主轴对齐方式。
align-items：设置侧轴对齐方式。
align-content：设置多行对齐方式。

2. 弹性项目属性

order：设置项目的排列顺序。
flex-grow：设置项目的扩展比例。
flex-shrink：设置项目的收缩比例。
flex-basis：设置项目的初始主轴长度。
align-self：设置项目的侧轴对齐方式。

九、CSS3 网格布局

1. 网格容器属性

display: grid：将元素设置为网格容器。
grid-template-columns、grid-template-rows：设置网格的列和行。
grid-gap：设置网格之间的间隔。
grid-template-areas：设置网格区域。

2. 网格项目属性

grid-column、grid-row：设置项目在网格中的位置。
grid-area：设置项目的网格区域。

十、CSS3 过渡效果

1. 过渡属性

transition：设置过渡效果。
transition-property、transition-duration、transition-timing-function、transition-delay：分别设置过渡的属性、持续时间、速度曲线和延迟。

十一、CSS3 滤镜效果

1. 滤镜属性

filter：设置滤镜效果。

十二、CSS3 媒体查询

1. 媒体查询属性

@media：用于响应式设计，根据不同的屏幕尺寸设置不同的样式。

十三、CSS3 伪元素和伪类

1. 伪元素

::before、::after：在元素前后插入内容。
::first-letter、::first-line：设置首字母和首行样式。

2. 伪类

:hover、:active、:focus：设置元素在不同状态下的样式。

十四、CSS3 颜色函数

1. 颜色函数

rgb()、rgba()、hsl()、hsla()：设置颜色。

十五、CSS3 字体图标

1. 字体图标属性

@font-face：自定义字体。

十六、CSS3 文本溢出

1. 文本溢出属性

text-overflow：设置文本溢出时的显示方式。

十七、CSS3 盒模型增强

1. 盒模型属性

box-sizing：设置盒模型的计算方式。

十八、CSS3 动画和过渡综合案例

案例：按钮悬停效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 按钮悬停效果</title>
  <style>
    /* 设置按钮的基本样式 */
    .btn {
      display: inline-block;
      padding: 10px 20px;
      margin: 20px;
      border: none;
      border-radius: 5px;
      color: white;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease; /* 设置过渡效果 */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 设置阴影 */
    }

    /* 不同按钮的背景颜色 */
    .btn-primary {
      background-color: #007bff;
    }

    .btn-secondary {
      background-color: #6c757d;
    }

    .btn-success {
      background-color: #28a745;
    }

    .btn-danger {
      background-color: #dc3545;
    }

    /* 按钮悬停效果 */
    .btn:hover {
      transform: translateY(-2px); /* 向上移动 */
      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* 增大阴影 */
    }

    /* 按钮按下效果 */
    .btn:active {
      transform: translateY(1px); /* 向下移动 */
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 减小阴影 */
    }

    /* 按钮禁用状态 */
    .btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    /* 使用伪元素添加图标 */
    .btn::before {
      content: "▶ ";
      font-weight: bold;
    }
  </style>
</head>
<body>
  <button class="btn btn-primary">主要按钮</button>
  <button class="btn btn-secondary">次要按钮</button>
  <button class="btn btn-success">成功按钮</button>
  <button class="btn btn-danger" disabled>危险按钮</button>
</body>
</html>

案例代码说明

基本样式设置：为按钮设置了基本的样式，包括内边距、外边距、边框、圆角、颜色等。
过渡效果：使用 transition 属性为按钮的属性变化添加平滑的过渡效果。
阴影效果：使用 box-shadow 属性为按钮添加阴影，增强立体感。
悬停效果：通过 :hover 伪类，在鼠标悬停时改变按钮的位置和阴影，实现上浮效果。
按下效果：通过 :active 伪类，在按钮被按下时改变其位置和阴影，模拟被按下的状态。
禁用状态：通过 :disabled 伪类，为禁用的按钮设置透明度和鼠标样式，表示不可用。
伪元素：使用 ::before 伪元素在按钮前添加图标，增强视觉效果。

这个案例综合运用了 CSS3 的多种属性和伪类，展示了如何通过 CSS3 实现丰富的按钮交互效果。

以下是 CSS3 属性在实际开发中的一些具体案例，涵盖了常见属性的实际应用，每个案例都包含详细注释：

案例一：简单的导航栏样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏样式</title>
    <style>
        /* 导航栏容器样式 */
        .navbar {
            background-color: #333; /* 设置背景颜色 */
            padding: 10px 20px; /* 设置内边距 */
            border-radius: 5px; /* 设置圆角 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
        }

        /* 导航链接样式 */
        .navbar a {
            color: white; /* 设置文本颜色 */
            text-decoration: none; /* 去掉下划线 */
            margin-right: 15px; /* 设置右边距 */
            padding: 5px 10px; /* 设置内边距 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }

        /* 鼠标悬停时的样式 */
        .navbar a:hover {
            background-color: #555; /* 改变背景颜色 */
            border-radius: 3px; /* 设置圆角 */
        }

        /* 当前页面活动链接样式 */
        .navbar a.active {
            color: #04AA6D; /* 设置活动链接的颜色 */
            font-weight: bold; /* 加粗字体 */
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <a href="#" class="active">首页</a>
        <a href="#">关于我们</a>
        <a href="#">服务</a>
        <a href="#">联系我们</a>
    </nav>
</body>
</html>

案例二：响应式卡片布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式卡片布局</title>
    <style>
        /* 卡片容器样式 */
        .card-container {
            display: flex; /* 使用弹性布局 */
            flex-wrap: wrap; /* 允许换行 */
            gap: 20px; /* 设置卡片之间的间隔 */
            padding: 20px;
        }

        /* 卡片样式 */
        .card {
            flex: 1; /* 卡片在容器中等分空间 */
            min-width: 250px; /* 设置最小宽度 */
            background-color: white; /* 设置背景颜色 */
            border-radius: 8px; /* 设置圆角 */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
            padding: 15px; /* 设置内边距 */
            transition: transform 0.3s ease; /* 添加过渡效果 */
        }

        /* 鼠标悬停时的样式 */
        .card:hover {
            transform: translateY(-5px); /* 向上移动 */
        }

        /* 卡片标题样式 */
        .card h3 {
            color: #333; /* 设置标题颜色 */
            margin-top: 0; /* 去掉上边距 */
        }

        /* 卡片内容样式 */
        .card p {
            color: #666; /* 设置内容颜色 */
            line-height: 1.5; /* 设置行高 */
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .card-container {
                flex-direction: column; /* 在小屏幕上改为垂直布局 */
            }
        }
    </style>
</head>
<body>
    <div class="card-container">
        <div class="card">
            <h3>卡片标题 1</h3>
            <p>这是一个卡片内容。卡片可以用于展示信息，是现代网页设计中常见的组件。</p>
        </div>
        <div class="card">
            <h3>卡片标题 2</h3>
            <p>这是另一个卡片内容。通过 CSS3 属性，我们可以轻松地为卡片添加样式，使其看起来更加美观。</p>
        </div>
    </div>
</body>
</html>

案例三：按钮样式与交互效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按钮样式与交互效果</title>
    <style>
        /* 按钮基本样式 */
        .btn {
            display: inline-block; /* 设置为行内块元素 */
            padding: 10px 20px; /* 设置内边距 */
            background-color: #007bff; /* 设置背景颜色 */
            color: white; /* 设置文本颜色 */
            border: none; /* 去掉边框 */
            border-radius: 5px; /* 设置圆角 */
            cursor: pointer; /* 设置鼠标指针为手型 */
            transition: all 0.3s ease; /* 添加过渡效果 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
        }

        /* 鼠标悬停时的样式 */
        .btn:hover {
            background-color: #0056b3; /* 改变背景颜色 */
            transform: translateY(-2px); /* 向上移动 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* 改变阴影 */
        }

        /* 按钮按下时的样式 */
        .btn:active {
            transform: translateY(1px); /* 向下移动 */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* 改变阴影 */
        }

        /* 禁用按钮的样式 */
        .btn:disabled {
            opacity: 0.6; /* 设置透明度 */
            cursor: not-allowed; /* 设置鼠标指针为禁止状态 */
        }
    </style>
</head>
<body>
    <button class="btn">点击我</button>
    <button class="btn" disabled>禁用按钮</button>
</body>
</html>

案例四：文本溢出处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本溢出处理</title>
    <style>
        /* 文本容器样式 */
        .text-container {
            width: 200px; /* 设置宽度 */
            border: 1px solid #ddd; /* 设置边框 */
            padding: 10px; /* 设置内边距 */
            margin: 20px; /* 设置外边距 */
            background-color: #f9f9f9; /* 设置背景颜色 */
        }

        /* 单行文本溢出处理 */
        .single-line {
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 隐藏溢出部分 */
            text-overflow: ellipsis; /* 添加省略号 */
        }

        /* 多行文本溢出处理 */
        .multi-line {
            display: -webkit-box; /* 使用 Webkit 盒模型 */
            -webkit-box-orient: vertical; /* 垂直排列 */
            -webkit-line-clamp: 3; /* 设置显示的行数 */
            overflow: hidden; /* 隐藏溢出部分 */
        }
    </style>
</head>
<body>
    <div class="text-container">
        <h3>单行文本溢出</h3>
        <p class="single-line">这是一个很长的文本，用于演示单行文本溢出时的效果。文本内容超出了容器的宽度。</p>
    </div>

    <div class="text-container">
        <h3>多行文本溢出</h3>
        <p class="multi-line">这是一个很长的文本，用于演示多行文本溢出时的效果。文本内容超出了容器的高度，这里只显示前三行，多余的部分被隐藏。</p>
    </div>
</body>
</html>

案例五：弹性布局应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局应用</title>
    <style>
        /* 容器样式 */
        .container {
            display: flex; /* 使用弹性布局 */
            justify-content: space-between; /* 主轴对齐方式 */
            padding: 20px;
            background-color: #f5f5f5; /* 设置背景颜色 */
        }

        /* 左侧边栏样式 */
        .sidebar {
            flex: 0 0 200px; /* 设置固定宽度 */
            background-color: #ddd; /* 设置背景颜色 */
            padding: 15px; /* 设置内边距 */
            border-radius: 5px; /* 设置圆角 */
        }

        /* 主要内容区域样式 */
        .main-content {
            flex: 1; /* 剩余空间等分 */
            background-color: white; /* 设置背景颜色 */
            padding: 15px; /* 设置内边距 */
            border-radius: 5px; /* 设置圆角 */
            margin-left: 20px; /* 设置左边距 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <h3>侧边栏</h3>
            <p>这里可以放置导航菜单或其他辅助内容。</p>
        </div>
        <div class="main-content">
            <h3>主要内容</h3>
            <p>这里是页面的主要内容区域，使用弹性布局可以确保它在不同屏幕尺寸下都能良好显示。</p>
        </div>
    </div>
</body>
</html>