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

CSS का उपयोग करके इनलाइन प्रदर्शित करें

<घंटा/>

ब्लॉक के विपरीत, इनलाइन तत्व एक ही पंक्ति में शुरू होते हैं और केवल आवंटित चौड़ाई लेते हैं। आइए अब डिस्प्ले को लागू करने के लिए एक उदाहरण देखें:सीएसएस में इनलाइन प्रॉपर्टी वैल्यू -

उदाहरण

आइए अब एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<style>
span {
   background-color: orange;
   color: white;
}
p.demo {
   display: none;
}
span.demo1 {
   display: inline;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <p class="demo">9AM</p> 10AM on 20th December.
</div>
<div>
Match will end at <span class="demo1">5PM</span> on 20th December.
</div>
</body>
</html>

आउटपुट

CSS का उपयोग करके इनलाइन प्रदर्शित करें

उदाहरण

आइए अब एक और उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<style>
span#demo {
   background-color:orange;
   color: white;
   display:inline;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <span id="demo">9AM</span> on 20th December.
</div>
</body>
</html>

आउटपुट

CSS का उपयोग करके इनलाइन प्रदर्शित करें


  1. आरजीबीए का उपयोग कर सीएसएस पारदर्शिता

    CSS पारदर्शिता के लिए RGBA () मानों का उपयोग करें। रंग की अस्पष्टता निर्दिष्ट करने के लिए अल्फा चैनल पैरामीटर सेट करें। RGBA का उपयोग करके CSS पारदर्शिता को लागू करने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> body {    font-family: &qu

  1. CSS का उपयोग करके इमेज स्प्राइट से एक आइकन प्रदर्शित करें

    इमेज स्प्राइट का उपयोग करने का मुख्य लाभ http अनुरोधों की संख्या को कम करना है जो हमारी साइट के लोड समय को तेज करता है। CSS का उपयोग करके इमेज स्प्राइट से एक आइकन प्रदर्शित करने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> body {    font-

  1. CSS में Data-Attributes (data-*) का उपयोग करना

    हम data-* विशेषता का उपयोग करके तत्वों के बारे में अतिरिक्त जानकारी संग्रहीत कर सकते हैं। निम्नलिखित उदाहरण CSS डेटा-* विशेषता को दर्शाते हैं। उदाहरण <!DOCTYPE html> <html> <head> <style> dl {    margin: 2%; } p {    width: 60%;    background-col