网页css制作
CSS 基础语法
CSS（层叠样式表）用于控制网页的样式和布局。基本语法由选择器和声明块组成：
选择器 {
属性: 值;
属性: 值;
}- 选择器：指定要样式化的 HTML 元素（如
p、.class、#id）。 - 声明块：包含一组属性-值对，用分号分隔。
引入 CSS 的方式
内联样式：直接在 HTML 标签中使用 style 属性。
<p style="color: red;">文本</p>内部样式表：在 HTML 文件的 <head> 内通过 <style> 标签定义。
<style>
p { color: blue; }
</style>外部样式表：通过 <link> 标签引入独立的 .css 文件（推荐）。
<link rel="stylesheet" href="styles.css">常用 CSS 属性
-
文本样式：
color: #333; /* 文字颜色 */ font-size: 16px; /* 字号 */ font-family: Arial; /* 字体 */ text-align: center; /* 对齐方式 */ -
盒模型：
width: 200px; /* 宽度 */ height: 100px; /* 高度 */ padding: 10px; /* 内边距 */ margin: 20px; /* 外边距 */ border: 1px solid #000; /* 边框 */ -
背景与颜色：
background-color: #f0f0f0; /* 背景色 */ background-image: url('image.jpg'); /* 背景图 */ background-size: cover; /* 背景图覆盖 */
布局技术
Flexbox：弹性布局，适合一维排列。
.container {
display: flex;
justify-content: space-between; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
}Grid：网格布局，适合二维布局。
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* 两列等宽 */
gap: 10px; /* 间距 */
}响应式设计
使用媒体查询适配不同屏幕尺寸：
@media (max-width: 768px) {
.container {
flex-direction: column; /* 小屏幕改为垂直排列 */
}
}动画与过渡
过渡效果：平滑改变属性值。
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #555;
}关键帧动画：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
}调试技巧
- 使用浏览器开发者工具（F12）检查元素样式。
- 通过
border: 1px solid red;临时高亮元素边界。 - 利用
!important强制覆盖样式（慎用）。
优化建议
- 使用 CSS 预处理器（如 Sass/Less）提升可维护性。
- 遵循 BEM 命名规范（如
.block__element--modifier）。 - 压缩 CSS 文件以减少加载时间。
