等待-放飞梦想 » CSS http://leotheme.cn 勤现在-乐将来 Fri, 03 Feb 2012 12:32:54 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 使用lesscss来编码编写css http://leotheme.cn/javascript/use-lesscss-edit-css.html http://leotheme.cn/javascript/use-lesscss-edit-css.html#comments Sat, 24 Sep 2011 05:10:24 +0000 Await http://leotheme.cn/?p=958 styles.css 下面是一些lesscss的语法： 1、使用变量： // LESS @color: #4D926F; #header {   color: @color; } h2 {   color: @color; } /* Compiled CSS */ #header {   color: #4D926F; } h2 {   color: #4D926F; } 2、组合 [...]
您可能也喜欢：

IE6因为编码问题无法正确解析CSS文件
CSS中关于背景图的应用技巧
CSS清除浮动的一些方法
CSS 3.0 参考手册 (中文版)
如何使你的CSS样式更易阅读?
无觅
]]> lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。

lesscss使用方法有两种：

页面添加一个 less.js的文件，css使用 style.less 文件后缀来编写，不过需要有服务器的环境支持

  1. <link rel="stylesheet/less" type="text/css" href="styles.less">
  2. <script src="less.js" type="text/javascript"></script>

在服务器端使用node.js来编译，node.js 使用 less的方法如下：
先使用npm包管理器来安装
$ npm install less
然后就可以使用命令行来编译压缩less代码了
$ lessc styles.less > styles.css

lesscss
下面是一些lesscss的语法：

1、使用变量：

  1. // LESS
  2. @color: #4D926F;
  3. #header {
  4.   color: @color;
  5. }
  6. h2 {
  7.   color: @color;
  8. }
  9. /* Compiled CSS */
  10. #header {
  11.   color: #4D926F;
  12. }
  13. h2 {
  14.   color: #4D926F;
  15. }

2、组合

  1. // LESS
  2.  
  3. .rounded-corners (@radius: 5px) {
  4.   border-radius: @radius;
  5.   -webkit-border-radius: @radius;
  6.   -moz-border-radius: @radius;
  7. }
  8.  
  9. #header {
  10.   .rounded-corners;
  11. }
  12. #footer {
  13.   .rounded-corners(10px);
  14. }
  15. /* Compiled CSS */
  16.  
  17. #header {
  18.   border-radius: 5px;
  19.   -webkit-border-radius: 5px;
  20.   -moz-border-radius: 5px;
  21. }
  22. #footer {
  23.   border-radius: 10px;
  24.   -webkit-border-radius: 10px;
  25.   -moz-border-radius: 10px;
  26. }

3、选择器

  1. // LESS
  2.  
  3. #header {
  4.   h1 {
  5.     font-size: 26px;
  6.     font-weight: bold;
  7.   }
  8.   p { font-size: 12px;
  9.     a { text-decoration: none;
  10.       &:hover { border-width: 1px }
  11.     }
  12.   }
  13. }
  14.  
  15. /* Compiled CSS */
  16.  
  17. #header h1 {
  18.   font-size: 26px;
  19.   font-weight: bold;
  20. }
  21. #header p {
  22.   font-size: 12px;
  23. }
  24. #header p a {
  25.   text-decoration: none;
  26. }
  27. #header p a:hover {
  28.   border-width: 1px;
  29. }

4、变量预算

  1. // LESS
  2.  
  3. @the-border: 1px;
  4. @base-color: #111;
  5. @red:        #842210;
  6.  
  7. #header {
  8.   color: @base-color * 3;
  9.   border-left: @the-border;
  10.   border-right: @the-border * 2;
  11. }
  12. #footer {
  13.   color: @base-color + #003300;
  14.   border-color: desaturate(@red, 10%);
  15. }
  16.  
  17. /* Compiled CSS */
  18.  
  19. #header {
  20.   color: #333;
  21.   border-left: 1px;
  22.   border-right: 2px;
  23. }
  24. #footer {
  25.   color: #114411;
  26.   border-color: #7d2717;
  27. }

5、import 外部css

  1. @import "lib.less";
  2. @import "lib";

通用引用了lesscss，我们就可以将css写得模块化，有更好的阅读性。

首先可以通过 import 讲网站的样式分成 n个模块，当页面需要哪个模块就引用哪个。还可以将css3那些新增的功能定义成类库，由于有函数的功能，那些圆角，阴影之类样式只需要定义一次就可以了。讲页面需要使用到的主要文本，边框，背景色定义成变量给后续样式使用，到时网站风格需要改变，颜色也很好的修改。

我个人觉得先阶段lesscss的不足有：

