html首字母样式,CSS实现段落首字母、首字放大特效

摘要：

段落首字母放大是指放大段落开头的字母或者汉字，主要使用了css的first-letter伪类选择器。

单行放大：

在第一行内放大，效果如下：

复制代码代码如下:

Document

body {

background-color: #FFFFFF;

color: #595959;

}

.contain {

width: 150px;

}

.contain p {

font: 80%/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif;

}

.contain p:first-letter {

font-size: 2em;

padding: 0.1em;

color: #000000;

vertical-align: middle;

}

.contain p:first-line {

color: red;

}

.contain p:first-child:first-letter {

color: red;

}

.contain p:first-child:first-line {

color: inherit;

}

This is a test article. This is a test article.

这是一个测试

注意：first-letter支持IE7+，first-line支持IE8+

多行放大：

效果如下：

复制代码代码如下:

Document

* {

margin:0;

padding:0;

}

body {

font-size:12px;

font-family: Tahoma, Geneva, sans-serif;

padding:200px;

}

p {

width:150px;

color:#000;

font-size:1em;

margin-bottom: 20px;

}

p:first-letter{

float: left;

font-size:2.5em;

padding-right:5px;

text-transform:uppercase;

}

p:first-line{

color:#f00;

}

This is a test article. This is a test article.This is a test article. This is a test article.This is a test article. This is a test article.

这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。

html首字母样式,CSS实现段落首字母、首字放大特效相关推荐

php转pdf首行缩进,css text-indent属性如何实现首行缩进？【详解】
我们在设计网站HTML文章页样式时,文章展示的效果是直接影响到整个站的美观程度以及整个站的质量.我们都知道,在做Word文档时候,都需要段落分明,描述清晰.那么我们在网站上发布的文章,也最好要段落分明 ...
html5首字母大小写,css中如何设置英文首字母大写
css中可使用text-transform属性来设置英文首字母大写.text-transform属性可控制文本的大小写,只需要给包含英文字母文本的元素设置"text-transform:ca ...
[css] 如何使用CSS实现段落首字母或首字放大效果？
[css] 如何使用CSS实现段落首字母或首字放大效果? ::first-letter 伪元素选择器p::first-letter {font-size: 2em;font-weight: bold; ...
html文字段落缩进,CSS text-indent段落首行文字缩进分享
DIV CSS text-indent段落首行文字缩进,CSS段首缩进,可控制缩进距离样式教程篇让每个段落首行开头文字缩进,如缩进2个文字距离样式,我将用到text-indent属性样式. .div ...
CSS实现段落首行缩进两个字符
段落前面空两个字的距离,不要再使用空格了,对于文字,需要使用4个才会显示汉字2个字符空格的效果. 用CSS实现段落首缩进两个字符,应该使用首行缩进text-indent.text-indent可以使 ...
[css] 怎么让英文单词的首字母大写？
[css] 怎么让英文单词的首字母大写? 楼上用的没问题,学习嘛,那我就来扩展一下.text-transform 属性控制文本的大小写,是CSS2.1的属性,兼容性问题不大. 属性值是关键字,有4+1 ...
div+CSS实现段落首行缩进两个字符（text-indent标签）
div+CSS实现段落首行缩进两个字符段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符. 应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进 ...
css规则首行缩进,首行缩进css_css控制段落首行缩进 text-indent
摘要腾兴网为您分享:css控制段落首行缩进 text-indent,一起发,虚拟按键,微众银行,随身行等软件知识,以及a4输入法,悦跑圈app,淘淘二手车,悟空磁力搜索,oc渲染器,avimpegw ...
html首行字放大标签,CSS设置首字放大
CSS设置首字放大在很多的文章中,都有一个首字放大的效果,在CSS中同样可以实现该效果. CSS中通过对第一个字,进行单独的设置从而实现该效果. 首字放大中秋节是远古天象崇拜--敬月习俗的遗痕.据 ...

html首字母样式,CSS实现段落首字母、首字放大特效

html首字母样式,CSS实现段落首字母、首字放大特效相关推荐

最新文章

热门文章