HTML5+CSS3 Web前端设计基础教程 第3版 课件 第3章 CSS 3基础入门.pptx

第3章本章就从打基础出发，向读者详细介绍CSS的基本概念，以及选择器的使用方法。CSS3基础入门

3.1CSS3的基础知识3.1.1CSS介绍1．CSS的发展历史CSS有多种版本，CSS1是1996年W3C的一个正式规范。CSS2是在CSS1的基础上增添了某些高级概念以及高级的选择器。CSS3是CSS2技术的一个升级版本，它将以前的规范分解为多个小模块进行管理，这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效和多栏布局等。

3.1CSS3的基础知识2．为什么要使用CSS图3-1CSS作用示意图3．CSS的学习方法

3.1CSS3的基础知识3.1.2CSS的语法与注释CSS由两部分构成：一部分是选择器（selector），另一部分是一条或多条声明。这里声明由一个属性（property）和一个属性值（value）组成。语法格式如下：selector{property:value;}body{ background:green; font-size:12px;}选择器属性值（关键字）属性1．CSS语法2．CSS注释

3.1CSS3的基础知识3.1.3CSS的引入方式1．内联样式内联样式是将CSS样式规则书写在某个标签的“style”属性上，该类型的样式仅作用于当前标签上，作用范围虽小，但优先级最高。图3-3内联样式预览效果

3.1CSS3的基础知识2．内部样式内部样式将CSS样式规则书写在“style”标签里，而style标签通常又定义在head标签内部（其他区域可以放置），所以这种连接方式决定了该样式表将作用于本页面，而不能控制其他页面。图3-4内部样式预览效果

3.1CSS3的基础知识3．外部样式外部样式是将CSS代码单独写到一个CSS文件内，然后在网页源代码中使用link标签将样式文件引入到页面中，并书写在head区域内。图3-8两个文件已经成功链接图3-7将CSS文档链接至页面图3-9外部样式预览效果

3.2盒模型3.2.1盒模型的基本概念元素内容区域外边距（margin）内边距（padding）边框（border）图3-10CSS盒模型

3.2盒模型1．内边距（padding）2．边框（border）3．外边距（margin）4．盒模型中内边距、边框和外边距的关系对于盒模型的相关属性可以这样理解：假如用户购买了一台冰箱，那么冰箱对应的就是网页中的实际内容，冰箱外面包裹的塑料泡沫对应的就是内边距（padding），包装冰箱的纸盒子对应的就是边框（border），如果多台冰箱放在一起，冰箱与冰箱之间的距离对应的就是外边距（margin）。

3.2盒模型5．CSS的简写（1）padding与margin的简写（2）border的简写

3.2盒模型3.2.2计算盒模型中的宽与高1．盒模型的宽度盒模型的宽度=左外边距（margin-left）+左边框（border-left）+左内边距（padding-left）+内容宽度（width）+右内边距（padding-right）+右边框（border-right）+右外边距（margin-right）

3.2盒模型2．盒模型的高度盒模型的高度=上外边距（margin-top）+上边框（border-top）+上内边距（padding-top）+内容高度（height）+下内边距（padding-bottom）+下边框（border-bottom）+下外边距（margin-bottom）

3.2盒模型图3-11通过浏览器的调试环境计算页面元素的宽与高Div的宽度=20px+3px+10px+150px+10px+3px+20px=216pxDiv的高度=10px+3px+20px+150px+20px+3px+10px=216px

3.3CSS3初级选择器3.3.1通配符选择器在编写代码时，用“*”表示通配符选择器，其作用是定义页面所有元素的样式。图3-12通配符选择器代码执行效果

3.3CSS3初级选择器3.3.2类型选择器类型选择器是指以网页中已有标签类型作为名称的选择器，如body、header和p等。图3-13类型选择器代码执行效果

3.3CSS3初级选择器3.3.3类选择器类选择器用于定义页面中公共部分的样式，通过直接引用元素中Class属性的值而产生效果，这个应用前面总是有一个句点“.”，这个句点用来标识一个类选择器.图3-14添加类规则图3-15类选择器预览效果

3.3CSS3初级选择器3.3.4ID选择器图3-16ID选择器预览效果I