1. css3的样式不能自动补全其他浏览器的hack。
2.使用nodejs在window系统下的支持不够，不过最近刚刚不久发布了一个nodejs window版，这方面估计在不久的将来会改善
3.编辑器，ide对lesscss语法缩进支持不够友好。

转自–强记《使用lesscss来编码编写css》

您可能也喜欢：

IE6因为编码问题无法正确解析CSS文件
CSS中关于背景图的应用技巧
CSS清除浮动的一些方法
CSS 3.0 参考手册 (中文版)
如何使你的CSS样式更易阅读?
无觅

相关文章

  • 2009-11-11 -- 左右两栏等高实现方法 (6)
    等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...
  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
    作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-07-07 -- 如何使你的CSS样式更易阅读? (15)
    在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...
  • 2009-06-18 -- 关于CSS的书写习惯 (7)
    其实每个人都有自己喜欢的书写格式习惯，我在刚学CSS的时候，什么都不知道，只是要实现什么效果，我后就写个ID或类进去。放哪个位置也不管，丢进去就行了。反正效果实现了；后来当需要修改某些地方的时候，才发...
  • 2009-06-03 -- CSS实现自动换行的小技巧 (4)
    大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！ 对于div 1.（IE浏览器）white-space:normal; word-...
]]> http://leotheme.cn/javascript/use-lesscss-edit-css.html/feed 10 左右两栏等高实现方法 http://leotheme.cn/javascript/css-to-realize-accordant.html http://leotheme.cn/javascript/css-to-realize-accordant.html#comments Wed, 11 Nov 2009 03:21:51 +0000 Await http://leotheme.cn/?p=744 您可能也喜欢：
CSS处理斜角导航条的一个例子
用jquery写一个简单的菜单伸缩效果
给你的侧边栏添加一个登陆入口
未知宽度容器的居中解决方案
一个简单的网页调色板 无觅 ]]> 等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简单，但毕境麻烦。现在有了个更简单的方法。这个方法的原理是事先通过正内边距来使其拥有足够高度，然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏，我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度，从而实现了等高。

提示：你可以先修改部分代码再运行。

这里考滤到一个意外，就是右边的内容比左边多的时候；其实只需对左右两边都进行正内边距和负外边距设置就行了。这样不管是左边还是右边高，两边的高度始终都是一样的。利用这个原理，我们还可以实现三列多列等高布局。

顺便讲下JQ的实现方法。也很简单，原理就是取得左右两边的高度，然后判断这个值，把大的值赋给小的就行了。看代码：

  1. jQuery(document).ready(function() {
  2.     var _leftheight = jQuery(".left").height();
  3.         _rightheight = jQuery(".right").height();
  4.         if(_leftheight > _rightheight ) {
  5.             jQuery(".right").height(_leftheight);
  6.         }
  7.         else {
  8.             jQuery(".left").height(_rightheight);
  9.         }
  10.     })

好了，到这里相信大家已经都会了。其实还有一些方法可以实现等高的，比如说背景，大家没事研究研究吧；

您可能也喜欢：

WordPress主题之Maxthon 2.0.2[08-08-11]
用jQuery实现个性有序列表
关于Tab(选项卡)的一些实现方式
功能强大的FLASH Galleryd——dfGallery 2.0
Windows Internet Explorer 8 简体中文正式版
无觅

相关文章

  • 2011-09-24 -- 使用lesscss来编码编写css (10)
    lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种： 页面添加一个 less.js的文...
  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
    作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-07-07 -- 如何使你的CSS样式更易阅读? (15)
    在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...
  • 2009-06-18 -- 关于CSS的书写习惯 (7)
    其实每个人都有自己喜欢的书写格式习惯，我在刚学CSS的时候，什么都不知道，只是要实现什么效果，我后就写个ID或类进去。放哪个位置也不管，丢进去就行了。反正效果实现了；后来当需要修改某些地方的时候，才发...
  • 2009-06-03 -- CSS实现自动换行的小技巧 (4)
    大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！ 对于div 1.（IE浏览器）white-space:normal; word-...
]]> http://leotheme.cn/javascript/css-to-realize-accordant.html/feed 6 CSS 3.0 参考手册 (中文版) http://leotheme.cn/javascript/css-3-0-chm.html http://leotheme.cn/javascript/css-3-0-chm.html#comments Sun, 30 Aug 2009 06:55:34 +0000 Await http://leotheme.cn/?p=735 您可能也喜欢：
使用lesscss来编码编写css
CSS中关于背景图的应用技巧
如何使你的CSS样式更易阅读?
关于CSS的书写习惯
CSS实现自动换行的小技巧 无觅 ]]> 作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助你更好的学习和理解CSS3。
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。


