带有CSS的：first-line和：first-letter元素的Dropdrop段落

最新推荐文章于 2021-08-06 13:19:02 发布

cune1359

最新推荐文章于 2021-08-06 13:19:02 发布

阅读量472

点赞数

文章标签：定位 java css python html

我认为有些CSS选择器或属性很少在野外使用，但实际上它们自CSS1时代就已经存在。其中一些包括:first-line和:first-letter pesudo-elements 。

如何使用？

这些伪元素基本上与它们的兄弟姐妹-before和：after-相似，并且我认为它们也非常简单。 :first-letter将针对所选元素的第一个字母或字符，此伪元素通常用于创建印刷效果，例如首字下沉。这是完成的过程。

p:first-letter {
	font-size: 50px;
}

此代码导致以下演示。

应该注意一些事情，但是，只有在第一个字符没有其他元素（例如图像）之后，此效果才适用。此外，当我们连续有一些相同的目标元素时，所有它们也会受到影响。

此外，就:first-line ，此伪元素将定位目标元素的第一行，下面的示例显示了我们如何加粗段落的第一行。

p:first-line {
	font-weight: bold;
}

就像先前的:first-letter代码一样，这也会影响页面中段落元素中的所有第一行。

因此，在实际情况下，当我们通常只想在首段添加首字下沉或仅更改第一行时，我们需要更加具体-通过添加额外的类属性或将这些伪元素与:first-child一起使用或:first-of-type选择器，就像这样。

p:first-child:first-letter {
	font-size: 50px;
}
p:first-child:first-line {
	font-weight: bold;
}

到这里，受影响的段落现在只是第一段。

工作中的伪元素

好吧，让我们现在尝试通过使用伪元素来设计段落的更好外观。但是在开始之前，我们需要为下盖使用特殊的字体，这是我的选择：Paul Lloyd的Hominis 。然后，我们在样式表中定义一个新的字体系列，如下所示。

@font-face {
    font-family: 'HominisNormal';
    src: url('fonts/HOMINIS-webfont.eot');
    src: url('fonts/HOMINIS-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/HOMINIS-webfont.woff') format('woff'),
         url('fonts/HOMINIS-webfont.ttf') format('truetype'),
         url('fonts/HOMINIS-webfont.svg#HominisNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

接下来，我们为段落设置默认字体系列。

p {
	color: #555;
	font-family: 'Georgia', Times, serif;
	line-height: 24px;
}

在此示例中，我们将使用:first-child选择器定位第一段，并为其应用装饰样式，使其看起来更加突出：

p:first-child {
	padding: 30px;
	border-left: 5px solid #7f7664;
	background-color: #f5f4f2; 
	line-height: 32px;
    box-shadow:  5px 5px 0px 0px rgba(127, 118, 100, 0.2);
    position: relative;
}

然后，我们使用:first-letter添加:first-letter ，扩大字体大小并为其分配新的字体家族；

p:first-child:first-letter {
	font-size: 72px;
	float: left;
	padding: 10px;
	height: 64px;
	font-family: 'HominisNormal';
	background-color: #7F7664;
	margin-right: 10px;
	color: white;
	border-radius: 5px;
	line-height: 70px;
}

我们还将使用:first-line强调第一:first-line ，就像这样。

p:first-child:first-line {
	font-weight: bold;
	font-size: 24px;
	color: #7f7664;
}

最后，我们想使用:after 伪元素将装饰属性添加到带有回形针的第一段中。

p:first-child:after {
	background: url("../images/paper-clip.png") no-repeat scroll 0 0 transparent;
	content: " ";
	display: inline-block;
	height: 100px;
	position: absolute;
	right: -5px;
	top: -35px;
	width: 100px;
}

这就是我们需要的所有代码，现在我们的段落应该看起来更好了；