Download presentation
Presentation is loading. Please wait.
1
第13章 CSS 通过CSS可以使用更丰富、更灵活的样式，更简单地 设计出更美观的网页。同时，也让网页的设计与维护 更有效率。CSS在网页设计中的作用尤为重要，是网 页设计师必备的知识。本章首先介绍什么是CSS、CSS 的基本语法等基础知识，接着学习利用“CSS”面板 管理规则，如何在Dreamweaver中创建与应用CSS样式 表，还将结合实例讲解综合运用CSS的属性进行网页 布局。
2
13.1 了解CSS 对于初学网页设计的人来说，CSS看起来有些陌生。 下面就来学习什么是CSS，CSS有哪些优势，基本语法 以及如何应用。
3
什么是CSS CSS是“Cascading Styles Sheets”的缩写，中文名 称是层叠样式表。用于控制网页样式并允许将样式与 网页内容分离的一种标记性语言。CSS可将网页的内 容与表现形式分开，使网页的外观设计从网页内容中 独立出来单独管理。要改变网页的外观时，只需更改 CSS样式。
4
13.1.2 CSS的优势 CSS作为当前网页设计中的热门技术，具有以下优势：
CSS符合Web标准。W3C组织创建的CSS技术将替代HTML的表格、font标 签、frames以及其它用于表现的HTML元素。 提高页面浏览速度。使用CSS，比传统的web设计方法至少节约50%以上 的文件大小。 缩短网页改版时间。只要修改相应的CSS文件就可以重新设计一个有成 百上千页面的站点。 强大的字体控制和排版能力。CSS控制字体的能力比font标签好多了。 有了CSS，我们不再需要用font标签来控制标题，改变字体颜色，字体 样式等。 CSS非常容易编写。Dreamweaver也提供了相应的辅助工具。 CSS有很好的兼容性，只要是可以识别CSS样式的浏览器都可以应用它。 表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，让 多个网页文件共同使用它，省去在每一个网页文件中都要重复设定样式 的麻烦。
5
13.1.3 CSS的基本语法 样式表语法：Selector { property: value； } 参数说明：
选择器说明：#表示选择id。唯一的定义一个元素 表示选择class。可以定义多个元素，.可省
6
CSS的应用方式 CSS的应用方式有以下几种： 外联式样式表 内嵌样式表 内联样式 导入样式表
7
13.2 使用CSS面板 利用“CSS”面板，可以轻松 创建和管理CSS规则。
在Dreamweaver CS4中，单击 “窗口”|“CSS样式”命令 菜单，打开“CSS”面板，如 图13.2所示。
8
基本操作 1．重命名类 2．移动CSS规则 3．删除CSS规则
9
13.3 在Dreamweaver中创建与应用CSS
新建CSS文件 新建CSS规则 应用CSS
10
新建CSS文件 具体操作步骤如下：
11
13.3.2 新建CSS规则 1．新建自定义的类 2．新建HTML标签 3．新建ID选择器（高级样式） 具体操作步骤如下：
单击CSS面板上的 ->在CSS规则对话框中选择类型
12
应用CSS__ 外联式样式表 例： <head> <link href="/css/default.css“ rel="stylesheet“ > </head> <body> .... </body </html> 属性：rel 用来说明<link>；元素在这里要完成的任务是连 接一个独立的css文件。而href属性给出了所要连接css文件 的url地址
13
应用CSS__内嵌样式表 例： <html> <head> <style type="text/css"> td{font:9pt; color:red } .font105{font:10.5pt; color:blue </style> </head> <body> .... </body> </html>
14
应用CSS__内联样式 例： <html> <head> .... </head> <body> <p style=“margin-left:20px”>This is a </p> </body> </html>
15
应用CSS__导入式样式表 例： <html> <head> <style url(css/home.css); </style> <body> .... </body> </html>
16
13.4 CSS属性 在“CSS规则定义”对话框的“分类”列表框中，共 有类型、背景、区块、方框、边框、列表、定位、扩 展等八大类。本节来学习根据CSS样式表的用途和要 求，分别设置不同类型的参数。
17
类型属性 类型属性主要用来 定义文字的字体、 大小、样式、颜色 等属性。下面以新 建的类“.word”为 例，来说明如何设 置类型属性。应用 “.word”样式的文 字效果如图13.30所 示。
18
背景属性 背景属性主要用来定义页面的背景颜色或背景图像。 应用背景颜色和背景图像的效果如图13.35所示。
19
区块属性 区块属性主要用来定义间距和对齐方式。
20
方框属性 方框属性主要用来定义元素在页面上的位置。应用在 “.word”样式中设置方框属性后的效果如图13.43所 示，可以控制文本区域的大小、位置、与边界的距离 等。
21
边框属性 边框属性用来定义元素周围的边框，例如边框的样式、 宽度和颜色等。应用边框属性样式的表格效果如图 13.46所示，表格边框为1像素虚线。
22
列表属性 列表属性主要用来定义列表各种属性，如列表项目符 号、位置等。应用列表属性的效果如图13.49所示， 分别为设置了项目符号图像的效果，设置了项目类型、 位置在内的效果，设置了项目类型、位置在外的效果。
23
定位属性 定位属性主要用来定义层的大小、位置、可见性、溢 出方式、剪辑等属性。应用定位属性的层如图13.52 所示，“属性检查器”中列出了相应的属性，层宽 300像素，高200像素，位置距离页面上边界100像素， 距离页面左边界50像素，显示方式为可见。
Similar presentations
