潜行者m的CSS2笔记(二)

接上面的文章,潜行者m的CSS2笔记(一)

21,使用line-height属性来控制行高,使文字居中,控制文字排版。

22,使用<label>标签,可以让人点击文本选中相应单选复选,提高网站交互性。例子<label for=”c1”>点击此文本</label><input type=”checkbox” name=”c1” id=”c1” value=”ckbox”/>

23,对于文本下划线,可以使用border-bottom来实现丰富的定义。

24,li{width:120px;text-overflow:ellipsis;}当内容超出对象宽度时,显示为省略号。clip将不显示。必须使用word-break:keep-all;使其被强制不能换行。

25,em是一种相对弹丸。text-indent:2em;表示空出两个字符的距离,em长度相当于本行中字符的倍数,这个单位非常实用。

26,首字下沉使用css伪类。p:first-letter{font-size:2em;float:left;}。first-line伪类对第一行进行设置。

27,在布局中,出现布局的错位等,可以使用相对定位。尽量避免绝对定位。

28,剪切图像可以使用clip。使用div overflow属性进行剪切图像,用img margin移动剪切区域。

29,图片代替文本,内含不显示文本,表明图像的内容,非alt属性。两种实现方法:display:none;text-indent:-99999px;

30,a:link只会对拥有href=“”的a发生作用。

31,使用图片代替文本,对搜索引擎有利,有利seo。

32,使用导航等,显示边框的时候,最好加上一个背景边框,防止错位。

33,pimg{float:left;padding:10px;}设置图片浮动方式,可以将图片嵌入文字流。

34,如果想要添加图片说明,将文字与img放在一个div中,之后对文字等进行设置。

35,表格布局对table、tr、td进行定位,border-collapse:collapse;属性表示将表格中单元格之间线条合并。border-collapse:separate:则将使各单元格的边框独立存在。

36,@import导入命令是将目的文件包含进来。例如:@import url(“home.css”);
还可以指定一个设备类型,指明当前的样式表用于什么操作,例如:
@import url(“pageprint.css”) print;表示在打印文件的时候,使用pageprint.css这个样式表。

37,提高css效率的方法:
1,按照功能划分css文件。
2,在需要这方面功能的页面,引用相应的样式表文件。引用用上面的import

38,用css制造进度条等,使用行间样式。

整本书大部分的内容,都已经吸收同化进潜行者m的身体中,对于这38条笔记的内容,掌握的还不是很熟悉,所以做成笔记,以便在日后进行翻阅。

在随后的一段时间内,我将继续公布潜行者m的个人笔记,包括seo、html5、css3、php、javascript等等。

潜行者m的CSS2笔记(一)

以前读书,被强迫着做笔记,但是从来没认真的做过。现在读书,基本上每本书看完都要做一下笔记,这个真的非常重要,一本书你看完会有很多之前没有见过的知识点等,这些东西,就需要记下来,一方面用到的时候快速查询,另一方面记下来。《css网站布局实录-基于web标准的网站设计指南》(第二版)这本书,我买了很久了,看了也有3遍了,2个月前又看了一遍,做了一下笔记,现在拿出来共享一下。

注意,这份笔记不适合新手,这里面的知识点,不是系统的基础的,而是经常不小心忽略掉但是又常用的。有经验的朋友,可以看一下,里面的知识点你忽略了多少。

1,相同类型的css定义,默认执行后面的一个,可以用!important语法修改优先性。例如:background-color:red;!important

2,标注某些css hack的地方,使用hack;没完成的地方使用todo。(在大型的工程中,用注释标注一下,方便查询修改)

3,block块状对象占据整行,其他的都移到下一行;in-line行间(内联)允许与下一对象共享一行。

4,尽量减少div的嵌套,会增加浏览器解析的难度。

5,最终宽度=左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距,最终高度也是如此,需要精确计算,放置错位。

6,重叠的margin会叠加显示,以大值为准。当两个div设定float之后,就不会叠加了。

7,浮动的清理(clear)。使用clear属性来拒绝某个方向上的浮动,这样就不会浮动到上一层了。(这个最好实践一下)

8,父position:relative;子position:absolute。子在父中绝对定位,将以父位置为基准。

9,div应当重点放在大面积区域上,对于简单的导航等,用ul解决。

10,下拉菜单等,可以通过伪类选择器以及display属性来控制。display:none;表示隐藏当前元素。(通常使用javascript来实现下拉菜单,但是现在用纯css也可以实现的很好)

11,css hack:*html—这种方式仅被IE浏览器支持解析,是最常用的css hack之一。

12,div是一个块,用来整体布局设计——block
span是一个范围,用来区别内容——in-line

13,background-attachment:scroll/fixed;设置背景图片的滚动方式。

14,background-color:transparent;透明模式,显示背景。

15,background-position:左对齐方式 上对齐方式 ;用它可以对图像进行精确的定位,同时实现css sprites功能。例如:background-position:0px -27px;

16,ul/ol属性:
list-style-image:none/url;设置图片作为列表中的项目。
list-style-position:inside/outside;设置项目符号的放置位置。
list-style-type:none/disc/……;设置li的表现形式(没有/点状/圆圈/方块等等)

17,display属性:
block:将对象显示成盒状,后一个对象换行显示。
none:隐藏/不显示对象。
inline:行间内联样式,将对象排列成一行。
inline-block:对象显示成块状,但呈现内联样式。
list-item:将对象作为列表项显示

18,float:left;更适合对象布局,但是浮动多了,容易造成浏览器解析混乱。希望让信息显示为段落,最好使用display:inline;(通常设置一个原子类fl{float:left;display:inline;},元素浮动的时候,加上class=”fl”)

