1 / 33

第 4 章 层叠样式表 CSS

第 4 章 层叠样式表 CSS. CSS 样式简介 “ CSS 样式 ” 面板 创建 CSS 样式 应用 CSS 样式 管理 CSS 样式. 一、 CSS 样式简介. CSS （ Cascading Style Sheet, 层叠样式表） , 是用于控制网页样式的一种标记语言，它以 HTML 为基础，扩展了 HTML 的功能，提供了丰富的格式化功能，使网页设计者能够以更有效的方式设置网页的外观。 通过 CSS ，可以实现网页的样式信息与网页内容分离 。 能 大大简化网页的设计工作，网页可以轻松维护。

skyler-barnett
Download Presentation

第 4 章 层叠样式表 CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第4章 层叠样式表 CSS CSS样式简介 “CSS样式”面板 创建CSS样式 应用CSS样式 管理CSS样式

  2. 一、 CSS样式简介 • CSS（Cascading Style Sheet, 层叠样式表）,是用于控制网页样式的一种标记语言，它以HTML为基础，扩展了HTML的功能，提供了丰富的格式化功能，使网页设计者能够以更有效的方式设置网页的外观。 • 通过CSS，可以实现网页的样式信息与网页内容分离。能大大简化网页的设计工作，网页可以轻松维护。 • 例如，修改某个CSS样式定义后，所有应用此样式的网页元素的外观则统一更改，而采用HTML样式的网页却需要设计者逐个修改每个元素的HTML样式。

  3. 二、创建CSS样式 • CSS样式面板 新建CSS样式规则 CSS样式名 CSS样式的属性值 CSS样式的属性名 删除CSS规则 新建CSS规则 编辑CSS规则

  4. CSS选择器 • 选择器（seletor）是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。 • CSS选择器包括标签选择器、类选择器、ID选择器和复合内容选择器四种。

  5. 标签选择器 • 标签也称标记。而CSS标签选择器就是声明哪些标签采用哪种CSS样式。例如，h2选择器就用于声明页面中所有<h2>标记的样式风格。

  6. 在上页图中点击“确定”按钮后，则弹出“h2”的css规则定义对话框。在上页图中点击“确定”按钮后，则弹出“h2”的css规则定义对话框。

  7. 类选择器 • 类选择器可以用于任何HTML标记。 • 类选择器的名字需要设计者自己定义。

  8. ID选择器 • ID选择器和“类选择器”的作用类似。二者的区别在于： • ID选择器的名字以“#”开头，而“类选择器”的名字以“.”开头； • 应用了“ID选择器”的HTML标记增加了id属性设置，应用了“类选择器”的HTML标记增加了class属性设置。

  9. 复合内容选择器 • 若要定义同时影响两个或多个标签、类或 ID 的复合规则，请选择“复合内容（基于选择的内容）”选项并输入用于复合规则的选择器。例如，如果输入 div p，则 div 标签内的所有 p 元素都将受此规则影响。说明文本区域准确说明您添加或删除选择器时该规则将影响哪些元素。

  10. 伪类选择器 • 伪类选择器用于设置页面上的超链接在不同状态下的显示方式，这四种状态为：超链接被激活、鼠标指针悬停于其上、未访问过、已访问过。

  11. 四个伪类选择器的作用 a:active用于设置超链接被选中时的CSS样式，即鼠标被按下时超链接的显示方式。 a:hover用于设置鼠标指针悬停于超链接之上时的CSS样式，即鼠标经过时超链接的显示方式。 a:link用于设置尚未被访问过的超链接的CSS样式。 a:visited用于设置已访问过的超链接的CSS样式，即超链接被鼠标单击后的显示方式。

  12. CSS样式的定义位置 • 不管创建哪种CSS选择器，都要指定CSS样式定义的存放位置。使用Dreamweaver“新建CSS规则”对话框，可以指定两种存放位置，即内嵌式和链接式。 • 1．内嵌式 CSS样式具体内容嵌入在网页首部。 • 2．链接式 先创建外部样式表文件，用于保存CSS样式信息，其扩展名为“.css”。 应用这种外部样式表文件中的样式时，将位于网页外部的CSS样式表文件链接到本网页。

  13. CSS样式的定义位置（续） • 1．内嵌式 • 在“新建CSS规则”对话框的“规则定义：选择规则定义位置”选项中，选择“（仅限该文档）”，则在当前文档的首部嵌入CSS样式表。（即嵌入在<head>和</head>标记之间，参见例4-1）

  14. CSS样式的定义位置（续） • 外部样式表文件 创建外部样式表文件，该文件用于保存CSS样式信息，其扩展名为“.css”。

  15. CSS样式的定义位置（续） • 创建外部样式表文件步骤如下： 点击“确定”按钮后：

  16. CSS样式中边界、填充、边框的含义 • 网页元素的盒子模型

  17. Dreamweaver 支持8个类别的CSS属性 • “类型”类别：用于设置文字的有关属性，如字体。 • “背景”类别：用于设置背景有关的属性，如表格的背景色。 • “区块”类别：用于设置网页中文本的“单词间距”等属性。 • “方框”类别：用于设置网页元素的放置位置。可以对表格、层与网页元素位置关系的“浮动”、“填充”、“边界”等属性。 • “边框”类别：用于设置网页表格的各种边框线的样式。 • “列表”类别：用于设置网页文本列表的项目符号和编号。 • “定位”类别：用于设置层的属性。 • “扩展”类别：用于设置网页的一些特殊效果，利用“滤镜”给所控制的对象添加特殊的滤镜效果。

  18. 类型设置

  19. 背景设置

  20. 区块设置 • “区块”指网页中文本、图像和AP Div元素等替代元素，主要用于控制块中元素的间距和对齐方式等。

  21. 方框设置 • 用于设置网页元素的放置位置。可以对表格、 AP Div元素与网页元素位置关系的“浮动”、“填充”、“边界”等属性。

  22. 边框设置 • 用于设置网页表格的各种边框线的样式。

  23. 列表设置 • 用于设置网页文本列表的项目符号和编号。

  24. 定位设置 • 用于设置AP Div元素定位属性

  25. 扩展设置 • 用于设置网页的一些特殊效果，利用“滤镜”给所控制的对象添加特殊的滤镜效果。

  26. CSS样式表内容实例 CSS样式面板

  27. 三、应用CSS样式 • 首先应选择要应用样式的页面元素；然后通过属性面板或CSS样式面板，把CSS样式应用到页面元素上。 CSS样式面板

  28. 实例（详见教材第69-70页例4-4）

  29. 应用外部样式表文件中的CSS样式 • 需要使用样式面板的附加样式表按钮 ， • 然后选择样式表文件：

  30. 取消已应用的CSS样式 • 首先，在网页编辑窗口选择需要取消已应用CSS样式的对象或文本 • 然后，在文本属性面板中，从“目标规则”下拉列表中选择“删除类”。

  31. 四、管理CSS样式 • 修改CSS样式 单击位于面板底部的“编辑样式…”按钮 • 删除CSS样式 • 复制CSS样式 • 重命名CSS样式

  32. Thank You !

More Related