学习CSS必需知道的事

• 　　1.  CSS的要点是在你的页面中使用简洁的HTML代码,然后编写CSS"控制规则"来样式化页面中的对象.页面保持清晰有条不紊看上去非常棒.这样你的Html页面可以在移动设备和标准浏览器中运行.这就是CSS的要点.

  不过CSS的艺术在于能够利用CSS控制规则快速有效地操纵页面对象.把CSS规则与HTML标记匹配起来的操做就好像是一种对话:两者需要条理清楚且保持同步,否则的话他们将答非所问,搞得你头大.

  　　2. 常规操作还是灵活匹配:假设你要样式化页面中一个

  header,可选择操作有:

  　　*用CSS规则h1{...定义所有的

  标记
  　　*在对象实际位置进行样式定义,举个例子:位于标记

  的内部,在定义的时候你应该这样p b{...
  　　*针对某个特定的类型进行定义,为你想定义的标记

  添加class="myheader",然后使用CSS规则 .myheader{...
  　　*仅仅定义个别

  header,你可以为标记

  添加id="myheader",然后使用CSS规则#myheader{...
  　　当然你也可通过不同的方式混合使用上面的规则:
  　　要定义所有位于类型为"magicform"的表单中的类型为"barleymash"的

  标记,你可以这样form.magicform h1.barleymash {...

  　　3.  获取目标:匹配规则出错会浪费很多的时间,这里有个小窍门:在打算实施你的规则之前,不妨先使用color:red;这个属性,它既书写简便又利于观察. 一旦你看到HTML页面中的文本变为红色,说明规则匹配正确.这时你会知道你的规则可以在文档中正确的部分生效,然后,删除color:red;替换成原来你想实施的规则语句.

  　　4.  掌握专利技术JM3 Gasbag Model:一个CSS布局设计就好比一个装满对象的大袋子.每一个对象均能够对外施加压力(联想一下煤气泄露,如同你的布局设计)大多数情况下,压力表现出来(margins, padding,以及float都是跟"推"密切相关的属性)通过修改CSS规则,你判断压力,在浏览器中观察你的页面好比是摇晃一下袋子,会显现出压力集中在什么区域产生影响,这就是CSS-管理压力对象保持平衡的秘密.对付压力,一次性应用过多的属性,冲突就会导致你的对象到处拥挤,对象相互之间以及袋子会被扎出许多洞来.页面漏洞百出,实在是没劲.
     Gasbag 例子1:要产生居中的效果,设置margin-left:auto ,margin-right:auto;这样做是有效的,因为你平衡了分布在左右两侧的压力,于是元素就像放置在两块磁铁中间的铁球一样被完美保持在了中间位置.

  　　5.  GasbagCorollary 1:JM3 Gasbag Model   只适用于使用默认的CSS"telative"定位模式.当然也可能适用于"absolute"的定位模式(通过给定精确的坐标定位每个模块的布局方式),但是千万不要轻易这样做,一旦文本或者图象的数量有所变动它会花费你很长时间来重新布局并且使你的页面看上去很糟糕.只有那些怪异的出版设计师愿意那样做.

  　　6.  规则A-Divs和Spans:CSS中的混合语言是两个名为和的标记,两者均没有默认的外观,所谓的 以及不过是一些容器和在文本中的线。他们只是普通的用以应用样式的标记

  　　7.  规则B：Div是容器，是文本，是有高度，宽度，队列可以与之打交道。还有：一个 的高度是指它其中内容的高度（文本、图像或者其他）.标记用于文本中的分割，正因他们只在成一条直线的文本中有意义，所以被称为"inline"元素，其他的标记如：bold(b),italic(i),underline(u)等，他们被称为是< span>/元素。

  　　不要使用来标记文本，也不要将直接用于“袋子”，这样你的布局工作才会变得容易

  　　8.  应用CSS的三个级别：应用于较多数量的页面（通过使用扩展名为.css的文件）适用于单一页面（通过定义一个样式代码块），还有就是应用于页面内部明确的标记（通过在标记内部添加style"..."属性），当你完成一个页面布局设计，把所有的CSS代码转换为一个独立的css文件是一个不错的主意-你可以到处使用它。当你测试代码时，仅仅将此CSS文件内容复制到HTML页面内部的样式代码块中(这对你来说很容易做到)然后你就不必在两个文件之间来回切换.当样式代码定下来的时候再修改原CSS文件(我认为这段话作者的意思是:不断备份一个稳定的测试代码).

  　　9.  保持代码简洁：书写简洁的HTML虽然很简单，但即便是那些自认为很了解CSS的人也没有把它写的简洁高效。高效的代码不能使你的页面载入更快，但是它能够让你的编码工作更容易。

      　three tips：
  

• [1] [2] 下一页 
• 复制本页网址和标题，发送给你QQ/Msn的好友一起分享
  
  
• 学习CSS必需知道的事 相关文章：
• ·学习CSS制作网页的多个经验技巧
• ·学习CSS制作网页总结的一些经验技巧
• ·Photoshop初学者轻松制作条形码
• ·Photoshop教程 图层样式的学习
• ·CSS初学者应该保持的一种心态
• ·Flash初学者实用技巧
• ·学习CSS必需知道的事
• ·Word 2007数学插件：Microsoft Math
• ·初学:ASP内建对象Response
• ·初学ASP动态网页制作常用错误处理
• 学习CSS必需知道的事 相关软件
• ·学校源码管理系统超靓版V2008
• ·小说语文教学（集）
• ·《冰封王座》地图：逃学大乱斗V2.8音乐版
• ·学生智力训练
• ·《反恐精英》1.6版AK练习法教学视频下载
• ·动作解谜《科学试验》游戏试玩
• ·美国厚黑学--人生必胜之道
• ·GBA《游戏王GX学院决斗》模拟器
• ·最后的学徒：班恩的诅咒
• ·历史学家(精编版)

上一篇:Cisco路由器常用命令

下一篇:Office Live Workspace Beta测试

• 特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
• 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
• 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com