容我织梦

可能也有很多童鞋遇到过这样的困扰，就是透明背景上的文字的透明问题。如果背景透明，那么在背景上的文字也势必会继承背景的透明属性，这里有位达人有个好办法，请看：
样式部分：

<style type=”text/css”>
 #container{ border:1px solid #c00; background-color:rgba(212,0,0,0.5); *background:#f00; *filter:alpha(opacity=50); width:500px; margin:40px auto; line-height:200%; font-size:14px; padding:14px;}
 #container *{ position:relative;}

</style>

代码部分：

 <div id=”container”>
     <span>我是内容我是内容我是内容我是内容</span>
    </div>
    <p>兼容ie6,ie7以及firefox的css透明滤镜，文字不继承其透明属性。</p>

兼容ie6,ie7以及firefox的css透明滤镜，文字不继承其透明属性。
全文阅读 »

可能有些童鞋在做div+css网页设计的时候突然IE6不能正常解析CSS文件，解决半天也不得其解，其实这个问题我也是遇到过的。
　　如果网页采用了 UTF-8 编码格式，这本来没有问题，问题是外部 CSS 文件默认是 ANSI 编码，并没有保存为 UTF-8 格式。可能你会发现在一般情况下这样也是没有问题的，然而当 CSS 文件中包含有中文注释时就可能不尽如人意了！估计是 IE6 版本以下的浏览器在解析这个 CSS 文件时因为编码问题而无法正确解析，所以才会发生 CSS 在 IE6 下不起作用的情况。看来微软已注意到这个问题，在 IE7 中把它修复了。
　　但是用IE6 的人还是不少。因此这个问题需要解决：
　　方法一：把 CSS、JS 和网页文件都统一保存为 UTF-8 格式。
　　方法二：去掉 CSS、JS 中的中文注释，或者改为英文。
　　上文为IE6因为编码问题无法正确解析CSS文件
　　有时候我们发现我们写的html页面引用外部css文件的时候在IE7和FF中能够很好的被解析，即能正常显示，可在IE6中却完全没有被解析，即css文件里的样式根本没应用到我们的html页面，这是怎么回事？开始我把css文件里头的所有样式都复制粘贴到html页面中的

中，这样做以后，IE6、IE7、FF都能正常显示了，这也就说明外部的css文件应该是存在什么问题了，为什么在IE6中出现这问题，而在IE7和FF中却没有？网上google了下，发现是IE6中对页面的编码有严格的要求，我查看了下，朋友发过来的css文件用的编码是GB2312的，而html文件用的是utf-8的，原来问题就出在这里了，我把css文件内容的编码用ed改成utf-8，再次测试的时候，一切恢复正常了，还有就是我发现朋友的css文件里面用中文注释，严重建议朋友们不要在css文件里面用中文来注释，这样也会引起编码的问题。

　对于前端开发的童鞋来说，自动换行是个问题，正常字符的换行是比较合理的，而连续的数字和英文字符常常将容器撑大，挺让人头疼，现在总结一下CSS如何实现换行的方法，只要在CSS中定义了如下句子，可保网页不会再被撑开了。

　　对于div,p等块级元素
　　正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行

　　对于IE浏览器：
　　连续的英文字符和阿拉伯数字,使用word-wrap: break-word ;或者word-break:break-all;实现强制断行

         html 
　　<div id=”wrap”>52sonen52sonen52sonen52sonen52sonen52sonen</div>
　　css 
　　#wrap{word-break:break-all; width:200px;}
　　或者 

全文阅读 »

div和span、relative和absolute、display和visibility是很容易混淆和弄错的HTML标签与CSS属性，今天52CSS.com简单的罗列出它们的区别与使用要点，供大家参考。

一、div和span的区别
　　div是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。
　　span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样式。

二、relative和absolute的区别
　　relative，CSS中的写法是：position:relative;  他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。
　　absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

三、display和visibility的区别
　　display:none和visibility:hidden都可以隐藏一个元素
　　但visibility:hidden只是隐藏了元素的内容，但其使用的位置空间仍然被保留。
　　而display:none则相当把元素从页面中去除，其占用位置也将被删除。

一、检查HTML元素是否有拼写错误、是否忘记结束标记 
　　即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。 
二、检查CSS是否正确 
　　检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。 
三、确定错误发生的位置 
　　假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 

全文阅读 »

CSSer开发好帮手：CSS 3.0 参考手册 中文版
　　CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

手册难点
　　中文资料少，对英文翻译功底要求较高； 
　　基础语法要求字斟句酌，避免产生歧义； 
　　兼容性列表涉及浏览器及版本众多； 
　　草案中的Grid布局被业界同仁普遍认为比“天书”还难… 
　　CSS3 还是草案，中文资料少之又少，基本上都是一篇内容转来转去，而我们的手册从基础语法到示例制作，都是根据W3C工作草案进行翻译，并结合自身的沉淀制作示例。

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

全文阅读 »

漂亮的打印样式

很少有网页打印效果好的，因为用于使屏幕显示效果好的技术与用于打印机上的技术不同。然而，在打印文件时，可以使用一个设置了CSS媒体类型的样式表。要使打印样式变得美观，我们首先要注意网站结构以及包含文字的各个版块的结构。模块化文件系统能够帮助我们了解这些网站结构，模块化文件系统明确指定了主要结构版块。

多数望着或者博客的主要结构都是相似的（可能命名略有差异）：

#header
#content
#comments
#sidebar (or #menu)
#footer

怎样修改这些版块以实现更好的打印效果，这完全取决于我们的想法。我们可以只打印出侧边栏而不打印页脚，也可以只显示页脚而舍弃侧边栏，还可以更改字体和 字号，甚至可以把图片显示在打印页面上。下面介绍一些简单的示例，掌握基本技巧后大家可以随心所欲地发挥自己的创意。

设计打印样式

有两种方法可以设置打印样式。如果希望打印方便，只对网站、博客做简单修改，可以使用第一种方法，将代码直接添加到样式表单。如果希望掌握博客的最终打印 结果，最好是将各个版块留在各自的print.css样式文件中。

在样式表单中设置打印样式

我们可以在样式表单中设置打印样式，指导浏览器在样式表单中查找打印样式，并且所有打印样式都必须出现在各自的位置上。

新建打印样式表单

新建一个独立的打印样式表单，步骤如下：

1. 新建一个文本文件，命名为print.css

2. 将print.css文件保存到WordPress主题目录下

3. 在文件中输入（或复制）以下代码以启动打印样式，保存文件：

/* Print Style Sheet */
@media print {
body { background:white; color:black; margin:0 }
}

全文阅读 »

        CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。
另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

一切皆为框

　　div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容 ，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
　　您可以使用 display 属性 改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如

其实很多时候都是用到自适应，用的最多的也就是导航，按钮的。根据实际字数需要，扩展或者缩小宽度。

hmtl代码:

<span>
<button>确定充值，去网银付款</button>
</span>

css代码：

span {
 background:url(bg_comb.png) 100% 0;
 height:32px;
 display:inline-block;
 padding:0 5px 0 0;
 text-align:center;
 font-size:14px !important;
 vertical-align:middle;
 width:auto;
}
button {
 display:inline-block;
 border:0;
 background:url(bg_comb.png) 0 0;
 height:32px;
 line-height:30px;
 padding:0 10px 5px 15px;
 color:#fff;
 vertical-align:middle;
 white-space:nowrap;
 overflow:visible;
}

其实我也是个懒人，这里不给出图片和预览了，如果又需要的。可以自己按照样式，亲自测试下。