手册难点

1. 中文资料少，对英文翻译功底要求较高；
2. 基础语法要求字斟句酌，避免产生歧义；
3. 兼容性列表涉及浏览器及版本众多；
4. 草案中的Grid布局被业界同仁普遍认为比“天书”还难…

CSS3 还是草案，中文资料少之又少，基本上都是一篇内容转来转去，而我们的手册从基础语法到示例制作，都是根据W3C工作草案进行翻译，并结合自身的沉淀制作示例。

备受期待的 CSS 3 新功能

圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa – 加入透明色、文字阴影等等
CSS3 的出现，让代码更简洁、页面结构更合理，性能和效果得到兼顾。

CSS 3.0 参考手册 (中文版) 预览：

css3_scrn

下载：

CSS 3.0 参考手册 (中文版) 下载 (366k)

您可能也喜欢：

使用lesscss来编码编写css
CSS中关于背景图的应用技巧
如何使你的CSS样式更易阅读?
关于CSS的书写习惯
CSS实现自动换行的小技巧
无觅

相关文章

  • 2008-08-24 -- 给你的BLOG添加漂亮的登陆效果 (8)
    不知道大家的对WP的登陆是怎么看的，反正我是很不喜欢点个链接到另一个页面去登陆的这种做法。嘿嘿今天给大家带来点小东西，放弃WP默认的登陆方式，打了更加人性化更加酷的登陆方式。同时，由这篇文章开始，引入...
  • 2008-08-20 -- Maxthon v1.0[最新修改] (8)
    Maxthon v1.0[最新修改] 1.对所有代码进一步优化，去掉了作品展示部分。 [详细]：对CSS代码进一步优化。和重组，打开后能发现现的在CSS变得很干净。方便大家修改...
  • 2008-08-15 -- 去掉链接时虚线框的几个方法 (5)
    我想很多朋友都遇到这个问题，当点击一个链接的时候，总会出现一个虚线框。 在这介绍几种去除的方法： 1.直接给链接加是onfocus="this.blur()". 链接 2.CSS实现 ...
  • 2008-08-14 -- JavaScript实现WordPress自由颜色主题切换 (2)
    关于自由切换颜色的主题目前有些主题自带这个功能了见下图： 现在来谈谈怎么实现这样一个功能。其实很简单的。不管是换颜色和主题，原理都是一样的，即通个调用不同的CSS来替换掉当前的CSS而实...
  • 2011-09-24 -- 使用lesscss来编码编写css (10)
    lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种： 页面添加一个 less.js的文...
]]> http://leotheme.cn/javascript/css-3-0-chm.html/feed 9 如何使你的CSS样式更易阅读? http://leotheme.cn/javascript/nuheshienide-css-gengyiyuedui.html http://leotheme.cn/javascript/nuheshienide-css-gengyiyuedui.html#comments Tue, 07 Jul 2009 07:47:19 +0000 Await http://leotheme.cn/?p=714 您可能也喜欢：
使用lesscss来编码编写css
CSS 3.0 参考手册 (中文版)
CSS清除浮动的一些方法
CSS实现自动换行的小技巧
关于CSS的书写习惯 无觅 ]]> 在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更能够按自己的想法去表现。这样就必须通过修改CSS来完成；那么——样式的易阅性在这个时候很重要。对于一个不是很精通CSS的人来说，怎样使他能够简单、方便的修改CSS成了很重要的一环。
如果CSS的类别名称和排版都很乱。那修改起来是一件非常痛苦的事情。看下面这段CSS样式：

