用css样式表实现首字大写

akpandeng

akpandeng

2016-02-19 14:18

今天图老师小编要向大家分享个用css样式表实现首字大写教程,过程简单易学,相信聪明的你一定能轻松get!
 

  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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

  范例(未设置float属性):

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

style
p{line-height:25px;}
p:first-letter{font-size:50px;line-height:50px;}
/style
p欢迎大家来到a href=http://www.sj33.cn设计之家/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.sj33.cn"设计之家/a/p

展开更多 50%)
分享

猜你喜欢

用css样式表实现首字大写

Web开发
用css样式表实现首字大写

关于CSS样式表

Web开发
关于CSS样式表

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS用样式表美化你的网页

Web开发
CSS用样式表美化你的网页

CSS样式表书写顺序

Web开发
CSS样式表书写顺序

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS样式表最佳习惯

Web开发
CSS样式表最佳习惯

CSS样式表常用技巧

Web开发
CSS样式表常用技巧

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

SPAN和DIV的区别

SPAN和DIV的区别

夏天到了 - QQ非主流分组

夏天到了 - QQ非主流分组
下拉加载更多内容 ↓