If you love CSS.doc

If you love CSSDesigned by Jorux:我想把本篇作为CSS基础教程的序曲，从今天开始翻译和整理我从设计网页以来所学到的CSS基础知识。本教程会分成N个部分，单独发表，其间可能会插入几篇与教程无关的文章。没有具体的教程发表进度,推荐关注本教程的朋友订阅本站Feed。教程内容的30%-50%为Jorux原创，其余翻译部分均为意译,可能来源于多个国外站点，并在教程结束时公布参考原文地址。曾翻译过一篇CSS教程:十步学会用CSS建站，文章声称能在十步学会建站，虽说夸张点，但确实能学到一些东西，就像现代社会流行速成一样，它只是一个CSS快餐，要达到自由运用CSS，没个百八十步恐怕有点悬。需要什么软件学习CSS?一个文本编辑器和Firefox1.文本编辑器：这里所指的是诸如windows自带的记事本以及Editplus等改进版记事本软件。不推荐Dreamweaver, Frontpage等具有图形化可视操作，不直接编辑CSS源代码的软件。这类软件确实能在学习CSS的初期帮助你迅速达成你的愿望，但是不久你就会发现这些被Dreamweaver所自动生成的CSS代码冗长繁琐，CSS文件体积增大。一旦离开这些软件你的头脑就会像一张白纸，基本的CSS语法都想不起来。本人曾走过弯路，望初学CSS的朋友借鉴。本人使用Editplus编写网页代码，其属于加强版的记事本，具有多步撤销，语法加亮，全部替换等功能，安装后无需设置，推荐把屏幕字体改为14号Verdana，方便阅读编写。2.Firefox：本人绝非Firefox的Fan，它也不是盏省油的灯(占用内存多)。但作为一个免费软件，再配上适当的插件，是网页设计者的必备工具，如何使用和选择插件体现设计者专业素质的水平。推荐安装以下插件：必装插件: IE Tab：调试网页在IE内核浏览器表现的优秀插件，不管你喜不喜欢，请安装！ 强烈推荐安装的插件：Web Developer：其功能之强大，以至于我还没用全它的功能，但是其直接查看网页CSS代码功能，页面信息的显示，以及验证CSS和Html的功能非常实用。ColorZilla：方便提取网页中任何元素的颜色。Html Validator：安装这个插件后会在浏览器右下角生成一个图标，绿色对号表示当前网页的Html通过验证，红色叉号表示Html有错误，黄色叹号表示Html存在无法通过验证的警告语句。双击图标就会高亮显示该网页存在的不能通过验证的语句数目、位置以及修改建议。作为设计者，最好养成随时观察这个图标的习惯，你就会发现网上声称能通过验证的网页，几乎都是错误或是警告。本网站除极个别网页外均通过验证。FireBug：安装这个插件后也会在浏览器右下角生成一个图标，绿色对号表示当前网页的Javascript通过验证，并能对错误的Javascript代码debug。我们暂时并不需要这个功能。需要用到的功能是其Inspector，你需要通过定制工具栏，把Inspector的眼镜图标拖入工具栏。点击Inspector图标后，将鼠标移到网页任意位置，你就能在靠下的窗口看到网页Html文件的相应源代码，在网页调试时非常有用。装这么多插件是不是有点累，我光写都有点吃不消，所以休息一下，在下一篇文章进入CSS教程的正文部分。支持本教程或是有任何疑问，请留言。感谢您对本教程的支持！属性篇(1)If you love CSS 注:由于这段时间被一些琐碎的事搅得不得安宁,直到今天才发布If you love CSS的第一篇正文,再次向关注本站的朋友以及访客表示歉意,如在阅读过程中发现错误,请留言, Jorux会及时更正.版权声明:由于在编辑和整理本教程中发现自己原创的东西更能激发我的写作兴趣,在此声明本教程不再是译文,而是主要以J为素材的原创文章,所使用图片也均为Jorux原创,如有意转载,请留言(正确填写您的Email地址)或者直接电邮J.本教程主要介绍CSS的基础知识,将逐个讲解CSS的各个属性,过程可能比较枯燥,但会尽力多举例说明.CSS语法:例:用Web Developer的CSS查看功能查看J首页的CSS文件,可以看到以下代码:body font: normal 12px/1.5 Georgia, sans-serif;text-align:left;background:#444 url(images/bodybg.jpg) repeat-y;是不是有点复杂,现在我们没有必要细究以上代码,先简化以上代码为:body text-align:left;这便是基本CSS语法结构:引用CSS:CSS文件的作用就在于控制Html文件的表现,而从Html文件中引用CSS文件的方法大致有三种:外联(external),嵌入(in-line)和内联(internal),这里限于篇幅以及应用频度,只介绍外联方法.例:同样打开J的主页,点击Firefox工具栏查看页面源代码,在可以看到以下代码:herf后的地址即为本网站CSS的地址,这里应用的地址为绝对地址,而在本地调试时一般用相对地址,将在后文说明.建立本地调试的文件结构:如下图所示建立名为local的文件夹,以及其子文件夹style和image,分别用于存放CSS文件和图片文件,在local文件夹的根目录下创建Html文件index.htm,在style文件夹的根目录下创建CSS文件style.CSS:用文本编辑器打开index.htm,写入以下代码:My first homepageMy first homepage然后打开style.CSS,输入以下代码:body background-color: #333;h1 color: #F00;background-color: #FFF; 用Firefox打开index.htm,如果你看到Example1的效果,那么恭喜你,一个基本的本地调试环境建立了.下面开始逐个介绍CSS属性:颜色(color):CSS能够控制的颜色主要包括文本颜色,边框颜色等,对于背景颜色和边框颜色会在以后说明,在这主要解释文本颜色的表现.在如上所示style.CSS的选择器h1中,文本颜色的属性是用color表示的,h1的颜色的属性值为#FF0000(一个#加上十六进制值),简写为#F00. 我们甚至可以用英文单词red表示属性值: color: red; 效果是一样的. 颜色的其他属性值还有RGB值,在CSS中不太常用,这里就不再叙述.例:查看J首页的CSS文件,可以看到以下代码:a color: #545454;text-decoration:none;a:hover color: #919191; 在选择器a中,文本颜色的属性值为#545454, 即存在超级链接的文本颜色为#545454; 而a:hover为伪类选择器(表现依赖于浏览器的状态), 它的属性值为#919191, 即鼠标在超级链接上悬停时文本的颜色. 你可以用ColorZilla验证本站首页的标题文字颜色.文本(text):CSS控制的文本属性主要包括以下四个: text-indent,text-align, text-decoration, text-transform;1. text-align:属性text-align指文本的对齐方式,其有向左,向右,居中对齐以及自动适应四种对齐方式:text-align: left;text-align: right;text-align: center;text-align: justify;例:查看J首页的CSS文件,可以看到以下代码:body font: normal 12px/1.5 Georgia, sans-serif;text-align:left;background:#444 url(images/bodybg.jpg) repeat-y;在选择器body中声明属性text-align为left,可以避免在其他需要文本左对齐的选择器中重复声明. 2. text-indent:属性text-indent指段落首行的缩进, 既然是段落的属性,一般用于选择器p(段落)中,代码如下:p text-indent: 26px; 本站的段落缩进为0, 所以在CSS文件中能找到text-indent: 0;,不声明即此属性,即默认为0.3. text-decoration:属性text-decoration为文本修饰, 其包括下划线, 上划线, 中划线和无四种修饰方式, 代码如下:text-decoration: none;text-decoration: underline;text-decoration: overline;text-decoration: line-through;在这就不例举具体的下划线, 上划线, 中划线的例子, 相信大家很容易想像的到它的效果. 需要强调的是属性值none, 如果你查看本站CSS的话, 可以看到所有属性text-decoration的值均为none. 这是因为目前的浏览器对于选择器a(即超级链接), 默认text-decoration属性值为underline. 这就会使很多你不希望出现的下划线大量涌现, 而且由于无法约束下划线的粗细, 以及浏览器之间的差异, 甚至会出现各种粗细, 不同浏览器显示不同的下划线.例:你可以看到本站文章内的超级链接的文本修饰是点划线, 这个效果不是属性text-decoration所能实现的, 其需要下边框属性的支持, 将会在边框属性时说明. 实现方法如下(请查看本站CSS代码):1.在全局声明中将选择器a的text-decoration属性值设为none, 代码如下:a color: #545454;text-decoration:none; 2.为使文章正文部分的超级链接显示蓝色点划线的效果,代码如下(读者目前只需了解,目前暂不说明):.post_body acolor:#0061CA;padding:0;border-bottom:1px dotted #0061CA; 4. text-transform: 这个属性可能大家不太熟悉, 因为这个属性是只为英文服务的, 用于转换字母大小写之用. 其包括首字母大写, 大写, 小写和无变化四种属性值, 代码如下:text-transform: capitalize;text-transform: uppercase;text-transform: lowercase;text-transform: none;例:如果你再本站留过言, 而且用的是英文名的话, 你就会发现无论你输入的姓名是有没有将首字母大写, 显示评论者姓名时首字母均被转化为大写, 查看本站CSS代码如下:.comment_author text-transform:capitalize; 本篇正文完p.s. 如果您考虑到以下四种情况, 请留言:1. 让我知道您的想法, 有什么需要改进的, 或者是错误的, Jorux会及时修正并在下一篇文章中改进;2. 哪怕是你想测试以下那个评论者姓名的首字母大写的效果, 请尽管将你的英文名用小写输入;3. 本教程的更新速度应该是一到两个星期, 但文章长短不一, 如果有了您的支持, 本人认为会明显延长单篇文章的篇幅, 明显减少全教程的时间.4. 属性篇(2)If you love CSS 上次主要说明了CSS对于颜色和文本属性的控制, 这次介绍CSS对于字体, 背景等属性的控制.字体(Font):CSS控制的字体属性包括font-family, font-style, font-variant, font-weight, font-size.1.font-family: 由字体名(family-names)和字组名(generic families)两个部分组成.首先来看个实例,例:查看J首页的CSS文件,可以看到以下代码:body font: normal 12px/1.5 Georgia, sans-serif;text-align:left;background:#444 url(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对汉字字体支持不良):宋体 楷体 黑体 默认 中国人看到西方字体名可能会比较迷惑, 但就如同学习英文时所遇到的英文名一样, 一些常用的字体名的表现和拼写必须要掌握, 对于中文学习者, 目前只推荐掌握以下几种英文字体:Arial Verdana GeorgiaCourier这几种字体的一般用法如下: 1. Arial: 是目前最为流行的正文字体, 几乎所有的web2.0站点(如Google, Flickr, Wikipedia等)都使用arial字体作为正文甚至是标题的字体. 特点是亲和力比较强, 阅读起来不易疲劳; 2. Verdana: 是1996年微软邀请顶级字体设计师花了两年时间出品的字体, 免费提供给windows用户. 和arial用法比较相似, 是目前使用最为广泛的字体, 几乎能在任何地方看到; 3. Georgia: 这个后起之秀, 由于其花哨的衬线(后说明), 被很多网页设计师所青睐, 逐渐取代了Times New Roman在serif字组中的核心地位. 本网站的标题也使用的是Georgia字体. 4. 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;表现如下: normal italic oblique 可以看到italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果。主要用于一些需要区别于正文的备注说明文字.3. font-variant: 包括normal和small-caps两种属性值. 非英文用户可能很少用到这个属性. small-caps是指小型大写字母, 是介于大写字母和小写字母之间的一种字母表现形式, CSS代码如下:font-variant: normal;font-variant: small-caps;表现如下:NORMAL small-caps可以看到小型大写字母比正常的大写字母要矮一截, 需要注意的是, 要实现此效果, html中的中必须使用小写字母, 在CSS中用font-variant:small-caps;就能自动转化为小型大写, 否则就会显示为正常的大写字母.4. font-weight: 包括normal和bold两种属性值. blod属性值即指粗体. CSS代码如下:font-weight: normal;font-weight: bold;表现如下:normal bold5. font-size:用于控制字体大小的属性, 属性值的单位主要有px, pt, cm, mm,%, em,其中pt, cm, mm为字体绝对大小单位,px, %, em为相对大小单位.这两种单位各有裨益, 绝对大小单位的优势在于, 不管用户的浏览器设置如何, 均能保持原有的设计样式, 但对于一些有阅读障碍, 习惯于大字体的用户就显得有点死板. 而相对大小单位虽然在可读性上有优势, 但网页界面容易被增大的字体所冲散.在这里, 限于篇幅就不再解释每个单位的区别和用法. 可以参考Length units.这里只是强调一点, 如果你的网页主要是在电脑屏幕上显示, 首推px作为你的首选单位, 因为px能够精确地表示元素在屏幕中的位置和大小. 如果你的网页主要用于打印, 则推荐使用绝对单位pt(1pt=1/72英寸)来作为首选单位, 这是因为不管屏幕的分辨率是多少, 打印出来的大小都是一样的.Summary: 现在总结一下font的属性, 如果想让”Font Property”表现为32px, 行高为150%, 粗体, 斜体, 字体为Georgia, 字组为serif, 代码如下:font-size: 32px;line-height: 1.5;font-style: italic;font-weight: bold;font-family: Georgia, serif;简写为: font: italic bold 32px/1.5 Georgia,serif;表现如下: Font Property背景(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(/back.png);例: 本站首页的第一篇文章标题前有个”NEW”图标, 查看CSS可见如下代码:#homeheadline acolor:#444;padding: 30px 68px 0 40px;margin:0;background:url(images/new.png) no-repeat 0 16px ;3. background-repeat: 指背景图片的重复与否以及重复方式, 有no-repeat, repeat, repeat-x, repeat-y四种属性值.no-repeat: 即无论背景图片的大小, 只显示单个背景图片, 如首页的第一篇文章标题前的”NEW”图标, 代码如上所示;repeat: 指背景图片横向和纵向重复连续显示;repeat-x: 指背景图片横向重复连续显示;repeat-y 指背景图片纵向重复连续显示;例: 查看本站CSS文件,可以看到以下代码:body font: normal 12px/1.5 Georgia, sans-serif;text-align:left;background:#444 url(images/bodybg.jpg) repeat-y;可以看到背景图片bodybg.jpg是纵向重复显示的, 并随页面的长度的增加而增加.4. background-attachment: 指背景图片的附着方式, 有scroll(默认属性)和fixed两种属性值. scroll指背景图片随页面的滚动而滚动, 而fixed属性值则可使背景图片固定于浏览器的某个位置, 不随页面滚动而滚动. 如下例所示, 您可以试着滚动本页面来看看两图的差别, 左边为scroll, 右边为fixed(请用IE观看以下演示):X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X XX X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X5.background-position: 指背景图片的位置属性. 属性值可以有百分比, 位置名称和具体数值三种形式, 如下图所示(蓝色部分表示距离左边框的数据, 黑色部分表示距离上边框的数据):可以看到,要使背景图片位于左上角有三种方法, 代码如下:background-position: 0% 0%;background-position:top left;background-position:0 0;实际上, 不声明此属性, 即默认背景图片为左上角显示. 值得注意的是, 当用属性值为位置名称时, 先写距离上边框的数据(top), 后写距离左边框的数据(left). 而当用百分比或是具体数值表示时, 则反过来写.请读者仔细看看上图的蓝色和黑色部分的顺序.不要小看这个属性, 在导航条的制作中, 这个属性将是实现一些动态变化的关键手段(将在以后的实例篇中说明).Summary: 现在总结一下background的属性, 如果想让某背景图片表现为固定, 位于右上角, 不重复, 背景颜色为#CCC, 代码如下:background-image: url(/86/240223091_dc1dce25a5_m.jpg);background-color: #CCC;background-attachment: fixed;background-position: top right;background-repeat:no-repeat;简写为: background: url(/86/240223091_dc1dce25a5_m.jpg) #CCC fixed no-repeat top right;表现如下(请用IE观看以下演示): X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X本篇正文完.原以为可以多写几个属性的, 没想到字体和背景两个属性就写了这么长, 在体力和精神上都已经到了极限, 暂写到这, 其余的还看下回更新. 属性篇(3)If you love CSS 本篇主要介绍CSS对边框(border)的属性控制和链接(link)的伪类选择器.边框(border): CSS控制的边框属性包括border-width, border-color, border-style. Border之所以让人很困惑主要源于IE5错综复杂的BUG,由于IE5是一个”will soon be dead“的浏览器, 这里只例举一个最为知名的关于border-width的BUG, 让大家更好的理解border的含义, 先看下图:如上图所示, 对象A(白色矩形)周围有蓝色边框B, 可以看出A的实际宽度为ef, 而IE5不这么认为, 它把cd的长度定义为对象A的宽度, 这个bug在边框的宽度小时几乎察觉不到, 但在边框与对象宽度相差不大时显得尤为明显.现在, 结合以上说明, 可以看出border是独立于对象之外, 位于magin与padding之间(后说明), 具有固定宽度, 颜色和样式的区域.1. border-width: 其可有具体数值(如1px, 2px等)或是描述性(thin, medium, thick)的属性值. 由于浏览器及个人设置的不同导致thin, medium, thick这些属性值的表现不一, 不推荐使用. CSS代码如下:border-width: 1px;border-width: 2px;border-width: thin;border-width: medium;border-width: thick;宽度效果如下(注意不同浏览器下的区别):1px2pxthinmediumthick2. border-style: 边框样式包括solid, dashed, dotted, double, groove, ridge, inset, outset等, 代码如下:border-style: solid;border-style: dashed;border-style: dotted;border-style: double;border-style: groove;border-style: ridge;border-style: inset;border-style: outset;样式效果如下(你可能需要Firefox或是Opera才能看到后四种效果):soliddasheddotteddoublegrooveridgeinsetoutset3. border-color: 边框颜色属性和一般颜色属性是一样的, 可以参看属性篇(1).Summary: 以上例举的都是四边相同样式的情况, 其实可以分别设置border-top, border-right, border-bottom, border-left四边的属性, 比方说想要表现一个宽2px, 蓝色(blue), 样式为solid的上下边框, 代码如下:border-top-width: 2px;border-top-color: blue;border-top-style: solid;border-bottom-width: 2px;border-bottom-color: blue;border-bottom-style: solid;简写为:border-top: blue 2px solid;border-bottom: blue 2px solid;表现如下:宽2px, 蓝色, 样式为solid的上下边框以下内容不再属于CSS属性, 但暂时归入属性篇中.链接(link): 在html里用标明链接, 在CSS里用a作为链接的选择器名.CSS的缺点和它的优点一样明显, 其最大的缺陷就在于网页的动态表现不足, 在这一点上和Flash差距尤为突出. 好在CSS还是留了一手, 那就是链接的伪类选择器, 所谓伪类就是指依赖于浏览器或是用户的状态.对于链接来讲, 存在link, hover, visited, active四种状态, 即四种伪类选择器: a:link(存在链接, 但无鼠标动作), a:visited(被点击或访问过), a:hover(鼠标悬停于链接上时的状态), a:active(鼠标点击与释放之间的状态).CSS便是以这几个伪类选择器实现了其为数不多的动态效果. 目前最为常用的就是导航条和按钮的动态显示. 以下用一个动态按钮的实例来说明这四个伪类选择器.1. 首先准备一副图片(button.png),如下图(160px*240px), 其由四幅160px*60px的小图自上而下排列而成.2. 接着需要往你的本地调试文件夹(调试环境的建立方法参考属性(1)中的说明)的index.htm中写入html代码, 如下:3. 在style.CSS中写入以下代码:body background-color: #FFF;#button awidth:160px;height:60px;display:block;background:url(./image/button.png) no-repeat 0 0; #button a:link background-position:0 0;#button a:hover background-position:0 -60px; #button a:active background-position:0 -120px;#button a:visited background-position:0 -180px;可以看到如Example2的效果.4. 代码解释:在index.htm写入如上代码, 目的在于插入一个id名为”button”的盒子(div),且其内含有一个链接.#button awidth:160px;height:60px;display:block;background:url(./image/button.png) no-repeat 0 0; 在CSS文件中写入以上代码, 目的在于控制盒子中链接的表现, 通过名为”#button a”的选择器来实现. 链接的宽高为160px*60px, 背景为图片button.png. 在这强调一下display:block的作用. 由于在html文件中,链接 中没有任何的内容(content)填充, 如果没有声明”display:block”, 那么即使声明了选择器”#button a”的宽高, 浏览器也会因为html文件中没有内容而无法显示链接. 所以”display:block”在这里的作用就在于强制浏览器显示没有内容填充的链接.#button a:link background-position:0 0;用伪类选择器a:link声明链接的背景图片在左上角显示, 即距离左边和顶边分别0, 0. 但由于已经在选择器 “#button a”中声明了图片位置, 此代码可有可无.#button a:hover background-position:0 -60px; #button a:active background-position:0 -120px;#button a:visited background-position:0 -180px;用伪类选择器a:hover声明鼠标悬停时, 背景图片上移60px, 而使排在第二位的绿色小图片显示出来;用伪类选择器a:active声明在鼠标点击与释放之间的状态时, 背景图片上移120px, 而使排在第三位的红色小图片显示;用伪类选择器a:visited声明在链接被点击或访问过时, 背景图片上移180px, 而使排在第四位的灰色小图片显示;现在你基本了解了CSS动态按钮的制作过程, 但以上CSS代码还存在一个严重的缺陷, 相信你会很快发现问题所在这个按钮居然是一个”一次性按钮“, 也就是说这个按钮在点击第一次后, 就一直显示那个灰色小图片, 你能想出解决方法吗? 请在留言中指出.答案会在下一篇文章中说明! 下篇将会涉及CSS的核心内容盒子模型, margin和padding属性.(正文完)If you love CSS 已经有四篇文章发表了, 更新速度比较慢, 原因有三: 1, CSS教程内容本身的难度在加大, 又奢望在说明方法方式上比前人有所进步;2, 接手一个web design的project, 到了最后调试阶段, 那位美国大哥说了声”perfect”, 就声称太忙就不再回复mail, 使我认识到网络之不可靠, 绝不只发生在别人身上. 严重打击我的网络热情; 3, 毕竟我还不是个专业网虫, 现实生活中, 还是有那么多我所关心的, 不得不干的事, 仍旧未完成.即使每天上网时间很短, 但我依然努力挤出时间, 在某天集中精力完成某篇文章, 感谢那些订阅本网站FEED的朋友(目前每天有20个左右的订阅流量). 更要鸣谢那些在本站留言, 纠正错误, 提出建议的朋友, 如果没有你们, 可能这个教程早就 属性篇(4)If you love CSS 本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用CSS布局的关键.注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写CSS代码时, 必须使用margin和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念.如果有一点Html基础的话, 就应该了解一些基本元素(Element), 如p, h1h6, br, div, li, ul, img等. 如果将这些元素细分, 又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素. 1. Block-level element: 指能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔. 常用的块级元素包括: p, h1h6, div, ul等;2. Inline element: 指依附其他块级元素存在, 紧接于被联元素之间显示, 而不换行. 常用的内联元素包括: img, span, li, br等;3. Top-level element: 包括html, body, frameset, 表现如Block-level element, 属于高级块级元素.块级元素是构成一个html的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明.Box Model: 任意一个块级元素均由content(内容), padding, background(包括背景颜色和图片), border(边框), margin五个部分组成. 立体图如下(Fig. 1):该立体图引自:http:/www.hicksdesign.co.uk/ (Underthe Creative Commons License)平面图如下(Fig. 2):根据以上两图, 相信大家对于Box model会有个直观的认识.以下说明margin和padding属性:1. Margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的, 对于Fig. 2所示的上右下左margin值均为40px, 因此代码为:margin-top: 40px;margin-right: 40px;margin-bottom: 40px;margin-left: 40px;根据上, 右, 下, 左的顺时针规则, 简写为margin: 40px 40px 40px 40px;为便于记忆, 请参考下图:当上下, 左右margin值分别一致, 可简写为:margin: 40px 40px;前一个40px代表上下margin值, 后一个40px代表左右margin值. 当上下左右margin值均一致, 可简写为:margin: 40px;2. Padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离, 其代码, 简写请参考margin属性的写法.至此, 我们已经基本了解margin和padding属性的基本用法. 但是, 在实际应用中, 却总是发生一些让你琢磨不透的事, 而它们又或多或少的与margin有关. 注: 当你想让两个元素的content在垂直方向(vertically)分隔时, 既可以选择padding-top/bottom, 也可以选择margin-top/bottom, 再此Jorux建议你尽量使用padding-top/bottom来达到你的目的, 这是因为CSS中存在Collapsing margins(折叠的margins)的现象.Collapsing margins: margins折叠现象只存在于临近或有从属关系的元素, 垂直方向