最前端

我的工作,我的生活,点点滴滴...

关于‘ HTML ’ 目录的归档

SASS尝鲜

SASS(Syntactically Awesome Stylesheets),是一种输出CSS的meta编程语言, 可以帮助开发者写出复用性更优的CSS文件: 它能将类似CSS但是更简便的书写的sass语言最终转换为CSS代码。据说很帅很强大,今天简单的测试了一下,果然!

  1. 安装SASS,HAML,当然你得先安装Ruby,windows用户可以用windows安装程序进行安装。
    			gem install sass
    			gem install haml

    install sass

  2. Aptana里建立测试文件test.sass。
  3. 进到test.sass文件目录下,用SASS,从test.sass生成test.css。test sass
  4. 成功。sass-css

扩展阅读

关于CSS的模块化注释、CSSDoc和CSS编辑技巧

当CSS文件超过1000 个人感觉行时,CSS就显得杂乱无章了,在添加新样式时,很难下手,不知道应该把新样式放到哪个位置,修改样式时更无从下手,甚至我们只能完全靠Firebug去定位。在这时候CSS注释就显得异常重要了,但单靠/**/这些普通的零星的注释,还是显得很杂乱。或许,我们可以这样注释:

 
/***************************************************************************************************
 * 
 * 一、样式重置
 * 
 ***************************************************************************************************/
