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>
这些案例展示了 CSS3 属性在实际开发中的广泛应用，从简单的样式设置到复杂的布局和交互效果，CSS3 提供了丰富的功能来满足现代网页设计的各种需求。