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

सीएसएस सामग्री-बॉक्स मान

<घंटा/>

CSS पृष्ठभूमि-मूल का उपयोग करें सामग्री-बॉक्स मान सेट करने के लिए संपत्ति। सामग्री-बॉक्स मान के साथ, पृष्ठभूमि छवि सामग्री के ऊपरी बाएँ कोने से शुरू होती है।

आप सामग्री-बॉक्स मान को लागू करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं:

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <style>
         #value1 {
            border: 3px solid blue;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: padding-box;
         }

         #value2 {
            border: 3px solid orange;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: border-box;
         }

         #value3 {
            border: 3px dashed yellow;
            padding: 30px;
            background: url(https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg);
            background-repeat: no-repeat;
            background-origin: content-box;
         }
      </style>
   </head>

   <body>
      <h1>padding-box value</h1>
      <div id = "value1">
         <h2>Heading 2</h2>
         <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
         <h3>Heading 3</h3>
         This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
      </div>

      <h1>border-box value</h1>
      <div id = "value2">
         <h2>Heading 2</h2>
         <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
         <h3>Heading 3</h3>
         This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
      </div>

      <h1>content-box value</h1>
      <div id = "value3">
         <h2>Heading 2</h2>
         <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
         <h3>Heading 3</h3>
         This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</p>
      </div>
   </body>
</html>

  1. सीएसएस रैखिक-ढाल () फ़ंक्शन

    रैखिक ढाल () का उपयोग रैखिक ढाल को पृष्ठभूमि छवि के रूप में परिभाषित करने के लिए किया जाता है - background-image: linear-gradient(direction, color-stop1, color-stop2, ...); ऊपर, शुरुआती बिंदु और दिशा सेट करें, उस रंग के साथ रुके हुए संक्रमण को सुचारू रूप से प्रस्तुत करने के लिए। उदाहरण आइए अब रैखि

  1. सीएसएस सही संपत्ति

    तत्व की क्षैतिज स्थिति निर्धारित करने के लिए सही गुण का उपयोग किया जाता है। इसे - . के रूप में सेट किया गया है right: auto|length|initial|inherit; उदाहरण आइए CSS में सही प्रॉपर्टी को लागू करने के लिए एक उदाहरण देखें - <!DOCTYPE html> <html> <head> <style> div {    

  1. सीएसएस का उपयोग करके टेक्स्ट इंडेंटेशन

    टेक्स्ट इंडेंटेशन के लिए, CSS में टेक्स्ट-इंडेंट प्रॉपर्टी का उपयोग करें। यह एक पैराग्राफ में पहली पंक्ति के इंडेंटेशन के लिए है। उदाहरण आइए अब एक उदाहरण देखें - <!DOCTYPE html> <html> <head> <style> div {    text-indent: 30px; } </style> </head> <bo