codecamp

3.2 字间距及字母间距


3.2 字间距及字母间距


下面要学习的属性可以使你做到HTML标签做不到的事情:控制字间距及字母间距。


字间距


利用字间距属性,你可以在字之间加入更的距离:

    H3 { word-spacing: 1em }



你所使用的参数值将加入任何浏览器的缺设置,你可以使用我们昨天谈到的任何种长度单位:

  • in (英寸)

  • cm (厘米)

  • mm (毫米)

  • pt (点数)

  • pc (打字机字间距)

  • em (ems)

  • ex (x-height)

  • px (象素)


以下为显示结果:

    Behold the power of cheese.


如果你的浏览器不支持这种CSS属性,请点击这里查看显示效果。


如果你看不到任何不同之处,则说明你的览器不支持这种属性,只有MAC机用的IE4能支持这种字间距设置。


字母间距


字母间距可以在IE 4中应用,但Communicator不行,唉...

    H3 { letter-spacing: 10px }



字母间距的功能和字间距的很类似:其参值将被加入到浏览器的缺省设置中,你以使用上述任何一种长度单位。


如果你用的是IE 4,这里是一个例子:

    Behold the power of cheese.


对于这两种属性,你都可以使用normal参数。从而使其按照浏览器的原有缺省设置显示。


别沮丧,还有很多CSS属性可以在两种浏览器上都可使用。下文中就是一个例子。


3.1 第3日
3.3 行距
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }