编程学习

上篇已经说了在第五篇会开始讲CSS,刚开始讲不能讲得复杂,我还是由浅入深,一步步来.还是那句话:先用起来,然后再去研究.即然我第一篇讲de是段落,那我这篇初讲CSS当然也还是要从段落开始,让我de段落先漂亮起来.

在没有讲CSS之前我先去想一下什么样de段落才看起来才是最舒服de？如果大家一时还没有什么想法或是还不清楚如何去分析这个问题不妨先看一下《网页设计技巧系列之一 浅谈文本排版》.不论如何至少我de小学老师告诉我每一段de第一行应该空两个字.这可能是我接受到de第一个关于如何划分段落de方法.并且可能更多人已经产生了思维定式,认为段落必需要首行空两格.而我则认为区分段落de首要素同段距,其次才能是段落首行de处理.而首行de处理是否只有缩进两字呢？我个人认为不是,因为我还可以用“首字下沉”、“首行突出两字”等来表现.有人会说:“首字下沉我就见过,比如作者de博客就用了这个效果,但是首行突出两字似乎有点奇怪.”然而事实上首行突出两字必不是作者发明de,在中国古代de奏本上就常采用这种格式,不同de是因为他们常需要在行首写上一些颂语,而要表达这种颂语就需要抬高其地位,比如“君”“圣上”等字眼,所以才会突出两字,久之则形成了一种特别de排版形式,这种形式现在de文体是用得少了,不过大家可以多多了解一下,方便以后表达不同de文体时可以用得着.

即然段距是段落区分de第一要素,那么我就先来解决这个段距dede样式问题.即然是一段一段de那么我每一段都是由一组<p></p>组合而成de,而我deCSS只要通过对这个段落标签de描述就可以实现我所需要de效果了.那么基本形式是:

p {这里是样式描述内容}

我注意到了,在CSS中这个段落标签是不需要加尖括号de,只需要一个”p”即可以了.所有de标签都是如此处理.那么我需要给每个段落设个段距,这里我有两个描述属性,一个是padding,另一个是margin,这两个表现de效果看起来有点像,但是却有着本质上de区别,如果我把段落表示成盒子,在这个盒子里装着一些东西,padding就是这些东西与盒子内侧边de距离,而margin则是盒子与盒子之间de距离.这里很显然,我里应该是使用margin.写法是:margin:1em 0;这是一种简写de方法,如果写全了应该是:margin-top:1em; margin-right:0; margin-bottom:1em; margin-left:0; 这很明显太冗余了,所以一般我通常是写成:margin:1em 0 1em 0; 这里de顺序是上右下左,由于上下de数值是一样de,左右de数值是一样de,那么就可以再缩写成:margin:1em 0; 这里deem是指相对长度单位,相对于当前对象内文本de字体尺寸.有关于单位de知识请查阅沈苏小雨编制de《CSS2.0中文手册》.那为什么要用em而不用px或是pt呢,这是因为我现在de流览器大多都有字体放大de功能,这也是方便读者de能看得更清楚文字内容,那么如果我用px来设定段距那么当字体放大时段距却不会变动,那么当放大到一定数值时这个段距de特性也就不存在了.所以我使用em这个单位,也就是希望当字体变大时段距也跟着相应变大,方便识别.

这里值得注意de是,当我使用marginde时候两个段落之间demargin会有重叠,那么看上图中右侧de图我可以发现在两段之间demargin是被重叠了原本应该是两个高度相加de结果还是一个高度,但是上图中间de示意padding却没有重叠他们de高度是相加de,这点大家要注意到,这不是什么BUG,而是一种特性.那么我就写一句CSS来设定我de段落:

p {margin:1em 0;}

说了段距自然就会说到行距,有看过《网页设计技巧系列之一 浅谈文本排版》de朋友就会明白行距de重要性,那么您是否有给自己de页面设置行距呢,是如何设置de？ 设置行距有一个专门de属性:line-height,这个应该称之为行高.因为我要设定de是一行de高度,而不是行与行之间de距离.这也就是为什么我总发现Photoshop里设置行距de数据与做网页设置de数值不一样de原因了.但是行距依然是可以通过我设定de行高最终产生,所以方法不同,但是目标是一致de.一般我de行高一定是要超过字体高度de,否则行与行之间就会重叠,当然我不排除使用这种式做一些特别de效果,但是至少在阅读文本上我需要行行清楚.行距不宜太大,太大了阅读效率不高,如果太小了又容易读错行.所以一般行高不应超过两个字de高度.振之最常用de是1.6em~1.8em之间,如果宽度很大,我就需要加大行距不然我很容易读错行,如果宽度小de时候行距过大则失去了阅读de效率.那么我把刚才de段落deCSS做一下增加,标注一下我de行距:

p {margin:1em 0; line-height:1.6em; }

这样对于一个基本de段落设置就已经完成了,如果需要给这个段落加个首行缩进,还可以为这个段落设置一下字体,字大小,字样式,色彩等等:

p {margin:1em 0; text-indent:2em; font:normal normal 12px/1.6em “宋体”; color:#000; }

这里关于字体de属性也是个缩写形式,顺序是:“font : font-style || font-variant || font-weight || font-size || line-height || font-family ”,这些知识在沈苏小雨deCSS2.0中文手册中都有讲述.我这里就不重复了.这里decolor是文字de色彩,#后面de数值应该是6位,可以直接复制Photoshop拾色板里de数值.但是我也常常会缩写.缩写方式是,奇数位与偶数位de值相同时即可合并为3位de色值.比如:#4488cc,可以缩写为#48c,如果需要首突出,那么不光需要把text-indentde值设为负值,还需要修改paddingde数值,因为突出去de也就是超出了内容区那么如果padding区没有空间那么这两个突出去de字就无法显示.那我再给出一个首行突出两字deCSS

p {margin:1em 0; padding:0 0 0 2em; text-indent:-2em; font:normal normal 12px/1.6em “宋体”; color:#000; }

有关美化段落文本de内容先讲到这里,下一篇讲解首字下沉de做法以及注意事项!