सीएसएस की पहली-पंक्ति और पहले-अक्षर तत्वों के साथ पैराग्राफ छोड़ दिया गया

कुछ सीएसएस चयनकर्ता या गुण हैं जो मुझे लगता है कि शायद ही कभी जंगली में उपयोग किया जाता है, लेकिन वे वास्तव में CSS1 के दिनों से अस्तित्व में हैं; उनमें से कुछ शामिल हैं :पहली पंक्ति तथा :प्रथम अक्षर pesudo-तत्वों.

कैसे इस्तेमाल करे?

ये छद्म तत्व मूल रूप से उनके भाई-बहनों के समान काम करते हैं -: पहले और बाद में - और मुझे लगता है कि वे भी काफी सीधे हैं। :प्रथम अक्षर किसी चयनित तत्व के पहले अक्षर या वर्ण को लक्षित करेगा, यह छद्म तत्व आमतौर पर एक ड्रॉप कैप की तरह एक टाइपोग्राफिक प्रभाव बनाने के लिए उपयोग किया जाता है। यहाँ है कि यह कैसे किया जाता है.

 p: प्रथम-अक्षर फ़ॉन्ट-आकार: 50px;  

यह कोड निम्नलिखित प्रस्तुति में परिणाम देता है.

हालांकि, कुछ बातों पर ध्यान दिया जाना चाहिए, लेकिन यह प्रभाव तभी लागू होगा जब पहला चरित्र दूसरे तत्व से पहले न हो, उदाहरण के लिए, एक छवि। इसके अतिरिक्त, जब हम एक पंक्ति में कुछ समान लक्षित तत्व रखते हैं, तो वे सभी भी प्रभावित होंगे.

इसके अलावा, के संदर्भ में :पहली पंक्ति, इस छद्म तत्व लक्षित तत्व की पहली पंक्ति को लक्षित करेगा, नीचे यह उदाहरण दिखाता है कि हम पैराग्राफ की पहली पंक्ति को कैसे बोल्ड करते हैं.

 पी: पहली पंक्ति फ़ॉन्ट-वजन: बोल्ड;  

के पिछले कोड की तरह :प्रथम अक्षर, यह उन सभी तत्वों को भी प्रभावित करेगा, जो पृष्ठ में हैं.

इसलिए, वास्तविक मामलों में, जब हम आम तौर पर ड्रॉप कैप जोड़ना चाहते हैं या पहली पंक्ति को बदलना चाहते हैं केवल पहले पैराग्राफ पर हमें अधिक विशिष्ट होने की आवश्यकता है - या तो एक अतिरिक्त वर्ग विशेषता जोड़कर या इन छद्म तत्वों को लागू करने के साथ :पहला बच्चा या : पहली प्रकार की चयनकर्ता, जैसे.

 पी: पहला बच्चा: पहला अक्षर फ़ॉन्ट-आकार: 50 पीएक्स;  p: पहला-बच्चा: पहली-पंक्ति फ़ॉन्ट-वजन: बोल्ड;  

वहां हम जाते हैं, प्रभावित पैराग्राफ अब केवल पहला है.

काम पर छद्म तत्व

ठीक है, आइए अब हम छद्म तत्वों का उपयोग करके एक पैराग्राफ के बेहतर स्वरूप को डिजाइन करने का प्रयास करें। लेकिन इससे पहले कि हम शुरू करें हमें अपनी ड्रॉप कैप के लिए एक विशेष फ़ॉन्ट की आवश्यकता है और यहां मेरी पसंद है: होमिनिस बाय पॉल लॉयड। फिर हम स्टाइलशीट में एक नए फ़ॉन्ट परिवार को परिभाषित करते हैं, जो निम्नानुसार है.

 @ फ़ॉन्ट-चेहरा फ़ॉन्ट-परिवार: 'HominisNormal'; src: url ('फोंट / HOMINIS-webfont.eot'); src: url ('फॉन्ट्स / HOMINIS-webfont.eot? #iefix') फॉर्मेट ('एंबेड-ओपेंटाइप'), url ('फोंट / HOMINIS-webfont.woff') फॉर्मेट ('woff'), url ('फॉन्ट्स') HOMINIS-webfont.ttf ') प्रारूप (' truetype '), url (' फोंट / HOMINIS-webfont.svg # HominisNormal ') प्रारूप (' svg '); फ़ॉन्ट-वजन: सामान्य; फ़ॉन्ट-शैली: सामान्य;  

