dw制作css教程
DW制作CSS教程
准备工作
确保已安装Dreamweaver软件，版本建议为CC 2018或更高。创建一个新的HTML文件，保存为index.html。在文件头部添加CSS链接或内联样式标签。
内联样式与外部样式表
内联样式直接在HTML标签中使用style属性：
<p style="color: red;">这是红色文本</p>外部样式表通过<link>标签引入：
<link rel="stylesheet" href="styles.css">基本选择器应用
在CSS文件中定义类选择器和ID选择器：
.text-bold {
font-weight: bold;
}
#header {
background-color: #f0f0f0;
}HTML中调用：
<div id="header">页眉内容</div>
<p class="text-bold">加粗文本</p>盒模型与布局
设置元素的宽度、边距和边框：
.box {
width: 300px;
padding: 20px;
margin: 10px;
border: 1px solid #000;
}浮动布局示例：
.left-float {
float: left;
width: 50%;
}响应式设计
使用媒体查询适配不同屏幕：
@media (max-width: 600px) {
.box {
width: 100%;
}
}动画效果
定义关键帧动画：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
}调试与优化
使用Dreamweaver的实时预览功能检查效果。通过浏览器开发者工具（F12）查看CSS渲染结果，确保无冲突样式。
文件结构建议
将CSS文件存放在单独目录（如/css），图片资源放在/images。保持命名一致性，例如main.css和reset.css。
扩展学习
参考MDN Web Docs或W3Schools的CSS文档，了解Flexbox和Grid布局等高级特性。定期保存文件（Ctrl+S），避免内容丢失。
