给大家带来css关于字体和背景等属性的把持

一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
原文：http://jorux.com/archives/property-2-if-you-love-CSS/
前次次要申明了css关于色彩和文本属性的把持,此次先容css关于字体,背景等属性的把持.
字体(Font)
css把持的字体属性包含font-family,font-style,font-variant,font-weight,font-size.
1.font-family:
由字体名(family-names)和字组名(genericfamilies)两个部分构成.起首来看个实例,例:检察Jorux.com首页的css文件,能够看到以下代码:
body{
font:normal12px/1.5Georgia,sans-serif;
text-align:left;
background:#444url(images/bodybg.jpg)repeat-y;
}
蓝色加亮部分就是font的属性值,这类写法为简写,可将其复原为:
font-weight:normal;
font-size:12px;
line-height:1.5;
font-family:Georgia,sans-serif;
行高(line-height)实在其实不属于font属性,但能够在简写时回进font属性值内.如今我们先只看最初一行font-family的部分.“Georgia“即为字体名(有simhei,arial,verdana等),“sans-serif“即为字组名(包含衬线字体(Serif),非衬线字体(Sans-Serif)和等宽字体(MonoSpace)三种).
因为Windows自带的汉字字体极其无限.但一样平常中文Windows体系都撑持宋体(默许,SimSun)和黑体(SimHei)和楷体(kaiti_gb2312).我们来看看这几种汉字字体(要注重这几种字体名,楷体的英笔墨体名为kaiti_gb2312,Firefox对汉字字体撑持不良):
宋体楷体黑体默许
中国人看到东方字体名大概会对照利诱,但就好像进修英文时所碰到的英文名一样,一些经常使用的字体名的体现和拼写必需要把握,关于中文进修者,今朝只保举把握以下几种英笔墨体:
ArialVerdanaGeorgiaCourier
这几种字体的一样平常用法以下:

• Arial:是今朝最为盛行的注释字体,几近一切的web2.0站点(如Google,Flickr,Wikipedia等)都利用arial字体作为注释乃至是题目的字体.特性是亲和力对照强,浏览起来不容易委靡;
  
• Verdana:是1996年微软约请顶级字体计划师花了两年工夫出品的字体,收费供应给windows用户.和arial用法对照类似,是今朝利用最为普遍的字体,几近能在任何中央看到;
  
• Georgia:这个后起之秀,因为其花梢的衬线(后申明),被良多网页计划师所喜爱,渐渐代替了TimesNewRoman在serif字组中的中心位置.本网站的题目也利用的是Georgia字体.
  
• Courier:从属于Monospace字组,因为其字母的宽度均一,一样平常用于对单词长度把持对照严厉的中央,好比网页导航条和报纸(印刷品).
  

英文有那末多字体,但都从属于serif,sans-serif和monospace三种字组.因为英文自己的特性,分歧于方块字(汉字),英笔墨母的宽度是不相称的,这就给出书业如报纸的排版事情增添了难度,因而创造了等宽字体(monospace).


字组及字体干系图以下:

登录/注册后可看大图

如今有需要注释一下serif和sans-serif的区分.“sans”来历于古法语,意为”without”,即”非”.而”serif”来历于荷兰语,译为衬线,指字母的拐角或端点地位的润色线,如图所示:

登录/注册后可看大图

以是非等宽字组又分为有衬线(serif)和无衬线(sans-serif)两组.verdana和arial均属于无衬线组.
关于字组和字体的选择,实际上是很本性化的,读者能够依据本人的喜欢,天真搭配,但总的准绳是不要拔取一些稀有的字体,假如会见者没有这类字体的话,就会和你的计划企图相悖.
例:如font-family的属性值以下:
font-family:verdana,arial,sans-serif;
扫瞄器起首在字体库中寻觅verdana字体,假如没找到则寻觅arial字体,假如还没找到就在sans-serif字组中的选择其他字体显现.
2.font-style:包含normal,italic和oblique三个属性值.css代码以下:
font-stye:normal;
font-stye:italic;
font-stye:oblique;
体现以下:
normalitalicoblique
能够看到italic和oblique都是向右倾斜的笔墨,但区分在于Italic是指斜体字，而Oblique是倾斜的笔墨，关于没有斜体的字体应当利用Oblique属性值来完成倾斜的笔墨效果。次要用于一些必要区分于注释的备注申明笔墨.
3.font-variant:包含normal和small-caps两种属性值.非英文用户大概很罕用到这个属性.small-caps是指小型年夜写字母,是介于年夜写字母和小写字母之间的一种字母体现情势,css代码以下:
font-variant:normal;
font-variant:small-caps;
体现以下:
NORMALsmall-caps
能够看到小型年夜写字母比一般的年夜写字母要矮一截,必要注重的是,要完成此效果,html中的中必需利用小写字母,在css顶用font-variant:small-caps;就可以主动转化为小型年夜写,不然就会显现为一般的年夜写字母.
4.font-weight:包含normal和bold两种属性值.blod属性值即指粗体.css代码以下:
font-weight:normal;
font-weight:bold;
体现以下:
normalbold
5.font-size:用于把持字体巨细的属性,属性值的单元次要有px,pt,cm,mm,%,em,个中pt,cm,mm为字体相对巨细单元,px,%,em为绝对巨细单元.这两种单元各有裨益,相对巨细单元的上风在于,不论用户的扫瞄器设置怎样,均能坚持原本的计划款式,但关于一些有浏览停滞,习气于年夜字体的用户就显得有点古板.而绝对巨细单元固然在可读性上有上风,但网页界面庞易被增年夜的字体所冲散.
在这里,限于篇幅就不再注释每一个单元的区分和用法.能够参考Lengthunits.
这里只是夸大一点,假如你的网页次要是在电脑屏幕上显现,首推px作为你的首选单元,由于px可以准确地暗示元素在屏幕中的地位和巨细.假如你的网页次要用于打印,则保举利用相对单元pt(1pt=1/72英寸)来作为首选单元,这是由于不论屏幕的分辩率是几,打印出来的巨细都是一样的.
Summary:如今总结一下font的属性,假如想让”FontProperty”体现为32px,行高为150%,粗体,斜体,字体为Georgia,字组为serif,代码以下:
font-size:32px;
line-height:1.5;
font-style:italic;
font-weight:bold;
font-family:Georgia,serif;
简写为:
font:italicbold32px/1.5Georgia,serif;
体现以下:
FontProperty