.blf1 li {margin:15px 0 10px;padding:10px;border:1px solid #A6C9E1;}

你能很清楚的知道这个样式是针对哪个写的吗？我想除了写的人，不会有人知道了；就算是写得人，一个月后他自己也许也不知道了！再看下面这个：

  1. .commentlist li {
  2.                    margin: 15px 0 10px;
  3.                    padding: 10px;
  4.                    border: 1px solid #A6C9E1;
  5.                    list-style: none;
  6. }

这个我想了解WP主题的人都知道这个样式是针对评论列表的LI写的吧。

从上面的例子可以看出，要使CSS更易阅读，合理的元素描述和清晰的格式很重要。我在前面已经写过一篇“关于CSS的书写习惯”，简单地介绍了关于自己的CSS书写格式。接下来讲下如何选择合适的、有意义的元素描述内容，从而使得它更易阅读。
不知道大家对于blog的标题和描述是怎么命名的？我个人觉得下面这样的描述是最合理的。

.blog-title { color: #060; }
.blog-description { color: #369; }

我相信大家应该能理解，这个名称是应用于博客的标题和描述。无论您的设计改变了多少次都不会改变。我在这里只是作抛砖引玉。相信大家能够举一反三，写出易读、美观的CSS样式。

您可能也喜欢：

使用lesscss来编码编写css
CSS 3.0 参考手册 (中文版)
CSS清除浮动的一些方法
CSS实现自动换行的小技巧
关于CSS的书写习惯
无觅

相关文章

  • 2011-09-24 -- 使用lesscss来编码编写css (10)
    lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种： 页面添加一个 less.js的文...
  • 2011-09-01 -- WordPress主题：perfct 1.0 (88)
    已经很久很久没写日志了。更不知道有多久没有发布新主题了！好像已经失去了那种曾经的兴趣和动力，很多时候想写，却又找不到话题。有些技术上的文章想分享。但又懒得编缉。要分析，上代码，做实例。最终只是想想而已...
  • 2009-11-11 -- 左右两栏等高实现方法 (6)
    等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...
  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
    作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-06-18 -- 关于CSS的书写习惯 (7)
    其实每个人都有自己喜欢的书写格式习惯，我在刚学CSS的时候，什么都不知道，只是要实现什么效果，我后就写个ID或类进去。放哪个位置也不管，丢进去就行了。反正效果实现了；后来当需要修改某些地方的时候，才发...
]]> http://leotheme.cn/javascript/nuheshienide-css-gengyiyuedui.html/feed 15 关于CSS的书写习惯 http://leotheme.cn/javascript/about-css-style.html http://leotheme.cn/javascript/about-css-style.html#comments Thu, 18 Jun 2009 06:29:32 +0000 Await http://leotheme.cn/?p=656 您可能也喜欢：
使用lesscss来编码编写css
CSS中关于背景图的应用技巧
CSS 3.0 参考手册 (中文版)
如何使你的CSS样式更易阅读?
IE6因为编码问题无法正确解析CSS文件 无觅 ]]> 其实每个人都有自己喜欢的书写格式习惯，我在刚学CSS的时候，什么都不知道，只是要实现什么效果，我后就写个ID或类进去。放哪个位置也不管，丢进去就行了。反正效果实现了；后来当需要修改某些地方的时候，才发现这个问题的严重性。代码混乱，ID，CLASS乱用。不易阅读…使得修改起来很费劲。
后来开始做wordpress主题的时候，慢慢改变了这种坏习惯。在Maxthon主题的样式中，适当的划分了一下各个部分。

如header，content，sidebar，footer，othes…然后把样式的属性写在一行里。并且用层叠来定义CSS的作用域。就像下面这样：

#content { float: left;  width: 524px;}
 
#content .post { text-align: left; margin-bottom: 8px;}
#content .post .post_title { margin: 10px; }
#content .post .post_title p { margin-top: 8px; }
#content .post .post_title .abbr { cursor: help;  }
#content .post .post_info { line-height: 20px; border-top: 3px solid #DDDDDD; }

这种写法看起来清晰，容易阅读。但同时也增加了很多无用的代码，从而使整个文件的大小增加了。
而我最新发布的Dreamy主题的样式又换了种书写格式；这也是我目前认为最好的书写格式。

/*Comment
------------------------------------------------*/
.commentlist li {
            margin: 15px 0 10px;
            padding: 10px;
            list-style: none;
            border: 1px solid #A6C9E1;
            }
 
.commentlist li .avatar {
            padding: 4px 9px 4px 4px;
            float: left;
            margin-right: 10px;
            background: url(images/bgAvatar.png) no-repeat;
            }
.commentlist li.odd {
            background: #EFF6F9;
            }
.commentlist li .byuser {
            background: #CBEAF4;
            border: 1px solid #A6C9E1;
            }

总结下几点经验

1. 样式的命名：
这个其实有些参考资料的。在这里说下我的书写习惯，以前是喜欢用class-name来命名。后来又改成class_name，再到现在改用className这样的方式；其实用className这种方式有个问题，就是大小写很敏感，一定要注意。比如你定义了一个 .postInfo {} ，而你在结构里用 class=”postinfo” 来调用这个类的时候可能不会起作用。建议大家用class_name的格式，我只是个人喜欢后面的这种格式而已。

2. ID和CLASS的使用：
我现在基本很少用ID来命名了，除了头部的#header,#Container,#sidebar,#footer基本上没特殊情况不用ID，因为ID的优先级很高。有时候会出现一些很麻烦的问题，而且ID要留给JS用，以符合行为与表现分离的原则。

