CSS基础和DIV布局.ppt

1、a,1,第1章 CSS基础和DIV布局,a,2,本 章 进 阶,熟掌握CSS的应用 了解DIV布局与TABLE布局的区别 了解DIV布局的优势 掌握盒模型的应用 掌握标准文档流的应用,a,3,案例展示双11主题会场模块,完成效果,案例分析 使用盒模型制作完成如右下图所示的网页模块布局。 涉及知识点 新建站点和文件 采用DIV进行布局 添加对应的CSS样式,a,4,初识CSS CSS是用来控制一个文档中某一区域外观的一组格式属性设置。使用CSS可以有效地对页面布局、字体、颜色、背景等实现更加精确地控制，从而制作出更加复杂和精细的网页，同时网页的维护与更新也变得更加方便和简单。 CSS的神奇之处就

2、在于，网页开发人员只需要修改短短的几行代码，就可以使整个网页外观发生翻天覆地的变化。使用CSS不仅可以使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。,a,5,CSS语法规则 CSS格式设置规则由两部分组成：选择器和声明。选择器用于标识已设置格式的HTML元素，而声明块则用于定义样式属性，它也由两部分组成：属性和值。 Selector property:value; 或者 Selector property1:value1; property2:value2; property3:value3; 其中“ S e l e c t o r r ” 表示为选择器

3、， 介于大括号“ ”之间的所有内容都是声明块，“property:value;”指的是样式表定义。“property”表示属性，“value”表示属性值。属性与属性值之间用冒号“:”隔开，多个属性用分号“;”隔开。,a,6,CSS样式表类型 CSS样式按照其存放的位置可以分为内联样式表、内嵌样式表、外联样式表三种。 1、内联样式表 内联样式表也叫行内样式表，是混合在HTML标记里使用的。使用时直接在HTML标记里添加style参数，而style参数的内容就是CSS的属性和值，在style参数引号里的内容相当于在样式表大括号里的内容。 例如： 我要学习CSS样式的应用！,a,7,2、内嵌样式表

4、内嵌样式表也叫内部样式表，它一般位于HTML文件的头部，即与标签内，并且以开始，以结束。 例如： 在与标签内添加内嵌样式如下： p font-family: “黑体”; color: #090; text-decoration: underline; ,a,8,3、 外部样式表 外部样式表是一个单独的文件，扩展名为css，里面可以存放多种选择器。通常可以在网页中调用已经定义好的样式文件来实现样式表的应用，它可以同时和多个网页文件进行链接或导入。 以链接为例：选择“链接”后点击“确定”按钮，网页文件的与标签内会用标签调用该外部样式表文件。 ,a,9,CSS选择器类型 在CSS中有3种最基本的选择

5、器类型，分别是：标签选择器、ID选择器、类选择器。 1、标签选择器 一个HTML页面由很多标签组成，标签选择器就是用来重新定义指定的标签外观的。标签选择器的名称不能随意命名，必须是HTML页面中提供的标签名称。 2、ID选择器 ID名相当于人的身份证号码，页面中的HTML元素可以通过“属性”栏设置ID名，在页面中具有唯一性。而ID选择器可以用于设置指定ID的HTML元素样式，以“#”开头，后面跟对应的ID名称。 3、类选择器 相对于标签选择器的全部性和ID选择器的唯一性，类（class）选择器的应用显的更灵活一些。类选择器定义后，可以自由的应用到任何一个HTML元素。应用时，HTML元素的标签

6、内会添加“class”属性。 类选择器的名称由用户自定义，可以包含任何字母和数字组合，以“.”开头，其属性和值跟其它选择器一样，也必须符合CSS规范。,a,10,设置CSS属性 CSS样式按照其存放的位置可以分为内联样式表、内嵌样式表、外联样式表三种。 1、“类型”属性 字体样式是网页美化的重要环节，字体相关的样式一般位于“CSS 规则定义”对话框中的“类型”分类中。,“类型”选项,a,11,2、“区块”属性 “区块”属性主要用于设置段落格式及对齐方式，段落相关的样式一般位于“CSS规则定义”对话框中的“区块”分类中。,“区块”选项,a,12,2、“区块”属性 “区块”属性主要用于设置段落格式

7、及对齐方式，段落相关的样式一般位于“CSS规则定义”对话框中的“区块”分类中。,“区块”选项,a,13,3、“背景”属性 背景相关的样式位于“CSS 规则定义”对话框中的“背景”分类中。,“背景”选项,a,14,4、 “边框”属性 “边框”属性可以设置元素的边框样式,“边框”选项,a,15,演示百度热门标签,完成效果,实现思路 在内嵌样式中新建标题、链接等所需的CSS样式 对标题应用CSS格式 对正文应用CSS样式,a,16,DIV概述 DIV使用时以标签的形式出现，它本身是一个容器，不但可以内嵌，还可以内嵌文本和其它的HTML元素。 利用CSS+DIV，可以精确地设定元素的位置，还能将定位的

