css 制作
CSS 制作基础
CSS（层叠样式表）用于控制网页的样式和布局。通过CSS，可以定义字体、颜色、间距、背景等视觉效果，使HTML内容更具吸引力。
内联样式
直接在HTML元素的style属性中编写CSS：
<p style="color: blue; font-size: 16px;">这是一段蓝色文字。</p>内部样式表
在HTML文档的<head>部分使用<style>标签定义CSS：
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>外部样式表
将CSS代码保存在独立的.css文件中，通过<link>标签引入：
<head>
<link rel="stylesheet" href="styles.css">
</head>styles.css文件内容示例：
p {
color: blue;
font-size: 16px;
}常用CSS属性
文本样式
p {
color: #333; /* 文字颜色 */
font-family: Arial, sans-serif; /* 字体 */
font-size: 14px; /* 字号 */
font-weight: bold; /* 字重 */
text-align: center; /* 对齐方式 */
line-height: 1.5; /* 行高 */
}盒模型
div {
width: 200px; /* 宽度 */
height: 100px; /* 高度 */
padding: 10px; /* 内边距 */
margin: 20px; /* 外边距 */
border: 1px solid #ccc; /* 边框 */
}背景与渐变
body {
background-color: #f0f0f0; /* 背景色 */
background-image: url('image.jpg'); /* 背景图 */
background-size: cover; /* 背景图大小 */
}
button {
background: linear-gradient(to right, #ff9966, #ff5e62); /* 渐变背景 */
}布局技术
Flexbox
Flexbox用于创建灵活的响应式布局：
.container {
display: flex;
justify-content: space-between; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
}
.item {
flex: 1; /* 弹性比例 */
}Grid
CSS Grid适合复杂的二维布局：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
gap: 10px; /* 间隙 */
}
.grid-item {
grid-column: span 2; /* 跨两列 */
}响应式设计
使用媒体查询适配不同屏幕尺寸：
/* 默认样式 */
.container {
width: 100%;
}
/* 平板及以上 */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* 桌面及以上 */
@media (min-width: 992px) {
.container {
width: 970px;
}
}动画与过渡
过渡效果
.button {
transition: all 0.3s ease; /* 属性变化时平滑过渡 */
}
.button:hover {
transform: scale(1.1); /* 悬停时放大 */
}关键帧动画
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.slide-element {
animation: slideIn 0.5s forwards;
}最佳实践
- 使用语义化的类名（如
.main-nav而非.div1） - 避免过度嵌套选择器（如
.nav ul li a） - 优先使用CSS变量管理重复值：
:root { --primary-color: #3498db; }
.button { background-color: var(--primary-color); }
- 通过工具（如Autoprefixer）自动添加浏览器前缀
- 使用预处理器（如Sass/Less）提高可维护性
