《css基本入门》PPT课件.ppt

css制作流程及标准,（一）制作流程：,（二）与html文档建立关系,（三）制作页面样式,（四）添加注释,（四）添加注释,注释范围： 1）每个文档对应一个文档注释（方便后期维护和管理） 主要注释说明：文档创建人，时间，内容等 2）属性注释说明：css hack，特殊属性等 3）功能注释说明：默认样式，按钮，弹出框等,（五）添加注释,原 因：这个顺序是项目开发的代码标准，符合浏览器的渲染顺序， 最终达到提高执行效率目的,DIV CSS网页设计布局六大原则,1.样式的重用性 CSS布局的网页最大的特点就是样式的可重用性,利用class选择符重复将某个样式属性多次在网页中使用，以减少不断定义样式属性的烦琐工作，增加页面的可维护性。例如，将某处表达样式、板块整体样式、文字颜色；甚至可以扩展到页面的模块化处理。,2.浮动与清除浮动 浮动式网页布局中永远的话题，很多浏览器的兼容性问题都是因为浮动而导致的，例如IE6.0的双倍间距的问题。浮动也是把双刃刀，兼容性的问题为其二产生为其而灭亡，善于利用浮动对于DIV CSS网页布局将会带来很到的帮助，例如使用负边距地方法对页面进行布局设计。 清除浮动浮动而出现，用来清理浮动导致的诸多问题。清除浮动的方式有很多。,3.定位方式的DIV CSS页面布局 定位方式的布局一般指的是绝对定位，这种布局方式对页面布局的设计精确性要求十分高，遗憾的是绝对定位的布局方式的盒模型是固定高和宽的，无非自适应。,4.不要过多使用ID选择符 ID在一个页面中出现的次数是一次，过多使用将失去样式的可重用性的特征，对于页面的可维护性也将大打折扣。,5.类选择符(class)及ID选择符使用字母+数字方式命名 类选择符Class及ID选择符的命名方式很多,最好的方式是阵对某个模块的功能阐述性的命名，例如，阵对主要内容区域，可以使用#mainBox或者.mainBox而不是使用#box1或者.box1。 不使用字母+数字的方式命名，在后期维护中可以阵对某个模块主要针对对象一目了然。,6.合理使用CSS布局，切勿盲目使用 CSS样式的主要功能是对页面结构样式的处理，避免只是为了试验一种技术或新技巧而采用CSS中的技巧去剥夺其他语言脚本的使用。,HTML代码编写指南,1. 一定要闭合HTML标签 2.不要使用嵌入式CSS样式 注释：会在你得代码中产生问题。 3.在页面底部引入javascript文件 注释：当加载一个脚本时，页面会暂停加载，直到脚本完全载入。所以会浪费用户更多的时间。 4.不要使用嵌入式JavaScript 5.使用UL列表布局导航菜单 可以用这种方式写 首页 关于我们 公司简介 ,HTML代码编写指南,6.学会怎样对付IE IE一直以来都是前端开发人员的噩梦！ 如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效： 注释：如果用户浏览器是IE6及以下，那这段代码才会生效。如果你想把IE7也包含进来，那么就把“if lt IE 7”改为“if lt IE 7” 7.缩减，缩减，缩减 大多数人写的第一个页面，一定会发现严重的 “DIV癖”( divitis )，通常初学者的本能就是把一个段落用DIV包起来，然后为了控制定位而套上更多的DIV。 其实这是一种低效而有害的做法。,HTML代码编写指南,8.为所有的图片加上Alt属性 为图片加上alt属性的好处是不言而喻的 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息，并且对图像搜索引擎友好。 firefox不支持显示图像Alt属性，可以加入title属性： 9.不要给背景图片路径加引号 将background:url(“xxx.gif“)改为background:url(xxx.gif)，因为对于部分浏览器加引号反而会引起错误。,HTML代码编写指南,10.多重class定义 一个标签可以同时定义多个class。例如:我们先定义两个样式，第一个样式背景为#666;第二个样式有