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