标签归档：css

Discuz 前端构架——理解（1）

抢沙发

ps：玩discuz快两个月了，按照自己的方式陆续整理出一点可能只有自己看的懂的东西，慢慢的摆出来吧，bs一下。

CSS书写顺序

按照元素模型由外及内，由整体到细节书写，大致分为五组

位置：position,left,right,float
盒模型及属性：display,margin,padding,width,height
边框与背景：border,background
段落与文本：line-height,text-indent,font,color,text-decoration…
其他属性:overflow,cursor,visibility…

常用变量：

SMFONT            小号字体
SMFONTSIZE        小号字体大小  0.83em
NOTICETEXT        提示信息颜色  F26C4F  橙色（有点红）
HIGHLIGHTLINK     高亮链接颜色  369     蓝色
TABLETEXT         普通文本颜色  444
MIDTEXT           中等文本颜色  666
LIGHTTEXT         浅色文字      999

重置

常规的重置，不列出

Continue reading >>

CSS压缩大法：技巧与工具

1 条回复

前言：这是我在前端观察所看到一篇文章，很是强悍，所以就搬来了，有兴趣的也可以去看原文，但我保证我是一字不落的搬来了，O(∩_∩)O~

学习编写简练、优化的CSS需要大量的实践和一种不自觉的强迫性清洁的渴望。然而让你的CSS保持整洁并不仅仅是你对清洁的疯狂的心理需求，尤其对于大型网站来说，这会使页面加载更快。更快的加载时间就等同于提高可用性和较高的用户满意度。

很多人都有代码洁癖。这不是件坏事。

本文将整理集中你可以用来优化你的CSS的技术，以及一些可以自动压缩你的代码的在线和桌面压缩工具。

压缩还是不压缩

在 我们讨论如何压缩CSS之前，需要注意一下在压缩和代码的易读性上常常要有个平衡。很多编码者以其CSS组织清晰为傲，而且并不希望自己的代码被通过压缩 器去掉注释和断行。作为一个设计师，你应该分析你所编写的代码的目标。如果你要创建一个小的只需要几行CSS的网站，可能就没有必要做额外的压缩。同样， 如果你在编写需要和一个开放团队分享的代码，插入额外的注释和断行可以节省你的同事的大量时间并获得他们真心的感谢。然而，如果你在设计一个需要大量 CSS的大型网站，你肯定要注意你的文件大小并进你所能保持其最小。

可能在寻找压缩和可能性之间的完美结合上面需要花一些时间，但是它们都值得挖掘而且实现它们的平衡可以让你的工作变得容易很多。同时，很明显并不是说压缩一定会导致可读性的降低。很多可用于压缩代码的技术都能生成更好更有组织的代码。

考虑到这一点儿，让我们开始了解一些技术已保持CSS文件最小化吧。

空白样式定义

让我们从明显的开始。如果你有一个空白样式，丢掉它。不要借口稍后或许会用到，你也知道它们是杂乱的。除非你有一个合理的理由，否则不要添加它们。

缩写

CSS缩写是一种将多行CSS合并到单行的方法。 养成使用你知道的所有缩写技巧的习惯可以明显的减少你最终写出的代码的行数。这里是个例子：

长写版本:

#container{
    padding-top:5px
    padding-right:10px
    padding-bottom:30px
    padding-left:18px
}

缩写版本:

#container{
    padding:5px 10px 30px 18px;
}

了解更多CSS缩写技巧，可以访问下面的文章：

shorthand.jpg

推荐阅读博客前文常用css缩写一文 Continue reading >>