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

css|大写|特效|网页|网页特效|样式表

css当中有许多平时很少用的属性,但是这些属性有时候被发掘出来以后就会立刻引起一些人的追逐,首字大写就是这样一种效果。最近越来越多的blogger开始在自己的blog中运用这一方法,东西很简单,下面就来给大家介绍一下用:first-letter伪类来实现这种效果的方法:

: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; }

应用于:

IE5.5+ ADDRESS BLOCK QUOTE BODY CENTER DD DIV DL DT FIELDSET FORM Hn LEGEND LI LISTING MARQUEE MENU P PLAINTEXT PRE XMP

目前IE和FF都支持此属性,所以大家不必顾虑兼容性的问题,当然要记得设置float属性哦,不然就不会出现那种大字紧贴几行的效果了。

范例(未设置float属性):

<style>p{line-height:25px;}p:first-letter{font-size:50px;line-height:50px;}</style><p>欢迎大家来到<a href="http://www.webjx.com">网页教学网</a></p>
运行代码复制代码另存代码收藏本页

    范例(设置float属性为left):

<style>p{line-height:25px;}p:first-letter{font-size:50px;line-height:50px;float:left;}</style><p>欢迎大家来到<a href="http://www.webjx.com">网页教学网</a></p>
运行代码复制代码另存代码收藏本页

时间: 2024-10-31 18:34:11

网页特效之用css样式表实现首字大写的相关文章

用css样式表实现首字大写

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

CSS样式表实现分页效果源代码

CSS样式表实现效果很好的分页效果,在学习编程过程中由于文章内容比较多或者列表内容比较多,我们都需要分页!那么你想不想要一种好的分页效果呢?这个是我认为比较容易使用,同时编程方面也挺容易实现的分页,就是以10页为基础,然后上十页和下十页,因为很少有人有兴趣会去看10页甚至20页以后的内容. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

CSS样式表实现文字变图象特效

css|特效|样式表 一段文字,当鼠标在文字上面单击,文字消失,原来文字的地方却立即变成了一张图片,当鼠标在图片上单击,图片又消失,原来的文字又重现了,像变魔术一样,是不是有意思?!这种效果用Dreamweaver的Behavirs 功能也可实现,但那要增加一段Javascript程序,明显增加了不少代码.而用CSS来制作这种效果,增加的代码却要少得多. 原理:利用CSS的属性值可动态改变的特点. 思路:定义一个HTML元素CSS属性的两种属性值,再用一个事件来触发,一旦事件发生,则改变HTML

用CSS样式表实现文字变图象特效

一段文字,当鼠标在文字上面单击,文字消失,原来文字的地方却立即变成了一张图片,当鼠标在图片上单击,图片又消失,原来的文字又重现了,像变魔术一样,是不是有意思?!这种效果用Dreamweaver的Behavirs 功能也可实现,但那要增加一段Javascript程序,明显增加了不少代码.而用CSS来制作这种效果,增加的代码却要少得多. 原理:利用CSS的属性值可动态改变的特点. 思路:定义一个HTML元素CSS属性的两种属性值,再用一个事件来触发,一旦事件发生,则改变HTML元素的属性值,从而达到

网页特效之让css使网页图片半透明

css|特效|透明|网页|网页特效 你用过css么?当然,我是指你喜欢做网页的话,用过?很好,那你用过它的特效么?没有?那请跟我来.让我先通俗的介绍一下css,css不属于html,它属于html的辅助语言,在没有css之前,网页是静态的,但自从有了css 后,网页制作的历史就要重写了,css能给网页加入许多你想象不到的动态效果,这也是其中一点而已,因为css中有很多特效,例如我们今天讲的利用css使图片变透明. 也许你会问,GIF图片不是能透明吗?那干嘛还那么麻烦,嘿嘿,GIF是可以透明,但可

网页HTML默认的CSS样式表属性总结

css|网页|样式表 这个东西,在你需要还原默认值的时候,比较有用. 开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了. 以前一直在找这份文档,今天偶然在w3上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式(margin和font-size). html, address, blockquote, body, dd, div, dl, d

认识:HTML网页中默认的CSS样式表属性总结

css|网页|样式表    这个东西,在你需要还原默认值的时候,比较有用.     开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了.     以前一直在找这份文档,今天偶然在w3上看到了.除了inline和block的定义,主要是要注意  body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式(margin和font-size). html, address, blockquote, body, d

网页特效:expression将JS、Css结合起来

css|express|js|特效|网页|网页特效 IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性.就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果. 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象.这个表达式就好像是在这个元素的一个成员函数中一样. 给元素固有属性赋值 例如,你可以依

入门知识:介绍学习网页技术CSS样式的方法

css|网页 从开始认识CSS(DW4)那时起,我就知道了CSS的强大,但从未用CSS排版过,因为我曾经尝试过学习,但感觉太难了 而且用DW的表格,所见及所得,做起页面来非常的快,排版也容易的多,由于最近求职,很多公司都要求DIV,CSS,所以我再次尝试学习 1.学习方式 我以为,看别人的代码是一个非常好的学习方式(前提是你需要有点基础知识),在查看别人的代码时可以去除一些重复的,或者一些于CSS无关的代码,将更利于我们分析,你可以从中了解到别人是怎么做的,更深一点,你可以考虑为什么要这样做,当