有关首行的那些事儿

最新推荐文章于 2022-08-17 10:52:59 发布

云圣天

最新推荐文章于 2022-08-17 10:52:59 发布

阅读量1.2k

点赞数 2

分类专栏： css 文章标签： CSS HTML 首字下沉首行缩进

本文链接：https://blog.csdn.net/lee_magnum/article/details/9947665

版权

css 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

下面是两个个小技巧，一个是很多报刊中的首字下沉，其实很简单，原理就是在样式中添加后缀即可。还有一个是对第一行文字进行单独样式。给这段标签添加后缀即可。这两个小技巧分别都兼容低版本。非常实用的小技巧哟。下面是一段小例子。

css代码：

.menglong,.menglong2,.menglong3 {
    width:300px;
    border:1px solid #ddd;
    padding:5px;
    font-size:12px;
    margin:5px 0;
}
.menglong:first-line {
    color:red;
}
.menglong:first-letter {
    font-size:350%;
    font-weight:bold;
    color:#000;
    float:left;
}
.menglong2:first-line {
    letter-spacing:-2px;
}
.menglong3{
    text-indent:2em;
}

html代码：

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CSS首字下沉</title>
</head>
<body>
<div class="menglong">2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration</div>
<div class="menglong">首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色</div>
<div class="menglong2">首行缩进，距离更紧密的.首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的</div>
<div class="menglong3">段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。</div>
</body>
</html>

云圣天

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关首行的那些事儿

下面是两个个小技巧，一个是很多报刊中的首字下沉，其实很简单，原理就是在样式中添加后缀即可。还有一个是对第一行文字进行单独样式。给这段标签添加后缀即可。这两个小技巧分别都兼容低版本。非常实用的小技巧哟。下面是一段小例子。css代码：.menglong{ width:300px; border:1px solid #ddd; padding:5px; font-
复制链接

扫一扫