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

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

<घंटा/>

डिस्प्ले इनलाइन-ब्लॉक प्रॉपर्टी वैल्यू के साथ एलिमेंट सेट का इस्तेमाल एलिमेंट को इनलाइन-लेवल ब्लॉक कंटेनर के रूप में प्रदर्शित करने के लिए किया जाता है।

उदाहरण

आइए अब CSS में इनलाइन-ब्लॉक प्रॉपर्टी वैल्यू को लागू करने के लिए एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<style>
p {
   background-color: orange;
   color: white;
}
p.demo {
   display: inline-block;
}
</style>
</head>
<body>
<h1>Student Result</h1>
<div>
The result of MCA student will be declared on <p class="demo">20th Decemeber 2019</p>. Check the website on the same day at 8PM.
</div>
</body>
</html>

आउटपुट

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

उदाहरण

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

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