css first-letter实现首字(字母)下沉效果

css 首字下沉效果原理

首字下沉主要使用到css的first-letter伪元素，然后配合使用font-size和float来设置文字的样式即可实现。

first-letter选择器选取指定元素文本内容的第一个字母，即用于设置第一个字母的css样式。

下面是一个简单的first-letter实例

<!DOCTYPE HTML>
<html>
    <head>
        <style>
        p:first-letter {
            font-size: 200%;
            background-color: lightgray;
            border: 1px solid black;
        }
        p::first-line {
            letter-spacing: 5px;
        }
        </style>
    </head>
    <body>
            <p>
                This is a test. This is a test. 
                This is a test. This is a test. 
            </p>
    </body>
</html>

效果如下：

css first-letter实现首字(字母)下沉效果

下面我们使用first-letter制作首字下沉效果。

css首字下沉效果的实现

通过first-letter选择器选择元素的首个字母，然后通过font-size和float来设置字母的css样式

源码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" />
		<title>CSS ::first-letter 伪元素实现首字母下沉效果</title>		
		<style type="text/css" media="all">
			p::first-letter
			{
				font-size: 4em;
				font-weight: bold;
				border: 1px solid blue;
				margin-right: 8px;
				float: left;	
			}
		</style>
	</head>
	<body>
		
		<p>码农教程旨在为IT编程入门学员及码农们提供免费学习的平台。
          本网站有大量IT编程入门教程(JAVA, PHP, JAVASCRIPT, C, C++, HTML, 
          CSS等)及编程过程中遇到问题时的解决办法，在这里，码农们可以找到
          优质的IT编程入门教程，同时，码农们还可以找到大量编程入门实例及
          编程笔记，通过教程、实例、笔记和解决方案相结合，使码农们学习起
          来更容易更轻松。</p>

	</body>
</html>

在线运行