登录论坛 | 注册会员 设为首页 | 收藏本站
top
濡絾鐗犻妴锟� 缁绢収鍏涘▎顢狪Y   闁哥喎妫楅宥嗙▔椤撶偟濡� 濞撮棿妞掔粭鐔割渶閸曨垬鈧拷 濞存籂鍐╂儌濞戞搩鍘肩缓锟� 閺夌儐鍨▎銏⑩偓娑崇畵濞咃拷 婵炴挸鎲¢崹娆愮▔濠婂啫顕� 濞戞挸顑堝ù鍥ㄧ▔椤撶偟濡�   缂傚啯鍨靛ḿ鍐偓浣冨閸╋拷   IT濠电偛褰夌粻锟�   婵炴挾濞€娴滐拷   闁告鐗曞┃鈧�   閻犱礁鎼ḿ锟�

濞戞挻绮岀€垫娊寮堕崘銊㈡瀱IT闂傚倶鍔嶉崺娑氱博閿燂拷

闁轰焦澹嗛悥锟�

闁归潧顑嗗┃鈧�

缂佹妫侀鍥嫉閿燂拷

濞戞挾绮锟�

闁哄嫭鍎冲畷锟�

CPU


闁告劕鎳庨悺锟�


缁绢収鍓涘ú锟�

闁哄嫬澧介妵姘跺闯閿燂拷

闁告梻鍋涢崣鏇熷緞閺嶎剦鍟�

闁哄牆绉存慨鐔煎闯閿燂拷

濮捬呭У閻栵綁鏌ㄩ鐐8

闁哄牐娅i鍫ユ偨閸偆鐖�
闁活澀绲婚崜鎶藉礌婵犳碍鐝� | 缂傚啯鍨圭划鍫曞箮閳ь剟寮甸敓锟� | 闁瑰灝绉崇紞鏃傚寲閼姐倗鍩� | 缂佸顑呯花顓烆嚕閳ь剟宕i敓锟� | 闁轰胶澧楀畵浣规償閿燂拷 | 闁告梻鍋涢崣鏇㈡嚊椤忓嫬袟闁告牭鎷� | 闁搞儲鍎抽懜浼村炊閹冨壖 | 闁告娅曞鍌炴焻濮樻剚鍞� | IT闁稿浚鍋勫畷锟� | IT缂佹鍨奸惁锟� | IT闁稿鍎遍幃锟� | 濠㈤€涜兌閻掞拷
adtop
 
 
当前位置 : 首页>软件学院>程序开发>CSS>正文
 
CSS实战:美化段落文本之首字下沉

http://www.dbit.cn 2008-8-19 8:20:55  来源:21CN  编辑:叶子
 
    今天要讲的内容是如何实现“首字下沉”,,第一个字是很大的红色楷体,陷于一段文字之首。这种做法在杂志中常见,但是在网页中不那么常见。那么如何实现呢?其实很简单,只有一句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;}

    如果你觉得还不是很清楚,那么这里就细细讲述一下:

    首先要在HTML中有一段自己的文本,是在

中的也好,在其它块标签中都可以。给他个ID也好,class也好,直接的标签也可以,先找到这个选择符,这里假设一段文字的id为article,那么给这段的CSS一开始就写成:

#article:first-letter {……}

    :first-letter 是个伪类,用途是设置对象内的第一个字符的样式表属性。该语法属CSS2范围。详细见《CSS2中文手册》

    这里再细说语句中的一个个属性,首先我们要让这个字大于正文中的字,那么给他的字体大小是正文内容的2.5倍。当然你也可以选择3倍,4倍,这个根据自己的需要来作修改。

#article:first-letter { font-size:2.5em }

    为什么要用em这个标签呢?因为有时候我们的读者们会需要通过浏览器缩放的功能改变文字的大小,如果设为一个具体的大小,那么自然就会比例失调。这个大家可以动手变动一下看看找找感觉。有了大小了,但是字体不对,那么这里应增加字体与字体加粗。

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

    好了,到现在为此这个首字似乎还并没有打算下沉的意思,那么这里的关键点就是 float:left; 对的,就是左浮动。我们要知道,当一个对象被设为浮动属性之后,不论原来是否是块级元素都会具备块级元素的特性。而周围没有被设定的文本流侧会环绕着这个对象。图片在文本中的环绕也是这个属性。