19,text-indent:value;用于控制段落文本的首行缩进想过。text-indent:20px;表示对象首行缩进20px。如果想要比其他提前一些,可以使用负数值来实现。text-indent:-88888px;设置超大的数值,还可以起到隐藏文本的效果。

20,对于表单样式的控制最基本的方法就是使用border以及background-color。即对表单元素的背景、边框进行设置优化,消除默认难看的样式。

先打这么多,剩下的留在潜行者m的CSS2笔记(二)中。

阮一峰博客与zac博客的区别

阮一峰和zac的博客,都是业界公认的名博,两个博客开博的时间都比较早,阮一峰要更早一些。本文就对比一下这两个独立博客的区别,并且总结从中能够学到什么东西。

我个人感觉,他们俩的区别非常明显,阮一峰是实力派,而zac则是偶像派。怎么说呢?

阮一峰的博文,写得都非常有深度,总结的都很全面。这应当归结于他的职业和性格,他阅读非常多的各类的书籍,并且读过之后,就会写一些读书的总结或者自己的感悟,这本身就是博文很好的素材,所以他写的每一篇文章都值得收藏,都像一个完整的参考文档一样。在加上开博时间之久,以及翻译过多本书籍,所以博客积累了很多的人气,有固定的阅读用户。

而zac的博文,现在更新的速度已经大不如从前了,一般每个月更新3,4篇文章,而且这些文章都比较短,更偏向于个人或者抒发一些感慨。当然也会涉及到一些seo最新的动态等。出于seo这个职业,本身就不太好写文章,所以写出的文章,大部分都在于猜测或者做得实验以及国外的研究成果翻译。再加上大部分的seo相关内容,是变化不大的,把以前写过的内容重新拿出来,老调重谈并不是一件好事。但是由于他在seo界的知名度,博客仍然具有极高的人气,有很多的评论,虽然这些评论有很大一部分是来借光宣传的。所以,相对的来说,我更推荐阮一峰的博客,因为在他的博客上,你能够真真正正的学到东西,而在zac博客中,虽然可以学到点,把握seo的最新动态,但是学到的东西,实在是比较少。

这对我们开博有什么启示呢?你更愿意作哪一种博主?这个留给你思考吧。

博客运营:文章质量重于文章数量

写了这个题目之后,我真想扇自己两巴掌,这不是明摆的废话吗?!但是就是这样人人都知道的明摆的废话,还有无数的博主在贯彻低质量高数量的方针,所以写下此文,为各位博主认真的分析一下。

从博客的功能讲起。一个博客,它的作用就是写文章,并且显示文章给浏览者看。浏览者之所以要看你的文章,是因为他们需要你的文章,通过你的文章获取一些知识或者解决一些问题。那么,你写的文章,就必须要有一定的价值,狭义的讲,就是要有一定的技术含量,可以帮助别人解决一些他们遇到的问题。只有这样,别人才有来你博客的理由和冲动,也只有提供了大量优质的信息内容,浏览者才会收藏你的网站,并且经常回来看一下。例如,人们想要看最新的科技新闻,肯定会想到月光博客;站长想了解网站建设运营相关,就会去潜行者m博客看看。

所以,网站的内容质量,决定了网站的生存与发展,而这一点尤其体现在博客上。

一个博客的生命力不在于更新频率

看一个博客是否有活力,是否有生命力,并不应该看文章的数量和更新频率。在建博初期,我也曾有过那么一段时间,每天为了更新博客文章而奋斗,曾经定下规定,每天更新三篇文章。而且我的确坚持下来了,但是每天的这三篇文章,很少有技术性很强的文章。我个人是偏重于技术的,但是当时的技术水平不是特别强,所以很难写出大量的技术性文章,但是每天都要去写文章,所以就把每天做的事情和一切乱七八糟的内容组织起来,写成文章发布在博客上。就这样,每天都比较累,但是看着自己博客的文章,很欣慰。

友情链接是博客发展的一个要素,当我觉得文章数量以及够了,就去一个小有名气的博客申请友链,他很正常的拒绝了。之后我就松懈了,感觉开博没有什么意义了,于是博客就荒废了半年左右。之后,又重新整理规划了一下博客,把过去写的大部分的文章都删掉了,因为它们本来就没有什么用。像是日记、心情之类的,除了你的老妈和要好的朋友,估计没有别人想去看。与其写些乱七八糟的文章,还不如把精力集中,写一篇好的文章。

一个博客的内容要有范围和深度

人的精力是有限的,要想写出高质量的文章,是要时间酝酿和编写的,所以博客的内容一定要有一些范围。选择自己最感兴趣和最擅长的领域,专门写此类的文章,这样可以保证文章有一定的深度,也有一个固定的需求人群来关注。即使是很大的博客,也有一定的范围,例如月光博客,就是关注互联网和科技的,它上面你找不到健康养生的文章。很多博客的分类和目录都比较混乱,有wordpress、SEO、黑客技术、软件推荐、健康养生等等文章分类。一个人肯定有很多感兴趣的领域,但不见得每个领域都很精通。

目录杂乱的博客,会找不到博客的方向,找不到写作的重点,乱成一锅粥,每个分类都想照顾到,但是每个分类的更新频率也低。访客也乱,看不到自己想看的文章,最终会慢慢衰竭。如果你说,我精力异常充沛,写文章很多,每个分类都会写很多文章,我还邀请很多人来一块写各个领域的文章。那么我会说,你去建门户网站吧,博客已经不适合你了。

以上两点,就是潜行者m所给出的建议,总结起来,很简单的两条:

1,写出对浏览者有用的文章。

2,求质量不求数量,在质量的基础上,增加数量。