《网页设计与制作》第6章.pptxVIP

《网页设计与制作》主讲人：XXX邮箱：XXXXXXXXXXX电话：XXXXXXXXXXXX

每讲一语Keytogainhappinessistocherishwhatyounowhavetogiveupwhatyouhavenot.获致幸福的不二法门就是珍惜你现在所拥有的，放弃你所没有的

书本内容引导解读

（重点）学习目标第6章认识CSS一、CSS基本概述二、CSS核心技术三、CSS高级特性

6.1CSS基本概述6.1.1CSS基本概念6.1.2CSS基本语法6.1.3CSS常用单位6.1.4CSS创建环境

6.1.1CSS基本概念即就是扩大用户群，用户群可以利用不同的浏览器和设备终端登录到我们的网站平台上。1.Web相关内容

Web标准的构成结构（structure）表现（Presentation）行为（Behavior）xhtmlCSSJavascript制作一个静态网页，主要应用xhtml+css交互作用2.Web标准的构成6.1.1CSS基本概念

1、提高页面浏览速度。使用CSS方法，比传统的web设计方法至少节约50%以上的文件尺寸。2、缩短改版时间。将表现（样式/外观）与内容（信息/数据）相分离。只要简单的修改几个CSS文件就可以重新设计一个有成千上万的站点。4、更容易被搜索引擎搜索到。提高网站在百度或者Google中的排名。3、降低网站流量的费用。宽带要求降低（代码更简洁），成本降低。5、内容能被更广泛的设备所访问。包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等3.采用Web标准的好处6.1.1CSS基本概念

1、内容：制作者放在页面内真正想要访问者浏览到的信息2、结构：使内容更加具有逻辑性和易用性，如一级标题和二级标题，正文，列表等，称为结构（html）3、表现：用于修饰内容的外观的样式的东西称为表现(css)4、行为：对内容的交互及操作效果，如通过JavaScript判断表单提交等(javascript)（案例操作）4.理解结构与表现的分离6.1.1CSS基本概念

一、概念：层叠样式表的简称，是设计网页式样的工具。其代码是由一些最基本的语句构成。CSS可以作为html，xthml以及xml样式控制语言。二、语法：styletype=“text/css”选择符{属性1：属性值1;属性2：属性值2;.....}/style，比如body{font-size:12px;color：#cc000;}注意：属性和属性值之间用英文“:”连接，多个“键值对”之间用英文“;”进行区分。6.1.2CSS基本语法

初学者在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构中的几个特点，具体如下：CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释,如/*注释内容*/6.1.2CSS基本概念

长度单位长度标记符说明相对长度单位em相对于当前对象内文本的字体尺寸(默认)px像素（推荐使用）绝对长度单位（基本用不上）in英寸cm厘米mm毫米pt点CSS长度单位6.1.3CSS基本单位

6.1.4CSS创建环境1.记事本2.Dreamweaver

6.2CSS核心技术6.2.1CSS样式表引入6.2.2CSS常用选择器

网页中加CSS样式表有四种：1、行内式行内式也称为内联样式，是通过标记的style属性来设置元素的样式，其基本语法格式如下：该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用，简单来说：就是直接写在标签内，即就是只用于单独的一个内容,不灵活，占内存。标记名style=属性1:属性值1;属性2:属性值2;属性3:属性值3;内容/标记名6.2.1CSS样式引入表

2、内嵌式内嵌式是将CSS代码集中写在HTML文档的head头部标记中，并且用style标记定义，其基本语法格式如下：该语法中，style标记一般位于head标记中title标记之后，也可以把他放在HTML文档的任何地