CSS图文混排

图文混排是网页中比较常见的形式。通常情况下,有两种方法可以实现图文混排:文本中插入浮动元素和使用text-indent属性。

一、文本中插入浮动元素

在CSS中,可以通过文本中插入浮动元素来实现图文混排的效果。我们来看一段示例:

img{float:right;margin:15px;}

<p>这是一个使用浮动属性的图文混排的示例。可以尝试改变图片在文本中的位置,这有助于理解这个属性。<img src=”pic/007.gif”>这是一个使用浮动属性的图文混排的示例。这是一个使用浮动属性的图文混排的示例。这是一个使用浮动属性的图文混排的示例。这是一个使用浮动属性的图文混排的示例。这是一个使用浮动属性的图文混排的示例。这是一个使用浮动属性的图文混排的示例。这是一个使用浮动属性的图文混排的示例。</p>

该样式实现了文字环绕图像的混排效果。

其应用到页面的效果如下图所示。

二、text-indent属性

使用text-indent属性,也可以实现一种图文混排的效果。例如:

img{float:left;margin:20px 10px 5px 0;}
p{text-indent:-4em;}

<p><img src=”pic/007.gif”>这是一个使用text-indent属性的图文混排的示例。这里应用了缩进值为负值的设置。可以尝试改变外补丁值,这有助于理解text-indent属性为负值的含义。</p>

注:

text-indent 属性,该属性可以方便地实现文本缩进。

通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边。

不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距。

css如何避免隐藏掉半个字(转)

发现用户名称被隐藏掉半个汉字很别扭!!
那么如何避免这种情况呢!
一般中文字体我们都设置了自动换行,也就是说每个汉字都被打散成了独立的元素;当一行汉字的宽度超过容器宽度是就折行显示,那么汉字是如何折行的呢?我们 常会设置一个列表左浮动来横向显示一组数据,当我们不设置li元素宽度,而父容器有不能刚好装下整数的li元素里,ie下就会发生一种现象(这样的现象我 们层遇到过2次,都是没有给容器指定宽度造成的),这就是最后一个不能被完整包容的li元素里的问题会沿着容器右边界按一个字的宽竖向排开,在不设置正确 高度的情况下,这个现象不受overflow:hidden的影响!当我们给li设置宽度的情况下,最后面这个不能被完全包容的li就折到下行显示。
这种情况就恰好说明了浏览器换行的机制,这个机制就是在不设置父层元素宽度的情况下,浏览器会按照最后一个不可分拆的元素的宽度进行折行,在亚洲语系中这 个最后不可分的元素就是一个独立的字体。
写到这里半字之痒的谜底就解开了,那就是不要给汉字设置white-space:nowarp;和white-space:pre; 更不要在使用文字打散属性word-break:break-all;的时候再去使用word-break:keep-all属性。
ps:word-break:keep-all; 使文字与非亚洲语系的文字保持一致!(英文是不会换行的哦!)

CSS 超出显示宽度的内容隐藏起来

.text-overflow {
display:block;/*内联对象需加*/
width:31em;
word- break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内 容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(…) ;需与 overflow:hidden;一起使用。*/
}

实现原理:

(1)指定宽度:width:300px;
(2)overflow:hidden; 将超出内容隐藏
(3)text-overflow:ellipsis; IE 专 有属性,当对象内文本溢出时显示省略标记(…)
(4)white-space:nowrap; 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。

超出隐藏

省略号只有在ie下有效~

CSS 英文字符自动换行

大家都知道.文字在网页编写的时候是可以自动换行的.但是有一个让我们很头疼的就是英文往往是不能自动换行的.特别是连在一起的英文.有的时候我们会用CSS来限制表格的属性.比如OVERFLOW:HIDDEN,但这个属性不能很好的达到我们所要的目的.下面我们就来介绍用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 >ddd1111111111111111111111111111111111</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 >ddd1111111111111111111111111111111111111111</div>

效果:容器正常,内容隐藏

在 Mozilla UI 中书写高效率 CSS

