CSS基础和DIV布局.ppt

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