chapter5CSS样式.pptVIP

网页设计与制作 ——网页的美容师 CSS样式 学习目标 理解CSS技术在网页制作过程中所起的重要作用，掌握CSS样式定义的方法。 理解各种CSS属性的含义，掌握常用属性的用法。 掌握三种在网页中使用CSS样式的方法，并对比各自的优劣。 Part 1 CSS基础 什么是CSS CSS（Cascading Style Sheet，层叠样式表）是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式。 Part 1 CSS基础 CSS样式表是控制文本或文本区外观的一组格式属性，是一系列格式设置规则。 CSS样式表可以非常灵活地控制网页的外观，从精确的布局定位到特定的字体和样式，样式表包括文档中的所有格式。使用外部样式表还可以一次作用于若干篇文档——甚至整个站点 。 Part 1 CSS基础 CSS样式表的优点： 1.内容结构和格式控制相分离 2.精确控制网页外观 3.制作体积小，下载页面快 4.快速规格网页样式 5.可兼容不同浏览器 Part 1 CSS基础 CSS样式的分类： 1.自定义样式：最基本最灵活的样式 2.重定义HTML样式：对HTML标签的默认格式重新定义 3.CSS选择器样式：用得最多是关于链接的定义 Part 1 CSS基础 关于链接的定义4种状态： a:link 超级链接文字的一般状态 a:visited 超级链接文字已链接过的状态 a:hover 鼠标光标移到超级链接文字上的状态 a:active 超级链接文字正在链接中的状态 Part 1 CSS基础 存放样式的位置： 1.在本文档的头部：将定义代码放在网页的head和/head之间。 样式表只能用于当前的网页。 2.在外部CSS文件中：存放在外部的扩展名为*.css的文件中。 样式表可以被所有网页引用。 Part 1 CSS基础 样式定义的语法 CSS定义由3部分构成：选择符（ selector ）、属性（properties）和属性值（value）。 基本格式如下： 选择符{属性：值} Selector{property1:value1;property2:value2;property3:value3;……} Selector定义样式作用的对象，property为CSS属性，value为属性对应的值。 Part 1 CSS基础 样式定义的语法 Part 1 CSS基础 创建CSS样式 Part 1 CSS基础 创建CSS样式 Part 1 CSS基础 创建CSS样式 设置完成后，单击“确定”按钮，新创建的CSS样式就会出现在“CSS样式”面板中，如图 样式表设计完成后，还可以重命名样式表、将该样式表应用到选定文字等操作 Part 2 在网页中使用CSS 编辑CSS样式 内部样式表：将样式定义在HTML文档的head部分的style标签内，仅供该网页使用 外部样式表：存储在.css文件中的CSS样式，可用于多个页面 导入CSS样式表 导出内部样式表 Part 2 在网页中使用CSS CSS属性设置 类型面板：定义样式的基本类型设置，如文本字体、颜色、大小、风格等。 背景面板：定义样式的背景设置，如对网页元素应用背景属性、设置背景图像等。 Part 2 在网页中使用CSS CSS属性设置 区块面板：定义整段文本中文字的间距、对齐方式、缩进等。 方框面板：定义特定元素的大小及其周边元素的间距等。 Part 2 在网页中使用CSS CSS属性设置 边框面板：定义元素周围的边框设置。 列表面板：定义列表样式。 定位面板：定义层在页面中的排版相关属性。 Part 2 在网页中使用CSS CSS文件中的重定义HTML样式 1.定义body样式 2.定义table和td的样式 3.定义H1~H6的样式 4.设定段落格式 5.定义表单元素的样式 6.设置页面中的滚动条 Part 2 在网页中使用CSS CSS文件中的自定义样式 CSS文件中的CSS选择器样式 Part 3 管理CSS文件中的样式 样式表的链接和导入 管理外部样式表中的样式 CSS样式使用原则 尽量存储在外部CSS文件中 只有存储在外部的样式才能用在其他的文档上，而只有所有的网页用的都是一个或某几个样式表文件里的样式，才能方便统一整个网站风格。 样式类型尽量使用重定义HTML样式 重定义HTML样式最大的优势就是不应用就能将效果加在某个标签上，还可以避免管理众多的自定义样式。 CSS样式使用原