原文:Writing Efficient CSS for use in the Mozilla UI
译文:在 Mozilla UI 中书写高效率 CSS

以下文档描述了应用在 Mozilla UI 中优化 CSS 文件的规则。第一部分是对于 Mozilla 样式系统分类规则的一般性讨论。在了解这个系统的基础上,后续部分包含了一些指南,书写可以利用这个样式系统实践优点的样式的指南。

样式系统如何分类规则

样式系统把规则分为四大类。理解这些类是很重要的,因为对于规则的匹配来说他们是首先要考虑的。之后的段落中会使用“主选择符”这个说法。主选择符是指选择符最右边的部分(最终要匹配的那个元素,而不是它的祖先元素)。例如,在以下规则中:

a img, div > p, h1 + [title] {}

主选择符是 “img”, “p”, 和 “[title]“。

ID 规则

ID 选择符作为主选择符的规则。

例如:

  • button#backButton { } /* ID 类别的规则 */
  • #urlBar[type=”autocomplete”] { } /* ID 类别的规则 */
  • treeitem > treerow > treecell#myCell:active { } /* ID 类别的规则 */

Class 规则

如果一条规则有一个指定的 class 作为主选择符,就被归入此类。

例如:

  • button.toolbarButton { } /* 基于 class 的规则 */
  • .fancyText { } /* 基于 class 的规则 */
  • menuitem > .menu-left[checked=”true”] { } /* 基于 class 的规则 */

Tag 规则

如果主选择符不是 ID 或者 class,那么下一个类很可能就是 tag 分类。如果一条规则指定 tag 为主选择符,就被归入此类。

例如:

  • td { } /* 基于 tag 的规则 */
  • treeitem > treerow { } /* 基于 tag 的规则 */
  • input[type=”checkbox”] { } /* 基于 tag 的规则 */

全局规则

除以上分类之外都归入此类。

例如:

  • [hidden=”true”] { } /* 全局规则 */
  • *{} /* 全局规则 */
  • tree > [collapsed=”true”] { } /* 全局规则 */

样式系统如何匹配规则

样式系统从最右边的选择符开始向左侧移动来匹配一条规则。样式系统会一直向左匹配选择符直到规则匹配完毕或者由于出错停止匹配。

对于规则分类的第一步发生在主选择符类别基础上。这个分类的目的是把那些不需要浪费时间匹配的规则过滤出来。这是显著提升性能的重点。对于一个给定的需要匹配的元素,规则越少,样式的渲染越快。例如,元素有一个 ID,那么只有和元素 ID 匹配的 ID 规则会被检索。只有和元素的 class 匹配的 class 规则会被检索。只有和 tag 匹配的 tag 规则会被检索。全局规则总是会被检索。

高效 CSS 指南

避免全局规则

确保规则不以全局分类结束

不要给 ID 分类规则指定标签名或者 class

如果有一条样式规则是以 ID 选择符为主选择符的,就别再画蛇添足的加上标签名了。ID 都是唯一的,因此加上标签名反而会无谓地拖慢匹配过程。(当有不同元素使用同一类名,而又需要动态地改变其中一个元素的类名来针对不同情况应用不同样式时是个例外。)

  • BAD – button#backButton { }
  • BAD – .menu-left#newMenuIcon { }
  • GOOD – #backButton { }
  • GOOD – #newMenuIcon { }

不要给 class 分类规则指定标签名

和以上规则类似,所有的类名也是唯一的。标签和类名连缀的写法是一个惯例(但是,如果设计的变更使得需要改变标签就会有灵活性的问题,因为也需要改变 class — 最好选用具有严格语义的名字,这种灵活性也是分离样式表的目标之一)。

  • BAD – treecell.indented { }
  • GOOD – .treecell-indented { }
  • BEST – .hierarchy-deep { }

尽量把规则应用到最明确的类上。

拖慢系统最大的一个原因是有太多的 tag 分类规则了。通过给元素增加类名,可以把这些 tag 类里的规则分一部分去class 分类,就可以不需要浪费时间来试图给一个标签匹配那么多的的规则了。

  • BAD – treeitem[mailfolder=”true”] > treerow > treecell { }
  • GOOD – .treecell-mailfolder { }

