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 }

赞 (0)

相关推荐

  • jqTransform form表单美化插件使用方法

    jQtransForm下载地址 http://www.jb51.net/jiaoben/25166.html 用法 1- 添加脚本包含在标题部分的网页 复制代码 代码如下: //required <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.j

  • CSS 美化表格边框为凹陷立体效果的实现方法

    当然,这里仅提供一种思路,你可以灵活修改使用. Untitled Document 我们 AJAX专栏 FW专栏 FLASH专栏 此边框为默认风格 我们 AJAX专栏 FW专栏 FLASH专栏 此边框为凹陷效果 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 模仿combox(select)控件，不用为美化select烦恼了。

    不用整天为美化select控件烦恼了. 1.可批量美化select控件. 2.可以有onchange句柄. 3.触发onchange的函数可带参数. 3.可以得到select的值. 4.可设置像select类似的滚动条(如大于或等于8个数目时出现滚动条) 5.可设置宽度和高度 API参考: //首先生成一个simulateSelect的实例 //构造函数的第一个可选参数为触发onchange的函数,其它的为onchange函数的参数: c = new simulateSelect(s1oncha

  • select标签模拟/美化方法采用JS外挂式插件

    select标签模拟/美化方法采用JS外挂式插件

    <select>标签的外观问题很恼人,各个浏览器都不一致,单单就IE,一个版本就一个长相,还不能用CSS修饰. 在这将本人对<select>的美化方法共享出来.优点: 仍保留使用<select>,仅改变外观,不改变不干预Form行为,后期加载JS.(注:本脚本依赖jQuery) 啥也不说了,都在代码里. 复制代码 代码如下: $(document).ready(function () { // 找出需要美化的<select>标记,我们用一个class名称 &

  • 在修改准备发的批量美化select+可修改select时，在非IE下发现了几个问题

    发现的问题可能会陆续添加 1. Mozilla和Opera都不支持该字体,改掉DTD也是没有效果.测试在Mozilla Firefox1.5, Opera9.0下都是显示成Arial字体.而特殊符号是支持的. 如: <body id="www.never-online.net"> <div style="font-family:Webdings">6</div> <div>▼</div> </body

  • css美化input file按钮的代码方法

    css美化input file按钮的代码方法

    input file在系统默认下的外观: 我们最多通过定义input的border来改变系统默认的外观:如果要让浏览按钮更漂亮一点,我们想定义它的背景颜色,甚至想用背景图片来代替,通过css定义input flie还真是办不到的.偶然看到一篇文章:input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0,再定义一个label标签样式,来覆盖透明掉的按钮.按照作者的方法,我也试验了一下,代码如下: input file的另类做法 上传文件: 浏览... [Ctrl+A 全选 注:

  • 用javascript实现select的美化的方法

    论坛经常有人会问到用CSS如何美化Select标签,其实但凡你看到很酷的都是用javascript来实现的.昨天试着做了一下,基本实现的初级功能.拿出来和大家一起分享一下.先可以看一下预览效果:http://www.iwcn.net/demo/select. [功能需求] 1.调用要方便,做好之后应该像这样: 复制代码 代码如下: function loadSelect(selectobj){  //传入一个select对象就能将他的样式美化  } 2.不改变原有表单项,表单的页面代码不去破坏:

  • css文本框与按钮美化效果代码

    css文本框与按钮美化效果代码

    一.先看看在网页中经常出现的按钮与文本框的本来面目吧! 对照上图,我们怎么样才能改变文本框与按钮的模样呢?那在下面我为大家提供两种文本框与按钮样式作为例子参考,第一种是文本框与按钮无立体感,只是有线 条颜色与填充颜色的,这种效果大家可能在很多网站上都看见过,给人一种特别的感觉,很不错的,第二种效果就比较特殊了,是将文本框做成一种类似于下划线的 效果并且是彩色的,同时按钮的背景色也不再是灰色,而是彩色的,可以说这是一种非常酷的效果,好了,下面我就来说说这两种效果实现的详细操作步骤吧. 二.无立体效

  • select下拉选择框美化实现代码(js+css+图片)

    select下拉选择框美化实现代码(js+css+图片)

    因为虽然实现起来麻烦点,如果用自带的Select,很简单的就完成了,但是本代码实际上是在向大家讲述一种Js在网页中的应用实战,多种元素之间的配合作用等.效果如下图: 下拉select选择框 body{margin:20px auto;font-family:Arial,Helvetica,sans-serif;font-size:12px;width:950px;height:400px;border:solid 1px #aaa;position:relative;padding:10px;}

  • javascript 单选框，多选框美化代码

    javascript 单选框，多选框美化代码

    crir = {     init: function() {         arrLabels = document.getElementsByTagName('label'); searchLabels:         for (var i=0; i<arrLabels.length; i++) {                         // get the input element based on the for attribute of the label tag   

随机推荐