这一章,作者借鉴了CSSZENgarden上的6个作品,对CSS在WEB设计的思路上的作用!
借鉴的6个作品分别是:
http://www.csszengarden.com/028
http://www.csszengarden.com/026
http://www.csszengarden.com/083
http://www.csszengarden.com/022
http://www.csszengarden.com/068
http://www.csszengarden.com/064
从这一章开始,我很直面的感受到了作者在设计上的一些理念.与其说这本书在谈CSS,还不如说在谈作者的设计理念,不
仅是WEB设计理念,这个理念还可以扩充其他的设计领域.所以就我个人而言,这本书也适合一些其他的设计师阅读!!从版
面的排版,到光线与阴影的构成与形状,再到色彩、图片……无一不提示了这一理念!
在本章的第3小节，作者虽然谈到了在CSS里如何运用颜色：
1- 采用颜色名称,如: color:orange;
2- RGB值,如: color:rgb(51,153,204);
3- RGB值的百分比表示,如: color:rgb(93%,51%,93%);
4- 十六进制值,如: color:#0000FF;
5- 十六进制的简写值: color:#00F;
//只有分别表示红绿蓝的3对字母均两两相同时,才能使用这种简写形式.如#FF6699可以,但#808080则不能.
6- 系统颜色: color:WindowText;
但我更注重作者对颜色的选取理念,以及一些色彩和人类心理相关说明,这能拓展我的思路,为我的设计提供指导.
这章选取的最后一个作品,其作者也就是这本书的作者这一:Dava Shea.
从自己的角度来谈自己的作品的创作,更能让人理解其中的曲折:从一次驾车行驶的灵感,再到设计图,再从设计图到代码
,作者经历了选择的历程.
由于CSSZENgarden的HTML页面是固定的,不能更改,而原位置的元素不够,作者利用了原先预留的元素来进行绝对定位:
[codes=css]
//元素为:
#extraDiv1{
position:absolute;
top:41px;
left:0px;
text-align:center;
width:100%;
}
#extraDiv1 span{
background:transparent url(granville.jpg) top left no-repeat;
display:block;
margin-left:auto;
margin-right:auto;
height:123px;
width:770px;
}
这里是让元素绝对居中.如果希望元素加些偏离,则需要为子元素添加一定的内边距(padding).注意这里的偏移量的值,
要加倍计算–因为在给元素添加内边距的同时也增加了元素的总宽度.
这里作者还着重提到了CSS盒模型(box model)中的一个较为晦涩的概念–外边距重叠(collapsing margin).外边距重叠
是指,若两个元素上下毗邻且都定义了不为0的外边距值,同时又没有任何内边距\边框等设定,那么这两个元素之间的距
离将小于二者外边距的和.
同时,作者考虑到IE对Png格式的透明信息不支持,在对徽章的处理采用了IE同样不支持的子孙选择器:
[codes=css]
html>body #extraDiv4 span{
background transparent url(seal.png) top right no-repeat;
}