CSS入门教程:网页首字下沉

CSS入门教程:网页首字下沉

:first-letter

版本:CSS2  兼容性:IE5.5+

语法:

Selector : first-letter { sRules }

说明:

设置对象内的第一个字符的样式。

此伪对象仅作用于块对象。内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
在此伪对象中配合使用 font-size 属性和 float 属性可以制作首字下沉效果。

示例:

p a:first-letter { color: green }

div:first-letter { color:red;font-size:16px;float:left; }

简单,就不放例子了

时间: 2024-09-20 00:11:30

CSS入门教程:网页首字下沉的相关文章

Word入门动画教程127:首字下沉

首字下沉效果经常出现在报刊杂志中,文章或章节开始的第一个字字号明显较大并下沉数行,很能起到吸引眼球的作用.要设置这种效果,可以按下面的步骤进行: 1.将插入点置于要创建首字下沉的段落中的任意位置. 2.执行"格式"→"首字下沉",打开"首字下沉"对话框. 3.在"位置"栏下,选择"下沉"或"悬挂".在段落没有设置缩进时,后者下沉的首字将会占据左边距.选择"无"可取消首

使用CSS设置段落首字下沉

css 我们在使用Word制作文档,或者观看某些报刊杂志时,总会看到段落的首字下沉的效果.那我们在使用DW制作网页时,是否也能做出这样的效果呢?答案是肯定的. 制作方法: 定义CSS样式,代码如下: .first {FONT-WEIGHT: bolder; FONT-SIZE: 230%; FLOAT: left; COLOR: #990000; LINE-HEIGHT: 1.3em; background-color: #E4E4E4} 代码介绍如下: Font-weight:bolder 定

网页特效之用css样式表实现首字大写

css|大写|特效|网页|网页特效|样式表 css当中有许多平时很少用的属性,但是这些属性有时候被发掘出来以后就会立刻引起一些人的追逐,首字大写就是这样一种效果.最近越来越多的blogger开始在自己的blog中运用这一方法,东西很简单,下面就来给大家介绍一下用:first-letter伪类来实现这种效果的方法: :first-letter版本:CSS2 兼容性:IE5.5+ 语法: Selector : first-letter { sRules } 说明: 设置对象内的第一个字符的样式. 此

CSS首字下沉 :first-letter用法

  见到一些网站的一段文字开头的首字都是很大,看上去挺特别,这叫首字下沉效果,CSS中有现成的语法可以用,那就是:first-letter ,我们先来了解一下:first-letter 的语法说明:选择器: first-letter { CSS规则 } ,此伪对象仅作用于块对象.内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或display 属性为 block .你可以在此伪对象中配合使用 font-size

Word2007段落首字下沉设置教程

在Word文档中,如果文章很长,一般都选择把每一段的首个字体放大,这样看起来版式更加美观,而且也能起到突出的效果.一个一个的调整字体大小,这办法不科学,下面,教大家一个快速设置的方法. ①打开Word2007,输入部分文字,然后点击菜单栏--插入,点击文本里面的首字下沉. ②选择首字下沉选项. ③弹出首字下沉设置框,我们可以进行更加详细的设定. ④确定之后,在来看看效果吧. 分类: word教程

css实现首字下沉实例代码

先看个实例上代码.应用到你要沉的那个字就ok了. 例1  代码如下 复制代码 .first {  font-size:320%;   /*字体百分比增大*/  float:left;  /*左浮动*/ } 分析: 1.字体增大. 2.左浮动,然后下一行的就提上来了 例2  代码如下 复制代码 .menglong,.menglong2,.menglong3 {     width:300px;     border:1px solid #ddd;     padding:5px;     font

首字下沉与首行样式的如何实现?

首字下沉的效果我们可以用伪对象first-letter,需要与其它一些属性配合使用,font-size.float.padding等.伪对象first- 我们来看下面的例子:  代码如下 复制代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8

Word2007首字下沉怎么设置

Word2007首字下沉怎么设置   1.将光标定位到要使用首字下沉的段落中,然后选择"首字下沉"中的"下沉"选项. 2.现在,下沉效果已完成,如下图所示. 3.如果你对默认的下沉设置不满意,可以单击"首字下沉选项"命令,然后在对话框中设置它的字体等选项 4.此时段落首字已经按我们的设置下沉了,效果如下. wps教程 word教程 Excel教程

Word2003首字下沉怎么设置(图文)

Word2003首字下沉怎么设置   1.将光标定位到要使用首字下沉的段落中,然后选择"格式"菜单中的"首字下沉". 2.弹出"首字下沉"对话框,将位置设置为"下沉",然后根据需要修改下沉选项,完成之后确定即可. 3.此时段落首字已经按我们的设置下沉了,你还可以一并设置好其他需要下沉的文字,完成之后效果如下. word教程 Excel教程 PowerPoint教程