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

时间:2016-08-05
我们有时候会看到某些网站的一段内容首字(字母)与其他字之间不同,或是下沉或是很大,这种效果叫css首字下沉,本文章向大家介绍css如何实现首字(字母)下沉效果,需要的朋友可以参考一下。

css 首字下沉效果原理

首字下沉主要使用到cssfirst-letter伪元素,然后配合使用font-sizefloat来设置文字的样式即可实现。

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>

在线运行

上一页 下一页

原文地址:http://www.manongjc.com/article/1313.html