网页制作教程 css
CSS 基础语法
CSS（层叠样式表）用于控制网页的样式和布局。基本语法由选择器和声明块组成：
选择器 {
属性: 值;
属性: 值;
}- 选择器：指定要样式化的HTML元素（如
p、.class、#id）。 - 声明块：包含一组属性-值对，用分号分隔。
常用 CSS 属性
-
文本样式
p { color: #333; /* 文字颜色 */ font-size: 16px; /* 字体大小 */ font-family: Arial; /* 字体类型 */ text-align: center; /* 对齐方式 */ } -
盒模型
div { width: 200px; height: 100px; padding: 10px; /* 内边距 */ margin: 20px; /* 外边距 */ border: 1px solid #000; /* 边框 */ } -
背景与颜色
body { background-color: #f0f0f0; background-image: url("image.jpg"); background-repeat: no-repeat; }
CSS 引入方式
-
内联样式（直接写在HTML标签中）
<p style="color: red;">文本</p> -
内部样式表（在HTML的
<head>中定义）<style> p { color: blue; } </style> -
外部样式表（通过
.css文件引入，推荐）<link rel="stylesheet" href="styles.css">
布局技术
-
Flexbox（弹性布局）
.container { display: flex; justify-content: center; /* 水平对齐 */ align-items: center; /* 垂直对齐 */ } -
Grid（网格布局）
.grid-container { display: grid; grid-template-columns: 1fr 1fr; /* 两列等宽 */ gap: 10px; /* 间距 */ } -
定位
.box { position: relative; /* 相对定位 */ top: 10px; left: 20px; }
响应式设计
使用媒体查询适配不同屏幕尺寸：
@media (max-width: 768px) {
body {
font-size: 14px;
}
}学习资源推荐
- MDN CSS 教程：权威文档，涵盖基础到高级内容。
- W3Schools CSS 教程：交互式练习和示例。
- CSS-Tricks：实用技巧和最新趋势。
- CodePen：在线编辑和分享CSS代码片段。
通过实践项目（如个人博客、产品页面）巩固知识，逐步掌握CSS的核心概念。
