css解决英文换行问题

CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果。

建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

以下引用word-break的说明, 注意word-break 是IE5+专有属性

语法:

word-break : normal | break-all | keep-all

参数:

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
示例:

div {word-break : break-all; }

CSS框架整合应用之png透明

解决IE6PNG问题
本例采用iepngfix实现。虽然网上流传多种方法,但实测这种方法还是稍好一些的。使用中所需要注意的是路径的问题,iepngfix.htc及里面blank.gif的路径是针对显示页面的。而不是css样式表里面的。本例中是在global.css里面调用的。

1、注意路径的问题。

2、如果是p段落,或是img标签增加背景,需要在引用的时候增加。例:img,div,p,input { behavior: url(js/iepngfix/iepngfix.htc)}

3、问题主要针对ie6,ie7和firefox等无此问题。

iepngfix介绍:
IEPNGFix提供了很有实用价值的解决方案,现在IEPNGFix 2还新增支持设置背景位置和图片重复。现在你可以使用完整的半透明效果,你的网页不会再出现丑陋的灰色边界。使用很简单,只需要在你的CSS文件中增加一行,不改变任何其他HTML代码。img标签和背景图片现在都支持了。

获取最新版本,到http://www.twinhelix.com

例子测试(普通png图片、png背景图片、按钮测试)查看实例

做个小结吧
这个方法不错,但是调用时候,可能占用资源较多,建议页面还是少用png图片。另本文所有资料为收集,自己仅整理一下,方便使用。

CSS框架整合应用之布局

CSS框架已包含了,复位html元素浏览器样式。并定义一些常用的浮动,例:.left{float:left;} .right{float:right} 等,你可以根据需要修改css框架的一些内容。

本例:展示了一个常见的,上中下结构,中间又分为左右。布局是基础,也是主要的。常用布局方式如下,大家可根据需要来选择。

查看例子

单行单列

  •  单行单列1:采用float浮在左上角,固定宽度。
  •  单行单列2:固定在左上角,固定宽度,采用的是绝对(absolute)定位。
  •  单行单列3:固定在左上角,不固定宽度,采用百分比(%)定义宽度来自适应页面。
  •  单行单列4(推荐):固定宽度,采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中。

单行两列

  •  单行两列1:两列都固定宽度。第一列浮在左上角,第二列浮在第一列右边。
  •  单行两列2:两列都百分比宽度,但不满屏。第一列固定在左上角,第二列浮在第一列右边。
  •  单行两列3:两列都百分比宽度,满屏。两列都采用绝对定位。
  •  单行两列4:两列都百分比宽度,满屏。第一列浮在左上角,第二列浮在右上角。
  •  单行两列5:两列都百分比宽度,满屏。第一列浮在左上角,第二列浮在第一列右边。

单行三列

  •  单行三列1:左右列都绝对定位(右列定位在右上)。左列和右列固定宽度,中间列自适应页面。
  •  单行三列2:左列定位在左上,右列定位在右上,中间列浮在左列右面。左列和右列固定宽度,中间列自适应页面。
  •  单行三列3:三列都绝对定位。左列和右列固定宽度,中间列根据内容自适应。
  •  单行三列4(推荐):类似样式2,只是将margin: 20px属性增加在body样式中,解决了中间列在Netscape6.0中置顶的问题。
  •  单行三列5:左右列绝对定位,中间列自适应。宽度满屏。

顶行三列

  •  顶行三列1(推荐):顶行自适应页面宽度。左右列绝对定位,中间列自适应页面。
  •  顶行三列2:宽度满屏

什么是css框架

实际上还是让我们从框架说起吧。
框架就是一个你可以用于你的网站项目的基本的概念上的结构体。可以帮助设计师快速高效率的书写css文档。你可以将他理解成一套模板。

css框架通常只是一些css文件的集合,这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如:

  • typography.css 基本排版规则
  • grid.css 基于网格的布局
  • layout.css 通常的布局
  • form.css for 表单样式
  • general.css 更多通用规则

