CSS legt den Vergrößerungseffekt für das erste Wort fest (Codebeispiel)-CSS-Tutorial-php.cn

CSS legt den Vergrößerungseffekt für das erste Wort fest (Codebeispiel)

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Freigeben： 2018-09-27 13:55:16

Original

3289 Leute haben es durchsucht

In diesem Kapitel erfahren Sie, wie Sie den Verstärkungseffekt für das erste Wort in CSS festlegen. Ich hoffe, dass es für Sie hilfreich ist.

In vielen Artikeln gibt es einen Effekt der Vergrößerung des ersten Wortes, und dieser Effekt kann auch in CSS erreicht werden.

Dieser Effekt wird durch das Setzen einer separaten Einstellung für das erste Wort in CSS erreicht.

<html>
	<head>
	    <title>首字放大</title>
	    <style>
		body{
			background-color:black;
		}
		p{
			font-size:15px;
			color:white;
		}
		p span{
			font-size:60px;
			float:left;
			padding-right:5px;
			font-weight:bold;
			font-family:黑体;
			color:yellow;
		}
	     </style>
	</head>
	<body>
		<p><span>中</span>秋节是远古天象崇拜——敬月习俗的遗痕。据《周礼.春官》记载，周代已有“中秋夜迎寒”、“中秋献良裘”、“中秋夕月（拜月）”的活动；汉代，又在中秋或立秋之日敬老、养老，赐以雄粗饼。晋时亦有中秋赏月之举，不过不太普遍；直到唐代将中秋与嫦娥奔月、吴刚伐桂、玉兔捣药、杨贵妃变月神、唐明皇游月宫等神话故事结合起，使之充满浪漫色彩，玩月之风方才大兴。</p>
		<p>北宋，正式定八月十五为中秋节，并出现“小饼如嚼月，中有酥如饴”的节令食品。孟元老《东京梦华录》说：“中秋夜，贵家结饰台榭，民间争占酒楼玩月”；而且“弦重鼎沸，近内延居民，深夜逢闻笙语之声，宛如云外。间里儿童，连宵婚戏；夜市骈阗，至于通晓。”吴自牧《梦梁录》说“此际金风荐爽，玉露生凉，丹桂香飘，银蟾光满。王孙公子，富家巨室，莫不登危楼，临轩玩月，或开广榭，玳筳罗列，琴瑟铿锵，酌酒高歌，以卜竟夕之欢。”</p>
	</body>
</html>

Nach dem Login kopieren

Der Code ist wie oben, hauptsächlich durch Float und Steuerung des Ablegens des ersten Wortes und durch die Verwendung der -Markierung, um einen separaten Stil für das erste Wort festzulegen Wort, um den Zweck der Präsentation zu erreichen.

In CSS können Sie auch den ersten Buchstaben des Absatzes steuern, indem Sie die Pseudokategorie „erster Buchstabe“ festlegen, und Sie können auch den Effekt der Vergrößerung des ersten Buchstabens erzielen pspan des obigen Codes zu p:first-letter.

<html>
	<head>
	     <title>首字放大</title>
	     <style>
		body{
		    background-color:black;
		}
		p{
			font-size:15px;
			color:white;
		}
		p:first-letter{
			font-size:60px;
			float:left;
			padding-right:5px;
			font-weight:bold;
			font-family:黑体;
			color:yellow;
		}
	      </style>
	</head>
	<body>
		<p><span>中</span>秋节是远古天象崇拜——敬月习俗的遗痕。据《周礼.春官》记载，周代已有“中秋夜迎寒”、“中秋献良裘”、“中秋夕月（拜月）”的活动；汉代，又在中秋或立秋之日敬老、养老，赐以雄粗饼。晋时亦有中秋赏月之举，不过不太普遍；直到唐代将中秋与嫦娥奔月、吴刚伐桂、玉兔捣药、杨贵妃变月神、唐明皇游月宫等神话故事结合起，使之充满浪漫色彩，玩月之风方才大兴。</p>
		<p>北宋，正式定八月十五为中秋节，并出现“小饼如嚼月，中有酥如饴”的节令食品。孟元老《东京梦华录》说：“中秋夜，贵家结饰台榭，民间争占酒楼玩月”；而且“弦重鼎沸，近内延居民，深夜逢闻笙语之声，宛如云外。间里儿童，连宵婚戏；夜市骈阗，至于通晓。”吴自牧《梦梁录》说“此际金风荐爽，玉露生凉，丹桂香飘，银蟾光满。王孙公子，富家巨室，莫不登危楼，临轩玩月，或开广榭，玳筳罗列，琴瑟铿锵，酌酒高歌，以卜竟夕之欢。”</p>
	</body>
</html>

Nach dem Login kopieren

Text mit diesem Attributsatz unterstützt jedoch einige andere CSS-Stile nicht gut, daher wird diese Methode nicht empfohlen.

Zusätzlich zum ersten Buchstaben kann die Pseudokategorie „erste Zeile“ den Stil der ersten Zeile innerhalb des Elements festlegen und dem obigen Code eine Codezeile hinzufügen.

<html>
    <head>
	   <title>首字放大</title>
	   <style>
		body{
			background-color:black;
		}
		p{
			font-size:15px;
			color:white;
		}
		p:first-letter{
			font-size:60px;
			float:left;
			padding-right:5px;
			font-weight:bold;
			font-family:黑体;
			color:yellow;
		}
		p:first-line{
			text-decoration:underline;
		}
		</style>
	</head>
	<body>
		<p><span>中</span>秋节是远古天象崇拜——敬月习俗的遗痕。据《周礼.春官》记载，周代已有“中秋夜迎寒”、“中秋献良裘”、“中秋夕月（拜月）”的活动；汉代，又在中秋或立秋之日敬老、养老，赐以雄粗饼。晋时亦有中秋赏月之举，不过不太普遍；直到唐代将中秋与嫦娥奔月、吴刚伐桂、玉兔捣药、杨贵妃变月神、唐明皇游月宫等神话故事结合起，使之充满浪漫色彩，玩月之风方才大兴。</p>
		<p>北宋，正式定八月十五为中秋节，并出现“小饼如嚼月，中有酥如饴”的节令食品。孟元老《东京梦华录》说：“中秋夜，贵家结饰台榭，民间争占酒楼玩月”；而且“弦重鼎沸，近内延居民，深夜逢闻笙语之声，宛如云外。间里儿童，连宵婚戏；夜市骈阗，至于通晓。”吴自牧《梦梁录》说“此际金风荐爽，玉露生凉，丹桂香飘，银蟾光满。王孙公子，富家巨室，莫不登危楼，临轩玩月，或开广榭，玳筳罗列，琴瑟铿锵，酌酒高歌，以卜竟夕之欢。”</p>
	</body>
</html>
</span>

Nach dem Login kopieren

Wie Sie sehen, ist die erste Textzeile in jedem Absatz unterstrichen. Darüber hinaus gibt es viele spezifische Möglichkeiten, Pseudokategorien in CSS-Attributen zu verwenden.