परिचय
CSS ::first-letter स्यूडो-एलिमेंट का उपयोग करके किसी एलिमेंट के **पहले अक्षर** को स्टाइल कर सकता है। ध्यान दें कि विराम चिह्न, डाइग्राफ, और कंटेंट प्रॉपर्टी पहले अक्षर को बदल सकते हैं।
उदाहरण 1: बेसिक ड्रॉप कैप
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
::first-letter {
font-size: 3em;
color: sienna;
box-shadow: -10px 0 10px green;
background-color: gainsboro;
}
</style>
</head>
<body>
<h2>Proin ut diam eros</h2>
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html>
उदाहरण 2: एडवांस्ड स्टाइलिंग
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
body > * {
background-color: slategrey;
}
::first-letter {
font-size: 1.6em;
color: darkviolet;
background-color: silver;
text-shadow: -15px 8px palevioletred;
}
</style>
</head>
<body>
<h2>Proin ut diam eros <p>Donec rutrum a erat vitae interdum. </p> <p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p> </body>
</html>
अनुमत CSS प्रॉपर्टीज
::first-letter फॉन्ट, रंग, बैकग्राउंड, मार्जिन, पैडिंग, बॉर्डर, टेक्स्ट-डेकोरेशन, वर्टिकल-अलाइन, टेक्स्ट-ट्रांसफॉर्म, लाइन-हाइट, फ्लोट, और क्लियर स्वीकार करता है।
व्यावहारिक उदाहरण: क्लासिक ड्रॉप कैप
<!DOCTYPE html>
<html lang="hi">
<head>
<style>
.drop-cap::first-letter {
float: left;
font-size: 4em;
line-height: 0.85;
margin-right: 0.1em;
margin-top: 0.05em;
color: #2c3e50;
font-weight: bold;
font-family: Georgia, serif;
}
.drop-cap {
line-height: 1.6;
text-align: justify;
max-width: 600px;
margin: 2rem auto;
padding: 1rem;
}
</style>
</head>
<body>
<p class="drop-cap">किसी भी लेख या कहानी की शुरुआत एक बड़े, सजावटी प्रारंभिक अक्षर से करना पाठक का ध्यान आकर्षित करता है और एक क्लासिक, संपादकीय अनुभव देता है। यह तकनीक सदियों से पुस्तकों और पत्रिकाओं में उपयोग की जाती रही है।</p>
</body>
</html>
विशेष विचार
- विराम चिह्न: यदि टेक्स्ट विराम चिह्न से शुरू होता है (जैसे
"हैलो"), तो कोट और पहला अक्षर दोनों स्टाइल हो सकते हैं - डाइग्राफ्स: कुछ भाषाओं में (जैसे डच "ij"), दोनों अक्षर एक साथ स्टाइल हो सकते हैं
- जनरेटेड कंटेंट:
::before { content: "※" }पहला अक्षर बन जाता है - इनलाइन एलिमेंट्स: ब्लॉक कंटेनर में पहले इनलाइन एलिमेंट पर लागू होता है
ब्राउज़र सपोर्ट
सभी ब्राउज़र में उत्कृष्ट सपोर्ट (IE 5.5+ सहित)। मॉडर्न सिंटैक्स ::first-letter (डबल कोलन) का उपयोग करें; :first-letter (सिंगल कोलन) विरासत सपोर्ट के लिए काम करता है।