8、元素叠放在其它元素之上。在使用CSS+DIV布局时，主要是把内容元素放在标签内，再通过CSS控制各种元素的外观属性。 DIV布局的优势 1、大大缩减页面代码，提高页面浏览速度，缩减带宽成本； 2、结构清晰，方便搜索引擎的搜索； 3、方便网站后期的改版； 4、表现和内容相分离。,a,17,盒子模型 实现页面布局的基础，与生活中的盒子相似。,盒内物品,填充部分,纸壳外围间隙,纸壳,a,18,盒子模型的概念 网页中的所有元素都可以看成是一个盒子模型结构，它包括如下属性： （1）边框（border）：对应包装盒的纸壳，一般具有一定的厚度。 （2）内边距（padding）：也叫填充，位于边框内部，是元素

9、（产品）与边框之间的距离。 （3）外边距（margin）：也叫边界，位于边框外部，是边框外面元素与元素之间的距离。 盒子模型除了边框、内边距、外边距这些属性之外，还应该包括元素内容本身，完整的盒子模型的平面结构图如图所示。,盒子模型,a,19,CSS盒子属性 对象的内边距、外边距和宽度属性同在CSS样式“方框”属性中。,“方框”属性,a,20,内边距属性 1、分别设置4个方向的内边距,a,21,2、同时设置4个方向的内边距,a,22,外边距（margin）属性 用于控制元素与元素之间的距离 会占据空间 可设置盒子模型上、右、下、左4个方向的外边距值 设置方式与padding属性相同,a,23,

10、margin合并问题 在布局过程中，上下两个块元素之间垂直外边距会合并，最后看到的外边距为最大值那个外边距，如图所示。所以在布局时不要同时设置两个块元素的上下外边距，以免造成计算错误。,margin合并图解,a,24,盒子模型尺寸 在实际布局中，一个盒子在布局中的总尺寸并不是单纯由元素的宽（width）高（height）决定的。在CSS中，宽（width）高（height）指的元素内容区域的宽度和高度，增加边框、内边距和外边距都不会影响内容区域的尺寸，但是会增加盒子模型的总尺寸。 盒子模型总尺寸计算公式： 盒子模型总尺寸=内容尺寸（宽/高）+内边距（左右/上下）+框宽度（左右/上下）+外边距（

11、左右/上下） 所以下图中的盒子在布局中的宽度为：70px+15px+50px+350px+50px+15px+70px=620px。,盒子模型尺寸,a,25,演示京东“手机通讯”模块,完成效果,实现思路 新建站点及站点文件 添加基本的内嵌样式 在与标签内使用DIV进行布局 在内嵌样式内添加布局中所需CSS格式 给模块标题及图片添加空链接,a,26,标准文档流 标准文档流简称标准流，是指在不使用其他的排版和定位相关的特殊CSS规则时，各种元素的排列规则，主要分为块元素（block）和行内元素（inline）两类。 1、块元素 块元素是指元素会以一个块级形式表现出来，每个块级元素都会独立占据一行。

12、它和相临的元素会竖直排列，不会排在同一行中。例如、标签等。 2、行内元素 行内元素是指元素不占有独立的区域，仅仅在它内容的基础上指定了一定的范围。它和相临的元素可以在一行内横向排列，到最右端自动折行，例如、标签等。,a,27,标签与标签 标签是一个通用的块元素，它是一个区块容器，可以容纳段落、标题、表格、图片等各种HTML元素，从而可以很方便的进行页面布局。 它是一个独立的对象，使用CSS进行控制，声明时，只需要对标签进行相应的控制，其中的各标签都会随之改变。 标签同样可以容纳各种HTML元素，从而形成独立的对象。标签没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就使用该标签元素

13、。,a,28,display属性 用于指定HTML标签的显示方式，可以实现块级元素与行内元素的相互转换。 属性值：常用的有3个,a,29,综合案例演示双11主题会场模块,完成效果,实现思路 新建站点及站点文件 添加基本的内嵌样式 在与标签内使用DIV进行布局 对网页元素添加所需样式,a,30,本章总结,CSS是Cascading Style Sheets的缩写，一般翻译为层叠样式表，简称样式表。 CSS格式设置规则由两部分组成：选择器和声明。选择器用于标识已设置格式的HTML元素，而声明块则用于定义样式属性。 CSS样式按照其存放的位置可以分为内联样式表、内嵌样式表、外联样式表三种。 CSS选择器有3种最基本的选择器类型，分别是：标签选择器、ID选择器、类选择器。 DIV在使用时以