1. 问题

前几日,一个网站客户提出,文本右边凹凸不齐,不好看,有没有办法让行尾对齐呢?
我的第一反映是不太可能吧,要计算字数和长度如何如何想得很复杂.其实无知很可怕…

2. 解决

问:你知道text-align属性可以取几个值吗?
答:left,right和center.

还漏下一个:justify.当text-align取了justify含义是分散对齐,会略微地对单词和字母之间的距离做调整.

3. 效果

2009-04-10_10421
不加text-align: justify;的效果

2009-04-10_10431
加了text-align: justify;的效果

4. 讨论

值justify可以使文本的两端都对齐。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。不过在CSS中,还需要多做些考虑。
要由用户代理(而不是CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。例如,有些浏览器可能只在单词之间增加额外的空间,而另外一些浏览器可能会平均分布字母间的额外空间(不过CSS规范特别指出,如果letter-spacing属性指定为一个长度值,“用户代理不能进一步增加或减少字符间的空间”)。还有一些用户代理可能会减少某些行的空间,使文本挤得更紧密。所有这些做法都会影响元素的外观,甚至改变其高度,这取决于用户代理的对齐选择影响了多少文本行。
CSS也没有指定应当如何处理连字符(注1)。大多数两端对齐文本都使用连字符将长单词分开放在两行上,从而缩小单词之间的间隔,改善文本行的外观。不过,由于CSS没有定义连字符行为,用户代理不太可能自动加连字符。因此,在CSS中,两端对齐文本看上去没有打印出来好看,特别是元素可能太窄,以至于每行只能放下几个单词。当然,使用窄设计元素是可以的,不过要当心相应的缺点。
注1:CSS中没有说明如何处理连字符,因为不同的语言有不同的连字符规则。规范没有尝试去调和这样一些很可能不完备的规则,而是干脆不提这个问题。

5. 参考资料

  1. CSS text-align 属性

李征 16:30:34
以前叫HTML,现在扩充到xHTML

冰淇凌 16:30:35
恩~

李征 16:30:45
现在HTML其实就是内容性的东西
李征 16:30:59
比如你看看我博客的源代码,里面都是结构性的东西

冰淇凌 16:31:10
结构性?

李征 16:31:18
比如题目,内容什么,但是没有给出该用什么颜色来显示
李征 16:31:50
比如你要显示一篇文章吧,xHTML里面就是很简单的,上来先title,然后content,然后comment

冰淇凌 16:31:58
哦~~偶还以为颜色那个有默认的

李征 16:32:05
只有结构和文本的内容,而没规定颜色
李征 16:32:27
但是在每个结构性的标签里面,都会有一个id或者class的变量
李征 16:32:43
在整个xHTML顶上,会指定一个css文件的位置
李征 16:33:14
这个css里面,会去规定每种id或者class应当用什么颜色啊,什么字体啊,什么位置啊去显示

冰淇凌 16:33:16
哦~~~

李征 16:33:37
就是说,xHTML都是结构性内容,css都是显示性内容

冰淇凌 16:33:39
css就是个模板咯

李征 16:33:46
这就是xHTML+CSS的基本原理
李征 16:33:52
嗯,算是吧

冰淇凌 16:34:08
恩 有一点小概念了 呵呵

李征 16:34:40
所以,只要换一个css文件,整个网页就会很不一样
李征 16:34:47
这就是你说的模板的概念

冰淇凌 16:34:53
哦~~~呵呵 你那个改动的就是?

李征 16:35:12
对,过程中没动过html部分
李征 16:35:25
就像穿衣服一样,人还是那个人,衣服不一样而已

冰淇凌 16:35:23
呵呵 这样还挺好

李征 16:35:41
好处就是,可以大大减少重复的代码
李征 16:36:18
因为如果不这样,就必须在每个文字前面规定,要去怎么显示,但是我一个页面可能有n个需要这样显示的内容呢

冰淇凌 16:36:28
恩 懂~

李征 16:36:50
如果html就要写n次,如果css,就在css里写一次,而在这n个前面让他们用同一个class
李征 16:37:05
一般这样可以减小40%带宽需求
李征 16:37:25
而且,不同页面可以使用同一个css文件,这样其实就是缓存了,速度也会快

冰淇凌 16:37:30
<style type=”text/css” media=”screen”>@import “http://lizheng.me/wp-content/plugins/nextgen-gallery/css/ngg_shadow2.css”;</style>

李征 16:37:38

冰淇凌 16:37:38
这个么
冰淇凌 16:37:40

冰淇凌 16:37:41
呵呵

李征 16:38:20
再有,因为html只是结构,所以在手机那样的设备上,可能不支持css,但是内容结构还会保持
李征 16:38:29
题目还是题目,内容还是内容
李征 16:38:43
基本就这些特性吧

冰淇凌 16:39:20
那就是手机设备上样式会显示不出来?

李征 16:39:37
有的会,有的不会
李征 16:39:44
手机上也有Opera之类的浏览器

冰淇凌 16:40:06
哦~

冰淇凌 16:40:13
跟浏览器解析有关?

李征 16:40:26
如果是传统网页,可能就是一片乱七八糟,如果xHTML+CSS,就是颜色没了,结构和字还会在

发现很多朋友对CSS的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断CSS的优先权,更应反思自己的CSS代码,是否合理?是否优化?
CSS2.1 中规定了关于CSS规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以Specificity的高低判断CSS的优先权。

Specificity 具体的计算规则:

  • 元素的 style 样式属性,加 1,0,0,0。
  • 每个 ID 选择符(#id),加 0,1,0,0。
  • 每个 class 选择符(.class)、每个属性选择符(例 [attr=””] )、每个伪类(例 :hover),加 0,0,1,0。
  • 每个元素或伪元素(例 :firstchild)等,加 0,0,0,1。
  • 其他选择符(例 全局选择符 *,子选择符 >),加 0,0,0,0。

最后逐位相加数字串,得到最终的 Specificity 值,按照从左到右的顺序逐位比较。

除了Specificity还有一些其他规则

  • !important 声明的规则高于一切,如果 !important 声明冲突,则比较优先权。
  • 如果优先权一样,则按源码中“后来者居上”的原则。
  • 由继承而得到的样式属性不参与 specificity 的计算,低于一切其他规则(例 全局选择符 * )。

范例分析
[code=’css’]
h1 {color: red;}
/* 只有一个普通元素加成,结果是 0,0,0,1 */
body h1 {color: green;}
/* 两个普通元素加成,结果是 0,0,0,2 */
/*0,0,0,1 小于 0,0,0,2 ,后者胜出*/

h2.grape {color: purple;}
/* 一个普通元素、一个class选择符加成,结果是 0,0,1,1*/
h2 {color: silver;}
/*一个普通元素,结果是 0,0,0,1 */
/*0,0,1,1 大于 0,0,0,1 ,前者胜出*/

html > body table tr[id=”totals”] td ul > li {color: maroon;}
/* 7个普通元素、一个属性选择符、两个其他选择符(子选择符 >),结果是0,0,1,7 */
li#answer {color: navy;}
/* 一个ID选择符,一个普通选择符,结果是0,1,0,1 */
/*0,0,1,7 小于 0,1,0,1,后者胜出*/
[/code]

节选 old9 的《CSS的优先权》(无法穿越 GFW)
中文原文:http://www.blueidea.com/tech/web/2008/5749.asp