一 背景类样式
1、 背景图片:background-image 属性
基本语法:background-image:URL(‘images/HTML.jpg’);
2、 背景重复:background-repeat 属性
3、 背景定位:background-position 属性
4、 背景关联:background-attachment 属性
属性功能:用于设置背景图像是否固定或者随着页面的其余部分滚动
基本语法:background-attachment:fixed;设置元素背景图像不随着页面的滚动而运动,固定保持不变。
值 | 描 述 |
Scroll | 默认值,背景图像会随着页面其余部分的滚动而移动 |
Fixed | 当页面的其余部分滚动时,背景图像不会移动 |
Inherit | 规定应该从父元素background-attachment属性的设置 |
5、 背景类样式的相关问题
1) 背景颜色和背景图,从哪里开始显示?
背景颜色是从边框区域开始显示的,背景图是从内边距区域开始显示的。
2) 背景图和背景颜色同时设置时,是什么效果?
当为一个元素同时设置背景颜色和背景图,且背景图尺寸小于元素区域时,元素会被背景图覆盖,而背景图之外的部分使用背景颜色进行填充。
二 透明背景
1、Opacity与filter
Filter
基本语法:filter:alpha(opacity=50); /*表示50%的透明度*/
Opacity(适用于火狐浏览器)
基本语法:-moz-opacity:0.5; /*表示透明度为50%的*/
注意:使用opacity属性,针对某一个元素设置透明度之后,会引发这个元素内部的子元素跟着变的半透明,简言之就是透明度会影响后代,即便是为后代远古三设置透明度为完全不透明,显示方面还是会到父级元素透明度的影响。所以想解决这个问题就需要应用到定位的知识。实现的基本原理是:通过“定位”,将视觉效果模仿为一个元素嵌套另一个元素的样式,但这两个元素实际上是同级关系。
2、CSS Sprite
什么是CSS Sprite?
CSS Sprite 也称为CSS精灵,是一种网页图片应用处理方式。它允许将一个页面涉及的所有零星图片都合并到一张大图当中,当访问该页面时,载入的图片就不会像以前那样一张一张的显示出来。它的原理是:把网页中的一些背景图片整合在一张图片文件中,再利用CSS中的background-position属性进行背景定位。
使用步骤:
1) 准备需要整合在一起的小图片
2) 打开CSS背景图合并小工具,在线地址:http://s.uis.cc/pw/。
3) 选择多张图片单击“打开”按钮
4) 排布图片:可以选择程序提供的按钮完成横竖的默认排布,也可以用鼠标选中图片拖动位置,拖动完成后程序会根据内部图片的位置,生成面积最小的背景图。
5) 代码生成:在程序中可以查看没张小图片的CSS代码,建议生成图片后再赋值生成的代码
6) 单击“选择目录并生成测试文件”按钮,调整目录,生成图片即可,生成之后会得到一个合并的背景图以及每张图相应位置的代码。
3、word-wrap与word-break
Word-wrap:
属性功能:设置长单词能否自动换行。
基本语法:word-wrap:break-word;
Word-break:
属性功能:设置自动换行的处理。
基本语法:word-break:break-all; /*允许在文本的单词内换行*/
Word-break:keep-all; /*只能在半角空格或连字符处换行*/
比较:
word-break:break-all是用来断开单词的,在单词到便捷式,下一个字母自动到下一行;
使用word-wrap:break-word是用来进行强制换行,中文没有任何问题,英文语句也没有问题,但是对于长串的英文就不起作用了。
4、font的复合样式
基本语法:font:italic bold 12px/20px ‘SimSun’
代码解析:设置字体为宋体、倾斜、加粗,12像素大小、20像素的行高。
注意:1)属性值与属性值之间使用空格隔开,字体大小与行高之间使用/分割、font属性当中,必须设置字体大小和字体类型两个属性的属性值,否则font的代码不会生效。2)属性值的顺序为:font-style、font-variant、font-weight、font-size/line-height、font-family。3)在实际开发中,更倾向于使用分开设置字体的各类属性,而不采用font这个复合属性。其中font-variant是将段落设置为小型大写字母,在日常开发工作中很少使用。
5、网络字体
作用:网站中难免会用到一些特殊的字体(如“华文行楷”)等修饰网站,让其不那么代办,然而,用户计算机上不一定会有这种字体,也就是说,只有客户端安装了这个兹特才能正常显示,否则会调用客户端上的别的字体来代替开发工程师设定的字体样式。这样单纯使用font-family就不能满足需求。
@font-face的使用:
@font-family{
font-family:‘STXINGKA’;src:local(‘SXTIUNGKA’),url(‘STXINGKA.ttf’) format(‘truetype’)}
5、Format
Format是一个可选参数,他的作用是提示该资源URL所引用的字体格式。
创建自己的字库
国外的一些网站都局部地应用font-face来美化网站,但是,和中文字体不同的是,国外的字库只有几十KB的大小(26个大写和26个小写英文字母以及一些标点符号),而中文字库由于存在大量的文字,大部分都是几兆字节甚至几十兆字节不等,为了美化网站而为网站增加几兆字节的流量是不明智的选择。这时,可以把网页中出现的特殊文字添加到一个新文字库里面,把不常用的去掉,做一个精简的字库来满足需求。可以使用fontmin来实现创建字体库。
1)为何推荐fontmin
与其他的字体生成工具相比,fontmin方便、快捷,不需要自己手动抠文字,直接生成各类文字字体,而且代码也可以直接生成。
2)Fontmin的基本特点
既能删除多于文字,又能够调整文字映射。
子集化(只取用当前字体中的部分文字)后的文字删掉了所有没用的空字符,不需要另开fontcreator进行二次精简。
3)fontmin的下载
Fontmin官网:http://ecomfe.github.io/fontmin.
4)fontmin的操作步骤
打开软件;
输入需要采用特殊字体的文字(注意不要换行);
打开系统中的字体库。选择需要的特殊字体,并将特殊字体拖到软件的相应位置,生成;
将生成的文件复制或剪切到开发文件夹的指定位置(会生成各种格式的字体文件以及CSS文件,可以使用编辑器打开CSS文件)。
5)注意事项
在使用该工具进行字体处理时,吧需要的文字内容粘贴上去,不要换行,否则声称出来的字体,在部分手机中会出现字符间距增大的现象。
建议采用英文名称命名字体(CSS文件中font-family的属性值及所有的字体名称),而不采用中文,中文有可能出现乱码现象。
6、 italic与oblique的区别
Italic是使用文字的倾斜,oblique是让文字倾斜。通常情况下,italic和oblique文本在web浏览器中看上去是完全一致的,但是对于没有斜体样式的字体,如果使用italic则没有效果,需要使用oblique属性值来实现倾斜的文字效果。
一些字体在设计时,会有粗体、斜体、下划线、删除线等诸多属性,但是并非所有字体在创建时完整地设计了各类属性和样式,对于一些字体可能只存在正常状态。