DIV+CSS网页样式与布局ppt课件

《DIV+CSS网页样式与布局ppt课件》由会员分享，可在线阅读，更多相关《DIV+CSS网页样式与布局ppt课件（26页珍藏版）》请在金锄头文库上搜索。

1、CSS+DIV 网页样式与布局,徐州市华网信息科技有限公司,目录,1.1 CSS的概念,CSS(Cascading Style Sheet)，中文译为层叠样式表，它是用于控制网页样式并允许将 样式信息与网页内容分离的一种标记性语 言。简单地说，CSS的引入就是为了使得HTML 语言能够更好地适应页面的美工设计。它以HTML语言为基础，提供了丰富的格式化功能， 如字体、颜色、背景、和整体排版等，并且网页设计者可以针对各种可视化浏览器设置不 同的样式风格。 1.1.1标记的概念 在页面中各种标记以及位于标记中间的所有内容，组成了整个页面。 如：标题内容 其中称为起始标记，对应的称为结束标记，在这两

2、者之间为实际的标题内容。 见例1-1.html 1.1.2 CSS的引入 见例1-2.html,1.2 使用CSS控制页面,在对CSS有了大致的了解之后，便可以使用CSS对页面进行全方位的控制。使用CSS 控制页面的方法，包括行内样式、内嵌套、链接式和导入式。 1.2.1 行内样式 行内样式是所有方法中最为直接的一种，它直接对HTML的标记使用style属性，然后将 CSS代码直接写在其中。见例1-3.html 在例中可以看到3个标记中都使用了style属性，并且设置了不同的css样式，各个样 式之间互不影响，分别显示自己的样式效果。 行内样式是最为简单的css使用方法，但由于需要为每一个标记

3、设置style属性，后期维护 成本很高，而且网页容易过胖，因此不推荐使用。 1.2.2 内嵌式 内嵌式样式表就是将CSS写在与之间，并且用和标记进 行声明。见例1-4.html,1.2 使用CSS控制页面,从上例中看到，所有css的代码部分被集中在了同一个区域，方便了后期的维护，页面本 身也大大瘦身。但如果是一个网站，拥有很多的页面，对于不同页面上的标记都希望 采用同样的风格时，内嵌式的方法就显得略微麻烦，维护成本也不低。因此仅适用于对特 殊的页面设置单独的样式风格。 1.2.3 链接式 链接式css样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与CSS样式 风格分离为两个或者

4、多个文件，实现了页面框架HTML代码与美工CSS代码完全分离，使得 前期制作和后期维护都十分方便。 对于同一个CSS文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中， 使得网站整体风格统一、协调，并且后期维护的工作量也大大减少。见例1-5.html 1.2.4 导入样式 导入样式和上一节中的链接样式表的功能基本相同，只是语法和运作方式上略有区别。采用,1.2 使用CSS控制页面,import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件 的一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时以链接的 方式引入。 常用的有几种i

5、mport语句，可以选择任意一种放在与标记之间。 import url(sheet1.css); import url(sheet1.css); import url(sheet1.css); import sheet1.css; import sheet1.css; import sheet1.css; 见例1-6.html 不单是HTML文件的与标记中可以导入多个样式表，在CSS文件内也可以 导入其他的样式表。,1.2 使用CSS控制页面,1.2.5 各种方式的优先级问题 上面介绍了CSS控制页面的4种不同方法，各种方法都有其自身的特点。这4种 方法如果同时用到同一个HTML文件的同一个标

6、记上时，将会出现优先级的问题。 行内样式的优先级最高，其次是采用标记的链接式，再次是位于和 之间的内嵌式，最后才是import导入式。 虽然各种CSS样式加入页面的方式有先后的优先级，但在建设网站时，最好只使 用其中的12种，这样即有利于后期的维护和管理，也不会出现各种样式“撞车”的 情况，便于设计者理顺设计的整体思路。,1.3 CSS的注释,编写CSS代码与编写其他的程序一样，养成良好的写注释习惯对于提高代码的 可读性，以及减少日后维护的成本都非常重要。在CSS中，注释的语句都位于 “/*” 与 “*/” 之间，其内容可以是单行业可以是多行。 在添加单行注释时，必须注意将结尾处的 “*/”

7、加上。另外，在与 之间常常会见到 “” 将所有的CSS代码包含于其中，这是为了避免老式 浏览器不支持CSS、将CSS代码直接显示在浏览器上而设置的HTML注释。 在与之间当 “结束。 CSS的注释语法是：/ * . * / 而不是： 后者是html语法。两者不是一回事儿。,2.1 CSS选择器,选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记都是通过 不同的CSS选择器进行控制的。 2.1.1 标记选择器 一个HTML页面由很多不同的标记组成，而CSS标记选择器就是声明哪些标记 采用哪种CSS样式。例如p选择器，就是用于声明页面中所有标记的样式风 格。同样也可以通过h

8、1选择器来声明页面中所有的标记的CSS风格。如： h1 color:red; font-size:25px; ,2.1 CSS选择器,每一个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个， 从而实现对同一个标记，声明多种样式风格。 如图2.1 CSS标记选择器,2.1 CSS选择器,2.1.2 类别选择器 在上一节中提到的标记选择器一旦声明，那么页面中所有的该标记都会相应地 产生变化。例如当声明了标记为红色时，页面中所有的标记都将显示为 红色。如果希望其中的某一个标记不是红色，而是蓝色，这时仅靠标记选择 器是远远不够的，还需要引入类别（class）选择器。 类别选择器的名称可

