仓酷云

标题: 带来一篇CSS教程:first-letter伪类元素的特性 [打印本页]

作者: 萌萌妈妈 时间: 2015-1-15 23:35
标题: 带来一篇CSS教程:first-letter伪类元素的特性
CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。
网页制造POLUOLUO文章简介：写这篇文章的原因来自与毅博客的《丑化段落文本2》，在这篇文章的最初振之谈到了关于:first-letter如许的伪类元素的特性.
写这篇文章的原因来自与毅博客的《丑化段落文本2》，在这篇文章的最初振之谈到了关于:first-letter如许的伪类元素的特性：

有一次我试图让<divid="acticle">……</div>中的P也能完成首字下沉，但是了局却失利了，得出的结论是：我们其实不能隔着一层标签往把持子工具中的第一个字符。

因为这句存在曲解的大概性（我就曲解了他的意义），振之在第一工夫就删除这句话。他的意义正确地说，是:first-letter这个伪类没法向下“承继”。比方：

1:<divid="demo">

复制代码

2:我要完成首字下沉

复制代码

3:</demo>

复制代码

假如只界说#demo:first-letter，我们将看不就任何了局，必需利用#demop:first-letter。和a:link如许的链接伪类分歧，:first-letter（固然另有其他的）没法向下“承继”。之以是加上引号，是由于:first-letter的这类没法穿透子工具的特征和一般界说的承继有所区分。这一观点在《CSS威望指南》中是如许界说的：基于承继机制，款式不但使用到指定元素，还会使用到它的儿女元素。假定在下面的html代码中我们给外层界说一个边框：#demo{border：1pxsolid#000;}，我们晓得这里没法向下承继的是border属性，而:first-letter是一个伪类元素，换个说法，:first-letter中的任何属性均不向下承继。

1:#demo:first-letter{font-size:2.5em;font-family:"楷体_GB2312";font-weight:bold;

复制代码

2:line-height:1.2em;float:left;padding:5px2px00;color:#c00}

复制代码

4:#demop:first-letter{font-size:2.5em;font-family:"楷体_GB2312";font-weight:bold;

复制代码

5:line-height:1.2em;float:left;padding:5px2px00;color:#c00}

复制代码

假如成绩仅仅是这个，那末文章也到此停止了。可是在我测试:first-letter这个伪类元素的特质是不是存在于各年夜扫瞄器的时分，我发明在IE8下，不管我怎样设置我的css(如上)，效果都是不成见的。包涵我的目光如豆，我居然嫌疑起IETester的功能，我第一想到的是它对IE8的衬着中心设置有误。接着我晋级了我的IE7……直到我在极新的IE8beta1扫瞄器中翻开测试页的时分，我仍是没有嫌疑IE8，由于即便是IE5.5也是撑持:first-letter伪类的。
叼着烟斗的名侦察说过：“撤除一切不成能的，留上去的，不管何等分歧理，但它就是原形......！”是的，原形就是IE8beta1不撑持:first-letter（另有:first-line）。我但愿这是beta1版本中的一处来不及修复的bug，由于在微软官方的IE5~IE8CSS兼容表中，明白的标了然进来IE5不撑持:first-letter外，其他版本一概撑持。这一点，在很多博客中都被说起，比方怿飞的IE8beta1中的CSS属性。
假如你的兼容性反省列表中还没有IE8的名字，假如你以为诸如首字下沉如许的分外视觉效果无关紧要，那末你能够在这一行停止扫瞄了。但，假如你固执于此，但愿IE8的用户也能够在你的网页上看到相似于报刊文章上的效果，你能够往下看。
在屡次勉力以后，我保持折腾那不幸的css，IE8b1关于:first-letter的不撑持，不是在csshack层面能办理的。我们只能乞助于js。我们必要找到一个页面中第一个段落入手下手的中央，找到这个段及第一个字，让js将其处置为特别款式：

1:window.onload=initial;

复制代码

2:functioninitial(){

复制代码

2:我要完成首字下沉0

复制代码

2:我要完成首字下沉1

复制代码

2:我要完成首字下沉2

复制代码

2:我要完成首字下沉3

复制代码

2:我要完成首字下沉4

复制代码

2:我要完成首字下沉5

复制代码

2:我要完成首字下沉6

复制代码

包涵我的js程度，我一直没法间接界说num的办法，我只能给其增加一些标志，以致于代码云云痴肥，我信任必定有更复杂、更壮大的js办法。
接上去，我们只必要在css中如许界说：

2:我要完成首字下沉7

复制代码

2:我要完成首字下沉8

复制代码

2:我要完成首字下沉9

复制代码

检察效果页面1，一切的扫瞄器都弄定了，这统统都创建在不封闭js的条件下。可是关于一些完善者来讲，思索到有人会封闭js运转扫瞄器时，我们必要再分外增加一些代码：

3:</demo>0

复制代码

3:</demo>1

复制代码

如许在封闭js的情形下，FF、Opera和Safari都能够一般显现应有的首字下沉效果，不外IE们就有些凌乱，IE8b1生成不撑持，有效果；IE7一般；IE6不辨认:first-child:first-letter如许的用法；IE5.5奇妙的辨认了:first-letter，可是它疏忽了:first-child，这招致了一切段落p城市有一个首字下沉的效果，这可不是我们排版上但愿看到的。而且当你复兴利用js的时分，在Opera中会发生一个风趣的征象，段落的前两个字都有了效果，检察效果页面2。这是由于在Opera中，第一个字包括在中，效果由js完成，Opera以为p的:first-letter应当在以后入手下手。
因而，我们必要修改一下css:

3:</demo>2

复制代码

3:</demo>1

复制代码

如许以来，Opera中的奇异征象也消散了。检察这个效果页面3。
说假话，我其实不保举利用云云繁复的代码（效果页面2和3）完成一个首字下沉。就仿佛在html中不保举利用<q></q>那样。间接利用效果页面1的代码，让js往做这个在IE中找不到均衡点的事变——js开启，人人都有一样的效果；js封闭，效果也一同消散。由于它不但使得IE8能够使用首字下沉的效果，也制止了其他版本IE在对:first-child:first-letter如许的一个css使用上的处置差别（间接利用:first-letter会让每一个段落开首都有一个首字下沉效果，这也是为何振之在他的博客注释中不利用这个效果的缘故原由）。
天主保佑，IE8正式推出的时分能够撑持:first-child（另有:first-line）。

一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。

作者: 分手快乐 时间: 2015-1-17 23:29
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 蒙在股里 时间: 2015-1-24 17:41
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 不帅 时间: 2015-2-2 12:43
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 爱飞 时间: 2015-2-7 21:12
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

作者: 飘灵儿 时间: 2015-2-23 12:11
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 老尸 时间: 2015-3-7 09:06
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

作者: 柔情似水 时间: 2015-3-14 21:39
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 简单生活 时间: 2015-3-21 16:49
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

欢迎光临仓酷云 (http://ckuyun.com/)