3. 空格的使用
有些人在写样式时不喜欢空格，其实适当的空格能增强代码的阅读性。
.className{width:500px;height:300px;}
.className { width: 500px; height: 300px; }
你觉得上面那行的阅读性更好？

4. 适当的层叠或缩进定义CSS的“作用域”
如果你想让首页的title和单篇日志的title不同，比如首页文章的标题是向居左的。单篇日志的标题是居中的。你可以这样写
.post .title { text-align: left; }
.singlePost .title { text-align: center; }
而有时候用层叠会增加代码优先级，所以也可以用缩进来“象征性的”体现作用域。像这样：
.post { text-align: left; }
.singleTitle { text-align: center; }

5. CSS HACK
在一开始的时候，会经常用到Hack来解决一些兼容问题。慢慢就成了种习惯，而这种习惯事实上是不好的。我们应该尽量地少用不用Hack，当然这就要求你对CSS必须相当的熟练。这种东西还是要靠大家在实践中去掌握。在我最新发布的Dreamy 2.0中就没用用到一处Hack。因为很多时候，只要肯思考，换种角度去解决问题。就不必全依赖Hack了。当然，这不代表就不能用Hack了。Hack有时候还是个很好的东西的，这里就不说有哪些Hack技巧了，大家可以自己去搜索下相关资料。建议大家写Hack的时候，把Hack单独写出来。
一个简单的例子，在处理IE6浮动双边距问题时一般会这样写“
.post {
float: left;
margin-left: 10px;
display: inline;
}
建议在家写成这样：
.post {
float: left;
margin-left: 10px;
}
.post { _display: inline; }/*Hack for IE6*/

对于CSS的书写格式，大家有什么好的建议，欢迎在下面评论。很乐意和大家一起探讨。

相关文章

  • 2011-09-24 -- 使用lesscss来编码编写css (10)
    lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种： 页面添加一个 less.js的文...
  • 2009-11-11 -- 左右两栏等高实现方法 (6)
    等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...
  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
    作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-07-07 -- 如何使你的CSS样式更易阅读? (15)
    在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...
  • 2009-06-03 -- CSS实现自动换行的小技巧 (4)
    大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！ 对于div 1.（IE浏览器）white-space:normal; word-...
]]> http://leotheme.cn/javascript/about-css-style.html/feed 7 CSS实现自动换行的小技巧 http://leotheme.cn/javascript/css-auto-for-br.html http://leotheme.cn/javascript/css-auto-for-br.html#comments Wed, 03 Jun 2009 06:12:07 +0000 Await http://leotheme.cn/?p=524 大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！

对于div

1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。

#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
<div id="wrap">ddd111111111111111111111111111111</div>

效果：可以实现换行

2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！

#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }
<div id="wrap">ddd1111111111111111111111111111111111111111</div>

效果：容器正常，内容隐藏

对于table

1. (IE浏览器)使用样式table-layout:fixed；

<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>

效果：可以换行

2.(IE浏览器)使用样式

<style>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>

效果：可以换行

3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

<style>
.tb{table-layout:fixed}
</style>
<table class="tb" width=80>
<tr>
<td width=25% nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>

效果：两个td均正常换行

4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>
<table class=tb width=80>
<tr><td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</table>

这里单元格宽度一定要用百分比定义 效果：正常显示，但不能换行。

相关文章

  • 2010-08-10 -- firefox与ie 的javascript区别 (19)
    浏览器的兼容问题目前还是一个头痛的问题。除了CSS的兼容性，Javascript的兼容有时候更容易让人头痛。下面收集的一些关于Firefox和IE的区别作个记号，需要的时候看看 1. Docum...
  • 2011-09-24 -- 使用lesscss来编码编写css (10)
    lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种： 页面添加一个 less.js的文...
  • 2009-11-11 -- 左右两栏等高实现方法 (6)
    等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...
  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
    作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-07-07 -- 如何使你的CSS样式更易阅读? (15)
    在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...
]]> http://leotheme.cn/javascript/css-auto-for-br.html/feed 4 CSS清除浮动的一些方法 http://leotheme.cn/javascript/css-clear-float-fangfa.html http://leotheme.cn/javascript/css-clear-float-fangfa.html#comments Tue, 25 Nov 2008 03:48:49 +0000 Await http://leotheme.cn/?p=217 CSS的浮动为我们的布局带来了很大的好处，利用浮动我们可以很方便的写出各种版式。但浮动同时也带来很多问题；这些问题基本上都因为没有及时的或者在适当的位置清楚浮动。下面来说下常用的清除浮动方法：

一：用空标签