#article:first-letter { font-size:2.5em; font-family:"楷体_GB2312"; font-weight:bold; line-height:1.2em; float:left;  }

    动手试试看,是不是已经看到首字下沉了?当然或许你看出来了,有点不那么整齐上面是不是多了一点出来?不用担心,用padding来设置一下让这个字顶部多点空间出来,让这个首字和第一行齐平。

    最后我还能说点什么?我想到了,有一次我试图让

……

中的P也能实现首字下沉,可是结果却失败了,得出的结论是:我们并不能隔着一层标签去控制子对象中的第一个字符。

    当然如果你对这个伪类产生兴趣的话那么也推荐你接着研究一下:
    Selector : first-line { sRules } 
    Selector1 Selector2 : first-child { sRules }

 
收藏】【打印】【进入论坛
  相关文章:

77

·CSS3 Media Queries 详解
·CSS实例教程:非浮动区域设置宽度
·css的效率和浏览器渲染的速度
·关于CSS HACK 解决兼容的写法 
·小议使用“完整”的CSS的缺点
·关于CSS不透明的详细介绍 
·CSS中设置段落间距的方法
·用css网站布局之十步实录
·DIV+CSS布局代码精简对SEO的影响 
·CSS教程:网页中英文字体的设置 
·css3文本阴影属性text-shadow说明 

 
 
 
 
最新文章

中关村艳照门女主角详记录高清组图 
大连护士门大尺度艳照高清组图
iPhone女孩微博爆红 最宝贵东西换iPhon
反恐精英之父内维尔:改变电脑游戏销售
团购网站黎明之前:中国市场惨烈厮杀不
团购鼻祖Groupon中国揭秘:快与慢的商业
Spil Games发布新的品牌形象
1800配置一台主机 不要显示器
联想V360笔记本模特写真
爱国者第四代移动硬盘将面市、低电压保

 
推荐文章
1
2
3
4
5
6
7
8
9
10
iPhone女孩微博爆红 最宝贵东西换
大连护士门大尺度艳照高清组图
中关村艳照门女主角详记录高清组
苹果员工中毒门
宫如敏不雅照疯传 看张馨予韩一菲
深耕市场 永续经营——专访百脑汇
优派专业电子书 让您回家旅途多姿
揭晓百万大奖三星bada魅力绽放中
大明龙权“江湖英雄会”全国PK大
永恒之塔校园达人挑战赛完美落幕
八卦图解 More>>
iPhone女孩微博爆红 最宝贵东西换 大连护士门大尺度艳照高清组图
中关村艳照门女主角详记录高清组 宫如敏不雅照疯传 看张馨予韩一菲

闁稿繐鍘栫花顒勫嫉椤掑倻褰� - 闁艰鲸姊婚柈鎾箣閹存粍绮� - 闁归攱绋戦崣鐑樼▕娴肩补鏀� - 妤犵偛鐏濋幉锟犲嫉瀹ュ懎顫� - 闁告瑥顑嗛崕蹇涙煣閻愵剙澶�
Copyright©2006-2011闁靛棌鍋�Dbit.Cn. All Rights Reserved.
閺夊牏绁P濠㈣鎷�06014875闁告瑱鎷�

Tel:024-88340056 Mob:13066598927 Email:WebMaster QQ:69424720

缂傚啯鍨归悵鐤㏎缂傚浄鎷�:缂備礁绻橀弨銏ゅ疮閿燂拷:65477551 闁瑰灈鍋撻柡鍫灣閸忥拷:28526281 濞存粌鏈晶婊堟偨娴e啫澹�:24536322 缂傚洢鍊涚€氳櫕瀵煎鍗炲弮:24815709 缂佹梹鐟╅弳杈╃礃閿燂拷:8052026 濞存粌鏈晶婊堟偨娴e啫澹�:57897142 缂備礁绻橀弨銏ゅ疮閿燂拷:20966008 婵炴挸鎲¢崹娆戠礃閿燂拷:65477153