避免后代选择符

CSS 中,后代选择符(descendant)[注1]的耗能高的可怕,尤其是选择符的规则是在 tag 或者全局分类中。子选择符(child selector)则经常是真正所需。如果没有主题模块所有者的明确允许,UI CSS 中禁止使用后代选择符。

  • BAD – treehead treerow treecell { }
  • BETTER, BUT STILL BAD (see next guideline) – treehead > treerow > treecell { }

Tag 类规则中最好不要包含后代选择符

避免使用具有 tag 类规则的后代选择符。这会明显地增加匹配时间(尤其是这些规则会被多次匹配时)。

  • BAD – treehead > treerow > treecell { }
  • BEST – .treecell-header { }

小心子选择符的使用

要小心使用子代选择符。如果有别的方式可以不用,就不要用子选择符。尤其是子选择符被大量使用在 RDF 树和类似的菜单中时。

  • BAD – treeitem[IsImapServer=”true”] > treerow > .tree-folderpane-icon { }

要注意模版中来自 RDF 的属性是可以复制的!可以利用这一点把 RDF 属性复制到需要改变那个属性的子元素上。

  • GOOD – .tree-folderpane-icon[IsImapServer=”true”] { }

倚赖继承

了解并使用那些可以继承的属性。XUL widgetry[注2] 已经明确设置了,因此可以把 list-style-image 或者 font 规则应用到父级标签上,它将渗透进匿名内容。因此就不需要浪费时间为那些匿名内容写规则了。

  • BAD – #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }
  • GOOD – #bookmarkMenuItem { list-style-image: url(blah); }

上例中,样式化匿名内容的需求(没有理解 list-style-image 可以继承)导致了一条 class 类规则。其实这条规则应该属于最明确的一类 — ID 类规则。

要记住,尤其是那些匿名内容,它们都有同样的 class。上面那个不好的例子导致需要检查每个菜单的图标是否包含在 bookmarks 菜单项中。这是非常可怕的高昂消耗(有很多菜单);除 bookmarks 菜单之外,这条规则不应该被其他任何菜单想检查。

使用 -moz-image-region

把一堆图片放到一个单独的图片文件中,并用 -moz-image-region[注3] 选中会有显著的性能提升。()

注1: 后代选择符(descendant selector) 子选择符(child selector) 是有区别的。单从字面来讲,后代选择符,顾名思义包括儿子、孙子、重孙子等所有后代; 子选择符只是指儿子,就不管那帮孙子了。

注2: XUL widgetry 不清楚是啥。

注3: 貌似想法和现在说的 CSS sprites 方法差不多,要知道这可是十年前(2000年)的文章啊。 – 糖伴西红柿

10条改进你的CSS代码的方法

如何让你的CSS代码更具有组织性和易维护性,为什么你的样式表总是臃肿和混乱的?有些时候是源于一开始书写时的混乱和草率,有时候也是因为后期的维护和各种HACK的需要,但不管如何,书写出干净、易于管理的CSS很简单,下面是10条改进的方法:
1.井井有条。
和许多其他的事情一样,首先要保持一个良好的组织性,而不是想到ID就写ID,想到CLASS就写CLASS,而要使样式表保持一个连贯的结构,这能让你充分的利用样式的继承。首先定义你最常用的项目,然后是不太常用到的然后是其他,这会使你的CSS属性得到正确的继承,当你需要重新定义一个特殊的风格时会很简单,也会使得你以后对该CSS的修改和编辑更加迅速,因为它遵从简单、可读、有逻辑的结构。
一个良好的CSS结构应该包括以下一些部分:

  1. 重置和覆盖(Resets & overrides)
  2. 链接和字体(Links & type)
  3. 主要布局(Main layout)
  4. 次要布局结构
  5. 表单元素
  6. 杂项

下图展示的就是一个示例:

2.风格名称、创建时间、签名。
让别人知道是谁写的样式表,当他们有问题的时候可以及时的请教,这在制作模板或者主题以及团队合作时非常有用。

