资源描述：
《DIV+CSS网页样式与布局ppt课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、CSS+DIV网页样式与布局—徐州市华网信息科技有限公司第一章CSS的初步体验第二章CSS的基本语法第三章图片效果和超链接目录1.1CSS的概念CSS(CascadingStyleSheet)，中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。简单地说，CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计。它以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景、和整体排版等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格。1.1.1标记的概念在页面中各种标记以及位于标记中间的所
2、有内容，组成了整个页面。如：
标题内容
其中
称为起始标记，对应的
称为结束标记，在这两者之间为实际的标题内容。见例1-1.html1.1.2CSS的引入见例1-2.html1.2使用CSS控制页面在对CSS有了大致的了解之后，便可以使用CSS对页面进行全方位的控制。使用CSS控制页面的方法，包括行内样式、内嵌套、链接式和导入式。1.2.1行内样式行内样式是所有方法中最为直接的一种，它直接对HTML的标记使用style属性，然后将CSS代码直接写在其中。见例1-3.html在例中可以看到3个
标记中都使用了style
3、属性，并且设置了不同的css样式，各个样式之间互不影响，分别显示自己的样式效果。行内样式是最为简单的css使用方法，但由于需要为每一个标记设置style属性，后期维护成本很高，而且网页容易过胖，因此不推荐使用。1.2.2内嵌式内嵌式样式表就是将CSS写在
与之间，并且用标记进行声明。见例1-4.html1.2使用CSS控制页面从上例中看到，所有css的代码部分被集中在了同一个区域，方便了后期的维护，页面本身也大大瘦身。但如果是一个网站，拥有很多的页面，对于不同页面上的
标记都希望采用同样的
4、风格时，内嵌式的方法就显得略微麻烦，维护成本也不低。因此仅适用于对特殊的页面设置单独的样式风格。1.2.3链接式链接式css样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件，实现了页面框架HTML代码与美工CSS代码完全分离，使得前期制作和后期维护都十分方便。对于同一个CSS文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中，使得网站整体风格统一、协调，并且后期维护的工作量也大大减少。见例1-5.html1.2.4导入样式导入样式和上一节中的链接样式表的功能基本相同，只是语法和运
5、作方式上略有区别。采用1.2使用CSS控制页面import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时以链接的方式引入。常用的有几种@import语句，可以选择任意一种放在标记之间。@importurl(sheet1.css);@importurl("sheet1.css");@importurl('sheet1.css');@importsheet1.css;@import"sheet1.css";@import
6、'sheet1.css';见例1-6.html不单是HTML文件的标记中可以导入多个样式表，在CSS文件内也可以导入其他的样式表。1.2使用CSS控制页面1.2.5各种方式的优先级问题上面介绍了CSS控制页面的4种不同方法，各种方法都有其自身的特点。这4种方法如果同时用到同一个HTML文件的同一个标记上时，将会出现优先级的问题。行内样式的优先级最高，其次是采用标记的链接式，再次是位于之间的内嵌式，最后才是@import导入式。虽然各种CSS样式加入页面的方式有先后的优先级，
7、但在建设网站时，最好只使用其中的1~2种，这样即有利于后期的维护和管理，也不会出现各种样式“撞车”的情况，便于设计者理顺设计的整体思路。1.3CSS的注释编写CSS代码与编写其他的程序一样，养成良好的写注释习惯对于提高代码的可读性，以及减少日后维护的成本都非常重要。在CSS中，注释的语句都位于“/*”与“*/”之间，其内容可以是单行业可以是多行。在添加单行注释时，必须注意将结尾处的“*/”加上。另外，在之间常常会见到“”将所有的CSS代码包含于其中，这是为了避免老式浏览器不支持CSS、将CSS代码
8、直接显示在浏览器上而设置的HTML注释。在之间当“
