HTML5+CSS3 Web前端设计基础教程 第3版 课件 第3章 CSS 3基础入门_第1页
HTML5+CSS3 Web前端设计基础教程 第3版 课件 第3章 CSS 3基础入门_第2页
HTML5+CSS3 Web前端设计基础教程 第3版 课件 第3章 CSS 3基础入门_第3页
HTML5+CSS3 Web前端设计基础教程 第3版 课件 第3章 CSS 3基础入门_第4页
HTML5+CSS3 Web前端设计基础教程 第3版 课件 第3章 CSS 3基础入门_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第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=216px3.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选择器预览效果ID选择器顾名思义是通过ID属性来调用的样式，它与类选择符极其相似，类选择符是以“.”开头，而ID选择器是以“#”开头。3.3CSS3初级选择器3.3.5后代选择器

后代选择器又称包含选择器，使用频率非常高。这种方式的选择器将选取其下所有匹配的子元素，且忽视层级关系。图3-17包含选择器预览效果3.3CSS3初级选择器3.3.6群组选择符

在HMTL文档中，如果需要对一组不同的标签进行相同样式的指派，群组选择符就派上了用场。图3-18群组选择器预览效果3.4CSS3高级选择器3.4.1子元素选择器和相邻兄弟选择器1．子元素选择器2．相邻兄弟选择器图3-19子元素选择器和相邻兄弟选择器预览效果3.4CSS3高级选择器3.4.2属性选择器E[attr]：选择所有包含attr属性的元素(无论值如何)。E[attr=val]：选择所包含attr属性，且attr值为val的元素。E[attr^=val]：选择所有包含attr属性，且attr值以val开头的元素。E[attr$=val]：选择所有包含attr属性，且attr值以val结束的元素。E[attr*=val]：选择所有包含attr属性，且attr值中包含val的元素。图3-20属性选择器预览效果3.4CSS3高级选择器3.4.3关于优先级浏览器解析时应用样式的顺序如下，谁最后应用，谁的优先级最高。 1）先应用浏览器自身的默认样式； 2）再应用从父级元素继承过来的样式； 3）标签样式（类型

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论