当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS实战:美化段落文本之首字下沉

时间:2013-03-02 03:45来源:未知 作者:admin 点击:

标签:CSS实战:美化段落文本之首字下沉 网站建设(1202)下沉(1)实战(7)文本(13)CSS(655)首字(1)段落(5)美化(7)
--> [网站建设之]CSS实战:美化段落文本之首字下沉 今天要讲的内容是如何实现首字下沉,,第一个字是很大的红色楷体,陷于一段文字之首。这种做法在杂志中常见,然而在网页中不那么常见, CSS实例:图片水平垂直居中于DIV(图片宽高未知) 。那么如何实现呢?
CSS实战:美化段落文本之首字下沉》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302333362013.htm
--> [网站建设之]CSS实战:美化段落文本之首字下沉

  今天要讲的内容是如何实现“首字下沉”,,第一个字是很大的红色楷体,陷于一段文字之首。这种做法在杂志中常见,然而在网页中不那么常见,CSS实例:图片水平垂直居中于DIV(图片宽高未知)。那么如何实现呢?实在很简略,只有一句CSS就能够了。
  
  Selector:first-letter {font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; padding:5px 2px 0 0; color:#c00;}
  
  如果你感到还不是很明白,CSS实例: nth-child和 nth-type-of的区别,那么这里就细细讲述一下:
  
  首先要在HTML中有一段自己的文本,是在中的也好,在其它块标签中都可以。给他个ID也好,class也好,直接的标签也可以,先找到这个取舍符,CSS实例教程: nth-child和 nth-type-of的区别,这里假设一段文字的id为article,那么给这段的CSS一开端就写成:
  
  #article:first-letter {……}
  
  :first-letter 是个伪类,用处是设置对象内的第一个字符的款式表属性。该语法属CSS2范畴。具体见《CSS2中文手册》
  
  这里再细说语句中的一个个属性,CSS实例教程 制作网页特殊产品列表,首先我们要让这个字大于正文中的字,那么给他的字体大小是注释内容的2.5倍。当然你也可以抉择3倍,4倍,这个依据本人的须要来作修正。
  
  #article:first-letter { font-size:2.5em }
  
  为什么要用em这个标签呢?由于有时候我们的读者们会需要通过阅读器缩放的功效转变文字的大小,如果设为一个详细的大小,CSS实例教程 分号引起页面混乱,那么天然就会比例失调。这个大家可以着手变动一下看看找找感到,CSS实例 网页背景渐变。有了大小了,但是字体错误,那么这里应增添字体与字体加粗。
  
  #article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; }
  
  好了,CSS实例 网页布局中的图文列表,到当初为此这个首字仿佛还并没有盘算下沉的意思,那么这里的要害点就是 float:left; 对的,就是左浮动。咱们要晓得,当一个对象被设为浮动属性之后,不管本来是否是块级元素都会具备块级元素的特征,CSS实例 定位(position)页面定位详解。而四周不被设定的文本流侧会围绕着这个对象。图片在文本中的环绕也是这个属性。
  
  #article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left; }
  
  动手尝尝看,是不是已经看到首字下沉了?当然或者你看出来了,有点不那么整洁上面是不是多了一点出来?不必担忧,CSS定义的下拉菜单代码,用padding来设置一下让这个字顶部多点空间出来,让这个首字跟第一行齐平。
  
  最后我还能说点什么?我想到了,有一次我试图让
  
  &hellip,CSS学习教程 学习CSS的宽度width;…
  
  中的P也能实现首字下沉,可是成果却失败了,得出的论断是:我们并不能隔着一层标签去把持子对象中的第一个字符。
  
  当然假如你对这个伪类发生兴致的话那么也推举你接着研讨一下:
  
  Selector : first-line { sRules }
  
  Selector1 Selector2 : first-child { sRules } Tag:文本   丑化   实战    
(责任编辑:网站建设)
CSS实战:美化段落文本之首字下沉相关文章
上一篇:CSS实例:图片水平垂直居中于DIV(图片宽高未知) 下一篇:CSS实现凹陷字效果
回到顶部