这是最常见的一种方法了。通过一个内容为空的标签来清除浮动。这个标签可以是DIV、P、Hr…。理论上可以是任何标签。

这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动，并为其定义CSS代码：clear:both。这种方法的弊端在于增加了无意义的结构元素。

提示：你可以先修改部分代码再运行。

二：使用overflow属性

这种方法有效地解决了通过添加空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：”overflow:auto”，即可！为了兼容IE6同时要加上”zoom:1″。

提示：你可以先修改部分代码再运行。

三：使用after伪对象清楚浮动。

该方法只适用于非IE浏览器。具体写法可参照以下示例。
使用中需注意以下几点:

  1. 该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
  2. content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的

提示：你可以先修改部分代码再运行。

PS：第三种方法请在FF下测试。大家都用哪种方法呢?

相关文章

  • 2011-09-24 -- 使用lesscss来编码编写css (10)
    lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种： 页面添加一个 less.js的文...
  • 2011-02-17 -- 未知宽度容器的居中解决方案 (13)
    如上图所示的分页，其结构如下： 1/18 上一页 1 2 3 ... 18 下一页 在这个结构中，“.pagena...
  • 2009-11-11 -- 左右两栏等高实现方法 (6)
    等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...
  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
    作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-07-07 -- 如何使你的CSS样式更易阅读? (15)
    在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...
]]> http://leotheme.cn/javascript/css-clear-float-fangfa.html/feed 6 增强用户体验之文章内的链接 http://leotheme.cn/javascript/zq-ued-of-links.html http://leotheme.cn/javascript/zq-ued-of-links.html#comments Thu, 20 Nov 2008 04:54:27 +0000 Await http://leotheme.cn/?p=192 我们在写文章的时候，难免会少不了添加一些链接。这些链接有的是指向自己的BLOG内的，有的是指向好友的BLOG，或一篇文章。指向自己BLOG的称为内部链接，指向外部的称为外部链接，我们习惯是外部链接在新窗口中打开，而内部链接在本身的页面打开。但WordPress默认所有的链接都是在自身页打开的。那要怎么才能把外部的链接强行在新窗口中打开呢？今天给大家说下怎样实现给文章的外部链接添加一个标识，并且在符合W3C标准的前提下在新窗口中打开。

而内部链接在本身页面打开。

我们知道，链接A的属性里有一个target=”_blank”。我们可以通过给链接添加这个属性来让链接在新窗口中打开。但这样为每个链接添加一个这样的属性并不是件轻松的事。而且还有个弊端：给A标签里面加target=”_blank”针对W3C标准是不合法的。那该如何解决呢？别急！跟着我来一步一步解决问题。

第一步：我们先要让文章里的链接全部在新窗口中打开：

jQuery(.entry a).click(function(){window.open(this.href);return false;});

第二步：给文章里的链接添加一个标识符
这个我们可以直接在CSS里定义

entry a {background:(images/out-links.gif) right top no-repeat; padding-right: 12px;}

现在文章里所有的链接都在新窗口中打开了，并且还带了一个标识的图标。但这并不是我们想要的，因为我们只想把标识符给外部链接并且内部链接是在自身窗口中打开的。继续下一步；

第三步：去掉内部链接的标识符

做这一步前我们首先要做的是区分文章里的链接是内部链接还是外部链接。这个可以用jQuery的选择器来区分，以我的BLOG为例：内部链接的href里肯定会包含我的域名（http://leotheme.cn）里的leotheme这个字符串。知道了这个我们就可以写代码了：

jQuery("a[href*='leotheme']").css({background: "none", padding: "0"});

好了，现在内部链接没有标识符了，但还是会在新窗口中打开，继续。。。

第四步：让外部链接在新窗口中打开，内部链接在自身窗口打开

这一步的实现有一点点的复杂，当然如果你对jQuery非常熟悉的话还是非常简单的。前面我们在第一步已经实了文章所有链接在新窗口中打开了。但我们其实需要的只是外部链接在新窗口中打开而已，但外部链接的形式多样。变数太多，用JQ无法区别开来，但我们可以很容易区别内部链接，于是我们换下思路，“外部链接=除内部链接以外所有的链接”。在第一步的基础上我们只要排除了内部的链接就行了。但怎样排除呢。我们知道：HTML4.0增加了一个新属性：rel，这个属性用来说明链接和包含此链接页面的关系，以及链接打开的目标。我们可以给内部链接添天一个rel属性用来区分外部链接，然后用JQ的选择器排除内部链接。看下面的代码，我们在第三步的基础上修改下：

jQuery("a[href*='leotheme']").css({background: "none", padding: "0"}).attr("rel","inlinks");

