css制作教程
CSS 基础概念
CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。它与HTML结合使用，HTML负责结构，CSS负责样式。
基本语法结构
CSS规则由选择器和声明块组成：
选择器 {
属性: 值;
属性: 值;
}例如改变段落颜色：
p {
color: blue;
font-size: 16px;
}常用选择器类型
- 元素选择器：
p { } - 类选择器：
.className { } - ID选择器：
#idName { } - 属性选择器：
[type="text"] { } - 伪类选择器：
a:hover { }
盒模型理解
每个HTML元素都是一个盒子，包含：
- 内容(content)
- 内边距(padding)
- 边框(border)
- 外边距(margin)
通过CSS控制盒模型：
div {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}常用布局方式
浮动布局：
.left {
float: left;
width: 30%;
}
.right {
float: right;
width: 70%;
}弹性盒子(Flexbox)：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}网格布局(Grid)：
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}响应式设计技巧
使用媒体查询适配不同设备：
@media (max-width: 768px) {
.menu {
display: none;
}
}设置视口meta标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">动画效果实现
过渡效果：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff0000;
}关键帧动画：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.box {
animation: slide 2s infinite alternate;
}实用开发技巧
使用CSS变量：
:root {
--main-color: #4285f4;
}
.header {
background-color: var(--main-color);
}浏览器前缀处理：
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}调试工具使用
浏览器开发者工具可以：
- 实时编辑CSS
- 查看计算样式
- 调试布局问题
- 测试响应式设计
打开方式通常为右键点击页面选择"检查"或按F12键。
