生活随笔
收集整理的這篇文章主要介紹了
CSS设置首字放大
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS設置首字放大
? ? ? ? ? 在很多的文章中，都有一個首字放大的效果，在CSS中同樣可以實現該效果。
? ? ? ? ??CSS中通過對第一個字，進行單獨的設置從而實現該效果。
<span style="font-size:24px;"><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>
</span>
? ? ? ? ??代碼如上，主要是通過float與對首字下沉進行控制，并且用<span>標記，對首字設置單獨的樣式，從而到達突出顯示的目的。
? ? ? ? ??在CSS中還可以通過設置偽類別first-letter，來控制段落的第一個字母，也可以實現首字放大的效果，將如上代碼的pspan改為p:first-letter。
<span style="font-size:24px;"><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>
</span>
? ? ? ? ??但是，設置了該屬性的文字對一些其他的CSS樣式支持得不好，所以，不推薦使用這種方法。
? ? ? ? ??除了first-letter之外，偽類別first-line可以設置元素內第一行的樣式風格，給如上代碼添加一行代碼。
<span style="font-size:24px;"><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设置首字放大的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