现在所有的内部链接都有rel=”inlinks”这个属性了。接着我们用JQ来排除内部链接在新窗口中打开，排除的方法是，如果链接的rel不具有inlinks这个属性的话，那么它就是一个外部链接，然后我们给这个外部链接添加一个click事件，点击后在新窗口中打开。

jQuery(".entry a[rel!='inlinks']").click(function(){window.open(this.href);return false;});

NOW…现在文章的内部链接会在自身窗口中打开，而外部链接会在新窗口中打开并且还有个标识符了。效果见我的BLOG；写完了？好像是？效果也实现了？其实还没完，效果是实现了，但还有一些特殊的情况没有考滤进来。比如文章中的图片链接，锚链接…OK，继续排除这两个链接。

第五步：排除图片和锚链接

jQuery(".entry a:has(img)").css({background: "none", padding: "0"}).attr("rel","inlinks");
jQuery(".entry a[href*='#']").css({background: "none", padding: "0"}).attr("rel","inlinks");

这下是真的完了。看起来好像写了很多代码，很复杂。其实很简单。我们把它优化下，写在一起。最后的完整代码是这样的：

jQuery(".entry a[href*='http://leotheme'],.entry a:has(img),.entry a[href*=#]").css({background: "none", padding: "0"}).attr("rel","inlinks");
jQuery(".entry a[rel!='inlinks']").click(function(){window.open(this.href);return false;});

两行代码。对，就是这么简单。jQuery的选择器很强大…

相关文章

  • 2009-08-28 -- jQuery实现背景图渐变切换 (10)
    链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个...
  • 2008-08-15 -- 去掉链接时虚线框的几个方法 (5)
    我想很多朋友都遇到这个问题，当点击一个链接的时候，总会出现一个虚线框。 在这介绍几种去除的方法： 1.直接给链接加是onfocus="this.blur()". 链接 2.CSS实现 ...
  • 2011-09-24 -- 使用lesscss来编码编写css (10)
    lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种： 页面添加一个 less.js的文...
  • 2011-09-08 -- jQuery中queue和dequeue的用法 (1)
    今天在做右下角那个静止的工具栏时遇到了一个问题。鼠标放上去的时候，要让周围的4个按钮按顺序显示出来，移开的时候要按顺序隐藏。左思右想发现用animate的回调函数方式来写比较麻烦。于是百度了下，发现j...
  • 2011-08-17 -- Flight主题更新 (16)
    这几天收到有些童鞋反应主题在wp3.2版本后台不能快速编缉文章，不能上传图片。抽空看了下，是JQ库版本冲突引起，现已更新。请移步到wopus主题站下载更新后的版本。也可以通过115网盘下载。...
]]> http://leotheme.cn/javascript/zq-ued-of-links.html/feed 29 按比例缩小图片方法总结 http://leotheme.cn/javascript/reimgsize-zongjie.html http://leotheme.cn/javascript/reimgsize-zongjie.html#comments Wed, 19 Nov 2008 03:49:26 +0000 Await http://leotheme.cn/?p=178 其实早些时候就想写一下这个东东，因为想换下主题用用，但发现日志里的图片却因为太大而把POST撑开了，变得很难看。我想遇到这个问题的人一定不少吧。之前一直太忙，没时间去整它，今天抽点时间写一下怎样解决图片撑开的问题，方法很多的、接下来一一给大家道来…

方法一：Max-width|Max-height
这是最简单的方法了，给图片一个最大的宽度和高度:

#Imgbox img {
                   max-width: 500px;
                   max-height: 300px;
                   border:0;
                 }

但它的效果并不怎么好，因为目前的IE6并不认识这个max-width和max-height。而且有时候图片的宽高相差很大。这样做后图片会变形。

方法二：Max-width/height+Expression
先来了解下什么是CSS expression：

IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript脚本关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

了解了之后就简单了，其实就是把JS写到了CSS中，方便应用。我们来看下CSS怎么写:

#Imgbox img {
                   max-width: 500px;
                   width:expression(document.body.clientWidth > 500?"500px":"auto" );
                   display:block;
                   border:0;
                 }

这样做虽然实现了等比例缩放，但它还是有它的缺点：会影响浏览器的速度，因为Expression是很占资源的一个东东，所以，一般不是没办法了不建议用CSS的Expression。难道没有好的解决方法了？不，当然有，接着往下看。

方法三：JavaScript实现
应该是这是现在最好的解决方法了，我们看下代码：

