网页编辑中CSS样式表技巧总结_经验交流

一、关于注释

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

二、关于命名

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

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

三、关于继承性

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

四、关于CSS定义的层次

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

示例结构:

<div id="menu">
  <div class="menulist">
    <div class="selectit"></div>
  </div>
</div>
示例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某些属性的优先级需要定义)可以灵活处理。

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

时间: 2024-11-20 18:42:23

网页编辑中CSS样式表技巧总结_经验交流的相关文章

发现四种在网页中使用CSS样式表的方法_经验交流

如何在网页中插入CSS  前面我们了解了CSS的语法,但要想在浏览器中显示出效果,就要让浏览器识别并调用.当浏览器读取样式表时,要依照文本格式来读,这里介绍四种在页面中插入样式表的方法:链入外部样式表.内部样式表.导入外表样式表和内嵌样式.  1. 链入外部样式表  链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用< link >标记链接到这个样式表文件,这个标记必须放到页面的< head >区内,如下:  复制代码 代码如下: <head>   --  

DreamWeaver设计网页之应用CSS样式表技巧两则

css|dreamweaver|技巧|设计|网页|样式表 一. 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观.要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线.首先在DreamWeaver的Document Windows中随便建立一个链接,你可以看到这个链接会有下划线.怎样去除这条下划线呢? 1.在点击菜单栏上的"

在DreamWeaver中应用CSS样式表技巧两则

css|dreamweaver|技巧|样式表 一. 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观.要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线.首先在DreamWeaver的Document Windows中随便建立一个链接,你可以看到这个链接会有下划线.怎样去除这条下划线呢? 1.在点击菜单栏上的"Text&q

DreamWeaver中应用CSS样式表技巧两则

css|dreamweaver|技巧|样式表 一. 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观.要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线.首先在DreamWeaver的Document Windows中随便建立一个链接,你可以看到这个链接会有下划线.怎样去除这条下划线呢? 1.在点击菜单栏上的"Text&q

在DreamWeaver中应用CSS样式表技巧

一. 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色: 在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观.要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线.首先在DreamWeaver的Document Windows中随便建立一个链接,你可以看到这个链接会有下划线.怎样去除这条下划线呢? 1.在点击菜单栏上的"Text"|"CSS Styles&q

CSS样式表技巧总结

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

HTML下在IE浏览器中的专有条件注释讲解_经验交流

在进行WEB标准网页的学习和应用过程中,网页对浏览器的兼容性是经常接触到的一个问题.其中因微软公司的Internet Explorer(简称IE)占据浏览器市场的大半江山,此外还有Firefox.Opera等.需要对这些浏览器进行兼容. 同时,单就IE而言,因IE版本的升级更替,目前浏览者使用的主要停留在 IE5(IE5.5).IE6和IE7这三个版本中.而这3个版本对于我们制作的WEB标准网页(XHTML+CSS)解释执行的显示状况不尽相同.并且,其他非IE浏览器与IE对某些CSS解释也不一样

用CSS构建iframe效果代码_经验交流

用CSS构建iframe效果 来自:网页教学网 A. 直接模拟iframe,用层做容器 ·仅用css编写无限分级弹出菜单 ·浏览器滚动条的参数总结 ·引入css样式表的四种方式介绍 ·两种方式实现的文字竖排效果 ·网页设计高级布局40例参考 ·从GMail认识W3C标准和Ajax

WEB设计中CSS样式表应用小技巧十四例

css|web|技巧|设计|样式表     CSS是Cascading style Sheets的简称,中文译作"层叠样式表单",我把它叫作"层叠样式表",我感到这样顺口一点,没别的意思.实际上它是一组样式.你可能对CSS这个名词比较陌生,实际上无论你用Internet Explorer还是 Netscape Navigator在网上冲浪,几乎随时都在与CSS打交道,在网上没有使用过CSS的网页可能不好找.不管你用什么工具软件制作网页,都有在有意无意地使用CSS.用