浅谈CSS首字放大下沉及段首缩进2字符

1、CSS首字放大下沉

对首字进行放大下沉，需用到css的伪元素：first-letter。

<!doctype html>
<html><head><style type="text/css">.text{font-family:Microsoft YaHei;font-size:16px;color:#676767;float:left;clear:left;width:600px;text-align:justify;}.text:first-letter{font-size:72px;color:#f5e327;}</style></head><body><div class="text">百度前端技术学院诞生于2014年，由百度最大规模的前端技术组织 EFE 团队发起成立。目前学院是由百度校园品牌部、百度多模交互搜索部以及百度校园招聘组联合组织的，面向大学生人群，免费的一个技术学习、交流与分享平台。一年之计在于春，经过漫长的冬季，又是开学之际，众多莘莘学子纷纷又回到校园，投入学习之中。百度前端技术学院也在此时为大家带来了一道前端学习的饕鬄盛宴。经过2年多的尝试与摸索，我们确认了实践、交流与分享，对于技术学习而言，是非常有效且高效的手段，因此，本次春季班，我们特别搭建了一个线上平台系统，通过这个系统向学员们发送编码任务，学员们在这个系统上提交作业地址，进行相互的代码评审（Code Review）与评价，同时在平台中积累自己的学习总结笔记并分享给大家。为了让大家更加有动力进行这些学习方式，我们在整个春季班的学习过程中，融入了竞赛模式，任务完成得好的，评价仔细认真的，笔记写得对他人有帮助的，我们都会通过一套积分系统来进行排名。在头一个半月的任务“闯关”之后，我们还特意安排了一个很有挑战性，能够发挥大家创新能力的大任务环节，具体任务当然暂时保密。这个终极BOSS的挑战会作为整个春季班的最终环节。</div></body>
</html>

问题：首字放大后，只占据一行。不能达到预期的首字占据多行的效果。

解决方法：在将首字的字体设为较大的字体后，通过float:left为首字设置浮动，其他文字就会将首字环绕。

<!doctype html>
<html><head><style type="text/css">.text{font-family:Microsoft YaHei;font-size:16px;color:#676767;float:left;clear:left;width:600px;text-align:justify;}.text:first-letter{font-size:72px;color:#f5e327;float:left;}</style></head><body><div class="text">百度前端技术学院诞生于2014年，由百度最大规模的前端技术组织 EFE 团队发起成立。目前学院是由百度校园品牌部、百度多模交互搜索部以及百度校园招聘组联合组织的，面向大学生人群，免费的一个技术学习、交流与分享平台。一年之计在于春，经过漫长的冬季，又是开学之际，众多莘莘学子纷纷又回到校园，投入学习之中。百度前端技术学院也在此时为大家带来了一道前端学习的饕鬄盛宴。经过2年多的尝试与摸索，我们确认了实践、交流与分享，对于技术学习而言，是非常有效且高效的手段，因此，本次春季班，我们特别搭建了一个线上平台系统，通过这个系统向学员们发送编码任务，学员们在这个系统上提交作业地址，进行相互的代码评审（Code Review）与评价，同时在平台中积累自己的学习总结笔记并分享给大家。为了让大家更加有动力进行这些学习方式，我们在整个春季班的学习过程中，融入了竞赛模式，任务完成得好的，评价仔细认真的，笔记写得对他人有帮助的，我们都会通过一套积分系统来进行排名。在头一个半月的任务“闯关”之后，我们还特意安排了一个很有挑战性，能够发挥大家创新能力的大任务环节，具体任务当然暂时保密。这个终极BOSS的挑战会作为整个春季班的最终环节。</div></body>
</html>

2、CSS段首缩进2字符

实现段首缩进2字符，需为段落设置text-indent:2em。

<!doctype html>
<html><head><style type="text/css">.text{font-family:Microsoft YaHei;font-size:16px;color:#676767;float:left;clear:left;width:300px;text-align:justify;}.text:first-letter{font-size:72px;color:#f5e327;float:left;}p{text-indent:2em;margin:0;}</style></head><body><div class="text">百度前端技术学院诞生于2014年，由百度最大规模的前端技术组织 EFE 团队发起成立。目前学院是由百度校园品牌部、百度多模交互搜索部以及百度校园招聘组联合组织的，面向大学生人群，免费的一个技术学习、交流与分享平台。<br><p>一年之计在于春，经过漫长的冬季，又是开学之际，众多莘莘学子纷纷又回到校园，投入学习之中。</p><p>百度前端技术学院也在此时为大家带来了一道前端学习的饕鬄盛宴。经过2年多的尝试与摸索，我们确认了实践、交流与分享，对于技术学习而言，是非常有效且高效的手段。</p></div></body>
</html>

浅谈CSS首字放大下沉及段首缩进2字符相关推荐

html首行字放大标签,CSS设置首字放大
CSS设置首字放大在很多的文章中,都有一个首字放大的效果,在CSS中同样可以实现该效果. CSS中通过对第一个字,进行单独的设置从而实现该效果. 首字放大中秋节是远古天象崇拜--敬月习俗的遗痕.据 ...
html 首字变大,CSS设置首字放大效果（代码实例）
本章给大家介绍CSS如何设置首字放大效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 在很多的文章中,都有一个首字放大的效果,在CSS中同样可以实现该效果. CSS中通过对第一个 ...
[css] 如何使用CSS实现段落首字母或首字放大效果？
[css] 如何使用CSS实现段落首字母或首字放大效果? ::first-letter 伪元素选择器p::first-letter {font-size: 2em;font-weight: bold; ...
Web前端之浅谈css
Web前端之浅谈CSS CSS 什么是CSS? CSS的三种引用方式 CSS常用选择器介绍选择器权重字体属性文本属性元素分类 display属性: 块状元素行内元素行内块元素盒模型内边 ...
html css 命名规范,浅谈css命名规则(新手必看)
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
html 怪异模式,CSS_浅谈CSS编程中的怪异模式，怪异模式盒模型今天学习了 - phpStudy...
浅谈CSS编程中的怪异模式怪异模式盒模型今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理. 先不考虑css3的情况,盒模型一共 ...
css inport作用,浅谈css和@import区别及用法详解
下面小编就为大家带来一篇浅谈css和@import区别及用法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 css和@import都是调用外部样式表的方法. 一.用法 ...
php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...

浅谈CSS首字放大下沉及段首缩进2字符

浅谈CSS首字放大下沉及段首缩进2字符相关推荐

最新文章

热门文章