框架也许并不一定适合我们的站点开发,但是通过它我们可以找到一种好的架构方式。如果你经常会和css打交道,不论你是在做企业站还是门户站,好好的整理一下你以前的文档,根据你的需求制定自己的CSS框架,会很大程度上的提高你的开发效率。

CSS框架的利与弊

前端时间写了一篇《利用CSS框架进行高效率的站点开发》,有不少朋友问我相关的问题。很早5key就在公司进行CSS框架的架构,也对不少朋友提出CSS框架的建议。效果是很明显的。当然,CSS框架有利也有弊,最近也看了一些相关的文章。一些感想,与大家分享。

CSS框架之利

1、开发效率的提高。
如果你是一个企业建站的前端开发,相信在大部分时间里进行着同类站点的代码工作。定义好的框架可以大大提高你的工作效率,避免一些常见的错误。如果你的工作是按件计费的,你的报酬一定会比别人多。

2、规范代码命名。
在多个站点中你可能会用到一些同样的CLASS或ID。如果你有一套完善的css框架,很快你就能对你的每一个站点的代码进行通读。不用浪费时间在代码的阅读上。

3、更好的团队合作
有些公司会将一些稍大的站点的前端代码分成若干子项目。有过此类经验的朋友应该对这种开发方式深感郁闷,要注意公用css,还有注意相互之间的代码配合。久而久之,废弃代码越来越多,互相之间也难以阅读。如果建立好合适的CSS框架,大家可以减少很多不必要的错误,提升产品质量和工作效率。

4、解决浏览器的兼容性问题
现在大部分项目都要求兼容IE6,7和FF。每个站点可能都会花上一部分时间去处理兼容问题。在框架层面上就将这个问题处理好。就可以为后面的兼容问题节省下大部分时间。

5、一套完整的、结构清晰的结构代码。
CSS框架为你的项目提供一个干净、严谨的基础架构。通过它你可以快速的为你的站点搭建基础的html代码框架。万事开头难,前面的基础工作做好了。后面的开发速度会提高很多。

CSS框架之弊

1、你需要完全的理解整套框架
每一个加入项目的人,都需要花一定的时间去完全的理解整套框架及编码规范;

2、你会延续一些框架中的错误bug
没人可以保证自己制定的框架是完美而没有bug的。你可能会需要时间去清理框架中的bug;

3、限制开发思路
框架给出大家基本的架构及开发的思路,这可能会限制你对产品开发的新思路;

4、臃肿的源代码
框架中可能有很大一部分代码不会经常用到,而且还会降低执行效率;

5、框架的语义化
我们已经注意到了HTML代码的语义化。但基于框架的每个站点都是独立唯一的,我们很难去保证CSS框架的语义化。

本文链接:http://www.blueidea.com/tech/web/2007/5173.asp 作者:dowhatyouwant

推荐20个关于CSS3优秀学习资源

译者按:CSS2的出现让web顿时丰富起来,特别是web2.0时代CSS成为每个web页面都必不可少的元素。但是随着web技术的发展,CSS2已经不能满足web开发的需求,例如属性选择、AJAX出现后与JS的交互等,因此对下一代的CSS需求越来越明显。目前CSS3还处于草稿阶段,但是其某些特征已经让人兴奋不已。目前主流浏览器Firefox、IE7/8、Webkit等都已经部分地支持CSS3。因此提前了解CSS3是十分必要的。下面提供的20个学习资源中,多数是单篇的文章和访谈记录等,可见这方面的资源还是比较少的,作为一个真正的CSS开发者,走在别人的前面提前了解、运用、研究CSS3也是十分必要的。
尽管W3C还没有最终设定CSS3规范,但是像Mozilla Firefox、Opera以及基于Webkit等的现代浏览器已经开始部分或者全部地支持CSS3了。

