码迷,mamicode.com
首页 > Web开发 > 详细

《众妙之门——精通CSS3》一书知识点剖析

时间:2014-09-28 00:52:00      阅读:387      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   使用   ar   strong   sp   

不得不佩服京东的速度,昨天刚下单的两本书今天上午就到了。其中一本是全彩页的《众妙之门 - 精通CSS3》,细看了前几十页,书上的叙述方式给我的印象其实不如“彩页”来的讨喜——接连说上几个例子,扔个例子的链接(没源码下载,要自己手动输入,而且近乎所有的例子页面均已失效),未经细剖便草草了事,感觉倒是适合作为厕所读物(汗)。。。。

虽然书中不细剖,却也不能白花银子,不妨自己实打实地查资料、记笔记,不辜负了早上送出的老毛。

bubuko.com,布布扣

P21

此处提到的例子动用了 -webkit-background-clip:text;-webkit-text-fill-color:transparent; 两个样式属性,制造了文本蒙版效果。

后面我查了 background-clip 发现它仅支持border-box、padding-box content-box,也写了一个 background-clip:text;  的小例子也没发现有相关效果,之后才确定仅有带webkit前缀的 -webkit-background-clip 才支持 text 的值,才能生成遮罩效果(IE、FF均没有相关的样式属性,如-moz-background-clip:text 并不生效):

<style>
div{background:url(http://images.cnblogs.com/cnblogs_com/vajoy/558869/o_avatar.jpg); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
</style>
</head>
<body>
    <div>
    测试测试测试
    </div>
</body> 

bubuko.com,布布扣

P49

提到了RGBa的替代方案——HSLa,但没有详细介绍。HSLa的四个值含义分别如下:

H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360

S:Saturation(饱和度)。取值为:0.0% - 100.0%

L:Lightness(亮度)。取值为:0.0% - 100.0%

A:Alpha(透明度。取值0~1之间。

故我们可以这样给颜色赋值: 

div{background-color:hsla(360,50%,50%,0.5);}

bubuko.com,布布扣

P50

提到了 background-clipbackground-origin ,却没有说明二者分别。

background-origin表示背景从何处开始显示(边框、补白或内容区域),background-clip表示在原有显示背景的情况下裁剪可视区域(边框、补白或内容区域)。

具体区别可以参考此篇文章

bubuko.com,布布扣

P54

介绍了muticol(查看用法),至于《CSS3 Multi-column layout considered harmful》的主要内容如下:

建议在如下情况下可以分栏来显示文本:

■ 文本分栏后,从某一栏阅读到下一栏,均无需任何滚动(scroll up and down)

■ 此处无需水平滚动条

■ 是单页面的,没有任何翻页

■ 不会把每一行分的太短导致阅读困难

■ 文本并非自适应的

其实这里都是从体验的角度出发所提出的意见,另外作者在最后也表示网页就是网页,不应该当作印刷物来分栏显示文章。

bubuko.com,布布扣

P55

word-wrap、word-break、white-space 的区别:

word-break:设置英文句子在换行时,是否可以拆开单词换行,其值设为break-all表示允许在单词内换行,设为keep-all表示只能在半角空格或连字符处换行。

因此如果是很长的中文句子,在IE7/8中设为keep-all的话会因为找不到半角空格无法断行而导致文本探出容器外(IE6是直接把容器撑起来)。

word-wrap:解决上述问题,其值设为break-word之后中文也好英文句子也好或者字符串也罢,均能良好断行。

white-space:这个是CSS2属性,其值含义如下

bubuko.com,布布扣

注意我们在使用 text-overflow:ellipsis 的时候需要用到 white-space:nowrap 来配合。

bubuko.com,布布扣

持续更新ing...

《众妙之门——精通CSS3》一书知识点剖析

标签:style   blog   http   color   io   使用   ar   strong   sp   

原文地址:http://www.cnblogs.com/vajoy/p/3997473.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!