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中有一段自己的文本,是在<p></p>中的也好,在其它块标签中都可以。给他个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来设置一下让这个字顶部多点空间出来,让这个首字和第一行齐平。

    最后我还能说点什么?我想到了,有一次我试图让<div id="acticle"><p>……</p></div>中的P也能实现首字下沉,可是结果却失败了,得出的结论是:我们并不能隔着一层标签去控制子对象中的第一个字符。

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

时间: 2024-10-25 13:31:13

CSS 美化段落文本之首字下沉_经验交流的相关文章

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

今天要讲的内容是如何实现"首字下沉",,第一个字是很大的红色楷体,陷于一段文字之首.这种做法在杂志中常见,但是在网页中不那么常见.那么如何实现呢?其实很简单,只有一句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:#c

CSS 使用Sprites技术实现圆角效果_经验交流

首先来简单说一下什么是Sprites,Sprites是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. 第一步:创建我们的 Sprite 用PS等工具合成如图所示的图片(以一个像素的红线来区分) 第二步:编写HTML代码 首先,我们会给容器 div 一个 .roundedBox

非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]_经验交流

在蓝色上看到这篇文章的,感觉作者总结的不错,至少有些偶自己也没有真正的认识过.这些 东西的确是应该好好总结一下的,可惜偶这人比较懒,收藏整理于此,便于自己学习! 1.firefox不能对innerText支持. firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了.如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替. 2.禁止选取网页内容: 在IE中一般用j

更有效率的css代码编写第1/3页_经验交流

这是许多网页制作者与开发者都关心的问题.大概没有什么魔法,可以保证一下就把你的样式表缩小到百分之多少,但合理的 CSS 编码与组织技巧,的确能够帮助你的更有效率地写出更清晰高效的代码,自然,样式表大小的缩减还能减少下载的时间.   一.排版: 1.关键词和操作符之间加适当的空格. 2.相对独立的程序块与块之间加空行 3.较长的语句.表达式等要分成多行书写. 4.划分出的新行要进行适应的缩进,使排版整齐,语句可读. 5.长表达式要在低优先级操作符处划分新行,操作符放在新行之首. 6.循环.判断等语

淘宝段正淳的css笔记大全第1/4页_经验交流

试想过总结出这几年来写css与xhtml的经验 ,汇总成一片"旷世奇文"分享给大家.无奈寡人年世已高,真是有点力不从心了.于是转念一想,可以用笔记的形式展现,这样就不用担心写不出来了. 现在就来说个淘宝首页上的一个小技巧. 类目之间的横竖线 从很久很久以前开始,类目间的竖线无非都只有三种. 背景图在a标签设置一个padding 用宽1px高不等的背景图来position到右侧.缺点:最后一个还是要用class来隐藏掉背景. 符号在每个a标签之间用"|"符号来填充.缺

CSS样式表常用小技巧收藏_经验交流

· ul 标签在 Mozilla 中默认是有 padding 值的,而在 IE 中只有 margin 有值.  · 同一个的 class 选择符可以在一个文档中重复出现,而 id 选择符却只能出现一次:对一个标签同时使用 class和 id 进行 CSS 定义,如果定义有重复,id 选择符做的定义有效.  · 初学可能会碰到这样一个情况,同样一个标签的属性在 IE 设置成 A 显示是正常的,而在 Mozilla 里必须要设成 B 才能正常显示,或者两个倒过来. 临时解决方法:选择符 {属性名:B

用CSS floats创建三栏页布局_经验交流

三栏布局是目前最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容.基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度. 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格.创建固定宽度布局或者"液态"(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页. 现在,我们都开始抛弃基于表格的布局技术,许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法.用绝对定位的方法从

Web2.0下XHTML+CSS 设计需要注意的地方小结_经验交流

注意事项: 1.除选择DOCTYPE之外的语句必须使用小写英文字母书写.其中包括 Macromedia Dreamweaver 生成的鼠标动作,如 OnMouseOver 也必须修改成 onmouseover. 2.XHTML语法规要求所有的标识都必须有开始和结束.例如<body>和</body>.<p>和</p>等,对于不成对的标识,要求在标识最后加一个空格,然后跟一个"/".例如<br>写成<br />.<

CSS规则层叠的应用 css必须要注意的几点_经验交流

理论基础是必要的,实践是提升和理解理论的方法,两者同样重要,任何设计和开发人员离开这两者的平衡,不论偏向哪一方,都会范或左或右的错误.不过我所讲的这个方法在实际应用中到底有什么用呢.显然,它不能够给我们创造出圆角矩形,也不能够给我们创造出分列布局,更加不可能给我们一个固定在文档头部的导航栏.这个算法的实践应用在于: 良好的CSS编程规范 .这是一个宏观的实践,与我刚才提到的微观实践同样重要,但却更加难以掌握. 本文并不想包含所有的良好的CSS编程规范,也不可能,我所能够提供的也只是我个人编写CS