css3学习总结三

第三章      纸质笔记

 

背景图片缩放

background-size属性可以让背景图片和文本同步缩放。

例如：background-size:100px auto;第一个值指定了背景图片的宽度，第二个值，指定了高度。

background-size:50% 100%;宽度上适应div宽度的一半，高和div一样高

background-repeat属性里的round和space值来使背景图片平铺之后不会再边缘上被截断。

round值会缩放背景图片，从而保证图片填满整个区域二不会被截断；space值不会缩放图片，但是它可以保证填满并且第一张和最后一张背景图是紧靠容器边缘的。

只有ie9和opera才支持，还是乖乖的使用background-size

 

为了让背景图片和文本一起缩放，需要将他的尺寸设置成em，它是以当前的字体高度为衡量基准的相对单位。

 

 

单一容器上的复合背景图片：只需在background-image或者background属性中列出需要使用的所有背景图片，然后用逗号分开他们。每张图片都可以定位，设置重复值，改变大小以及其他可以单独控制的特性。

 

为了让background-size能运行的更好，分开定义background和background-size写。

 

background-image或者background的背景图片，最先列出的图片在最上层。

 

针对ie8及之前的版本的兼容方案

 

使用嵌套div来显示复合背景图片

 

例子：background: url(images/paperlines.gif) #FBFBF9; /* IE, old FF */

       background: url(images/thumbtack.png) 50% 5px no-repeat, url(images/stains1.png) 90% -20px no-repeat, url(images/stains2.png) 30% 8% no-repeat, url(images/stains3.png) 20% 50% no-repeat, url(images/stains4.png) 40% 60% no-repeat, url(images/paperlines.gif) #FBFBF9;

 

使用border-image

在border-image的值里面，你需要指定一张图片，切片的重复方式（4个角），1个数值，4个边框；2个值，第一个底和顶，第二个左和右；3个值，第一个顶，第二个左和右，第三个底；四个值，顺时针的四个边框。

repeat值可以这是为stretch（会把切片拉伸以填满所有区域）、repeat（四条边，包括中央的切片来保证切片正好铺满整个区域）、round（会平铺缩放好的切片来保证切片正好铺满整个区域）、space（会让切片在整个区域里均匀的分布）

切记：border-width和border-image是一起设置的，这样才能流出足够的边框空间来显示图片。

border-image的web工具http://border-image.com/

 

使用background-clip来定位图片

background-clip要放到background后面。先写background-clip会使用浏览器的默认值border-box。

background-clip的属性值border-box（默认值，在边框下绘制背景），padding-box（背景延伸到padding的外边缘，但是不会超出边框的范围），content-box（背景仅在内容区绘制，不会超出padding和边框的范围），ff3.6之前的并不支持content-box。

 

针对其他浏览器兼容方案

考虑添加一个额外的包裹div，然后在那之上应用背景图片

例如：#wrapper{padding-left:50px;background:url(image/dege.pan) repeat-y;}

其他浏览器不会知道这条规则的存在。

 

嵌入字体：@font-face

@font-face是连接服务器上的字体的一种方式，浏览器会根据这条指令吧对应的字体文件下载到本地缓存，使用它去修饰文本。

有字体集生成器http://fontsquirrel.com/fontface/generator

例子：@font-face {

       font-family: 'Prelude';

       src: url('fonts/preludeflf-webfont.eot');/*IE下的字体*/

       src: local('☺'), url('fonts/preludeflf-webfont.woff') format('woff'), url('fonts/preludeflf-webfont.ttf') format('truetype'), url('fonts/preludeflf-webfont.svg#webfont') format('svg');/*非IE下的字体*/

}

@font-face {

       font-family: 'Prelude';

       src: url('fonts/preludeflf-bold-webfont.eot');

       src: local('☺'), url('fonts/preludeflf-bold-webfont.woff') format('woff'), url('fonts/preludeflf-bold-webfont.ttf') format('truetype'), url('fonts/preludeflf-bold-webfont.svg#webfont') format('svg');

       font-weight: bold;

}

这段语法放在所有css规则之前，其实放在任何位置都可工作，但是放在样式之前，会提高页面的性能。

会发现local('☺')，我们并不希望有可能指向一个真实存在的文件，而应该不太可能有人会发布一个字体，并将其命名为☺。local()是防止重名的字体。

h2 {

       clear: left;

       margin: 0 0 -.14em 0;

       color: #414141;

       font-family: Prelude, Helvetica, "Helvetica Neue", Arial, sans-serif;

       font-size: 2.17em;

       font-weight: bold;

}

如上要把@font-face申明的字体放到最前面