9、以由用户自定义，属性和值跟标记选择器一样，也必须符合 CSS规范，如图2.2 类别选择器,2.1 CSS选择器,见例2-1.html 很多时候页面中几乎所有的标记都使用相同的样式风格，只有12个特殊的 标记需要使用不同的风格来突出，这时可以通过class选择器与标记选择器配 合使用，见例2-2.html 见例2-3.html，例中定义了标记的风格样式，同时单独定义了h3.special，用 于特殊的控制，而在这个h3.special中定义的风格样式仅仅适用于 标记，而不会影响单独的.special选择器，如最后一行的 在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将

10、两 个类别的样式风格同时运用到一个标记中。见例2-4.html,2.1 CSS选择器,2.1.3 ID选择器 ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在 HTML页面中使用一次，因此针对性更强。 如图2.3 ID选择器,2.1 CSS选择器,见例2-5.html 在很多浏览器下，ID选择器也可以用于多个标记。但这里需要指出的是，将ID 选择器用于多个标记是错误的，因为每个标记定义的id不只是CSS可以调用， JavaScript等其他脚本语言同样也可以调用。如果一个HTML中有两个相同的id 标记，那么将会导致js在查找id时出错。例如函数getElement

11、ById().,2.2 选择器声明,在利用CSS选择器控制HTML标记时，除了每个选择器的属性可以一次声明多个， 选择器本身也可以同时声明多个，并且任何形式的选择器（包括标记选择器、 class类别选择器、ID选择器等）都是合法的。 2.2.1 集体声明 在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同， 这时便可以利用集体声明的方法，将风格相同的CSS选择器同时声明， 见例2-6.html 另外，对于实际网站中的一些小型页面，例如弹出的小对话框和上传附件的小窗 口等，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望逐个来加 入集体声明列表，这时可以利用全局声

12、明符号 “*” ，见例2-7.html 例2-7.html与例2-6.html效果完全相同，代码却大大缩减了。,2.2 选择器声明,2.2.2 选择器的嵌套 在CSS选择器中，还可以通过嵌套的方式，对特殊位置的html标记进行声明， 例如当与之间包含标记时，就可以使用嵌套选择器进行相应 的控制，见例2-8.html，通过将b选择器嵌套在p选择器中进行声明，显示效果 只适用于与之间包含标记，而其外的标记并不产生 任何效果。 嵌套选择器的使用非常广泛，不只是嵌套的标记本身，类别选择器和ID选择器 都可以进行嵌套。如：1.css 其他内容css控制的部分其他内容 ,2.2 选择器声明,选择器的嵌套在

13、CSS的编写中可以大大减少对class和id的声明。因此在构建页 面HTML框架时通常只给外层标记（父标记）定义calss或者id，内层标记（子 标记）能通过嵌套表示的则利用嵌套的方式，而不需要再定义新的class或者专 用id。只有当子标记无法利用此规则时，才单独进行声明，例如一个标记中 包含多个标记,3.1 图片样式,3.1.1 图片边框 在HTML文件中可以直接通过标记的border属性值为图片添加边框，从而 控制边框的粗细，当设置该值为0时，则显示为没有边框，如下所示： 在CSS中可以通过border属性为图片添加各式各样的边框，border-style定义边框 的样式，如虚线、实线、

14、或点划线等；可以通过border-color定义边框的颜色，通 过border-width定义边框的粗细。 见例3-1.html,3.1 图片样式,在CSS中还可以分别设置4个边框的不同样式，即分别设定border-left、 border-right、border-top和border-bottom的样式，见例3-2.html 使用熟练后，border属性还可以将各个值写到同一语句中，用空格分离，这样 可大大简化CSS代码的长度，见例3-3.html 3.1.2 图片的缩放 CSS控制图片的大小也是通过width和height两个属性来实现的，见例3-4.html 因为设定的是相对大小（这里

15、即相对于body的宽度），因此当拖动浏览器窗口 改变其宽度时，图片的大小也会相应地发生变化。 这里需要指出的是，当仅仅设置了图片的width属性，而没有设置height属性时， 图片本身会自动等纵横比例缩放，如果只设定height属性也是一样的道理。只有,3.1 图片样式,当同时设定width和height属性时才不会不等比例缩放，见例3-5.html。从显示 效果我们看到图片的高度固定了，当浏览器窗口变化时，高度并没有随着图片 宽度的变化而变化。 也可以如下设置图片的宽度和高度： 练习一：建立一个网页，放置一张图片，宽度为980px，高度为220px，边框实线、 蓝色，边框线的宽度为6px。

16、图片水平居中。,3.2 超链接特效,超链接式网页上最普通不过的元素，通过超链接能够实现页面的跳转、功能的 激活等，因此超链接也是与用户打交道最多的元素之一。 3.2.1 动态超链接 超链接是通过标记来实现的，链接的具体地址则是利用标记的href属性； target属性规定在何处打开链接文档，它有四个属性值： _blank:在新窗口中打开被链接文档。 _self:默认。在相同的框架中打开被链接文档。 _parent:在父框架集中打开被链接文档。 _top:在整个窗口中打开被链接文档。 见例3-6.html,3.2 超链接特效,3.2.2 超链接样式 通过CSS可以设置超链接的各种属性，如a text-decoration:none; 还可以通过CSS的伪类别（Anchor Pseudo Classes）来制作动态效果，具体 属性设置如下： a:link：超链接的普通样式，即正常浏览状态的样式 a:visited：被点击过的超链接样式 a:hover：鼠标指针经过超链接上时的样式 a