当前位置:  编程技术>WEB前端

网页编辑中CSS样式表技巧总结

    来源: 互联网  发布时间:2014-09-06

    本文导语:  一、关于注释 在创建xhtml+CSS网站时,CSS中的注释非常重要。在创建CSS样式时,应当保持随手注释的习惯。一般的,我习惯于使用“/* 注释内容 */”的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用...

一、关于注释

在创建xhtml+CSS网站时,CSS中的注释非常重要。在创建CSS样式时,应当保持随手注释的习惯。一般的,我习惯于使用“/* 注释内容 */”的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的“/***************/”之类的注释是无意义的,没有必要填充大量无意义内容作为分隔。带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率。

二、关于命名

在给CSS文件命名的时候,我比较喜欢使用符合语义的英文名或者缩写命名,在非常用部分也许会用部分拼音命名。另外,在某些有从属关系的class里,我可能会使用类似“list_banner”之类的命名,即父元素名加上“_”再加上元素名。

关于命名,可以根据团队设计师的习惯进行协商。但最好在命名之后加上注释,以便将来生成文档备查。

三、关于继承性

在CSS中,要善用继承性。比如在两个嵌套的div中,父元素定义了background-color属性为黑色,如果子元素的背景同为黑色,则不需重复定义。善于利用CSS的继承性可以让代码更有效、更精简。

四、关于CSS定义的层次

在定义CSS中的class时,建议使用层次分明的方式来描述语句。

示例结构:


  
    

  


示例CSS:

#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }
在上例中,从最终效果来看,#menu没有必要重复出现,但是实际上如果能够在前面加上#menu,将会让文档的层次更加明了,更利于阅读。

五、关于样式排序

在设计CSS样式表时,我们大多是手写代码,这样很容易造成class中的样式排序混乱。比如有几个class中用到了padding、margin、background、color等样式,但是排序的时候,有的class是background比较靠前,有的是margin比较靠前。这样就造成了一定的混乱,容易让思路受挫。我建议个人或者团队的设计师协定一个大致顺序,这样从个别来说看不出太大差别,但从整体上将更加易于阅读和管理,整体效率会提高不少。

比如,我默认将width、height和padding、margin、border等放在较靠前的位置,background其次,然后是控制文本的font、color、text-align等,接着是某些特殊标签才能用到的元素,像list-style等,最后是css滤镜。当遇到特殊情况时(比如CSS某些属性的优先级需要定义)可以灵活处理。

就总结到这里了,火德欢迎大家补充、指正。

    
 
 

您可能感兴趣的文章:

  • 在样式表中,用submit提交信息到下一个网页,在下一个网页中如何知道该submit的name??谢谢了
  • 教你如何用CSS来控制网页字体的显示样式
  • 发现四种在网页中使用CSS样式表的方法
  • eidt.jsp对网页进行编辑,网页内容存放在数据库中,其中有些字段用textarea多行编辑框显示,保存提交数据库后,再次对它编辑,那些用多行
  • 在线网页编辑器 uuHEdt
  • linux下有没有所见即所得的网页编辑器?
  • 请问哪里有能用于网页上的可见即所得html编辑器(Java写的)源代码?
  • 请教Linux下最好的网页编辑器?
  • 网页在线编辑器 TQEditor
  • Mac上的HTML5可视化网页编辑器 Radi
  • 我现在做一个动态新闻管理系统,要把编辑好的网页上传到服务器指定的文件夹去,如何有好的实现?
  • CSS编辑工具Topstyle轻松打造网页风格
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 指定网页的doctype解决CSS Hacking方法总结
  • web网页自动跳转方法:Html body onload自动跳转举例
  • linux浏览网页时怎样显示网页中的flash动画?
  • Python获取网页编码的方法及示例代码
  • 怎样把整张网页内容当作一副图形(只能作为图像,因为可能网页中有图)传给控制打印的Java程序?
  • HTML网页中的html body onload自动跳转方法介绍及自动跳转代码示例
  • 为什么我用netscape浏览时,网页不正常(主要是动态网页)碰到分类排序的就显示不了了
  • HTML网页的Meta Refresh自动跳转方法介绍及Meta Refresh自动跳转代码示例
  • [求助][排错]一段利用socket连接网页,并将网页内容拷贝下来的程序。。。[有一点问题]
  • 中文网页快速去重算法研究
  • 关于session(我停了一会儿没动网页,再在点击网页链接时,session丢失,然后点击IE的刷新,session又有了)这是怎么回事。
  • VPN虚拟局域网和本地局域网共存(连上vpn后正常打开网页)
  • C#实现将网页保存成图片的网页拍照功能
  • 基于python实现的网络爬虫功能:自动抓取网页介绍
  • linux iis7站长之家
  • HTML网页中的javaScript自动跳转方法介绍及javaScript自动跳转代码示例
  • 各位高手请帮忙,如果我在框架网页中弹出一个新的窗口,在新窗口中执行一定的操作后,怎样让框架网页自动刷新?
  • Python3通过request.urlopen实现Web网页图片下载
  • ★★Linux服务器的网页响应发送给客户端的网页被修改,估计服务器中毒了,怎么办??
  • 网页下载文件期间如何防止用户对网页进行其他操作
  • 批量下载网页图片,网页截图 Chrome 插件 挖一下
  • 网页设计者需要了解的_网页字体大小数据参考


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3