您现在的位置:主页 > 网站制作 > CSS+DIV >

CSS初学者技巧:谈CSS的标准和最佳示例-Div+CSS教程

来源:建站吧 责任编辑:Jzq8 发表时间:2011-12-22 点击:

本文的讲解将帮助你了解网站和CSS文件,还将帮助你们了解CSS文件中的内容。索引部分知识一个格式化了的CSS注释段落,CSS的标准和最佳示例。

 

CSS是用来定义网站的用户界面或将显示和内容区分开来的。

由于CSS被广泛地使用在几乎所有网站上,所以让我们花些时间来创建样式表并确保它符合良好的标准。下面的技巧会极大地在开发过程中帮助CSS初学者。

索引

本处的定义将帮助你和其他开发者了解网站和CSS文件,还将帮助你们了解CSS文件中的内容。索引部分知识一个格式化了的CSS注释段落。

1给出CSS文件的作者信息

2定义网站的设计(列数,静态/动态)[columns, static/liquid]

3持续跟踪文件版本(当文件有多个作者或未来需要有升级更新的时候非常有用)

 

锚点

锚点就好像在同一个CSS文件中的书签一样,锚点使你清晰地浏览整个CSS文件按并且使它很有组织。

锚点需要在CSS的索引(上面提到的)处定义,因为CSS没有自己的锚点系统,所以我在文档中使用了一个简单的技巧定义锚点。

方法是用一个比较罕见的字符来定义注释,当你想找某个锚点时,你就可以从索引处复制并查找锚点的定义符,并找到该锚点。

重定义

重定义是用来覆盖HTML默认的标签样式,把它们进行重定义的方法。你是否见过这样的CSS代码,它只是想把那个特定的元素加上样式!

CSS中一个非常美丽的用法是上下文选择器,让我们使用它:

 

命名规则

一个很关键的因素将元素给出精确无误并且干净有效的名字,这将避免混乱并让你更容易快捷地读懂你的CSS。

 

速写

CSS中的速写功能是你可以将许多同类型的属性合并成一个的属性。

CSS速写使开发过程更简单并且让你的CSS文件干净、简短、可读,下面是几个例子:

Sprites

(译者注:翻译成精灵好像并不能对文章加深感性认识,反倒在真正看到英文的时候不理解了,所以干脆不译。)

将所有的背景图片合并到一张并且使用背景定位来显示不同的部分,这就是我们所说的CSS Sprites。

CSS Sprites能够减少HTTP请求的数量,节省带宽,使得读取更快。同时也可以避免图像不稳定现象(比如当鼠标经过一张图片时可以显示另一张图片的效果,后一张图片将在慢速的因特网连接中等待半天才会出现)。

CSS Sprites最佳并且最受欢迎的例子是苹果公司网站上的菜单系统

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      评价:
      表情:
      验证码:点击我更换图片

      推荐图文

      • Div+CSS布局入门教程-页面顶部制作之一
      • Div+CSS布局入门教程-页面布局与规划
      • 建站吧:精简高效的CSS命名准则和方法
      • CSS初学者技巧:谈CSS的标准和最佳示例-Div+CSS教程
      • Google谷歌的CSS前景图片合并技术-Div+CSS教程
      • WEB标准网页布局中HTML结构化漫谈-Div+CSS教程
      • CSS网页布局经验:CSS框架思维雏形与CSS文件精简-Div+CSS教程
      • CSSSprites工作原理及其对CSS布局的意义、优点和缺点介绍-Div+CS
      • CSS布局之再谈CSSDiv的居中实现方法-Div+CSS教程

      新闻关注排行榜

      热门推荐 最新推荐
      Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
      Copyright © 2010-2012 JZQ8.COM. 建站吧|建站去吧 版权所有
      冀ICP备09002514号
      冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款