DIV+CSS网页样式与布局.pptVIP

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