Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS से टेक्स्ट डेकोरेशन


CSS text-decoration प्रॉपर्टी का उपयोग सिलेक्टेड एलिमेंट के टेक्स्ट पर डेकोरेशन लागू करने के लिए किया जाता है। हम लाइन-थ्रू, ओवरलाइन, अंडरलाइन आदि को मान के रूप में जोड़ सकते हैं। यह text-decoration-line, text-decoration-color और text-decoration-style के लिए एक शॉर्टहैंड है।

सिंटैक्स

text-decoration प्रॉपर्टी का सिंटैक्स निम्नलिखित है:

Selector { text-decoration: /*value*/ }

उदाहरण

निम्नलिखित उदाहरण CSS text-decoration प्रॉपर्टी को दर्शाते हैं:

<!DOCTYPE html> <html> <head> <style> p:nth-child(2)::before { content: " We will reach the destination "; background-color: lightgreen; text-decoration: overline blue; font-size: 1.2em; } </style> </head> <body> <p>I'm not the only traveller</p> <p> before night. </p> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देता है:

CSS से टेक्स्ट डेकोरेशन

उदाहरण

<!DOCTYPE html> <html> <head> <style> span { background: rgb(204,22,50); text-decoration: blue line-through; font-style: italic; color: white; } p { text-decoration: underline; } </style> </head> <body> <h2>Department Details</h2> <p> The employees of Department Marketing, Operations, Finance, <span>IT</span> are requested to email their original documents.<span> Delay in submission will lead to delayed verification.</span> </p> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देता है:

CSS से टेक्स्ट डेकोरेशन

  1. CSS का उपयोग करके टेक्स्ट अलाइनमेंट सेट करना CSS का उपयोग करके टेक्स्ट अलाइनमेंट सेट करना

    हम CSS text-align प्रॉपर्टी का उपयोग क्षैतिज अलाइनमेंट के लिए और CSS padding-top के साथ padding-bottom, या CSS line-height का उपयोग लंबवत अलाइनमेंट के लिए करके HTML डॉक्यूमेंट्स में टेक्स्ट को अलाइन कर सकते हैं। सिंटैक्स उपरोक्त CSS प्रॉपर्टीज के लिए सिंटैक्स निम्नानुसार हैं: Selector {    

  1. CSS से Z-Index का उपयोग करके ओवरलैपिंग एलिमेंट्स CSS से Z-Index का उपयोग करके ओवरलैपिंग एलिमेंट्स

    CSS Z-Index प्रॉपर्टी का उपयोग करके डेवलपर एलिमेंट्स को एक-दूसरे के ऊपर स्टैक कर सकते हैं। Z-Index का मान पॉजिटिव या नेगेटिव हो सकता है।नोट - यदि ओवरलैप होने वाले एलिमेंट्स में z-index स्पेसिफाई नहीं है तो वह एलिमेंट दिखेगा जो डॉक्यूमेंट में अंत में मेंशन किया गया है।उदाहरणआइए z-index प्रॉपर्टी का ए

  1. CSS से एलिमेंट का टेक्स्ट कलर सेट करना CSS से एलिमेंट का टेक्स्ट कलर सेट करना

    CSS color प्रॉपर्टी का उपयोग किसी एलिमेंट के टेक्स्ट कलर को बदलने के लिए किया जाता है। हम मान को स्टैंडर्ड कलर नाम, rgb(), rgba(), hsl(), hsla() और हेक्साडेसिमल मान के रूप में स्पेसिफाई कर सकते हैं।सिंटैक्सCSS color प्रॉपर्टी का सिंटैक्स निम्नलिखित है:Selector { color: /*value*/ }निम्नलिखित उदाहरण C