If you love css..
我想把本篇作为css基础教程的序曲,从今天开始翻译和整理我从设计网页以来所学到的css基础知识。本教程会分成N个部分,单独发表,其间可能会插入几篇与教程无关的文章。没有具体的教程发表进度,推荐关注本教程的朋友订阅本站Feed。教程内容的30%-50%为Jorux原创,其余翻译部分均为意译,可能来源于多个国外站点,并在教程结束时公布参考原文地址。
曾翻译过一篇css教程:十步学会用css建站,文章声称能在十步学会建站,虽说夸张点,但确实能学到一些东西,就像现代社会流行速成一样,它只是一个css快餐,要达到自由运用css,没个百八十步恐怕有点悬。
需要什么软件学习css?
一个文本编辑器和Firefox
1.文本编辑器:这里所指的是诸如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…》的第一篇正文,再次向关注本站的朋友以及访客表示歉意,如在阅读过程中发现错误,请留言, Jorux会及时更正.
版权声明:由于在编辑和整理本教程中发现自己原创的东西更能激发我的写作兴趣,在此声明本教程不再是译文,而是主要以Jorux.com为素材的原创文章,所使用图片也均为Jorux原创,如有意转载,请留言(正确填写您的Email地址)或者直接电邮Joe7419@gmail.com.
本教程主要介绍css的基础知识,将逐个讲解css的各个属性,过程可能比较枯燥,但会尽力多举例说明.
css语法:例:用Web Developer的css查看功能查看Jorux.com首页的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),这里限于篇幅以及应用频度,只介绍外联方法.
例:同样打开Jorux.com的主页,点击Firefox工具栏–>查看–>页面源代码,在<head></head>可以看到以下代码:
<link rel="stylesheet" href="http://jorux.com/wp-content/themes/j_notebook/style.css" type="text/css" media="screen" />
herf后的地址即为本网站css的地址,这里应用的地址为绝对地址,而在本地调试时一般用相对地址,将在后文说明.
建立本地调试的文件结构:如下图所示建立名为local的文件夹,以及其子文件夹style和image,分别用于存放css文件和图片文件,在local文件夹的根目录下创建Html文件index.htm,在style文件夹的根目录下创建css文件style.css:
用文本编辑器打开index.htm,写入以下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My first homepage</title>
<link rel="stylesheet" href="style/style.css" media="screen" /></head>
<body>
<h1>My first homepage</h1>
</body>
</html>
然后打开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中不太常用,这里就不再叙述.
例:查看Jorux.com首页的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;
例:查看Jorux.com首页的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 a{
color:#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)
上次主要说明了css对于颜色和文本属性的控制, 这次介绍css对于字体, 背景等属性的控制.
字体(Font):css控制的字体属性包括font-family, font-style, font-variant, font-weight, font-size.
1.font-family: 由字体名(family-names)和字组名(generic families)两个部分组成.首先来看个实例,例:查看Jorux.com首页的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 Georgia Courier
这几种字体的一般用法如下:
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 bold
5. 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(http://jorux.com/back.png);
例: 本站首页的第一篇文章标题前有个”NEW”图标, 查看css可见如下代码:
#homeheadline a{
color:#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观看以下演示):
5.background-position: 指背景图片的位置属性. 属性值可以有百分比, 位置名称和具体数值三种形式, 如下图所示(蓝色部分表示距离左边框的数据, 黑色部分表示距离上边框的数据):
可以看到, 要使背景图片位于左上角有三种方法, 代码如下:
background-position: 0% 0%;
background-position: top left;
background-position: 0 0;
实际上, 不声明此属性, 即默认背景图片为左上角显示. 值得注意的是, 当用属性值为位置名称时, 先写距离上边框的数据(top), 后写距离左边框的数据(left). 而当用百分比或是具体数值表示时, 则反过来写.请读者仔细看看上图的蓝色和黑色部分的顺序.
不要小看这个属性, 在导航条的制作中, 这个属性将是实现一些动态变化的关键手段(将在以后的实例篇中说明).
Summary: 现在总结一下background的属性, 如果想让某背景图片表现为固定, 位于右上角, 不重复, 背景颜色为#CCC, 代码如下:
background-image: url(http://static.flickr.com/86/240223091_dc1dce25a5_m.jpg);
background-color: #CCC;
background-attachment: fixed;
background-position: top right;
background-repeat: no-repeat;
简写为:
background: url(http://static.flickr.com/86/240223091_dc1dce25a5_m.jpg) #CCC fixed no-repeat top right;
表现如下(请用IE观看以下演示):
本篇正文完.
原以为可以多写几个属性的, 没想到字体和背景两个属性就写了这么长, 在体力和精神上都已经到了极限, 暂写到这, 其余的还看下回更新.
属性篇 (3)
本篇主要介绍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;
宽度效果如下(注意不同浏览器下的区别):
1px 2px thin medium thick
2. 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才能看到后四种效果):
solid
dashed
dotted
double
groove
ridge
inset
outset
3. 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里用<a></a>标明链接, 在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代码, 如下:
<div id=”button”><a href=”#”></a></div>
3. 在style.css中写入以下代码:
body {background-color: #FFF;}
#button a{
width: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. 代码解释:
<div id=”button”><a href=”#”></a></div>
在index.htm写入如上代码, 目的在于插入一个id名为”button”的盒子(div),且其内含有一个链接<a href=”#”></a>.
#button a{
width:160px;
height:60px;
display:block;
background:url(../image/button.png) no-repeat 0 0;
}
在css文件中写入以上代码, 目的在于控制盒子中链接的表现, 通过名为”#button a”的选择器来实现. 链接的宽高为160px*60px, 背景为图片button.png.
在这强调一下display:block的作用. 由于在html文件中,链接<a href=”#”> </a>中没有任何的内容(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)
本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键.
注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念.
如果有一点Html基础的话, 就应该了解一些基本元素(Element), 如p, h1~h6, br, div, li, ul, img等. 如果将这些元素细分, 又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素.
1. Block-level element: 指能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔. 常用的块级元素包括: p, h1~h6, 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/ (Under the 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折叠现象只存在于临近或有从属关系的元素, 垂直方向的margin中. 文字说明可能让人费解, 下面用一个例子说明margin-collapsing现象.
例: 在html文件的<body></body>之间写入如下代码:
<div id=”ID1″>
<h1 id=”ID2″>Margins of ID1 and ID2 collapse vertically.<br/>元素ID1与ID2的margins在垂直方向折叠.</h1>
</div>
在与其外联的css文件中写入:
* {
padding:0;
margin:0;
}
#ID1 {
background-color: #333;
color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
}
#ID2 {
font: normal 14px/1.5 Verdana, sans-serif;
margin-top: 30px;
margin-bottom: 30px;
border: 1px solid #F00;
}
代码解释:
1. 在html写入的代码表示, 在html中插入id分别为ID1和ID2的两个块级元素div, h1;
2. *{padding:0; margin:0;}: 使浏览器默认的元素padding和margin值均归零;
3. #ID1{…}: 使id为ID1的元素div的背景颜色为#333, 字体颜色为#FFF, margin-top/bottom为10px;
4. #ID2{…}: 使id为ID2的元素h1的字体大小为14px, verdana字体, 行高为字体高的150%, 正常粗细. margin-top/bottom为30px, 边框为1px宽, 红色实线.
依据以上解释, 我们应该得到如下效果(Fig. 3):
即ID1的margin-top/bottom=ab=ef=10px;
ID2的margin-top/bottom=bc=de=30px;
但用浏览器打开html文件, 却得到Example4的效果, 如下图(Fig. 4):
即ab=cd=30px, ID1的margin-top/bottom=10px被折叠了, 而且ID1应有的margin黑色背景也一同被折叠消失了.
为什么会折叠: 造成以上现象的原因是, 我们在css中并没有声明id为ID1的元素div的height(高), 因此它的高便被设为auto(自动)了. 一旦其值被设为auto, 那么浏览器就会认为它的高为子元素ID2的border-top到border-bottom之间的距离, 即Fig. 4中bc的长度, 所以子元素ID2的margin-top/bottom(30px)就伸出到了父元素ID1之外, 出现了Fig. 4中ab与cd之间的空白区域. 因此父元素ID1的margin-top/bottom因子元素的”红杏出墙”而被折叠消失了.
如何解决折叠问题: 可能大家最初想到的办法就是根据折叠发生的原因—auto, 来解决问题. 但是, 在实际操作中, 某些元素如div, h1, p等, 我们是不可能预先知道它的高是多少的, 因此在css文件中是不能常规通过声明元素的高来解决折叠问题.
我们需要在css文件中加入如下代码(红色部分):
#ID1 {
background-color: #333;
color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
padding-top:1px;
padding-bottom:1px;
}
或是:
#ID1 {
background-color: #333;
color: #FFF;
margin-top: 10px;
margin-bottom: 10px;
border-top:1px solid #333;
border-bottom:1px solid #333;
}
通过增加以上代码, 便可使浏览器重新计算ID1的高, 使其为子元素ID2的margin-top/bottom外缘(outer top/bottom)之间的距离, 即Fig. 3中be的距离.
看得是不是有点迷糊, 折叠问题难度比较大, 它也曾是困扰我多时的难题, 加之本人的叙述说明能力不足, 更加大了大家学习的难度, 在此Jorux深表歉意.
为检验大家学习折叠问题的效果, 给读者留下一个问题:
html文件代码为(请将css地址改为你的css文件存放地址):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<title>My first homepage</title>
<link rel=”stylesheet” href=”….css” type=”text/css” media=”screen” />
</head>
<body>
<h1 id=”title”>
A title</h1>
<div id=”content”>
Some text here </div>
</body>
</html>
外联css文件代码为:
*{
padding:0;
margin:0;
}
body {
font: 14px/1.5 Georgia, serif;
}
h1#title {
float: right;
width: 50%;
font: 14px/1.5 Georgia, serif;
margin-top: 0;
background-color: #F00;
color: #fff;
}
div#content {
background-color: #333;
color: #FFF;
margin-top: 30px;
border: 1px solid #333;
}
请将此代码存为css文件, 并与以上html文件关联, 得到如Example5的效果, 请分别用IE与Firefox浏览, 效果不尽相同, IE下的效果是我们想要的, 但用Firefox浏览却发现元素h1嵌入到元素div中, 你能解决这个Firefox不能正常显示的问题吗? 如果可以, 能和刚刚学过的折叠现象联系起来吗? 请在留言给出你的答案! (Jorux的解释会在留言中或是下篇文章中给出) [END]
注: 该问题有一定难度, 请读者量力而行!
至此, 《If you love css …》的属性篇全部结束, 下篇将进入《布局篇》.
本站更新速度很慢, 却起到了督促大家订阅Feed的作用, 订阅流量首次突破了40. 本人尤其不喜欢来自搜索引擎的流量, 那些visitors基本属于走马观花和掠夺类; 而特别关注来自Feed和大家收藏夹的流量, 你们才是本网站得以维继的保障和动力.
布局篇 (1)
从本篇开始讲述如何用css实现网页的布局,即如何用css控制网页内各个元素的显示位置。
如果你是一个初学者,很可能觉得做一个网页的第一步就是布局。其实不然,css网页的设计过程可以参考分为以下几步:
平面设计—>页面切割—>布局—>细节控制
1. 平面设计是一个网页的精髓所在,读者直接面对的界面,在本站以后的文章中会涉及此方面内容。也许你会认为在脑子里形成一个网站的大概印象就可以了,那么这种想法直接就给你贴上业余的标签。推荐工具:Photoshop;
2. 页面切割其实可以划分到布局里,因为你的页面切割方式直接影响了布局方式,也体现了你是属于表格布局阵营还是css布局阵营。它是布局(前)的关键步骤。将在本章重点讲述。推荐工具:Photoshop;
3. 如果把布局说简单点,就先得把你的网页简单化。简单到把你的网站分为header,content,sidebar,footer四个部分。
4. 细节控制,将header,content,sidebar,footer的表现细节化。
本章将针对页面切割讲述一些Jorux的私人观点与技术。
首先,我们要有一个被切割的对象,这里以Jorux.com的原始photoshop平面设计图为例。如下,点击看大图(Fig.01):
如果使用表格布局的话,你可能就想到在photoshop里把页面切割为无数个固定宽高的格子。但用css布局的话,你首先要明确的以下几点是:
1. 你是要横着切,还是要竖着切;
2. 第一次切割,只需要把网页中的背景图片切割出来(因为背景图片是在css里声明的);
3. 切的的图片要尽量小,然后让css去做更多的事情;
4. 设计比较复杂的部分,可以不分割,从而减少css编码的难度;
5. 读者应该根据自己的能力,找出哪些效果css可以轻松实现,而哪些效果用图片更加简单而且size不大,仔细在3.4之间权衡利弊;
现在我们来看Fig.01, 最靠上的部分是个黑色的尺子,遮住了“Jorux记事本”,更遭的是它居然还有黑色的投影。等到要切割的时候,我才后悔当初怎么能设计得如此复杂。但没关系,一切都会好起来的。现在跟着来重温我的切割思路:
1. 整个网页背景色大家应该很清楚,就是深灰色#444,这无需图片,在css里的body选择器里声明就好;
2. 这一步是最关键的一步,请读者仔细体会。对于css布局的网页,Jorux建议你首先给你的原始平面设计来两个横刀(红色),接着就来个竖刀(蓝色)。实现如下效果(点击看大图Fig.02):
一定要先横再竖,即先把你的网页分为top,mid,bottom三个部分,然后再把mid分为content和sidebar两个部分。对于单栏样式,只需要两横刀,而对于三栏样式,可能就需要两横两竖刀。
这样你就得到header,content,sidebar,footer四个部分。现在来分析这四个部分的背景图片需要如何切割。
3. header部分的图片非常复杂,但要把那把尺子单独分离出来几乎是不可能的,而且是没有必要的。因为我们还需用这把尺子实现回首页的超级链接,因此它只能是在html文件中<img/>的图片,而非背景,为了减少css编码难度,我们可以把有投影的圆角也和尺子一起切下来以备用,如图(Fig.03):
那么剩下的稍淡的灰色,就是所需要header的背景,我们只需来两竖刀(宽度在4-6px左右为宜),得到下图(Fig.04):
相信大家知道如何在css里用repeat-x来实现header的背景效果;
4. 接着就是content的背景,很容易看出就是那个带投影的白色背景。马上来上两横刀,高度同样在4-6px为宜,如下图(Fig.05),在css里用repeat-y就能实现content背景;
5. 还好,在本设计中sidebar无背景,直接继承body的灰色背景就好;
6. footer背景比较简单,就是两个圆角而已,我为了图方便,把那个logo也切了下来,如下(Fig.06):
这样我们就完成了第一次切割,并且把一切涉及布局的背景图片切了下来。接着就是如何用css布局了,我们的目标是实现以下效果图(Fig.07):
那么现在就开始编写html代码。既然我们有了一清晰的布局效果图,编写html代码应该是很简单的一件事情。但是越是简单的事,人们忽略的东西就越多。以下Jorux的观点请一定仔细考量:
***对于DIV的使用,请一定从大到小,把那些能在一起的元素划分到一个DIV,然后再在此DIV中继续划分小DIV。所以为实现(Fig.07)的效果图,需要做以下几步:
1. 我们首先把header,content,sidebar,footer归为一个DIV,ID=“AllWrap”;用其实现向左浮动;
2. 接着把header作为一个DIV,ID=“Header”;
3. 把content和sidebar划分在一个DIV,ID=“MidWrap”;然后在其内继续划分为两个DIV,ID分别为Content和Sidebar;
4. 最后把footer作为一个DIV,ID=“Footer”;
最终得到Html代码为:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>My layout</TITLE>
</HEAD>
<BODY>
<div id=”AllWrap”>
<div id=”Header”>Header</div>
<div id=”MidWrap”>
<div id=”Content”>Content</div>
<div id=”Sidebar”>Sidebar</div>
</div>
<div id=”Footer”>Footer</div>
</div>
</BODY>
</HTML>
给读者留一个问题,请有能力的朋友在留言中给出实现效果图样式的css代码。有如下要求:
1. 向左浮动;
2. AllWrap宽为760px;Content宽为560px,高400px;Sidebar宽为200px,高400px;Footer高为80px,宽760px;
2. 在800×600,1024×768,或是宽屏显示器都能正常显示;
3. 在IE6/7, Opera, Firefox均能显示正常;
本篇正文完(答案将在留言中讨论,下篇将讲述如何用css实现最终布局与背景显示)
以上内容涉及某些人的商业利益,出于某些原因大家都不善于把那些能转化为利益的内容泄露出来,于是那些教程总是让人感到不得其所。
我的一个客户曾跟我说在他们的领域(PR),大家不会免费把任何有价值的东西告诉客户,或是大众。其实在任何领域都是一样的,大部分人宁愿让他的知识在脑中腐朽,也不会透露出半点来。
我知道的东西不多,但碰巧正是我的读者所渴求的。所以,我决定把这些对于我最有价值的知识写出来,即使你们当中会有一些成为我竞争的对手。换一个角度,如果能成为合作伙伴,那是最好不过了。如果本教程没有让你的失望,还请继续支持。
致歉:要对我的读者说声抱歉,这篇教程整整晚了10天。如果一两个星期更新不了一篇post,就有放那80个Readers鸽子的感觉,用一部分乖学生的话讲就是和逃了一整天课一样,颇感沉重。推迟的一个重要原因是因为我在:
Moving to Ubuntu:
1. Ubuntu是一个让我割舍不下的免费系统,自从发现了hacked的iso免安装方法后,它的优势是如此明显:免费,无盗版,免安装,能读取/写入windows分区的文件,无需分区格式化,1分钟重装,没安驱动就识别了我的ASUS laptop上除modem以外的所有硬件。
2. 它有一个优秀的替代Editplus的编程工具–Bluefish,我管它叫胖嘴蓝鱼。编代码时有条胖鱼陪着,气氛能缓和很多。
3. 老实说Ubuntu是个严重依赖网络的系统,如果你的上网条件不佳,建议不要尝试。但一旦上了网,它就不得了了,以下这个信息就很Cool:
4. Firefox与其说是个浏览器,还不如说是个软件库,FTP上传,离线写博,Gmail硬盘,截屏,取色,Debug,网页收藏,多线程下载,Feed阅读器(Sage),屏幕取词翻译,Gmail邮件提醒;
5. Ubuntu+Firefox+Bluefish+Mplayer+宽带=实现了像我这种不玩游戏,不聊天,以design/coding为乐趣的,无聊80后的理性与感性需要。
免费Paypal小额转账服务:
更新变慢的另一个原因就是因为要完成几个projects。还好,北美人的信誉不错,网络诈骗还没有发生在我的身上,因此收到一些paypal美金。网上订购一台Dell已经不是梦想了。
如果有想买一些线上产品,如国外空间,域名等,因为没有paypal电子现金而苦恼的朋友,而且你还信任Jorux的话,我可以免费把你的人民币转换成paypal的电子美金(单笔不超过100USD)。
布局篇 (2)
上篇讲的布局(切割)方法相信大家己经掌握,其特点是用固定宽度(fixed-width)来实现页面内各个元素的显示效果,简单实用,易于掌握。本篇将讲述其他相对高级的布局方法。
布局的分类,根据对元素宽度的定义不同,布局可分为以下几种:
1. 固定宽度(fixed-width)布局:
即上一篇所用到的布局方法,其特点是主要DIV的宽度都是用固定大小的px值定义的,其宽度不随浏览器及字体大小的影响。多以px作为宽度单位。
优点:宽度固定,最为保真地表现作者的设计意图;简单易学。
缺点:它是这几种布局方法中最为“自私”的,因为其不考虑访客的浏览设备及设置。比方说,在1024宽的浏览器表现良好的布局,到了1600以上的宽屏浏览器就显得较为局限,其可能缩于屏幕一侧或是中央。
现状:由于其简单易用,且基本满足大部分访客的需求,仍是主要的布局方法,尤其在大陆。
趋势:随着液晶屏幕的发展和普及,成本的下降,市面上宽屏显示器已经开始大量涌现,尤其在西方发达国家,1600的宽屏显示器渐成主流,所以在800或是1024下显示良好的,使用固定宽度的布局方法已经开始被边缘化。
站点举例:网易 蓝色理想
2. 自适应(liquid)布局:
即根据用户浏览器的宽度,自动调整宽度显示的布局方法。以%作为宽度单位。
优点:自动适应各种屏幕宽度,轻松实现满屏显示。
缺点:如果屏幕过宽,而内容有不多的情况下,文字可能拉伸得很长,影响美观。而当屏幕过窄时,内容又会被压缩得很窄,可读性下降。
现状:目前很多的web2.0站点使用%来实现布局,即自适应访客的屏幕宽度。
趋势:就目前的情况看来,没有哪一个屏幕分辨率能够统一整个市场,所以800,1028,1280,1600等各种宽度的浏览器会各据一方,并且只会越来越宽,liquid布局以其良好的自适应能力将成为主要的布局方法。
站点举例:Google Cssliquid
3. 弹性(elastic)布局:
所谓弹性,是针对字体大小而言的,当用户调整字体大小时,宽度会随字体大小的变化而变化。以字体高em作为宽度单位。
优点:满足了视力下降人士的需求,不管用户如何调整字体大小,页面布局都不会被打乱;
缺点:当用户不调整字体大小时,其效果和固定宽度布局的效果其实是一样的,即不会随屏幕的大小的变化而自适应;对于初学者不易掌握。
现状:弹性布局方法是目前较为少用的一种。
趋势:由于其能自动适应字体大小,且在用户不调整字体大小时,有固定的宽度,所以它将是固定宽度布局的不错的替代方法。
站点举例:BlueAnvil Designbit(可能需要代理浏览)
4. 混合布局:
即在一个页面内用两种以上的布局方法。比方说对于内容DIV使用%,而在边框DIV则使用em作为宽度单位。
如何选择适合你的布局方法:
在选择布局方法时,你需要考虑以下两个方面:
1.你的原始设计:
当你的原始设计的宽度固定,或是宽度过大会影响美观的话,Jorux建议你使用弹性布局。
2.用户群的分布:
如果你的用户群数量巨大,也就是说使用各种屏幕分辨率的用户都会达到一个可观的数量,那么你在布局时就应该考虑使用自适应的方法布局。并且在设计时考虑到这点,设计出在各种宽度下拉伸都基本保持美观的作品。
你可以看到,固定宽度的布局方法已经不是Jorux的推荐方法。这也是Jorux写这篇文章的原因,大家应该秉持以用户为中心的设计理念,更好地适应各种客户端及其设置。本站也会很快改写CSS。
怎样使用弹性布局的方法实现布局篇(1)中的效果:
1. 在body中设置font-size:62.5%,使得1em=10px;
2. 避免在任何DIV中声明字体大小,这是为了避免em的值因继承父级元素的字体高而不断变化,而在DIV的子元素中声明字体大小。如在p,h1等选择器中声明。
3. 用em作为宽度和高度单位,例如你想设置DIV宽度为760px,那么你需要将其设置为76em。
那么css代码可以为(仅供参考):
* {
margin: 0;
padding: 0;
}
body{
font-size:62.5%;
background-color:#444;
}
#AllWrap {
float:left;
width: 76em;
background-color: white;
}
#Header {
height: 8em;
background-color: red;
}
#MidWrap {
}
#Content {
float:left;
width:56em;
height:40em;
background-color: white;
}
#Sidebar {
float:left;
width:20em;
height:40em;
background-color: green;
}
#Footer {
clear:both;
width:76em;
height: 8em;
background-color: blue;
}
你可以尝试调整浏览器的字体大小,可以看到各个DIV也随之变化。
如何用%实现自适应的布局方法:
满足以下条件:
1.满屏显示,及Header,(Content+Sidebar),Footer的宽度均自动适应屏幕宽度,并占满整个屏幕宽度;
2.Content占70%屏幕宽,Sidebar占30%,高度均为400px;
3.Header和Footer的高度均为为80px;
4. 实现如下效果效果(点击看大图):
读者能在留言中给出你的答案吗?
精彩在留言,请读者踊跃解答,参与讨论关于布局的任何问题,Jorux将在留言中响应大家的提问或是解答。
Important reference:
1. Going elastic with ems, layout techniques
2. Fixed vs Liquid vs Elastic
3. Create a simple liquid layout
4. Elastic Design

