第1章 初步体验CSS.ppt

DIV+CSS网页样式与布局 第1章 CSS的初步体验 1.1 CSS的概念 CSS中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说，CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格。 传统HTML的缺点 在CSS还没有引入页面设计之前，传统的HTML语言要实现页面美工上的设计是十分麻烦的。其所体现出的劣势主要有以下几点： 维护困难。为了修改某个标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改的成本很高。 标记不足。HTML本身的标记十分的少，很多标记都是为网页内容服务的，而关于美工样式的标记，在HTML中很难找到。 网页过“胖”。由于没有统一对各种风格样式进行控制，HTML的页面往往体积过大，占用掉了很多宝贵的带宽。 定位困难。在整体页局时，HTML对于各个模块的位置调整显得捉襟见肘，过多的table标记同样也导致页面的复杂和后期维护的困难。 使用CSS控制页面 如何使用CSS控制页面，以及其控制页面的各种方法，包括行内样式、嵌入式、链接样式和导入样式。 行内样式 行内样式是所有样式方法中最为直接的一种，它直接对HTML的标记使用style属性，然后将CSS代码直接写在其中。 内嵌式 内嵌样式表就是将CSS写在head/head之间，并且用style/style标记进行声明。 使用CSS控制页面 链接外部样式表文件 链接式CSS样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好的分工合作。 而且对于同一个CSS文件可以链接到多个HTML文件中，甚至可以链接到整个网站的所有页面中，使得网站整体风格统一、协调，并且后期维护的工作量也大大减少。 链接式样式表的最大优势在于CSS代码与HTML代码完全分离，并且同一个CSS文件可以被不同的HTML所链接使用。 使用CSS控制页面 导入样式 导入样式表与上一小节提到的链接样式表的功能基本相同，只是语法和运行方式上略有区别。采用import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标记需要格式时才以链接的方式导入。导入样式表的最大用处在于可以让一个HTML文件导入很多的样式表。 在HTML文件中导入样式表，常用的有如下几种@import语句，可以选择任意一种放在style/style标记之间。 各种方式的优先级问题 优先级问题 在对同一个HTML元素设置同一种属性时，行内样式的优先级最高，其次是采用link标记的链接式，再次是位于style和/style之间的内嵌式，最后才是@import导入式。 注意事项 虽然各种CSS样式加入页面的方式有先后的优先级，但在建站时，最好只使用其中的1-2种，这样即有利于后期的维护和管理，也不会出现各种样式“撞车”的情况，便于设计者理顺设计的整体思路。 CSS注释 在CSS中，注释的语句都位于“/*”和“*/”之间，其内容可以是单行也可以是多行。 注：在style与/style之间常常会见到!--*****--将所有的CSS代码包含于其中，这是为了避免老式浏览器不支持CSS，将CSS代码直接显示在浏览器上而设置的HTML注释 实例 * * h1 style=“color:#ffffff;”一级标题内容/h1 style type=“text/css” body{ margin:0px; padding:0px; color:#333333’} /style headlink href=my.css type=text/css rel=stylesheet/head @import url(sheet1.css);@import url(sheet1.css);@import url(sheet1.css);@import sheet1.css;@import sheet1.css ; /* this is a CSS comment*/ /* 这是一个CSS注释 */