CSS基础和DIV布局PPT幻灯片.pptx_第1页
CSS基础和DIV布局PPT幻灯片.pptx_第2页
CSS基础和DIV布局PPT幻灯片.pptx_第3页
CSS基础和DIV布局PPT幻灯片.pptx_第4页
CSS基础和DIV布局PPT幻灯片.pptx_第5页
已阅读5页,还剩26页未读 继续免费阅读

下载本文档

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

文档简介

第1章CSS基础和DIV布局,1,本章进阶,熟掌握CSS的应用了解DIV布局与TABLE布局的区别了解DIV布局的优势掌握盒模型的应用掌握标准文档流的应用,2,案例展示双11主题会场模块,完成效果,案例分析使用盒模型制作完成如右下图所示的网页模块布局。涉及知识点新建站点和文件采用DIV进行布局添加对应的CSS样式,3,初识CSSCSS是用来控制一个文档中某一区域外观的一组格式属性设置。使用CSS可以有效地对页面布局、字体、颜色、背景等实现更加精确地控制,从而制作出更加复杂和精细的网页,同时网页的维护与更新也变得更加方便和简单。CSS的神奇之处就在于,网页开发人员只需要修改短短的几行代码,就可以使整个网页外观发生翻天覆地的变化。使用CSS不仅可以使维护站点的外观更加容易,而且还可以使HTML文档代码更加简练,缩短浏览器的加载时间。,4,CSS语法规则CSS格式设置规则由两部分组成:选择器和声明。选择器用于标识已设置格式的HTML元素,而声明块则用于定义样式属性,它也由两部分组成:属性和值。Selectorproperty:value;或者Selectorproperty1:value1;property2:value2;property3:value3;其中“Selectorr”表示为选择器,介于大括号“”之间的所有内容都是声明块,“property:value;”指的是样式表定义。“property”表示属性,“value”表示属性值。属性与属性值之间用冒号“:”隔开,多个属性用分号“;”隔开。,5,CSS样式表类型CSS样式按照其存放的位置可以分为内联样式表、内嵌样式表、外联样式表三种。1、内联样式表内联样式表也叫行内样式表,是混合在HTML标记里使用的。使用时直接在HTML标记里添加style参数,而style参数的内容就是CSS的属性和值,在style参数引号里的内容相当于在样式表大括号里的内容。例如:我要学习CSS样式的应用!,6,2、内嵌样式表内嵌样式表也叫内部样式表,它一般位于HTML文件的头部,即与标签内,并且以开始,以结束。例如:在与标签内添加内嵌样式如下:pfont-family:“黑体”;color:#090;text-decoration:underline;,7,3、外部样式表外部样式表是一个单独的文件,扩展名为css,里面可以存放多种选择器。通常可以在网页中调用已经定义好的样式文件来实现样式表的应用,它可以同时和多个网页文件进行链接或导入。以链接为例:选择“链接”后点击“确定”按钮,网页文件的与标签内会用标签调用该外部样式表文件。,8,CSS选择器类型在CSS中有3种最基本的选择器类型,分别是:标签选择器、ID选择器、类选择器。1、标签选择器一个HTML页面由很多标签组成,标签选择器就是用来重新定义指定的标签外观的。标签选择器的名称不能随意命名,必须是HTML页面中提供的标签名称。2、ID选择器ID名相当于人的身份证号码,页面中的HTML元素可以通过“属性”栏设置ID名,在页面中具有唯一性。而ID选择器可以用于设置指定ID的HTML元素样式,以“#”开头,后面跟对应的ID名称。3、类选择器相对于标签选择器的全部性和ID选择器的唯一性,类(class)选择器的应用显的更灵活一些。类选择器定义后,可以自由的应用到任何一个HTML元素。应用时,HTML元素的标签内会添加“class”属性。类选择器的名称由用户自定义,可以包含任何字母和数字组合,以“.”开头,其属性和值跟其它选择器一样,也必须符合CSS规范。,9,设置CSS属性CSS样式按照其存放的位置可以分为内联样式表、内嵌样式表、外联样式表三种。1、“类型”属性字体样式是网页美化的重要环节,字体相关的样式一般位于“CSS规则定义”对话框中的“类型”分类中。,“类型”选项,10,2、“区块”属性“区块”属性主要用于设置段落格式及对齐方式,段落相关的样式一般位于“CSS规则定义”对话框中的“区块”分类中。,“区块”选项,11,2、“区块”属性“区块”属性主要用于设置段落格式及对齐方式,段落相关的样式一般位于“CSS规则定义”对话框中的“区块”分类中。,“区块”选项,12,3、“背景”属性背景相关的样式位于“CSS规则定义”对话框中的“背景”分类中。,“背景”选项,13,4、“边框”属性“边框”属性可以设置元素的边框样式,“边框”选项,14,演示百度热门标签,完成效果,实现思路在内嵌样式中新建标题、链接等所需的CSS样式对标题应用CSS格式对正文应用CSS样式,15,DIV概述DIV使用时以标签的形式出现,它本身是一个容器,不但可以内嵌,还可以内嵌文本和其它的HTML元素。利用CSS+DIV,可以精确地设定元素的位置,还能将定位的元素叠放在其它元素之上。在使用CSS+DIV布局时,主要是把内容元素放在标签内,再通过CSS控制各种元素的外观属性。DIV布局的优势1、大大缩减页面代码,提高页面浏览速度,缩减带宽成本;2、结构清晰,方便搜索引擎的搜索;3、方便网站后期的改版;4、表现和内容相分离。,16,盒子模型实现页面布局的基础,与生活中的盒子相似。,盒内物品,填充部分,纸壳外围间隙,纸壳,17,盒子模型的概念网页中的所有元素都可以看成是一个盒子模型结构,它包括如下属性:(1)边框(border):对应包装盒的纸壳,一般具有一定的厚度。(2)内边距(padding):也叫填充,位于边框内部,是元素(产品)与边框之间的距离。(3)外边距(margin):也叫边界,位于边框外部,是边框外面元素与元素之间的距离。盒子模型除了边框、内边距、外边距这些属性之外,还应该包括元素内容本身,完整的盒子模型的平面结构图如图所示。,盒子模型,18,CSS盒子属性对象的内边距、外边距和宽度属性同在CSS样式“方框”属性中。,“方框”属性,19,内边距属性1、分别设置4个方向的内边距,20,2、同时设置4个方向的内边距,21,外边距(margin)属性用于控制元素与元素之间的距离会占据空间可设置盒子模型上、右、下、左4个方向的外边距值设置方式与padding属性相同,22,margin合并问题在布局过程中,上下两个块元素之间垂直外边距会合并,最后看到的外边距为最大值那个外边距,如图所示。所以在布局时不要同时设置两个块元素的上下外边距,以免造成计算错误。,margin合并图解,23,盒子模型尺寸在实际布局中,一个盒子在布局中的总尺寸并不是单纯由元素的宽(width)高(height)决定的。在CSS中,宽(width)高(height)指的元素内容区域的宽度和高度,增加边框、内边距和外边距都不会影响内容区域的尺寸,但是会增加盒子模型的总尺寸。盒子模型总尺寸计算公式:盒子模型总尺寸=内容尺寸(宽/高)+内边距(左右/上下)+框宽度(左右/上下)+外边距(左右/上下)所以下图中的盒子在布局中的宽度为:70px+15px+50px+350px+50px+15px+70px=620px。,盒子模型尺寸,24,演示京东“手机通讯”模块,完成效果,实现思路新建站点及站点文件添加基本的内嵌样式在与标签内使用DIV进行布局在内嵌样式内添加布局中所需CSS格式给模块标题及图片添加空链接,25,标准文档流标准文档流简称标准流,是指在不使用其他的排版和定位相关的特殊CSS规则时,各种元素的排列规则,主要分为块元素(block)和行内元素(inline)两类。1、块元素块元素是指元素会以一个块级形式表现出来,每个块级元素都会独立占据一行。它和相临的元素会竖直排列,不会排在同一行中。例如、标签等。2、行内元素行内元素是指元素不占有独立的区域,仅仅在它内容的基础上指定了一定的范围。它和相临的元素可以在一行内横向排列,到最右端自动折行,例如、标签等。,26,标签与标签标签是一个通用的块元素,它是一个区块容器,可以容纳段落、标题、表格、图片等各种HTML元素,从而可以很方便的进行页面布局。它是一个独立的对象,使用CSS进行控制,声明时,只需要对标签进行相应的控制,其中的各标签都会随之改变。标签同样可以容纳各种HTML元素,从而形成独立的对象。标签没有结构上的意义,纯粹是应用样式,当其他行内元素都不合适时,就使用该标签元素。,27,display属性用于指定HTML标签的显示方式,可以实现块级元素与行内元素的相互转换。属性值:常用的有3个,28,综合案例演示双11主题会场模块,完成效果,实现思路新建站点及站点文件添加基本的内嵌样式在与标签内使用DIV进行布局对网页元素添加所需样式,29,本章总结,CSS是CascadingStyleSheets的缩写,一般翻译为层叠样式表,简称样式表。CSS格式设置规则由两部分组成:选择器和声明。选择器用于标识已设置格式的HTML元素,而声明块则用于定义样式属性。CSS样式按照其存放的位置可以分为内联样式表、内嵌样式表、外联样式表三种。CSS选择器有3种最基本的选择器类型,分别是:标签选择器、ID选择器、类选择器。DIV在使用时以的形式出现,它

温馨提示

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

评论

0/150

提交评论