छद्म वर्ग: पहला-अक्षर

पिछले कुछ समय से मैं इसका उपयोग कर रहा हूं : पहला-पत्र छद्म -क्लास दो पृष्ठभूमि छवियों को एक तत्व में असाइन करने के लिए। सबसे दिलचस्प बात यह है : पहला-अक्षर , कुछ छद्म वर्गों में से एक है जो 6 वें इंटरनेट एक्सप्लोरर में काम करते हैं। लेकिन एक छोटी सी चाल है जिसे आपको जानना आवश्यक है।



व्यापार करने के लिए। जैसा कि ऊपर कहा गया है, हमारे पास एक HTML तत्व है। इसे प्रथम स्तर का शीर्षक दें।

 <h1> हमारे बारे में </ h1> 

हम मूल शैलियों, पृष्ठभूमि का रंग और पृष्ठभूमि छवि (दाईं ओर सितारे) सेट करते हैं:

  एच १ {
 सीमा-शीर्ष: 1px ठोस # 094eaa;
 बॉर्डर-बॉटम: 1px सॉलिड # 094eaa;
 पृष्ठभूमि: # 002261 url (/images/stars.jpg) राइट सेंटर नो-रिपीट;
 } 

सब कुछ हमेशा की तरह है। लेकिन अब हमें बाईं ओर एक तारांकन जोड़ना होगा। यह निम्नानुसार किया जाता है:

  h1: पहला अक्षर {
 पृष्ठभूमि: url (/images/star.jpg) बाएं केंद्र no-repeat;
 गद्दी: 7px 0 6px 30px;
 } 

यहां सबसे महत्वपूर्ण बिंदु यह है कि आपको निश्चित रूप से छद्म- वर्ग के बीच एक स्थान निश्चित रूप से रखना चाहिए : पहला अक्षर और प्रारंभिक घुंघराले ब्रैकेट, अन्यथा IE6 में छद्म वर्ग काम नहीं करेगा।

  h1: पहला अक्षर {/ * नहीं चलेगा * /
 संपत्ति: मूल्य;
 }

 h1: पहला अक्षर {/ * यह काम करेगा क्योंकि घुंघराले ब्रैकेट से पहले एक जगह है * *
 संपत्ति: मूल्य;
 } 

एक और बात है। यदि आपको कई तत्वों के लिए समान शैलियों को निर्दिष्ट करने की आवश्यकता है और उनमें से एक छद्म श्रेणी है: पहला-अक्षर, तो आपको निश्चित रूप से अल्पविराम से पहले तत्वों को सूचीबद्ध करते समय एक स्थान सम्मिलित करना होगा। वह है:

  h1: प्रथम-अक्षर, .someclass {/ * काम नहीं करेगा * /
 संपत्ति: मूल्य;
 }

 h1: पहला-अक्षर, .someclass {/ * काम करेगा, क्योंकि कॉमा से पहले एक जगह है * /
 संपत्ति: मूल्य;
 } 

वह मूल रूप से यह है। पैडिंग की जरूरत है ताकि पृष्ठभूमि की छवि फ़ॉन्ट की तुलना में ऊंचाई में बड़ी हो और पाठ के नीचे न हो।



मूल मेरे ब्लॉग पर है।