html,
body { font-family: Arial,"宋体",sans-serif; margin: 0; padding: 0; font-size: 12px; color: #000; }
div,
form,
img,
ul,
ol,
li,
dl,
dt,
dd,
button,
input { margin: 0; padding: 0; border: 0; }
li { list-style-type: none }
img { vertical-align: top }
strong { font-weight: normal }
h1,
h2,
h3,
h4,
h5,
h6 { margin: 0; padding: 0; font-size: 12px; }
input { font-size: 12px; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; text-align: center; }
em { font-style: normal }
/****************************************************************************************************
 * 
 * 二、常用图标
 * 
 ***************************************************************************************************/
/***************************************************
 * 1、表格操作图标
 **************************************************/
.ico-new,
.ico-add,
.ico-copy,
.ico-edit,
.ico-save,
... { background: url(../images/ico.png) no-repeat; width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.ico-new { background-position: -120px 0px }
.ico-add { background-position: 0px -90px }
.ico-copy { background-position: -30px -90px }
.ico-edit { background-position: -60px -90px }
.ico-save { background-position: -90px -90px }
...
 
/***************************************************
 * 2、工作台和底部工具条图标
 **************************************************/
.ico-tip,
.ico-alert { width: 16px; height: 16px; display: inline-block; background: url(../images/msg-icons.png) no-repeat; }
.ico-alert { background-position: 0 -330px }
.ico-tip { background-position: 0 -360px }
 
/***************************************************
 * 3、表格排序图标
 **************************************************/
.ico-sort,
.ico-asc,
.ico-desc { background-image: url(../images/ico.Png); width: 19px; height: 19px; display: inline-block; vertical-align: middle; }
td .ico-sort,
td .ico-asc,
td .ico-desc { float: right }
/***************************************************
 * 4、分页图标
 **************************************************/
.page-icon { width: 16px; height: 18px; background: url(../images/page-icons.png) no-repeat; display: inline-block; vertical-align: middle; }
.iconNext { background-position: 0 0 }
.iconLast { background-position: 0 -20px }
.iconBack { background-position: -30px 0 }
.iconFirst { background-position: -30px -20px }
 
 
/***************************************************************************************************
 * 
 * 三、提示信息
 * 
 ***************************************************************************************************/
.msg-inline,
.msg-inline .msg-default { display: inline-block; *display: inline; *zoom: 1; }
.msg-block { display: block }
.msg-default { padding: 0 15px 0 26px; border: 1px solid #ffdd75; background: #FFFDD9; position: relative; min-height: 20px; _height: 20px; }
.msg-icon { float: left; width: 16px; height: 16px; overflow: hidden; margin: 1px 5px 1px 0; font-size: 0; line-height: 0; background: url(../images/msg-icons.png) no-repeat 0 -160px; position: absolute; left: 5px; top: 1px; }
.msg-title { display: inline; padding-right: 2px; font-weight: bold; }
.msg-close {  text-align: center; position: absolute; right: 1px; top: 1px; width: 14px; height: 13px; overflow: hidden; margin: 1px; }
.msg-close:hover { text-decoration: none; color: #CF6A0A; cursor: pointer; }

另外,我们还可以这样注释:

/**
 * 全局通用样式
 * 
 * 包括 浏览器样式的重置,通用的类,icon,按钮等
 * 
 * @project ECP
 * @version 2.1
 * @author  UED MIC
 * @copyright 2011 MIC
 * 
 * @colordef #fff;white
 * @colordef #000;blcak
 */
/**
 * @section 样式重置
 */
html,
body { font-family: Arial,"宋体",sans-serif; margin: 0; padding: 0; font-size: 12px; color: #000; }
div,
form,
img,
ul,
ol,
li,
dl,
dt,
dd,
button,
input { margin: 0; padding: 0; border: 0; }
li { list-style-type: none }
img { vertical-align: top }
strong { font-weight: normal }
h1,
h2,
h3,
h4,
h5,
h6 { margin: 0; padding: 0; font-size: 12px; }
input { font-size: 12px; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; text-align: center; }
em { font-style: normal }
/**
 * @section 常用图标
 */
/**
 * @subsection 表格操作图标
 */
.ico-new,
.ico-add,
.ico-copy,
.ico-edit,
.ico-save,
... { background: url(../images/ico.png) no-repeat; width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.ico-new { background-position: -120px 0px }
.ico-add { background-position: 0px -90px }
.ico-copy { background-position: -30px -90px }
.ico-edit { background-position: -60px -90px }
.ico-save { background-position: -90px -90px }
...
 
 
/**
 * @subsection 工作台和底部工具条图标
 */
.ico-tip,
.ico-alert { width: 16px; height: 16px; display: inline-block; background: url(../images/msg-icons.png) no-repeat; }
.ico-alert { background-position: 0 -330px }
.ico-tip { background-position: 0 -360px }
/**
 * @subsection 表格排序图标
 */
.ico-sort,
.ico-asc,
.ico-desc { background-image: url(../images/ico.Png); width: 19px; height: 19px; display: inline-block; vertical-align: middle; }
td .ico-sort,
td .ico-asc,
td .ico-desc { float: right }
/**
 * @subsection 菜单折叠图标
 */
.iconUp,
.iconDown { background: url(../images/menu-icons.png) no-repeat; width: 20px; height: 20px; display: inline-block; vertical-align: middle; }
/**
* @subsection 分页图标
*/
.page-icon { width: 16px; height: 18px; background: url(../images/page-icons.png) no-repeat; display: inline-block; vertical-align: middle; }
.iconNext { background-position: 0 0 }
.iconLast { background-position: 0 -20px }
.iconBack { background-position: -30px 0 }
.iconFirst { background-position: -30px -20px }
 
/**
* @section 提示信息
*/
.msg-inline,
.msg-inline .msg-default { display: inline-block; *display: inline; *zoom: 1; }
.msg-block { display: block }
.msg-default { padding: 0 15px 0 26px; border: 1px solid #ffdd75; background: #FFFDD9; position: relative; min-height: 20px; _height: 20px; }
.msg-icon { float: left; width: 16px; height: 16px; overflow: hidden; margin: 1px 5px 1px 0; font-size: 0; line-height: 0; background: url(../images/msg-icons.png) no-repeat 0 -160px; position: absolute; left: 5px; top: 1px; }
.msg-title { display: inline; padding-right: 2px; font-weight: bold; }
.msg-close {  text-align: center; position: absolute; right: 1px; top: 1px; width: 14px; height: 13px; overflow: hidden; margin: 1px; }
.msg-close:hover { text-decoration: none; color: #CF6A0A; cursor: pointer; }

哈,是不是有点像JavaDoc?PHPDoc抑或是JSDoc?很久之前貌似就有人研究这个CSSDoc,并且现在已经有一个基于Ruby的项目了。CSSDoc还有很多tag,比如@bugfix,@affected,@link,@see,@since,@date等,大家可以去研究一下。但这种注释方法给程序读是比较合适而且专业,但视觉上总感觉没第一种写法那么模块化,我们写CSS更关注的是易于管理与维护。还好,Aptana3有一个很漂亮的小功能,如下图:

aptana css edit

我们可以给每个模块加上一个书签,或者加上一个任务(任务还可以分完成与否),并且还显示CSS错误。红色表示错误,绿色表示书签,蓝色表示任务。不错吧,非常完美!另外有一个叫做CSS Edit的IDE,也是异常的强大,可以把CSS分块变成文件夹管理,如下图:

css edit

关于css的书写顺序

很喜欢说“人不能太懒了”,工作更是如此,一开始懒了,乱了,后面麻烦自然而然就来了,一步慢,步步慢。写css时,对此深有体会,尤其在需求和设计不断变化的情况下,更是痛苦不堪。在项目开始的前期,团队认真沟通,仔细考虑好css的书写格式等规范,或许能减少项目后期维护的很多烦恼。这里就简单地总结一下自己css书写的顺序。

css order

一个css文件内容的书写顺序,包括三方面:

  1. 各组选择器的顺序,如:

    /*布局或模块化时的顺序*/
    .header{...}/*1*/
    .main{...}/*2*/
    .side{...}/*3*/
    .footer{...}/*4*/
     
    /*伪类的顺序*/
    a:link{...}/*1*/
    a:visited{...}/*2*/
    a:hover{...}/*3*/
    a:active{...}/*4*/
  2. 每个选择器里,各属性的顺序,如:

    .header{
    	color:#333;/*1*/
     
    	width:960px;/*2*/
    	height:250px;
     
    	background-color:#fff;/*3*/
    }
  3. 每个属性的子属性顺序,如:

    .header{
    	/*顺序为:background-color || background-image || background-repeat || background-position || */
    	background:#fff url(images/header.jpg) repeat-x center top;
    }

这里着重讨论一下第二个方面,即每个选择器里,各属性的顺序。每个人在写css的时候,这个顺序都不同,也没有官方的说法,Mozilla Firefox方面貌似推荐过一个简单的顺序Mozilla suggested css order,不太官方,但值得参考。我推荐的是如下 顺序:

/*一般HTML标签的选择器*/
.normal{
    /*定位*/
    position:relative;
    left:10px;
    top:10px;
    z-index: 1;
 
    /*布局*/
    display:block;
    float: left;
        /*其它
        clear:left;
        overflow:scroll;
        visibility:visible;*/
 
    /*尺寸大小,由内而外*/
    width:100px;
    height:100px;
    padding:10px;
    border:1px;
    margin:10px;
        /*其它
        min-width:100px;
        min-height:100px;
        max-width:200px;
        max-height: 200px;*/
 
    /*背景*/
    background:#fff url(../images/body.jpg;) left top repeat-x;
    opacity:0.5;
 
    /*文本*/
    text-align:left;
    vertical-align:middle;
    text-indent:-9999px;
    text-overflow:ellipsis;
    word-break:break-all;
 
    /*字体*/
    font:12px Tahoma,Helvetica,Arial,sans-serif;
    line-height:1.5em;
    text-decoration:underline;
        /*其它
        caption:first-letter;
        letter-spacing:1px;
        text-shadow:1px 1px 1px #ccc;
        word-spacing:5px;*/
/*列表表格等特有属性统一放在后面*/
.list{
	list-style:disc outside;
}
.table{
	border-collapse:collapse;
	table-layout: fixed;
}

这里的属性的顺序是由外到内的,定位->布局->尺寸->背景->文本->字休,也可以简单地说顺序是布局->盒子->内容,也就是先渲染全局,再渲染自身。我不知道各大浏览器是不是按这样顺序渲染的,但至少这样分组管理和维护起来更方便和不容易出错。肯定还有很多不合理的地方,发现问题的朋友多多指教哈,比如说css3的新属性如何分块,它们的书写顺序是怎么样的。