DaimaRen.cn © 2009-2010 by Tomie Zhang
1
2
3
4
5
6
7
8
9
10
11
12
/*=========
Daimaren style
Copyright 2010  by Tomieweb@gmail.com
for  - www.daimaren.cn

swatch colors
-------------------
ff0000 - red
0000ff - blue
13437a - dark blue
e1e1e1 - light gray
===========*/

swatch colors里记录了此风格用到的一些颜色色值,和它们对应的颜色描述,这么做是方便以后的编辑工作,你不用再打开PS或者其他取色软件在去找颜色,翻到样式顶部拷贝即可。

3.制作一个模板库。
每次当你制作完一个样式表时,你可以去除那些不通用的东西,然后把文件保存为一个CSS模板以备以后之用。
可以保存成多种用途的各个版本:两列布局、博客布局、打印样式、移动设备样式等等。coda有一个很棒的剪辑功能,可以帮你很容易的保存模板。许多其他的编辑器也有类似的功能,即便是简单的文本批处理也可以很好做出一个模板库来。
每次都从头重写每一个代码实在太疯狂,特别是当你使用相同的公约和方法。

4.使用有用的命名约定。
你可能注意到在第一条建议里的示例里,定义了一对ID叫:col-alpha 和 col-beta,为什么不直接叫col-left 和 col-right?想想我们未来要做的工作,
来年也许你要将左侧的内容调整到右侧,你不应该重新命名你的HTML元素和重命名样式表的id而只是为了移动一下位置。
是的,也许你说你可以把左侧移到右侧而不改动它的HTML元素ID名,依然叫col-left ,但是这会是多么混乱啊,ID描述的是左侧,那就应该让它始终待在左侧,而不是背道而驰。
CSS的一个主要优势就是表现与内容的分离,你完全可以不用动HTML,而只是修改CSS去重新设计你的网站,所以不要使用有限制的命名,而更多的使用通用的命名约定并且要保持一致。
让那些位置以及具体描述表现的词语远离你的CSS,类似.link-blue这样的class命名只会给你今后带来更多的工作,或者当你需要把蓝色链接换成红色的时候让样式表更加杂乱。
元素命名最好是基于它们是什么,而不是它们看起来像什么。比如:.comment-beta比.comment-blue更加通用,而.post-largefont比.post-title更加受限制。

5.连字符而不是下划线。
老式的浏览器解析CSS的下划线容易出现问题,或者根本不支持。为了更好的向后兼容,使用连字符比下划线要好。

6.不要重复你自己。
尽可能的利用分组声明属性,而不是每次重新声明,如有H1\H2两个元素都使用相同的font size color margins那就用逗号,把它们分在一个组内:
This:

尽可能的使用CSS缩写,如有margin值如下:

DaimaRen.cn © 2009-2010 by Tomie Zhang
1
2
3
4
5
6
7
8
h1{
margin-top:1em;
margin-right:1em;
margin-bottom:2em;
margin-left:3em;
}
/*可以缩写为*/
h1{margin:1em 1em 2em 3em}

7.优化轻型样式表。
通过以上的建议,你已经大大减小了样式表的大小,小就意味着更快速更容易保持和升级。
裁剪你不需要的尽可能的通过组来合并,谨慎使用整体的CSS框架,你会发现里面有许多你用不到的东西。
另外一个让CSS更小的建议是,你不用为0添加单位,如0px,直接写0就好了。

8.先针对Gecko内核浏览器写基础样式,然后再在Webkit和IE内核的浏览器上调整。

9.验证。
如果你卡壳了,或者你的布局并不是你想要的效果,可以使用W3C’s free CSS validator验证你的CSS,它将会给你指出你的CSS错误。

10.保持干净的CSS作用域。
通过使用JS判断客户端判断以及浏览器注释等方法,分离针对不同浏览器的样式到各自独立的样式表,使用这种方法可以避开肮脏的HACK出现在你的样式表,保持干净和更好的维护性。

转自代码人(http://www.daimaren.cn

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; }