网页制作的css
CSS 基础概念
CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。通过将样式与HTML结构分离，提升代码的可维护性。
引入CSS的三种方式
-
内联样式：直接在HTML标签中使用
style属性<p style="color: red;">文本</p> -
内部样式表：在HTML的
<head>内通过<style>标签定义<style> p { color: blue; } </style> -
外部样式表：通过
.css文件引入（推荐）<link rel="stylesheet" href="styles.css">
常用选择器
- 元素选择器：
p { font-size: 16px; } - 类选择器：
.className { color: green; } - ID选择器：
#header { background: #000; } - 后代选择器：
div p { margin: 10px; } - 伪类选择器：
a:hover { text-decoration: underline; }
盒模型核心属性
width/height：内容区域尺寸padding：内边距（内容与边框的距离）border：边框样式（如border: 1px solid black;）margin：外边距（元素间的间距）
布局技术
Flexbox布局
.container {
display: flex;
justify-content: center; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
}Grid布局
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}响应式设计
使用媒体查询适配不同设备：
@media (max-width: 768px) {
body { font-size: 14px; }
.sidebar { display: none; }
}动画与过渡
过渡效果
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #ff9900;
}关键帧动画
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
}实用技巧
- 使用CSS变量统一主题色：
:root { --primary-color: #3498db; } .button { background: var(--primary-color); } - 重置默认样式：
* { margin: 0; padding: 0; box-sizing: border-box; }
调试工具
浏览器开发者工具（F12）可实时编辑CSS，查看盒模型参数及样式覆盖关系。
