您现在的位置: 365建站网 > 建站教程 > css教程 > CSS :first-letter 伪元素

CSS :first-letter 伪元素

此节有 100 人学习过     参与评论

实例

向段落的第一个字符添加特殊样式:

<html>
<head>
<style type="text/css">
p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }
</style>
</head>

<body>
<p>This is a text.</p>
</body>
</html>

亲自试一试

(在页面底部可以找到更多实例)

浏览器支持

所有主流浏览器都支持 :first-letter 伪元素。

定义和用法

:first-letter 伪元素向文本的第一个字母添加特殊样式。

这个伪元素用于指定一个元素第一个字母的样式。所有前导标点符号应当与第一个字母一同应用该样式。某些语言有一些要处理为单个字符的字母组合,如果是这样,用户代理可能会把首字母同时应用到这个字母组合。

在 CSS2.1 之前,:first-letter 只能与块级元素关联。CSS2.1 扩大了这个范围,可以与任何元素关联。可以应用到首字母的属性是有限的。

注释:下列属性应用于 :first-letter 伪元素:

  • font 属性
  • color 属性
  • background 属性
  • margin 属性
  • padding 属性
  • border 属性
  • text-decoration
  • vertical-align (仅当 'float' 为 'none' 时)
  • text-transform
  • line-height
  • float
  • clear

伪元素可与 CSS 类结合:

p.article:first-letter {color: #FF0000;}

<p class="article">A paragraph in an article</p>

本例将把所有 class="article" 的段落的第一个字母设置为红色。

相关页面

CSS 教程:CSS 伪元素

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (100人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------
css教程目录

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号