背景(background)
包含background-color,background-image,background-repeat,background-attachment,background-position五种属性.
1.background-color:指背景色彩,其属性值有三种情势,十六进制,色彩称号,rgb值.今朝最为经常使用的是”#+十六进制数”.例:本站显现代码的段落背景为#EEEEEE的灰色,代码及示比方下:
background-color:#EEEEEE;
2.background-image:指背景图片,其属性值为背景图片的地点,代码和格局以下:
background-image:url(http://jorux.com/back.png);
例:本站首页的第一篇文章题目前有个”NEW”图标,检察css可见以下代码:
#homeheadlinea{
color:#444;
padding:30px68px040px;
margin:0;
background:url(images/new.png)no-repeat016px;
}
3.background-repeat:指背景图片的反复与否和反复体例,有no-repeat,repeat,repeat-x,repeat-y四种属性值.

• no-repeat:即不管背景图片的巨细,只显现单个背景图片,如首页的第一篇文章题目前的”NEW”图标,代码如上所示;
  
• repeat:指背景图片横向和纵向反复一连显现;
  
• repeat-x:指背景图片横向反复一连显现;
  
• repeat-y指背景图片纵向反复一连显现;例:检察本站css文件,能够看到以下代码:
  body{
  font:normal12px/1.5Georgia,sans-serif;
  text-align:left;
  background:#444url(images/bodybg.jpg)repeat-y;
  }
  

能够看到背景图片bodybg.jpg是纵向反复显现的,并随页面的长度的增添而增添.
4.background-attachment:指背景图片的附着体例,有scroll(默许属性)和fixed两种属性值.scroll指背景图片随页面的转动而转动,而fixed属性值则可以使背景图片流动于扫瞄器的某个地位,不随页面转动而转动.以下例所示,您能够试着转动本页面来看看两图的不同,右边为scroll,右侧为fixed(请用IE寓目以下演示):
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

5.background-position:指背景图片的地位属性.属性值能够有百分比,地位称号和详细数值三种情势,以下图所示(蓝色部分暗示间隔右边框的数据,玄色部分暗示间隔上边框的数据):

登录/注册后可看大图

能够看到,要使背景图片位于左上角有三种办法,代码以下:
background-position:0%0%;
background-position:topleft;
background-position:00;
实践上,不声明此属性,即默许背景图片为左上角显现.值得注重的是,当用属性值为地位称号时,先写间隔上边框的数据(top),后写间隔右边框的数据(left).而当用百分比或是详细数值暗示时,则反过去写.请读者细心看看上图的蓝色和玄色部分的按次.
不要小视这个属性,在导航条的制造中,这个属性将是完成一些静态变更的关头手腕(将在今后的实例篇中申明).
Summary:如今总结一下background的属性,假如想让某背景图片体现为流动,位于右上角,不反复,背景色彩为#CCC,代码以下:
background-image:url(http://www.blueidea.com/articleimg/2008/07/5986/04.jpg);
background-color:#CCC;
background-attachment:fixed;
background-position:topright;
background-repeat:no-repeat;
简写为:
background:url(http://www.blueidea.com/articleimg/2008/07/5986/04.jpg)#CCCfixedno-repeattopright;
体现以下(请用IE寓目以下演示):
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX本篇注释完.
原觉得能够多写几个属性的,没想到字体和背景两个属性就写了这么长,在膂力和精力上都已到了极限,暂写到这,其他的还看下回更新.

搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。

Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.