作为一个web开发者,充分了解当前和未来的web标准是十分必要的。为帮助大家能够走在趋势的前列,我们特意向推荐下面这20个关于CSS3的优秀学习资源。

1 、CSS3 Progress Report(CSS3项目报告)

  http://www.w3.org/Style/CSS/current-work

CSS3 Progress Report(CSS3项目报告)是CSS工作小组用以对外介绍CSS3模块当前进展状态的官方网站。对于志愿贡献者来说,这里可能是你学习和为CSS3提供改进的最好的地方。

2、 Get Started with CSS3(CSS3入门)

  http://www.webmonkey.com/tutorial/Get_Started_with_CSS_3

Web Monkey为CSS3入门提供了一个大体框架。本站概述了已经在现代浏览器中得到支持的CSS3属性。对于刚刚开始探索CSS3的人来说这是一篇了不起的著作。

3 、Progressive Enhancement with CSS3(CSS3的渐进增强)

  http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/

Opera,在支持CSS3规范中一直走在前列的一款浏览器,对CSS3在“渐进增强”中的应用有着十分出色的表现。在采用了CSS3的“渐进增加”计划中讨论了你如何在已经使用支持CSS3的现代浏览器和还没有支持CSS3的传统浏览器应用CSS3。

4 、Accessibility Features of CSS

  http://www.w3.org/TR/CSS-access

随着移动手持设备和诸如屏幕阅读器等非传统web浏览器的不断增加,作为对CSS3的一项重要改进,CSS工作小组增加了CSS3的易用性。W3C文档指出在当前和未来的CSS3规范中将会继续保留这些易用的特性。

5. Introduction to CSS3 (Design Shack)

  http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it

在这个由5部分组成的系列中,Design Shack给读者了一个关于CSS3的完美诠释。文章以朴实的语言对CSS3做了详尽的解释,并对着重讲述了边框和文本效果等CSS3技术。

6. CSS3 . Info

  http://www.css3.info/

CSS3.info是一个关于CSS3方面的极其全面的网站。他们提供了有关CSS3的新闻、访谈记录以及各类资源。该站还提供了一个名为CSS3 Previews的演示模型,因此你可以通过Opera和其他基于Webkit的浏览器来体验CSS3的相关模块和功能。

7. CSS Advanced Layout Module

  http://www.w3.org/TR/css3-layout/

了解CSS3规范中更加常用的模块:高级布局模块(the Advanced Layout Module)。这是W3C的一个工作草稿,不过它足以向我们这些web开发者显示CSS3的伟大之处了。

8. Six Questions: Eric Meyer on CSS3

  http://sixrevisions.com/interviews/six-questions-eric-meyer-on-css3/http:/sixrevisions.com/interviews/six-questions-eric-meyer-on-css3/

Eric Meyer是一个有幸参加6次CSS3修订的CSS专家。在这次访谈中,Eric Meyer说其中最让他兴奋的CSS3中的模块方向的发展以及与JavaScript的紧密关系。你可以直接点击这里查看“就 CSS3 向 Eric Meyer 请教的 6 个问题” 。

9. CSS3 properties tests for webkit based browsers

  http://westciv.com/iphonetests/

在这个在线演示中,你会打到诸如Safari等基于Webkit的浏览器目前已经支持(和未支持)的CSS3属性;它还提供了可用于iPhone的一些CSS3属性的相关信息。

10. WaSP Community CSS3 Feedback

  http://fantasai.inkedblade.net/style/discuss/wasp-feedback-2008

本文是对于web标准项目(Web Standards Project,WaSP )发表的一篇名为“告诉CSS工作小组你喜欢从CSS3中得到什么(Tell the CSS WG what you want from CSS3)”博客的反馈信息的详细总结。通过这篇文章你可以看到世界web开发者对目前CSS3规则期望。

11. CSS 3 attribute selectors

  http://dev.opera.com/articles/view/css-3-attribute-selectors/

CSS3中一个令人兴奋的改进就是对于复杂而以具体的DOM的选择能力。Dev.Opera展示了CSS3中这项新属性选择功能。

