CSS初始上限

了解如何使用CSS和圖像創建花式首字母大寫

了解如何使用CSS為段落創建精美的首字母大寫。甚至還有一種簡單的圖像替換技術可以將圖形圖像用於初始上限。

文件中有三種基本的首字母大寫形式：

首字母大寫或首字下限非常熟悉。他們是打扮長篇累sp文本的好方法。使用CSS屬性：第一個字母，您可以輕鬆定義如何讓您的第一個字母變得更漂亮。

您只需創建一個簡單的高級初始上限就可以使您的段落的第一個字母與第一個字母的偽元素相匹配：

p：首字母{font-size：3em; }

但是很多瀏覽器都會看到第一個字母大於文本中其餘部分的字母，所以它們使得第一個字母與第一個字母的意義相同，而不是該行的其餘部分。幸運的是，使用第一行偽元素和line-height屬性很容易解決這個問題：

p：首字母{font-size：3em; } p：first-line {line-height：1em; }

在文檔中播放行高，直到找到合適的文字大小。

一旦你了解瞭如何製作初始帽子，你可以穿著華麗的衣服來讓它脫穎而出。玩顏色，背景顏色，邊界，或任何罷工你想像。一個相當簡單的風格是為第一個字母反轉字體和背景顏色的顏色：

p：首字母{font-size：300％; background-color：＃000; 顏色：#fff; } p：first-line {line-height：100％;} }

另一個訣竅是將第一行中心。這對於CSS來說可能會非常棘手，因為如果您的佈局非常靈活，那麼文本行的中間可能會有所不同。但是隨著一些玩弄值，你可以縮進你的第一行足以讓第一個字母顯示在中間。只需使用段落文本縮進的百分比，直到它看起來正確：

p：首字母{font-size：300％; background-color：＃000; 顏色：#fff; } p：first-line {line-height：100％;} } p {text-indent： 45％ ; }

CSS使用相鄰的首字母大寫字母會很困難，因為不同的瀏覽器會以不同的方式顯示字體。在CSS中創建相鄰頂點的想法是使用第一行上的text-indent屬性將它推出（向左）一個負值。您還需要更改該段落的左邊距一定量。玩這些數字，直到段落看起來不錯。

p {text-indent：-2.5em; margin-left：3em; } p：首字母{font-size：3em; } p：first-line {line-height：100％;} }

創建花哨的初始上限的最佳方法是將字體更改為更加裝飾的字體系列。如果您使用一系列字體，然後使用通用字體，這將有助於保證您的初始上限顯示良好，以便您的客戶可以看到它，而不會涉及可訪問性和可用性問題。

p：首字母{font-size：3em; font-family：“Edwardian Script ITC”，“Brush Script MT”，草書; } p：first-line {line-height：100％;} }

和往常一樣，您可以將所有這些建議放在一起，以創建廣告樣式到您的段落的初始上限。

畢竟，如果你仍然不喜歡你的首字母大寫在頁面上的顯示方式，你可以使用圖形來獲得你正在尋找的確切效果。但在您決定直接轉到圖形之前，您應該意識到這種方法的缺點：

首先，您需要創建第一個字母的圖形。我用Photoshop創建了字母L，字體為“Edwardian Script ITC”。我做了很大的 - 300pt的大小。然後，我將圖像裁剪到最低點，並註意到圖像的寬度和高度。

然後我為我的段創建了一個類“capL”。這是我定義要使用的圖像，領先（行高）等的位置。

您需要使用圖像寬度和高度來設置段落的文本縮進和填充頂部。對於我的L圖像，我需要95px縮進和72px填充。

p.capL {line-height：1em; background-image：url（capL.gif）; 背景重複：不重複; text-indent：95px; padding-top：72px; }

但那不是全部。如果你把它留在那裡，那麼第一個字母將在段落中重複 - 首先是圖形，然後是文本。所以，我在第一個元素的第一個元素上添加了一個“initial”類型的跨度 - 並告訴瀏覽器不顯示該字母：

span.initial {display：none; }

然後圖形顯示正確。您可以使用段落上的文本縮進功能來讓文本緊貼信件，但是您希望它顯示。

Alike posts