अगला, हम पैराग्राफ के लिए डिफ़ॉल्ट फ़ॉन्ट परिवार सेट करते हैं.

 पी रंग: # 555; फ़ॉन्ट-परिवार: 'जॉर्जिया', टाइम्स, सेरिफ़; लाइन-ऊंचाई: जीपीएक्स;  

इस उदाहरण में, हम इसका उपयोग करेंगे :पहला बच्चा पहले पैराग्राफ को लक्षित करने के लिए चयनकर्ता और अधिक प्रमुख दिखने के लिए सजावटी शैलियों को लागू करें:

 p: पहला बच्चा गद्दी: 30px; बॉर्डर-लेफ्ट: 5px सॉलिड # 7f7664; पृष्ठभूमि-रंग: # f5f4f2; लाइन-ऊंचाई: 32 पीएक्स; बॉक्स-छाया: 5px 5px 0px 0px rgba (127, 118, 100, 0.2); स्थिति: रिश्तेदार;  

फिर, हम एक ड्रॉप कैप का उपयोग करते हैं :प्रथम अक्षर, फ़ॉन्ट आकार बढ़ाएँ और साथ ही एक नया फ़ॉन्ट परिवार निर्दिष्ट करें;

 p: पहला बच्चा: पहला अक्षर फ़ॉन्ट-आकार: 72px; बाईंओर तैरना; गद्दी: 10 पीएक्स; ऊंचाई: 64 पीएक्स; फ़ॉन्ट-परिवार: 'होमिनिसनॉर्मल'; पृष्ठभूमि-रंग: # 7F7664; मार्जिन-राइट: 10px; सफ़ेद रंग; सीमा-त्रिज्या: 5 पीएक्स; लाइन-ऊँचाई: 70 पीएक्स;  

हम पहली पंक्ति के साथ भी जोर देंगे :पहली पंक्ति, इस तरह.

 पी: पहला बच्चा: पहली पंक्ति फ़ॉन्ट-वजन: बोल्ड; फ़ॉन्ट-आकार: जीपीएक्स; रंग: # 7f7664;  

अंत में, हम एक पेपरक्लिप का उपयोग करके पहले पैराग्राफ में एक सजावटी विशेषता जोड़ना चाहते हैं :बाद छद्म तत्व.

 p: पहला बच्चा: पृष्ठभूमि के बाद: url ("... /images/paper-clip.png") नो-रिपीट स्क्रॉल 0 0 पारदर्शी; सामग्री: " "; प्रदर्शन: इनलाइन-ब्लॉक; ऊंचाई: 100 पीएक्स; स्थिति: निरपेक्ष; सही: -5 पीएक्स; शीर्ष: -35 पीएक्स; चौड़ाई: 100px;  

यह वह सब कोड है जिसकी हमें आवश्यकता है, अब हमारे पैराग्राफ को बेहतर होना चाहिए;

आप नीचे दिए गए लिंक से लाइव डेमो भी देख सकते हैं:

• डेमो देखें
• स्रोत डाउनलोड करें

फाइनल थॉट

जैसा कि हमने पहले इस पोस्ट में उल्लेख किया है, ये छद्म तत्व, विशेष रूप से :प्रथम अक्षर तथा :पहली पंक्ति CSS1 के बाद से शामिल किया गया है, इसलिए वे इंटरनेट एक्सप्लोरर 8 में भी समर्थित हैं.

फिर भी, जहां तक ​​मुझे पता है, वे जंगली में इतने बड़े पैमाने पर लागू नहीं हैं। तो, हम आशा करते हैं कि यह ट्यूटोरियल किसी तरह से आपको अपनी वेबसाइट पर इन सीएसएस सुविधाओं को आज़माने के लिए प्रेरित कर सकता है.