12. W3C: Selectors

  http://www.w3.org/TR/css3-selectors/

选择符是W3C在CSS3工作草图中引入的一个相当棒的概念。

13. Conversation with CSS 3 team

  http://xhtml.com/en/css/conversation-with-css-3-team/

XHTML.com对于Bert Bos(前W3C CSS工作小组主席)的采访以CSS顶级专家的眼光审视CSS3的开发。

14. The fundamental problems with CSS3

  http://mattwilcox.net/archive/entry/id/1031/

Matt Wilcox的这篇文章围绕CSS3讨论了当前要解决的一些问题。

15. CSS Working Group Blog

  http://www.w3.org/blog/CSS

CSS标准的维护和开发者,CSS工作小组(CSS Working Group, CSS WG),经常更新其博客以提供有关CSS3的有用信息。

16. Rounded Corner Boxes the CSS3 Way

  http://24ways.org/2006/rounded-corner-boxes-the-css3-way

年度在线出版物24 Ways上发表了一篇名为“顶级web专家(top web professionals)”的文章,这是CSS专家Andy Budd的一篇关于用CSS实现圆角框的文章。它展示了CSS3的一个样式改进:不使用CSS实景实现圆角框。

17. Push Your Web Design Into The Future With CSS3

  http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/

图形与网页设计家Chris Spooner在Smashing杂志上发表这篇文章深入研究了利用当前已经公布CSS3规范设计网页的草图。这一切现在你就可以用CSS3来做,着实鼓舞人心。

18. Introduction to CSS3 Transparency

  http://www.mandarindesign.com/opacity.html#transintro

这篇文章探索并解释了CSS3中透明度的概念,这也是CSS色彩模块(CSS Color Module)中的一个概念。

19. Styling Forms with Attribute Selectors

  http://dev.opera.com/articles/view/styling-forms-with-attribute-selectors/

Dev.Opera在样式化表单的示例中展现了属性选择器的好处。

20. 5 Techniques to Acquaint You With CSS3

  http://nettuts.com/tutorials/html-css-techniques/5-techniques-to-acquaint-you-with-css-3/

熟能生巧,NETTUTS的这个教程教你如何在应用中学习CSS3。这篇文章中包括了如何给页面中的元素增加阴影和改变元素的透明度等。

今天您使用CSS3了吗?
在您的web开发实践中你使用到了CSS3吗?你在学习CSS3的过程中处于什么阶段了?请在下面的评论中和我们一起分享你的想法与经验。

【翻译】CSS Frameworks Collection(css框架收集)

什么是css框架

事实上让我们开始于什么是框架?

框架就是一个你可以用于你的网站项目的基本的概念上的结构体。

css框架通常只是一些css文件的集合,这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如:

typography.css 基本排版规则
grid.css 基于网格的布局
layout.css 通常的布局
form.css for 表单样式
general.css 更多通用规则
不同的css框架

Elements CSS Frameworks
Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架,它有自己的项目工作流。它拥有你完成项目所需的所有东西,这也让你和你的浏览者感到愉悦。阅读 概述 了解更多。

YUI Grids CSS
基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。 这个4KB的文件可提供超过1000中页面布局组合。 更多信息…

YAML CSS Framework
Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。

Blueprint CSS
Blueprint 是一个 CSS 框架,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,BP由一个易用的网格、合理的布局和一个打印样式。

Schema Web Design Framework
Schema 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 与为每一个新的网站项目从零开始创建HTMl/CSS不同,Schema提供必要的基础来开始并立马让你的设计跑起来。

CleverCSS
CleverCSS是一个用于css的受Python启发的小型的标记语言,它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整洁和强大。与CSS最明显的区别是句法:它基于缩进而且不单调。虽然这显然违反了Python的规则,它依然是组织样式的很好的主意。

Tripoli CSS Framework
Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准,Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。