function ReImgSize(){
var await = document.getElementById("Imgbox"); //定义要改变的图片的容器ID
var imgall = await.getElementsByTagName("img");//取得容器内所有的IMG标签
  for (i=0;i<imgall.length;i++)
   {
    if (imgall[i].width>500) //如果图片的宽度大于500
     {
    var oWidth=imgall[i].width; //取得图片的实际宽度
    var oHeight=imgall[i].height; //取得图片的实际高度
    imgall[i].width="500"; 重设图片的宽度为500
    imgall[i].height=oHeight*500/oWidth; //重设图片的高度
       }
    }
}

用法：把上面代码放到Head区，然后在Body标签中加入onload=”ReImgSize”;

最后给大家介绍一个jQuery的插件，用来改变图片的大小，而且还能实现图片的预加载。这个插件很小不到2KB。

它有4个参数：
scaling 是否等比例自动缩放
width 图片最大高
height 图片最大宽
loadpic 加载中的图片路径

实际应用中我们先把JS加载进来然后用一句代码就能实现了

$("img").LoadImage(true,500,200,"loading.gif");

效果不错的。喜欢试下的可以在下面的链接下载DEMO。

相关文章

  • 2008-09-09 -- 为什么尽量不要使用CSS Expression (0)
    CSS Expression也称为CSS表达式，它是动态设置CSS属性的强大方法，但也存在着一定的危险性。 在CSS Expression中使用JavaScript表达式。CSS属性根据Java...
  • 2011-09-24 -- 使用lesscss来编码编写css (10)
    lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种： 页面添加一个 less.js的文...
  • 2009-11-11 -- 左右两栏等高实现方法 (6)
    等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...
  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
    作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-07-07 -- 如何使你的CSS样式更易阅读? (15)
    在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...
]]> http://leotheme.cn/javascript/reimgsize-zongjie.html/feed 5 CSS中关于背景图的应用技巧 http://leotheme.cn/javascript/about-css-background.html http://leotheme.cn/javascript/about-css-background.html#comments Sat, 08 Nov 2008 22:38:29 +0000 Await http://leotheme.cn/?p=146 在CSS中对背景图的作法.一般都是这样:

  1. background: url(images/*.gif) no-repeat;

但有时候有很多图片的时候,像我的Maxthon主题,就用了很多的背景图和图标.这时候如果还这样做的话就会带来一个问题,图片在加载中会有个过程.虽然很快.但有的图片在一开始并没有加载进来,而是在响应鼠标事件时才开始加载.像我的导航栏。默认是一个背景，鼠标放上去是一个背景，当前页又是另一个背景。

这时如果还像普通的处理的话,当鼠标放上去后,并不能马上看到图片.所以在Maxthon 2.0中我已经不用以前的方法来做了.而是选择把所有的背景图片放到一张图上.就像下面这样.

icon

放到一起后，当鼠标放上去后而不用向服务器请求,因为图片已经在第一次就已加载完成，不会产生延迟的效果.这样做还有个好处，就是可以减少向服务器请求的次数，从而使加载更快。

现在来说说放到一张图上后，CSS中该怎么定义?

以我的导航栏为例:
假如我们在做图的时候,图片的上面是默认时的背片,中间是鼠标放去时的.下面是当前页码的.图片的高度是30PX;那么这张图的总高度是90PX;
然后我们在CSS中这样写:

[sourcecode lang="css"]#nav li a {background: url(images/bg_nav.gif) 0 0 repeat-x;}默认时的
#nav li a:hover {background: url(images/bg_nav.gif) 0 -30px repeat-x;}鼠标放上去时的
#nav li a .current {background: url(images/bg_nav.gif) 0 -60px repeat-x;}当前页效果的[/sourcecode]

我们在CSS中定义的背景图都是同一张,我们通过改变他的Y座标起始位置来定位.因为我们的高度已经是固定了的30PX,和图片的高度是一样的.然后让它沿X坐标平铺.这样就达到我们要的效果了.

相关文章

  • 2011-09-24 -- 使用lesscss来编码编写css (10)
    lesscss 是动态的样式表语言，他让css增加变量，组合，函数，运算等语法。这个项目的网站在国内访问不到，大家都懂的。 lesscss使用方法有两种： 页面添加一个 less.js的文...
  • 2009-11-11 -- 左右两栏等高实现方法 (6)
    等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...
  • 2009-08-30 -- CSS 3.0 参考手册 (中文版) (9)
    作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
  • 2009-08-28 -- jQuery实现背景图渐变切换 (10)
    链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个...
  • 2009-07-07 -- 如何使你的CSS样式更易阅读? (15)
    在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...
]]> http://leotheme.cn/javascript/about-css-background.html/feed 6