第08章 使用CSS样式控制网页外观
合集下载
网页制作：项目08 使用CSS控制购物网页外观--电子教案
《中文Dreamweaver 8网页制作教程与上机实训》，魏聪等编著，机械工业出版社
《非常容易Dreamweaver 8网页制作》，导向科技编著，人民邮电出版社
备注
附加样式表的方法
要求掌握
的知识点和分析方法
要求掌握【CSS样式】面板、CSS样式的类别、定义CSS样式的方法、CSS的【类型】等属性对话框、3种选择器各自的特点、创建超级链接的高级CSS样式、设置单元格ID名称和样式、修改CSS样式、删除CSS样式、应用CSS样式、附加样式表、重命名样式等知识点。
项目的主要目的是让学生掌握CSS样式的基本知识。项目主要通过CSS样式控制购物网页的外观，一方面要熟悉CSS样式的基本使用方法，另一方面要了解购物网页页面的基本特点。本项目使用的网页布局技术仍然是表格，另外还涉及文本、图像等网页元素。这些内容在前面的项目中已经介绍过，读者并不陌生。在本项目的制作中，读者需要了解许多网页元素的属性不一定必须通过【属性】面板来设置，也可以通过【CSS样式】面板来创建CSS样式进行控制，包括类、标签和高级CSS样式等。
中等职业学校教案
教研室：
课程名称：网页设计与制作—Dreamweaver 8
任课教师：
XXXX学校教务处制
中等职业学校教案
第8次课6学时
章节
项目八使用CSS控制购物网页外观
讲授主
要内容
1.CSS样式的作用
2.CSS样式的创建和设置方法
3.CSS样式的编辑方法
4.附加样式表的方法
重点
难点
创建和设置CSS样式的方法
授课思路，采用的教学方法和辅助手段，板书设计，重点如何突出，难点如何解决，师生互动等
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
《非常容易Dreamweaver 8网页制作》，导向科技编著，人民邮电出版社
备注
附加样式表的方法
要求掌握
的知识点和分析方法
要求掌握【CSS样式】面板、CSS样式的类别、定义CSS样式的方法、CSS的【类型】等属性对话框、3种选择器各自的特点、创建超级链接的高级CSS样式、设置单元格ID名称和样式、修改CSS样式、删除CSS样式、应用CSS样式、附加样式表、重命名样式等知识点。
项目的主要目的是让学生掌握CSS样式的基本知识。项目主要通过CSS样式控制购物网页的外观，一方面要熟悉CSS样式的基本使用方法，另一方面要了解购物网页页面的基本特点。本项目使用的网页布局技术仍然是表格，另外还涉及文本、图像等网页元素。这些内容在前面的项目中已经介绍过，读者并不陌生。在本项目的制作中，读者需要了解许多网页元素的属性不一定必须通过【属性】面板来设置，也可以通过【CSS样式】面板来创建CSS样式进行控制，包括类、标签和高级CSS样式等。
中等职业学校教案
教研室：
课程名称：网页设计与制作—Dreamweaver 8
任课教师：
XXXX学校教务处制
中等职业学校教案
第8次课6学时
章节
项目八使用CSS控制购物网页外观
讲授主
要内容
1.CSS样式的作用
2.CSS样式的创建和设置方法
3.CSS样式的编辑方法
4.附加样式表的方法
重点
难点
创建和设置CSS样式的方法
授课思路，采用的教学方法和辅助手段，板书设计，重点如何突出，难点如何解决，师生互动等
1、教师演示教学案例。
2、通过PPT课件讲授基本知识。
第8章 在网页中使用CSS样式
网页设计与制作
Block（文本块、区块）面板各选项的含义如下： A、单词间距(word spacing):设置单词之间的 距离(仅限于英文) B、字母间距(letter spacing):设置字母之间的 距离。中文字间距用此设置 C、垂直对齐(Vertical alignment):设置文本的 纵向对齐方式。可设置文本与图像之间的对 齐方式。基线、上标、下标、顶部、文本顶 对齐、中线对齐、底部、文本底部对齐等。
网页设计与制作
注意：
样式定义对话框的各类属性面板中有一些带 星号“*”的属性，这些属性的格式化效果不在文 档窗口中显示，只在浏览器中显示。有些不带星 号的属性也不在文档窗口显示，具体是哪些属性 则视实际情况而定。所以在文档窗口看不到效果 时，可以到浏览器窗口试试。
网页设计与制作
(3) 定义Block（文本 块）面板 如图所示，选择 “block(区块)”项， 出现设置面板，设置 mycss1样式的属性， 单击“确定”按钮。 则在CSS样式面板上 出现新定义的样式 mycss1
网页设计与制作
(2) 定义“type（文字）”面板 在弹出的“样式定义”对话框的“样式定义”对话框中选择 “类型”项，出现“类型”设置面板，设置mycss1样式的各 种属性：
网页设计与制作
“类型（文字）”面板各选项的含义如下： A、font(字体)：为样式设置字体。 B、size(字号)：设置字体大小，可以通过选择数 字和单位来指定字体大小，也可以选择相对的 字体大小。字体大小的单位有pixels(像素)、 points(磅)、in(英寸)、cm(厘米)、%（百 分比）等。 C、style(样式):指定字体样式，有normal(普 通)，italic(斜体)和oblique(倾斜)三种，后两种 明显区别。
css页面外观设计与布局
CSS页面设计的原则
保持一致性
在设计过程中，应保持整体风格和设 计元素的一致性，以增强用户体验。
注重可读性
确保文字和图片易于阅读，避免使用 过于花哨的字体或颜色。
考虑可访问性
确保设计的网页对所有用户都易于访 问，特别是对于残障人士和老年用户。
响应式设计
根据不同设备的屏幕尺寸和分辨率进 行适配，确保网页在不同设备上都能 正常显示。
02 CSS页面布局基础
块级元素与内联元素
块级元素
块级元素在页面上表现为一个矩形框，占据一行空间，如 `<div>`, `<p>`, `<h1>`-`<h6>`, `<ul>`, `<ol>`, `<li>` 等。块级元素可以设置宽度、高度、 内外边距等属性。
内联元素
内联元素不会独占一行，多个内联元素会排列在同一行内，如 `<span>`, `<a>`, `<img>` 等。内联元素只能设置左右边距，不能设置宽度和高度。
THANKS FOR WATCHING
感谢您的观看
Flexbox布局
01
总结词
Flexbox布局是一种现代的网页布局技术，通过设置元素为弹性盒模型，
使元素在容器中以灵活的方式排列和对齐。
02 03
详细描述
Flexbox布局提供了强大的对齐和分布控制能力，可以轻松实现水平居 中、垂直居中、等分布等效果。它还支持弹性容器和弹性子项，可以方 便地调整子项的尺寸和位置。
盒模型
盒模型是CSS布局的基础，每个HTML元素都可以看作是一个盒子，由内容、内边距（padding）、边框（border）和外边距 （margin）组成。
网页制作：项目08使用CSS控制购物网页外观幻灯片PPT
任务一 任务二 任务三 实训 小结
【CSS样式】面板
网页设计与制作
Dreamweaver 8
项目八：
使用CSS控制购物网 页外观
任务一 任务二 任务三 实训 小结
操作一 定义“body”的CSS规则
2.重新定义特定标签外观的方法
在【CSS样式】面板中单击 （新建CSS规则）按钮，弹出 【新建CSS规则】对话框，在对话框中【选择器类型】选择【标 签（重新定义特定标签的外观）】选项，在【标签】下拉列表框 中选择需要重新定义样式的标签，如“body”，然后根据需要 在【定义在】选项选择适合的选项，最后在【类型】、【背景】、 【方框】等对话框中根据需要设置参数即可。
使用CSS控制购物网 页外观
任务一 任务二 任务三 实训 小结
操作二 定义页眉的CSS规则
对话框中的【定义在】选项右侧是两个单选项，它们决定了 所创建的CSS样式的保存方法。点选【仅对该文档】单选钮，则 将CSS样式保存在当前的文档中，包含在文档的头部标签 “<head>…</head>”内。而如果点选【新建样式表文件】单 选按钮，则将新建一个专门用来保存CSS样式的文件，它的文件 扩展名为“*.css”。网页文档要使用样式表文件中的CSS样式时， 将通过“附加样式表”命令，将CSS文件链接或者导入到文档中。
网页设计与制作
Dreamweaver 8
项目八：
使用CSS控制购物网 页外观
任务一 任务二 任务三 实训 小结
操作二 定义页眉的CSS规则
3.创建和应用类样式的方法
以单元格为例，在【CSS样式】面板中单击 （新建CSS规 则）按钮，弹出【新建CSS规则】对话框，在【选择器类型】选 项组中点选【类（可应用于任何标签）】单选按钮，在【名称】 文本框中输入CSS样式名称，“.td_1”，然后在【类型】、【背 景】、【方框】等对话框中根据需要设置参数即可。CSS样式定 义完毕后，在单元格【属性】面板的【样式】下拉列表中选择定 义的样式名称，如“td_1”，将其应用到单元格上。
CSS+Div布局全
8.5.1 练习案例-电子产品
4．利用#menu样式为menu的<div>标签添加图像背景。在#nav标签 中，输入文字“公司介绍 产品展示 客户服务 人员招募 互动社区”， 并设置#nav样式，字体大小为16px，行高度为30px，颜色为#FFF。 5．设置#nav a:link，#nav a:visited样式属性，颜色为#FFF，文字装 饰为无，设置#nav a:hover样式属性，文字装饰为下划线，完成导 航条的制作。 6．在ID名称为info的<div>标签中，插入1*3表格，宽度为100%，将 三个图像分别插入到单元格中，设置#info样式背景为黑色。 素材所在位置：光盘/案例素材/ch08/练习案例-电子产品。 案例布局要求如图8-67所示，案例效果如图8-68所示。
无浮动
8.2.3 浮动方式
#box1 { height: 100px; width: 150px; background-color:
#F90; }
#box2 { height: 100px;
width: 200px; background-color: #C30; } #box3 { height: 100px; width: 250px; background-color: #3FF; }
8.1.2 盒子属性
在CSS样式中， 将盒子模型的 内边距、边框 和外边距，按 top、bottom、 left、right的四 个方向，分别 进行定义和设 置，描述盒子 属性。
8.1.2 盒子属性
例如，在网页中创建一个<div>标签，ID标识为 Div1，并在其中插入一个图像，代码如下：
#apDiv1 { position:absolute;
《网页设计与制作基础教程》第04章 使用CSS样式
网页设计与制作基础教程 网页设计与制作基础教程
4.2 在网页文档中使用CSS样式 在网页文档中使用CSS CSS样式
在Dreamweaver CS4中，可以创建一个CSS样式，然后应用于到 CS4中，可以创建一个CSS样式，然后应用于到 网页文档的某个部分，完成文本的格式化。 创建CSS样式 创建CSS样式 【CSS样式】面板表格的其他操作 表格的其他操作 新建CSS规则 应用CSS样式
CSS样式是Cascading CSS样式是Cascading Style Sheets(层叠样式单)的简称，也可以称为【 Sheets(层叠样式单)的简称，也可以称为【 级联样式表】 级联样式表】，它是一种网页制作的新技术，利用它可以对网页中的 文本进行精确的格式化控制。 CSS样式简介 CSS样式简介 CSS规则 CSS规则
网页设计与制作基础教程 网页设计与制作基础教程
4.2.2 【CSS样式】面板 CSS样式 样式】
使用【CSS样式】面板可以跟踪影响当前所选页面元素的CSS规 使用【CSS样式】面板可以跟踪影响当前所选页面元素的CSS规 则和属性，也可以跟踪网页文档可用的所有规则和属性。 选择【窗口】 CSS样式】命令，打开【CSS样式】 选择【窗口】|【CSS样式】命令，打开【CSS样式】面板。在该 面板顶部的有【全部】 面板顶部的有【全部】和【正在】两种模式，单击相应的按钮，即可 正在】 在两种模式之间切换，并且可以在这两种模式下进行修改CSS属性操 在两种模式之间切换，并且可以在这两种模式下进行修改CSS属性操 作。
网页设计与制作基础教程 网页设计与制作基础教程
4.2.1
创建CSS样式表 创建CSS样式表
在Dreamweaver CS4中，可以很方便地创建、编辑CSS样式表定义 CS4 可以很方便地创建、编辑CSS样式表定义 ，并且不需要直接编辑CSS代码，即使不懂 并且不需要直接编辑CSS代码， CSS层叠样式表定义 CSS 层叠样式表定义 语法的用户，也能轻松完成定义。 语法的用户，也能轻松完成定义。Dreamweaver CS4提供了功能非常强 CS4 大的CSS样式编辑器，不但可以在页面中直接插入CSS样式定义， 大的CSS样式编辑器，不但可以在页面中直接插入CSS样式定义，还可 以创建、编辑独立的CSS样式表文件。 以创建、编辑独立的CSS样式表文件。
ch08-应用CSS样式美化网页
8.4.3 设置区块样式
• 使用【区块】类别可以定义段落文本中文字的 字距、对齐方式等格式，在【CSS规则定义】 对话框左侧，选择【区块】选项，即可进行相 应的设置。
8.4.4 设置方框样式
• 在图像的属性面板上，可以设置图像的大小、图 像水平和垂直方向上的空白区域等，方框样式完 善并丰富了这些属性设置，定义特定元素的大小 及其与周围元素间距等属性。
8.4.5 设置边框样式
• 在Dreamweaver CS5中，使用【边框】类别可 以定义元素周围的边框的宽度、颜色和样式等 设置。
8.4.6 设置列表样式
• 在Dreamweaver CS5中，【列表】类别为列表 标记定义项目符号、大小和类型等列表设置。
8.4.7 设置定位样式
• 【定位】类别用于设置层的相关属性，使用定位样式可以 自动新建一个层并把页面中使用该样式的对象放到层中， 并且用在对话框中设置的相关参数控制新建层的属性。
8.1.2 CSS样式的类型
• 1. 自定义CSS(类样式) • 2. 重定义标签的CSS • 3. CSS选择器样式(高级样式)
8.1.3 CSS样式基本语法
• CSS的基本语法由三部分构成：选择器 （ctor）、属性（Property）和属性值 （Value）三个部分。
8.2 创建CSS样式
8.2.2 建立类样式
• 在【CSS样式】面板上，单击【新建CSS规则】按钮 。 • 弹出【新建CSS规则】对话框，单击展开【选择器类型】下拉按钮， 选择【类（可应用于任何HTML元素）】，单击【确定】按钮。 • 弹出【CSS规则定义】对话框，在【分类】列表中，选择各项进行设 置，单击【确定】按钮。 • 切换至代码视图，可以看到在代码中，添加了相应的代码。 • 保存文档，按下键盘上的【F12】键，即可在浏览器中浏览到网页的 视觉效果。
CSS样式表用法：网页布局与美化技巧
• 另一种方法是使用CSS框架（如：Bootstrap、 Foundation等），这些框架已经处理了大部分浏览器兼容 性问题
CREATE TOGETHER
DOCS
谢谢观看
THANK YOU FOR WATCHING
CREATE TOGETHER
DOCS
DOCS SMART CREATE
CSS样式表用法：网页布局与美化技 巧
01
CSS样式表的基本概念与作用
CSS样式表的定义与分类
CSS样式表分为两类：内联样式和外部样式
• 内联样式：直接应用于HTML元素的样式，使用<style>标签定义 • 外部样式：存储在单独的文件中，使用<link>标签引入
Web标准与浏览器兼容性问题
• Web标准是一系列规范和技术的集合，用于构建高质量的网页 • 如：HTML、CSS、JavaScript等
• 浏览器兼容性问题是指不同浏览器对Web标准的支持程度不同， 导致网页显示效果不一致的问题
• 使用CSS样式表实现浏览器兼容性问题的一种方法是使用浏览 器前缀（如：-webkit-、-moz-、-ms-等）
常用的动画与过渡效果 实现方法
• 使用@keyframes指令定义动画 的关键帧 • 使用animation属性设置动画的属 性，如name、duration、delay、 iteration-count
• 使用transition属性设置过渡的属 性，如property、duration、 timing-function、delay
使用CSS样式表进行响应式布局设计
常用的响应式布局技巧
• 栅格系统：使用grid布局实现网页的模块化布局，通过grid-template-columns、gridtemplate-rows属性设置网格的列数和行数 • 适配不同分辨率的屏幕：使用媒体查询根据屏幕尺寸调整元素的尺寸、字体大小等样式属性 • 适配不同设备的屏幕方向：使用媒体查询根据设备方向调整元素的布局和样式
CREATE TOGETHER
DOCS
谢谢观看
THANK YOU FOR WATCHING
CREATE TOGETHER
DOCS
DOCS SMART CREATE
CSS样式表用法：网页布局与美化技 巧
01
CSS样式表的基本概念与作用
CSS样式表的定义与分类
CSS样式表分为两类：内联样式和外部样式
• 内联样式：直接应用于HTML元素的样式，使用<style>标签定义 • 外部样式：存储在单独的文件中，使用<link>标签引入
Web标准与浏览器兼容性问题
• Web标准是一系列规范和技术的集合，用于构建高质量的网页 • 如：HTML、CSS、JavaScript等
• 浏览器兼容性问题是指不同浏览器对Web标准的支持程度不同， 导致网页显示效果不一致的问题
• 使用CSS样式表实现浏览器兼容性问题的一种方法是使用浏览 器前缀（如：-webkit-、-moz-、-ms-等）
常用的动画与过渡效果 实现方法
• 使用@keyframes指令定义动画 的关键帧 • 使用animation属性设置动画的属 性，如name、duration、delay、 iteration-count
• 使用transition属性设置过渡的属 性，如property、duration、 timing-function、delay
使用CSS样式表进行响应式布局设计
常用的响应式布局技巧
• 栅格系统：使用grid布局实现网页的模块化布局，通过grid-template-columns、gridtemplate-rows属性设置网格的列数和行数 • 适配不同分辨率的屏幕：使用媒体查询根据屏幕尺寸调整元素的尺寸、字体大小等样式属性 • 适配不同设备的屏幕方向：使用媒体查询根据设备方向调整元素的布局和样式
css的定义和使用方法
css的定义和使用方法CSS的定义和使用什么是CSSCSS，全称为”层叠样式表”（Cascading Style Sheets），是一种用来描述网页（HTML文档）样式的标记语言。
它可以控制网页中的布局、字体、颜色、背景等各个方面的样式，使得网页的外观更加美观和易于独立调整。
CSS的引入方式CSS可以通过以下几种方式引入页面：1.内联样式：直接在HTML标签的style属性中编写CSS代码，例如：<p style="color: red;">这是一段红色文字。
</ p>2.内部样式表：将CSS代码写在<style>标签中，放在HTML文档的<head>区域中，例如：<head><style>p {color: red;}</style></head><body><p>这是一段红色文字。
</p></body>3.外部样式表：将CSS代码写在一个独立的CSS文件中，通过<link>标签引入，例如：<head><link rel="stylesheet" href=""></head><body><p>这是一段红色文字。
</p></body>:p {color: red;}CSS选择器CSS选择器用于选择HTML中的元素，并为其应用样式。
常用的选择器有：•标签选择器：通过标签名选择元素，例如p选择所有的段落（）。
•类选择器：通过类名选择元素，以点号开头，例如.red选择所有具有class="red"的元素。
•ID选择器：通过ID选择元素，以井号开头，例如#header选择具有id="header"的元素。
使用CSS样式控制网页外观
使用CSS样式控制网页 外观
目录
Contents
• CSS简介 • 选择器 • 样式属性 • 布局和定位 • 实例和案例
01 CSS简介
CSS是什么
CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于描述 HTML或XML（包括如SVG、 MathML等衍生技术）文档样式的样 式表语言。
外边距和内边距
用于设置元素的外边距和内边距。例如， `margin: 10px; padding: 20px;`。
04 布局和定位
盒模型
盒模型是CSS布局的基础，它由内容、内边距、边 框和外边距组成。
通过设置元素的宽度和高度，可以控制内容的大 小。
内边距用于设置内容与边框之间的空间，而外边 距则控制元素之间的距离。
添加下拉菜单
使用HTML和CSS创建一个下拉菜单，当用户将鼠标 悬停在菜单项上时显示子菜单项。
制作响应式布局
01 02
使用媒体查询
使用CSS的媒体查询功能，根据屏幕宽度设置不同的样式，以实现响应 式布局。例如，当屏幕宽度小于600px时，隐藏侧边栏并调整主内容区 域的宽度。
调整布局
使用CSS的flexbox或grid布局系统，根据屏幕大小调整元素的位置和 大小。例如，在小屏幕上将元素水平排列，在大屏幕上将元素垂直排列。
以上是对CSS的简介，包括其定义、优点和基本语法。通过学习CSS，我们可以更好地控制网页的外观 和布局，提升用户体验。
02 选择器
类型选择器
总结词
类型选择器是CSS中最基础的选择器 ，它通过HTML元素的标签名来选择 元素。
详细描述
例如，`p { color: red; }`会将所有 `<p>`元素的文字颜色设置为红色。
目录
Contents
• CSS简介 • 选择器 • 样式属性 • 布局和定位 • 实例和案例
01 CSS简介
CSS是什么
CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于描述 HTML或XML（包括如SVG、 MathML等衍生技术）文档样式的样 式表语言。
外边距和内边距
用于设置元素的外边距和内边距。例如， `margin: 10px; padding: 20px;`。
04 布局和定位
盒模型
盒模型是CSS布局的基础，它由内容、内边距、边 框和外边距组成。
通过设置元素的宽度和高度，可以控制内容的大 小。
内边距用于设置内容与边框之间的空间，而外边 距则控制元素之间的距离。
添加下拉菜单
使用HTML和CSS创建一个下拉菜单，当用户将鼠标 悬停在菜单项上时显示子菜单项。
制作响应式布局
01 02
使用媒体查询
使用CSS的媒体查询功能，根据屏幕宽度设置不同的样式，以实现响应 式布局。例如，当屏幕宽度小于600px时，隐藏侧边栏并调整主内容区 域的宽度。
调整布局
使用CSS的flexbox或grid布局系统，根据屏幕大小调整元素的位置和 大小。例如，在小屏幕上将元素水平排列，在大屏幕上将元素垂直排列。
以上是对CSS的简介，包括其定义、优点和基本语法。通过学习CSS，我们可以更好地控制网页的外观 和布局，提升用户体验。
02 选择器
类型选择器
总结词
类型选择器是CSS中最基础的选择器 ，它通过HTML元素的标签名来选择 元素。
详细描述
例如，`p { color: red; }`会将所有 `<p>`元素的文字颜色设置为红色。
CSS用样式表美化你的网页
CSS用样式表美化你的网页第1天:选择什么样的DOCTYPE前言大家好！这个系列文章是按阿捷自己制作这个站点的过程编写的。
之前阿捷也一直没有制作过一个真正符合web标准的网站。
现在边参考国外资料边制作，同时把过程中的心得和经验记录下来，希望对大家有点帮助。
好了，让我们开始吧第一天开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。
查看本站首页原代码，可以看到第一行就是：打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，设计大师Zeldman的个人网站，会发现同样的代码。
而另一些符合标准的站点(例如)的代码则如下：那么这些代码有什么含义？一定要放置吗？什么是DOCTYPE上面这些代码我们称做DOCTYPE声明。
DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。
要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下：严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如。
完整代码如下：框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
完整代码如下：我们选择什么样的DOCTYPE理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。
中文版DreamweaverCS6网页制作实用教程第八章使用CSS样式修饰网页
8 .1.2 CSS 的规则与分类
CSS 样式规则由两部分组成：选择器和声明(大多数情况下为包含多个声明的代码块)。选 择器是标识已设置格式元素的术语，例如 p、h1、类名称或 ID，而声明块则用于定义样式属性。 例如下面 CSS 规则中，h1 是选择器，大括号({})之间的所有内容都是声明块。
h1 { font-size: 12 pixels; font-family: Times New Roman; font-weight:bold; }
在 Dreamweaver 中，有外部样式表和内部样式表，区别在于应用的范围和存放位置。 Dreamweaver 可以判断现有文档中定义的符合 CSS 样式准则的样式，并且在【设计】视图中直 接呈现已应用的样式。但要注意的是有些 CSS 样式在 Microsoft Internet Explorer、Netscape、 Opera、Apple Safari 或其他浏览器中呈现的外观不相同，而有些 CSS 样式目前不受任何浏览器 支持。下面是这两种样式表的介绍。
在制作网页时采用 CSS 技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实 现更加精确的控制。CSS 样式表的主要功能有以下几点：
几乎所有的浏览器中都可以使用。 以前一些只有通过图片转换实现的功能，现在只要用 CSS 就可以轻松实现，从而可 以更快地下载页面。 使页面的字体变得更漂亮、更容易编排，使页面真正赏心悦目。 可以轻松地控制页面的布局。 可以将许多网页的风格格式同时更新，不用再一页页地更新。
要管理一个系统的网站，使用 CSS 样式，可以快速格式化整个站点或多个文档中的字体、 图像等网页元素的格式。并且，CSS 样式可以实现多种不能用 HTML 样式实现的功能。
中文版 Dreamweaver CS6 网页制作实用教程
CSS 样式规则由两部分组成：选择器和声明(大多数情况下为包含多个声明的代码块)。选 择器是标识已设置格式元素的术语，例如 p、h1、类名称或 ID，而声明块则用于定义样式属性。 例如下面 CSS 规则中，h1 是选择器，大括号({})之间的所有内容都是声明块。
h1 { font-size: 12 pixels; font-family: Times New Roman; font-weight:bold; }
在 Dreamweaver 中，有外部样式表和内部样式表，区别在于应用的范围和存放位置。 Dreamweaver 可以判断现有文档中定义的符合 CSS 样式准则的样式，并且在【设计】视图中直 接呈现已应用的样式。但要注意的是有些 CSS 样式在 Microsoft Internet Explorer、Netscape、 Opera、Apple Safari 或其他浏览器中呈现的外观不相同，而有些 CSS 样式目前不受任何浏览器 支持。下面是这两种样式表的介绍。
在制作网页时采用 CSS 技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实 现更加精确的控制。CSS 样式表的主要功能有以下几点：
几乎所有的浏览器中都可以使用。 以前一些只有通过图片转换实现的功能，现在只要用 CSS 就可以轻松实现，从而可 以更快地下载页面。 使页面的字体变得更漂亮、更容易编排，使页面真正赏心悦目。 可以轻松地控制页面的布局。 可以将许多网页的风格格式同时更新，不用再一页页地更新。
要管理一个系统的网站，使用 CSS 样式，可以快速格式化整个站点或多个文档中的字体、 图像等网页元素的格式。并且，CSS 样式可以实现多种不能用 HTML 样式实现的功能。
中文版 Dreamweaver CS6 网页制作实用教程
第08章 使用CSS样式控制网页外观
8.7 实例──设置“环境保护”网页 样式
通过前面各节的学习，读者应该对CSS样式的基本知识有 了一定的了解。本节将以制作“环境保护”网页为例，介 绍使用CSS样式控制网页外观的基本方法，让读者进一步 巩固所学内容。本例将使用CSS样式分别对页眉、主体和 页脚进行控制。
第8章 使用CSS样式控制网页外观
本章将介绍CSS样式的基本知识以及 使用CSS样式控制网页外观的基本方 法。
学习目标
了解CSS样式的作用及其类型。 掌握创建和设置CSS样式的方法。 掌握附加样式表的方法。 掌握使用CSS样式控制网页外观 的基本方法。
8.1 认识CSS样式
CSS（Cascading Style Sheet，可译为“层叠样式表” 或“级联样式表”）是一组格式设置规则，用于控制Web 页面的外观。通过使用CSS样式设置页面的格式，可将页 面的内容与表现形式分离。页面内容存放在HTML文档中， 用于定义表现形式的CSS规则存放在另一个文件中或 HTML文档的某一部分，通常为文件头部分。将内容与表 现形式分离，不仅可使维护站点的外观更加容易，而且还 可以使HTML文档代码更加简练，这样将缩短浏览器的加 载时间。
8.3.2 CSS样式的规则
(2) 关联选择器是一个用空格隔开的两个或更多的单一选择器组成 的字符串。这些选择器可以指定一般属性，而且因为层叠顺序的规 则，它们的优先权比单一的选择器大，如下面的代码： P EM { background: yellow } 这个值表示段落中的强调文本会是黄色背景，而标题的强调文本则不受 影响。 为了减少样式表的重复声明，组合的选择器声明是允许的。例如，文档 中的所有标题可以通过组合给出相同的声明，如下面的代码： h1, h2, h3, h4, h5, h6 { color: red; font-family: sans-serif }
第3章 使用CSS设置网页外观
id选择符 3. id选择符 type=“text/css text/css”> <style type= text/css > <!— <! [标签]#类选择符名称{属性：值；属性：值；…} 标签]#类选择符名称{属性： ]#类选择符名称 属性： } --> --> </style> 自网页首部定义一个Style1 Style1的样式 例：自网页首部定义一个Style1的样式 type=“text/css text/css”> <style type= text/css > <!— <! #Style1{font-family:”宋体 ;font宋体” #Style1{font-family: 宋体”;font-size:9pt;width:80px} --> --> </style> 在网页正文部分，可通过id属性将上述样式应用于按钮 在网页正文部分，可通过id属性将上述样式应用于按钮 id type=“submit name=“btnSubmit value=“提交 submit” btnSubmit” 提交” id=“Style1 Style1”/ <input type= submit name= btnSubmit value= 提交” id= Style1 /〉
2.情景选择符 2.情景选择符 type=“text/css text/css”> <style type= text/css > <!— <! 选择符{属性： 属性： 情景标签 选择符{属性：值；属性：值；…} } --> --> </style> 其中情景标签和选择符均为一个HTML标签， 其中情景标签和选择符均为一个HTML标签，通过情景选择可以指 HTML标签 定应用某个样式所应具备的条件 例：让所有出现在段落（<p>标签）中的斜体字（<em>标签）都 让所有出现在段落（<p>标签）中的斜体字（<em>标签） 标签 标签 以蓝色出现，就需要用p em作为选择符 以蓝色出现，就外部样式表应用 1. 通过编码链接外部样式表 • 在文件头部分添加<link>标签链接到外部样式表文件(.css) <link href=“URL” rel=“stylesheet” type=“text/css” /> • 在文件头部分使用导入指令@import导入外部样式表 <style type=“text/css”> <!— @import url(“URL”); --> </style>
在网页中使用CSS样式
第十章在网页中使用CSS样式CSS 即 Cascading Style Sheets，称为层叠样式表，又称级联样式表。
CSS 技术是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同的效果。
它扩展了HTML的功能，使网页设计者能够以更有效的方式设计网页属性。
本章介绍CSS技术的概念和应用。
通过本章的学习，读者应该掌握以下内容：·CSS样式的分类及应用方式·使用CSS样式表面板·建立CSS样式表·自定义CSS样式·链接外部CSS样式·复制CSS样式和导出CSS样式10.1 CSS样式的分类及应用方式10.1.1 CSS样式表概述使用CSS定义的网页风格可以控制HTML语言标志的一些诸如字体、边框、颜色、背景等属性，也可以通过定义外部风格文件实现整个网站页面风格的统一。
CSS不仅能定义文字格式，还可以为文字创造出丰富多彩的图形效果。
使用文字加样式表来代替部分图形，以减少网页文件的字节数，提高网页的浏览速度，从而提高了网站的竞争力。
使用CSS的滤镜功能，还可以直接对图形添加特效，就像图形处理软件一样，使网页更加绚丽。
CSS样式为一组样式，它的属性在HTML标签中依次出现，并不显示在浏览器中。
CSS样式可以定义在HUE文档的标记里，也可以在外部附加文档中作为外加文件。
此外，一个样式表可以作用多个页面，乃至整个站点，因此具有更好的易用性和扩展性。
使用CSS技术除了可以在单独网页中应用一致的格式以外，对于大网站的格式设置和维护更具有重要意义。
将CSS样式定义到样式表文件中，然后在多个网页中同时应用该样式表中的样式，就能确保多个网页具有一致的格式，并且能够随时更新(只要更改样式表文件就可以使所有网页自动更新)，从而大大降低了网站的开发和维护工作量。
由于CSS具有以上这些优点，它已经成为一种应用非常广泛的网页设计技术，甚至可以说，如果不懂CSS技术就很难设计出专业化的网站。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
8.6.1 应用CSS样式
二、通过菜单栏中的【文本】/【CSS样式】命令
首先选中要应用CSS样式的内容，然后选择【文本】/【CSS样 式】命令，从下拉菜单中选择一种设置好的样式，这样就可以 将被选择的样式应用到所选的内容上。
8.6.1 应用CSS样式
三、 通过【CSS样式】面板下拉菜单中的【套用】命令
8.5.8 扩展
【扩展】分类对话框包含两部分 。
8.6 CSS样式的应用
应用CSS样式 附加样式表
8.6.1 应用CSS样式
一、通过【属性】面板
首先选中要应用CSS样式的内容，然后在【属性】面板的【样 式】下拉列表中选择已经创建好的样式。一般情况下，在 【CSS样式】面板中创建的样式都会在【属性】面板的【样式】 下拉列表中出现，所以需要应用CSS样式时，在这里直接选择 它们即可。
8.3.2 CSS样式的规则
实际上，所有在选择器中嵌套的选择器都会继承外 层选择器指定的属性值，除非另外更改。例如，一个 “body”选择器定义的颜色值也会应用到段落的文本中。 设置的CSS规则可以单独存放在一个文件中，也可以 存放在HTML文档的文件头部分，即外部样式表和内部样 式表。外部样式表将CSS规则定义在一个独立的外部样式 表文件中（扩展名为“.css”），实现了CSS规则和HTML 代码的独立分开存放，样式表文件可以利用文档头部分 的链接或“@import”规则链接到网站中的一个或多个页面 。内部样式表是将CSS规则定义在HTML网页文档内部， 通常放在HTML文档头部的“<style>”和“</style>”之间。
8.3.2 CSS样式的规则
其中，“h2”是选择器，介于大括号“{}”之间的所有内容都是声明块。 通常声明由两部分组成：属性和值。在上面定义的CSS规则中，已经 为“h2”标签创建了特定样式。所有设置为“h2”标签的文本字体为 黑体、大小为24px、颜色为红色、对齐方式为居中对齐。 任何HTML元素都可以是一个选择器，选择器仅仅是指向特别样式的元素。 例如： P { text-indent: 3em } 其中，选择器是P。 (1) ID选择器能够个别定义每个元素的成分。一个ID选择器的指定 要在名字前面有指示符“#”。例如，ID选择器可以指定如下： #pstyle { text-indent: 3em } 这点可以参考HTML中的ID属性： <P ID=” pstyle” >文本缩进3em</P>
8.3.2 CSS样式的规则
以下是一段定义“h2”元素的字体、大小、颜色和对齐方式等属性的CSS 样式代码： <head> <title>无标题文档</title> <style type="text/css"> <!-h2 { font-family: "黑体"; font-size: 24px; color: #FF0000; text-align: center; } --> </style> </head>
8.3.2 CSS样式的规则
样式表的定义 • CSS样式表定义的基本语法： • CSS声明方式
样式表是由样式规则组成的，每个CSS样式规则由 两部分组成：选择器和声明。选择器是标识已设置格 式元素的术语，如body、p、类名称或ID；而声明则用 于定义样式属性，大多数情况下为包含多个声明的代 码块。即通过很多属性来定义一个元素，每个属性带 一个值，共同描述选择器应该如何呈现。样式规则组 成如下： 选择器 { 属性 : 值 } 单一选择器的复合样式声明应该用分号隔开： 选择器 { 属性1 :值1 ; 属性2 : 值2 }
首先选中要应用CSS样式的内容，然后在【CSS样式】面板中 选中要应用的样式，再在面板的右上角单击控制按钮，或者直 接单击鼠标右键，从弹出的下拉菜单中选择【套用】命令即可 应用样式。
8.6.2 附加样式表
外部样式表通常是供多个网页使用的，其他网页文档要想使用 已创建的外部样式表，必须通过【附加样式表】命令将样式表 文件链接或者导入到文档中。附加样式表通常有两种途径：链 接和导入。在【CSS样式】面板中单击 （附加样式表）按钮， 打开【链接外部样式表】对话框进行设置即可。
8.5.4 方框
CSS将网页中所有的块元素都看作是包含在一个方框中的，这 个方框共分为4个部分。
8.5.5 边框
网页元素边框的效果是在【边框】分类面板中进行设置的 。
8.5.6 列表
列表属性用于控制列表内的各项元素 。
8.5.7 定位
定位属性可以使网页元素随处浮动，这对于一些固定元素（如 表格）来说，是一种功能的扩展，而对于一些浮动元素（如层） 来说，却是有效地、用于精确控制其位置的方法 。
8.4.1 创建CSS样式
在Dreamweaver CS3中，创建CSS样式的操作是一个完全可视化的过 程。 （1）选择【窗口】/【CSS样式】命令，打开【CSS样式】面板，然后打 开【新建CSS规则】对话框。 （2）在【选择器类型】选项组中选择要创建的CSS样式的类型 。 （3）在对话框中的【定义在】下拉列表中选择CSS样式的存放位置。 （4）打开【CSS规则定义】对话框，进行CSS样式设置。
8.4.4 重命名层叠样式
8.5 CSS样式的属性
类型 背景 区块 方框 边框 列表 定位 扩展
8.5.1 类型
类型属性主要用于定义网页中文本的字体、大小、颜色、样式及 文本链接的修饰效果等。
8.5.2 类型
背景属性主要用于设置背景颜色或背景图像。
8.5.3 区块
区块属性主要用于控制网页元素的间距、对齐方式等。
8.3.3 CSS样式的类型
（3）【高级（ID、伪类选择器等）】 利用该类选择器会对标签组合（如“td h2”表示所有在表格单元中出 现“h2”的标题）或者是含有特定ID属性的标签（如“#myStyle”表 示所有属性值中有“ID="myStyle"”的标签）应用样式。而 “#myStyle1 a:visited,#myStyle2 a:link, #myStyle3…”表示可以一次 性定义相同属性的多个CSS样式。其中，ID属性用于定义一个元素 的独特的样式，如以下CSS规则 <style type="text/css"> <!-#mytext { font-size: 24 } --> </style> 可以通过ID属性应用到HTML中： <P ID= "mytext" >…</P>
8.3.2 CSS样式的规则
(2) 关联选择器是一个用空格隔开的两个或更多的单一选择器组成 的字符串。这些选择器可以指定一般属性，而且因为层叠顺序的规 则，它们的优先权比单一的选择器大，如下面的代码： P EM { background: yellow } 这个值表示段落中的强调文本会是黄色背景，而标题的强调文本则不受 影响。 为了减少样式表的重复声明，组合的选择器声明是允许的。例如，文档 中的所有标题可以通过组合给出相同的声明，如下面的代码： h1, h2, h3, h4, h5, h6 { color: red; font-family: sans-serif }
根据选择器类型的不同，CSS样式通常划分为以下3类。 （1）【类（可应用于任何标签）】 利用该类选择器可创建自定义名称的CSS样式，能够应用在网页中 的任何标签上。<style type="text/css"> <!-pstyle { font-size: 12px; line-height: 25px; text-indent: 30px; } --> </style> 在网页文档中可以使用class属性引用“pstyle”类。 <p class="pstyle">…</p>
8.2 【CSS样式】面板
在Dreamweaver CS3中，【CSS样式】面板是新建、编辑、 管理CSS样式的主要工具。在打开文档窗口的情况下，选择【窗 口】/【CSS样式】命令可以打开或关闭【CSS样式】面板。
8.3 CSS样式的类型和规则
CSS样式的类型 CSS样式的规则
8.3.1 CSS样式的类型
8.1 认识CSS样式
在使用了CSS样式的网页文档的源代码中，“<style>…</style>” 中间存放的是控制文档外观的CSS代码，位于文档的文件头部分， “<body>…</body>”中间是网页文档的内容。
8.1 认识CSS样式
CSS样式可以实现的功能。 可以更加灵活地控制网页中文本的字体、颜色、大小、间 距、风格及位置。 可以灵活地为网页中的元素设置各种效果的边框。 可以方便地为网页中的元素设置不同的背景颜色、背景图 片及平铺方式。 可以更加精确地控制网页中各元素的位置，使元素在网页 中浮动。 •可以为网页中的元素设置各种滤镜，从而产生诸如阴影、 辉光、模糊和透明等只有在一些图像处理软件中才能实现 的效果。 可以与脚本语言相结合，使网页中的元素产生各种动态效 果。
第8章 使用CSS样式控制网页外观
本章将介绍CSS样式的基本知识以及 使用CSS样式控制网页外观的基本方 法。
学习目标
了解CSS样式的作用及其类型。 掌握创建和设置CSS样式的方法。 掌握附加样式表的方法。 掌握使用CSS样式控制网页外观 的基本方法。
8.1 认识CSS样式
CSS（Cascading Style Sheet，可译为“层叠样式表” 或“级联样式表”）是一组格式设置规则，用于控制Web 页面的外观。通过使用CSS样式设置页面的格式，可将页 面的内容与表现形式分离。页面内容存放在HTML文档中， 用于定义表现形式的CSS规则存放在另一个文件中或 HTML文档的某一部分，通常为文件头部分。将内容与表 现形式分离，不仅可使维护站点的外观更加容易，而且还 可以使HTML文档代码更加简练，这样将缩短浏览器的加 载时间。