网站制作css
CSS 基础概念
CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。通过将样式与HTML结构分离，提升代码可维护性。
引入CSS的三种方式
内联样式：直接在HTML标签中使用style属性
<p style="color: red;">文本内容</p>内部样式表：在HTML的<head>内添加<style>标签
<style>
p { color: blue; }
</style>外部样式表：通过<link>引入独立.css文件（推荐方式）
<link rel="stylesheet" href="styles.css">核心选择器类型
元素选择器：按标签名匹配
h1 { font-size: 2em; }类选择器：通过.前缀匹配class属性
.highlight { background-color: yellow; }ID选择器：通过#前缀匹配唯一id
#header { border-bottom: 1px solid #ddd; }属性选择器：根据属性匹配
input[type="text"] { width: 200px; }常用样式属性
文本样式
p {
font-family: Arial, sans-serif;
line-height: 1.6;
text-align: center;
text-decoration: underline;
}盒模型控制
div {
width: 300px;
padding: 20px;
margin: 10px auto;
border: 1px solid #ccc;
}颜色与背景
body {
color: #333;
background-color: #f5f5f5;
background-image: url('pattern.png');
}布局技术
Flexbox布局
.container {
display: flex;
justify-content: space-between;
align-items: center;
}Grid布局
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}定位方式
.absolute {
position: absolute;
top: 50px;
left: 100px;
}响应式设计
媒体查询适配不同设备
@media (max-width: 768px) {
.menu { display: none; }
.content { width: 100%; }
}视口单位实现比例缩放
.banner {
height: 50vh;
font-size: 5vw;
}动画与过渡
过渡效果
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #3498db;
}关键帧动画
@keyframes slide {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-in {
animation: slide 0.5s forwards;
}性能优化建议
- 避免过度嵌套选择器
- 使用CSS压缩工具减少文件体积
- 优先使用transform和opacity实现动画
- 合理使用will-change属性提示浏览器
现代CSS特性
变量定义
:root {
--primary-color: #4285f4;
}
.button {
background-color: var(--primary-color);
}CSS函数
.container {
width: min(90%, 1200px);
height: calc(100vh - 80px);
}
