网页设计与制作中使用CSS.pptVIP

模块4 CSS层叠样式表 主讲教师 张俊 课程引导 CSS ( Cascading Style Sheets )在当前的网页设计中已经成为不可或缺的技术。对于网页设计者来说CSS是一个非常灵活的工具，不必再把繁杂的样式定义编写在文档结构中，可以将所有有关文档的样式指定内容全部脱离出来，在行内定义、在标题中定义，甚至作为外部样式文件供HTML调用。在制作网页时，如果没有CSS样式，那么对文本的格式化将是一件很繁琐的工作。利用CSS样式表可以对文本格式进行精确的页面美化。 学习目标 熟练掌握CSS样式表的基本语法和定义位置。 熟练掌握标签样式、高级样式、类样式的定义方法。 掌握样式的编辑方法。 掌握如何使用CSS样式表美化页面。 掌握DIV+CSS进行简单页面布局的方法 知识讲解 4.1.1 传统HTML的缺陷 传统HTML的缺陷，相比CSS为基础的页面设计方法，其所体现出的劣势主要有以下几点： 维护困难 为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高。 标记不足 HTML本身的标记很少，很多标记都是为网页内容服务的，而对于美工样式的标记，如文字间距、段落缩进等标记在HTML中很难找到。 网页过胖 由于没有统一对各种风格样式进行控制，因此HTML的页面往往体积过大，占用网络带宽。 定位困难 在整体布局页面时，HTML对于各个模块的位置调整显得捉襟见肘，过多的其他标记同样也导致页面的复杂和后期维护的困难。 4.1.2 CSS的引入与发展 正因为传统的HTML有如此之多的缺陷，所以才有了XHTML和CSS，而这一切都是Web 2.0标准的一部分。CSS有许多的优势。但其最大的优势就是体现了页面内容（结构）与显示风格（表现）分离的思想。 但各种浏览器厂商之间的竞争造成了对CSS的支持也不一致，相比而言，Mozilla Firefox对CSS的支持更好，但其市场占有率却远远低于IE，因此，实际上针对IE来设计网页更好一些。 CSS是由W3C(World Wide Web Consortium-万维网联盟的缩写 )的CSS工作组产生和维护的.( ) 1996年W3C正式推出了CSS1 1998年W3C正式推出了CSS2 CSS2.1是W3C现在正在推荐使用的 CSS3 目前已发布草案，但只有国外主流浏览器Safari和Chrome 完全支持，国内主流的 IE 和 FF 还不完全支持。 4.1.3 体验CSS设置 操作见演示 4.2.1 CSS的构造 在具体使用CSS之前，请看一个生活中的例子，通常我们描述一个人可以为这个人列一张表： 张飞 { 身高：185cm； 体重：105kg； 性别：男； 性格：暴躁； 民族：汉族； } 2级标题 { 字体：宋体； 大小：15像素； 颜色：红色； 装饰：下划线； } CSS的思想就是首先指定对什么对象进行设置，然后指定对该对象的哪个方面的属性进行设置，最后给出该设置的值。 因此，概括来说，CSS就是由3个基本部分组成的——对象、属性和值。其中，对象是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）。 4.2.2 CSS的选择器 1. 标签选择器： 顾名思义，标签选择器是直接将HTML标签作为选择器，可以是p、h1、a、strong等HTML标签。 例如: p { font-size:12px;} em { color:blue;} dl { float:left; margin-top:10px;} 2. id选择器： 我们通常给页面元素定义id。例如定义一个层?div?id=menubar…/div?然后在样式表里这样定义： #menubar?{background:#ccc;?color:#c00;}?? 其中menubar是你自己定义的id名称。注意在前面加#号。 id选择器也同样支持后代选择器 例如： ?#menubar ?p ?{?text-align:center;?line-eight:20px;?}? 这个方法主要用来定义层中包含的元素。 3. 类（class）选择器： 在CSS里用一个点号开头表示类别选择器定义。?例如: .textsize {color:#f60;font-size:14px;} 在页面中，用class=类别名的方法调用，例如： ?span?class=textsize14px大小的字体/span 这个方法比较简单灵活，可以随时根据页面需