css样式表使用技巧小结
作者:tyhouse 来源:两个人的城市 发布时间:2008-01-11 20:44:00
学习了css一段时间,现在对css的一些技巧进行一次小结.希望能对那些刚学习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某些属性的优先级需要定义)可以灵活处理。
猜你喜欢
- PPOCRLabel标注的txt格式转换成labelme能修改的json格式PPOCR是个好东西默认的训练文件是用自带的PPOCRLabel
- 前言在新建完一个MVC项目之后,你会发现整个整个项目结构中存在有两个web.config文件,如下图所示:这两个配置文件,一个位于项目的根目
- 一、前言二、爬取观影数据https://movie.douban.com/在『豆瓣』平台爬取用户观影数据。爬取用户列表网页分析为了获取用户,
- 在sql语句后使用 SCOPE_IDENTITY() 当然您也可以使用 SELECT @@IDENTITY 但是使用 SELECT @@ID
- python修改FTP服务器上的文件名,具体代码如下所示:#-*- coding:utf-8 -*-#修改ftp服务器上的文件名from f
- SQL Server 2005默认是不允许远程连接的,要想通过远程连接实现MSSQL,数据库备份,需要做如下设置:步骤/方法1.打开SQL
- 在 Go 语言中,struct 是一种常见的数据类型,它可以用来表示复杂的数据结构。在 struct 中,我们可以定义多个字段,每个字段可以
- 如题:只需要给定输出特征图的大小就好,其中通道数前后不发生变化。具体如下:AdaptiveAvgPool2d CLASStorch.nn.A
- filter(function, sequence):对sequence中的item依次执行function(item),将执行结果为Tru
- 目录搭建Vuex环境总结搭建Vuex环境在src目录下创建一个文件夹store,在store文件夹内创建一个index.js文件index.
- 1、Python的数组可分为三种类型:(1) list 普通的链表,初始化后可以通过特定方法动态增加元素。定义方式:arr = [元素](2
- 本文实例为大家分享了vue简单的图书管理具体代码,供大家参考,具体内容如下<table class="table table
- Python安装新包,pip是很好用的安装工具。pip list 可以查询所有已安装的包和版本。怎么知道本地安装包的版本是否有可以更新的新版
- 1.事件绑定函数事件绑定函数有三个如下: 组件.bind('事件类型',
- 如何为list实现find方法string类型的话可用find方法去查找字符串位置:a_list.find('a')如果找到
- 1. 变量每个变量都存储了一个值在程序中可以随时修改变量,但Python将始终记录变量的最新值message = "Hello H
- 目录1.需求2.代码实现总结1.需求发现项目本地所有带别名的URL,组成一个有序字典,方便后续调用;定向排除部分URL,如Django自带的
- 看代码吧~package mainimport ("fmt""io""net/http&q
- 数据库响应慢问题最多的就是查询了。现在大部分数据库都提供了性能分析的帮助手段。例如Oracle中会帮你直接找出慢的语句,并且提供优化方案。在
- #环境win64+anaconda+python3.6list & array(1)list不具有array的全部属性(如维度、转置