Dreamweaver CSS 教程：从零开始打造精美网页
CSS (Cascading Style Sheets) 是层叠样式表的缩写，它负责定义网页的视觉呈现，比如颜色、字体、布局和动画，如果说 HTML 是网页的骨架，CSS 就是网页的“皮肤”和“衣服”。
Dreamweaver 的最大优势在于它提供了“实时视图”和“代码视图”的无缝切换，让你既能直观地看到效果,又能精准地控制代码。
第一部分：准备工作与基础设置
在开始之前,请确保你已经：
- 安装 Adobe Dreamweaver：最新版本体验最佳。
- 创建一个新项目：
- 打开 Dreamweaver，选择“新建” -> “HTML”。
- Dreamweaver 会自动为你创建一个包含基本 HTML5 结构的文件 (
index.html)。
核心概念：Dreamweaver 的工作区
- 代码视图：纯代码编辑界面,适合高级用户。
- 实时视图：所见即所得的可视化编辑界面，你可以直接在上面点击、拖拽元素。
- 实时代码视图：在实时视图下方，它会实时显示当前你正在操作的 HTML 和 CSS 代码,这是学习的绝佳工具！
- CSS 设计器：位于右侧的面板，是 Dreamweaver 的核心 CSS 管理工具,可视化地创建和管理样式。
第二部分：CSS 的三种应用方式
在 Dreamweaver 中，你可以用三种方式为 HTML 添加样式。
内联样式 (不推荐)
直接在 HTML 标签的 style 属性中写 CSS。
示例：
<h1 style="color: blue; text-align: center;">这是一个蓝色居中的标题</h1>
- 缺点：样式和内容混在一起，难以维护,无法复用。
内部样式表 (适合单页)
在 HTML 文件的 在 Dreamweaver 中操作： 示例： 这是最专业、最常用的方式，创建一个独立的 在 Dreamweaver 中操作： 创建 CSS 文件： 链接 CSS 文件： 优点： 我们将以最推荐的外部样式表为例。 操作步骤： 创建选择器： 设置属性： 选择器告诉浏览器哪个 HTML 元素要应用样式。 这是 CSS 布局的基础，每个 HTML 元素都可以看作一个盒子,它包含： 在 Dreamweaver 中操作：
在 CSS 设计器的“布局”分类中，你可以直观地调整 Flexbox 是现代 CSS 布局最强大的工具之一,用于创建一维的行或列布局。 在 Dreamweaver 中操作： 让样式变化更平滑,而不是瞬间完成。 在 Dreamweaver 中操作： 让你的网页在不同设备（手机、平板、桌面）上都有良好的显示效果。 在 Dreamweaver 中操作： 在 CSS 设计器中，点击“媒体查询”旁边的 号。 选择一个预设的断点， Dreamweaver 会在你的 CSS 文件中创建一个 在这个代码块内,你可以为特定屏幕尺寸编写样式。 Sass 是 CSS 的超集，它增加了变量、嵌套、混合等强大功能，让 CSS 更易于维护和扩展。 在 Dreamweaver 中操作： 在文件面板中，右键点击项目，选择“新建” -> “Sass 文件”，命名为 Dreamweaver 会自动设置好编译器，将 Sass 的优势示例： 变量：定义一次颜色,到处使用。 嵌套：让代码结构更清晰。 通过这份教程，你应该已经掌握了在 Dreamweaver 中使用 CSS 的核心方法，最重要的是多动手实践，尝试创建自己的网页，并不断探索 Dreamweaver 的强大功能,祝你学习愉快！<head> 标签内使用 <style>
<head> 和 </head>
<style> 然后按回车，Dreamweaver 会自动补全 </style>。<style> 标签内编写 CSS。
<head>
...
<style>
p {
color: green;
font-size: 16px;
}
</style>
...
</head>
<body>
<p>这段文字是绿色的。</p>
</body>
外部样式表 (强烈推荐)
.css 文件，然后在 HTML 文件中引用它。
style.css。
index.html 文件。<head> 标签内。style.css 文件，点击“确定”。<link rel="stylesheet" href="style.css">
style.css 一个文件即可。
第三部分：使用 CSS 设计器创建你的第一个样式
index.html 已经链接了 style.css。style.css 文件。
<h1> 标签设置样式，就输入 h1，然后点击“确定”。
#003366）。font-size，输入 36px。text-align，从下拉菜单中选择 center。index.html 的“实时视图”，你会立刻看到 <h1> 标签的样式已经改变！
第四部分：CSS 核心概念详解
选择器
p { color: red; } /* 所有 <p> 标签文字变红 */
h2 { font-size: 24px; } /* 所有 <h2> 标签字体大小为 24px */
.highlight { background-color: yellow; } /* 任何 class="highlight" 的元素背景变黄 */
#main-header { border-bottom: 2px solid #ccc; } /* id="main-header" 的元素底部有边框 */
盒模型
Padding、Margin 和 Border 的值，甚至可以分别设置上、右、下、左四个方向的值。布局：Flexbox
<div class="container">，里面包含几个 <div class="item">。.container 创建一个样式规则。Display 属性，将其值从 block 改为 flex。flex，下方会出现一堆新的 Flexbox 属性，如 Flex Direction (决定是行还是列)、Justify Content (主轴对齐方式)、Align Items (交叉轴对齐方式) 等。
第五部分：进阶技巧与最佳实践
使用 CSS 过渡
hover）设置一个新样式,背景色变为蓝色。Transition 属性。background-color），并设置持续时间（如 3s）。响应式设计与媒体查询
min-width: 768px (平板) 或 min-width: 992px (桌面)。@media 代码块。/* 默认样式（手机优先） */
.container {
width: 100%;
padding: 10px;
}
/* 当屏幕宽度大于等于 768px 时（平板及以上） */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto; /* 居中显示 */
}
}
使用 CSS 预处理器：Sass
main.scss。.scss 文件编译成 .css 文件。
$primary-color: #3498db;
$font-size-base: 16px;
body {
color: $primary-color;
font-size: $font-size-base;
}
h1 {
color: $primary-color; // 无需重复输入颜色代码
}
.nav {
ul {
list-style: none;
}
li {
display: inline-block;
}
a {
text-decoration: none;
&:hover { // & 表示父选择器
color: red;
}
}
}
第六部分：学习资源与总结
推荐学习资源