ESWAT Web Project Framework
ESWAT正在重新整理。如果你是冲着我的网站框架来的,那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。

Boilerplate CSS Framework
作为BluePrint CSS的原作者之一,我决定把我的思想重新整理到一个赤裸裸的框架,它提供最基本的要素来开始任何项目。这个框架将是较小的而且力求不使用非语义的命名习惯。你就是设计者而且你的技术很重要。

WYMstyle CSS Framework
这个项目的目的是提供一组经过良好测试的模块化的CSS文件,能够用于网站的快速设计。WYMstyle是一组CSS文件,你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块,WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。

Content with Style Framework
下一个逻辑步骤就是将这个扩展为CSS框架,允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板…

Logicss Framework
Logic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset文件或是用“*”),排版支持文本字体大小调整(使用EMs) 和垂直居中,符合可定义的灵活的布局网格利用css代码生成工具。

That Standards Guy CSS Framework
* 只能调用单个样式文件
* 主样式需要取得CSS认证(WCAG 1.0);
* 跨浏览器兼容性—包括Internet Explorer (IE) 5.x for Mac;
* IE Hacks使用独立文件;
* 快速创建模板;
* 少量注释/实例演示,可以节省时间来理解。

960 Grid System
960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果,基于960像素的页面宽度。它有两种类型,12和16列,他们可以独立使用或是协同使用。

Emastic CSS Framework
Emastic 是一个CSS框架,它有连续的任务:探索陌生的新世界,寻找新生活和新的网站空间,大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化,在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。

原文地址:http://hiddenpixels.com/css-stuffs/css-frameworks/
译文出处:http://www.isparkle.cn/?p=88

margin失效

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Margin Collapsing</title>
<style type=”text/css”>
<!–

/* Pretty Stuff
================================== */

/* Zero down margin and paddin on all elements */
* {
margin: 0;
padding: 0;
}

body {
font: 100%/1.6 “Lucida Grande”, “Lucida Sans”, “Lucida Sans Unicode”, Verdana, sans-serif;
color: #353535;
padding: 1em;
}

h1 {
font-size: 2.4em;
font-weight: normal;
}

.wrapper {
width: 420px;
border: 1px solid gray;
margin: 20px;
}

/* The Core Technique
================================= */

#box1 {
margin: 10px;
background-color:#d5d5d5;
}

#box2 {
margin: 10px;
background-color:#d5d5d5;
padding: 1px;
}

p {
margin: 20px;
background-color:#90C2F3;
}

–>
</style>
</head>

<body>

<div class=”wrapper”>

<div id=”box1″>

<p>This paragraph has a 20px margin.</p>

</div>

</div>

<div class=”wrapper”>

<div id=”box2″>

<p>This paragraph has a 20px margin.</p>

</div>

</div>
</body>
</html>

margin失效
margin失效

margin 丢失

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Margin Collapsing</title>
<style type=”text/css”>
<!–

/* Pretty Stuff
================================== */

/* Zero down margin and paddin on all elements */
* {
margin: 0;
padding: 0;
}

body {
font: 100%/1.6 “Lucida Grande”, “Lucida Sans”, “Lucida Sans Unicode”, Verdana, sans-serif;
color: #353535;
padding: 1em;
}

h1 {
font-size: 2.4em;
font-weight: normal;
}

.wrapper {
width: 420px;
border: 1px solid gray;
margin: 20px;
}

/* The Core Technique
================================= */

#box1 {
margin: 10px;
background-color:#d5d5d5;
}

#box2 {
margin: 10px;
background-color:#d5d5d5;
padding: 1px;
}

p {
margin: 20px;
background-color:#90C2F3;
}

–>
</style>
</head>

<body>

<div class=”wrapper”>

<div id=”box1″>

<p>This paragraph has a 20px margin.</p>

</div>

</div>

<div class=”wrapper”>

<div id=”box2″>

<p>This paragraph has a 20px margin.</p>

</div>

</div>
</body>
</html>