首頁 > web前端 > css教學 > CSS設定首字放大效果(程式碼實例)

CSS設定首字放大效果(程式碼實例)

WBOY
發布: 2018-09-27 13:55:16
原創
3279 人瀏覽過

本章為大家介紹css如何設定首字放大效果,有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

在很多的文章中,都有一個首字放大的效果,在css中同樣可以實現該效果。

css中透過對第一個字,進行單獨的設定從而實現該效果。

<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>
登入後複製

程式碼如上,主要是透過float與對首字下沉進行控制,並且用標記,對首字設定單獨的樣式,從而到達突出顯示的目的。

在css中還可以透過設定偽類別first-letter,來控制段落的第一個字母,也可以實現首字放大的效果,將如上程式碼的pspan改為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>
登入後複製

但是,設定了該屬性的文字對一些其他的css樣式支援得不好,所以,不建議使用這種方法。

 除了first-letter之外,偽類別first-line可以設定元素內第一行的樣式風格,給如上程式碼新增一行程式碼。

<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>
登入後複製

可以看到,各個段落的第一行文字都加上了下劃線,此外,css屬性中偽類別的具體使用方法還有很多。

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板