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），避免内容丢失。