首页 > 开发 > CSS > 正文

CSS伪元素first-letter的使用方法

2023-04-12 19:32:22
字体:
来源:转载
供稿:网友

CSS伪元素first-letter用来设置段落的第一个字母(中文是第一个文字)的样式,如设置"词首大写"、"大写字母下沉"等样式。

first-letter样式可以使用的属性包括:font, text-decoration, text-transform, letter-spacing, word-spacing (仅当appropriate), line-height, float, vertical-align (仅当'float'为'none'时), margin, padding, border, color, background

CSS伪元素first-letter的使用例子如下:

p:first-letter
{
    font-size:20px;
    font-weight:bold;
    color:red;
}

这个CSS样式主要设置段落的第一字母或第一个汉字大小为20个像素,粗体,并且为红色。

first-letter伪元素在常见的浏览器中都能支持,支持的浏览器如下:

Internet Explorer 6、Internet Explorer 7、Internet Explorer 8、Internet Explorer 9、Firefox、Chrome、Opera、Safari
 

下面是一个完整的例子:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="keywords" content="CSS 伪元素 样式表 first-letter" />
<meta http-equiv="description" content="这里演示了CSS伪元素first-letter的使用方法" />
<title>CSS伪元素first-letter的使用方法—错新网CUOXIN</title>
<style>
p:first-letter{
    font-size:20px;
    font-weight:bold;
    color:red;
 }
</style>
</head>

<body>
<p>这里演示了CSS伪元素first-letter的使用方法</p>
<p>错新网CUOXIN致力于向各位网友提供最精彩的IT技术文章</p>
<p>错新网CUOXIN,你我共同的乐园。</p>
</body>
</html>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表