ब्राउझरच्या काठापासून वेब पृष्ठाच्या सामग्रीपर्यंत क्षैतिज आणि अनुलंब पॅडिंग डीफॉल्टनुसार ब्राउझरमध्ये तयार केले जाते. तथापि, आपण या पॅरामीटर्सचे मूल्य बदलू शकता, इच्छेनुसार इंडेंट्स मोठे किंवा लहान बनवू शकता. उदाहरणार्थ, तुम्ही विंडोच्या वरच्या काठावरुन पृष्ठ शीर्षकावर इंडेंट सेट करू शकता किंवा ते पूर्णपणे काढून टाकू शकता.

इंडेंट मार्जिन आणि पॅडिंग पॅरामीटर्सद्वारे निर्दिष्ट केले जातात. भिन्न ब्राउझरच्या स्वारस्यांसाठी एक ऐवजी दोन गुणधर्मांची उपस्थिती आवश्यक आहे, मार्जिन - इंटरनेट एक्सप्लोरर, आणि पॅडिंग - ऑपेरा आणि फायर फॉक्स. भिन्न पॅरामीटर्स एकत्र केल्याने वेब पृष्ठ प्रदर्शित केले जाईल याची खात्री होते भिन्न ब्राउझरसमान असेल.

तुम्ही समास-टॉप , समास-तळाशी , समास-उजवे आणि समास-डावे पॅरामीटर्स वापरून स्क्रीनच्या वेगवेगळ्या किनार्यांवरून वैयक्तिक समास नियंत्रित करू शकता, जे अनुक्रमे ब्राउझर विंडोच्या वरच्या, खालच्या, उजव्या आणि डाव्या किनार्यांपासून अंतर बदलतात. त्यांचा वापर करण्यापूर्वी, तुम्ही मार्जिन आणि पॅडिंग पॅरामीटर्स शून्यावर सेट केले पाहिजे (उदाहरण 1).

उदाहरण 1: ब्राउझरच्या काठावरुन वरचा मार्जिन बदलणे

बॉडी सिलेक्टर ज्यावर शैली लागू केली जाते तो संपूर्ण वेब पृष्ठासाठी पॅडिंग सेट करतो. वैयक्तिक घटकांसाठी हेच केले जाऊ शकते, उदाहरणार्थ, शीर्षके (उदाहरण 2).

उदाहरण २: हेडर इंडेंटेशन बदलणे

शीर्षक

मध्ये मार्जिन आणि पॅडिंग पॅरामीटर्स एकाच वेळी वापरा या प्रकरणातयापुढे आवश्यक नाही.

टॅग लहान करण्यासाठी तुम्ही वापरू शकता सार्वत्रिक पॅरामीटरसमास , उदाहरण 3 मध्ये दर्शविल्याप्रमाणे. स्पेसने विभक्त केलेली तीन मूल्ये वरच्या बाजूला, डावीकडे आणि उजवीकडे आणि तळाशी एकाच वेळी समास परिभाषित करतात.

उदाहरण 3: मार्जिन विशेषता वापरणे

शीर्षक

मुख्य सामग्री

हे उदाहरण परिच्छेदाचे इंडेंटेशन बदलते कारण इनलाइन मूल्ये वापरणे नेहमीच योग्य नसते.

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exeritation in du equinder exercitation uptate "Velit esse cillum dolore eu Fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." परिच्छेद 1.10.32 "डी फिनिबस बोनोरम एट मालोरम", 45 एडी मध्ये सिसेरोने लिहिलेले. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt en explicabotumatur a esplicatum ut odit किंवा fugit, sedquia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt ut enim ad minima veniam , QUIS NOSTRUM Exercitational Ullam Corporis Suscipit Laboriosam, Nisi Ut Aliquid Ex Ea Commodi Consequatur, Ea Commodi Consequatur, Ea Commodi Consequatur तूर? इंग्रजी भाषांतर 1914, एच. रॅकहॅम "परंतु मी तुम्हाला समजावून सांगेन की सुखाची निंदा करण्याची आणि दुःखाची स्तुती करण्याची ही सर्व चुकीची कल्पना कशी जन्माला आली आणि मी तुम्हाला या प्रणालीची संपूर्ण माहिती देईन आणि महान संशोधकाच्या वास्तविक शिकवणींचे स्पष्टीकरण देईन. सत्याचा, मानवी आनंदाचा मास्टर-बिल्डर कोणीही आनंद नाकारत नाही, नापसंत करत नाही किंवा टाळत नाही, कारण ते आनंद आहे, परंतु ज्यांना आनंदाचा पाठलाग कसा करायचा हे माहित नाही त्यांना अत्यंत वेदनादायक परिणामांचा सामना करावा लागतो. . जो कोणी प्रेम करतो किंवा त्याचा पाठपुरावा करतो किंवा स्वतःचे दुःख मिळवण्याची इच्छा करतो, कारण ते वेदना असते, परंतु कधीकधी अशी परिस्थिती उद्भवते ज्यामध्ये तेल आणि वेदना त्याला खूप आनंद मिळवून देऊ शकतात, एक क्षुल्लक उदाहरण घ्या, आपल्यापैकी कोण कधीही कठोर शारीरिक व्यायाम करतो, यातून काही फायदा मिळवण्याशिवाय, पण ज्याला त्रासदायक परिणाम होत नाहीत अशा आनंदाचा उपभोग घेण्याचा किंवा परिणामी आनंद न देणाऱ्या दुःखापासून दूर राहणाऱ्या माणसाचा दोष शोधण्याचा कोणाला अधिकार आहे? परिच्छेद 1.10.33 "डी फिनिबस बोनोरम एट मालोरम", 45 एडी मध्ये सिसेरोने लिहिलेले. "At Vero EOS et Accusamus et Iusto dignissimos qui blanditiis praesentium voluptatum deleniti atti quos Dolores molestias experim Ecati Cupiditate नॉन प्रोव्हायडर, Similique Sunt in Culpa Qui Officia Deserunt Mollitia Ani , 2018 tinctio Nam libero tempore , सह soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus , omnis voluptas assumend est , omnis dolor repellendus et aut officiis debitis ut rerum necessitatibus volupetumeutupende votre estiae non recusandae Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores ऊर्फ consequatur aut perferendis doloribus asperiores repellat." इंग्रजी भाषांतर 1914, एच. रॅकहॅम "दुसरीकडे, आम्ही धार्मिक रागाने आणि नापसंत असलेल्या पुरुषांची निंदा करतो जे त्या क्षणाच्या आनंदाच्या मोहकतेने इतके फसले आहेत आणि निराश झाले आहेत, इच्छेने इतके आंधळे आहेत की त्यांना वेदना आणि त्रासाचा अंदाज येत नाही. त्याचा त्याचा त्याचा दोष असल्याचा त्यांचा आहे, जे आपल्या इच्छाशक्तीच्या कमकुवतपणामुळे त्याच्या कर्तव्यात अपयशी ठरतात बिनधास्त आणि जेव्हा आपल्याला जे आवडते ते करण्यास सक्षम होण्यास काहीही प्रतिबंधित करत नाही, तेव्हा प्रत्येक आनंदाचे स्वागत केले पाहिजे आणि प्रत्येक दुःख टाळले पाहिजे परंतु काही विशिष्ट परिस्थितीत आणि कर्तव्याच्या दाव्यामुळे किंवा व्यवसायाच्या जबाबदाऱ्यांमुळे असे वारंवार घडते. त्यामुळे त्याने त्याचा त्याचा त्याचा त्याग केला आहे.

CSS लेआउट नेहमी आयताकृती आहे. कोणत्याही गुळगुळीत रेषा ही विकासकाची जबाबदारी आहे. स्क्रीन रिझोल्यूशनच्या मर्यादेत पृष्ठाला गुळगुळीत आकार देण्यासाठी शैली नियम पुरेसे पर्याय प्रदान करतात. परंतु कोणताही लेआउट घटक नेहमी एक आयत असतो ज्यामध्ये माहितीची व्यवस्था CSS नियमांद्वारे नियंत्रित केली जाते.

सर्व-साइड पॅडिंग प्रत्येक पृष्ठ घटकासाठी महत्त्वाचे असते जेव्हा ते पूर्णपणे स्थित असते आणि CSS शीर्ष पॅडिंग विशेषतः परिभाषित केले जाते कारण ते भिन्न घटकांसाठी, विशेषतः इनलाइन घटकांसाठी महत्त्वाचे असते.

मूलभूत स्थितीचे नियम

ब्लॉक घटकामध्ये मार्जिन नियम, त्यातील घटकांसाठी पॅडिंग नियम आणि सीमा रुंदी देखील वापरली जाऊ शकते.

शीर्षस्थानी असलेल्या इंडेंटेशनला विशेष महत्त्व आहे. ब्लॉकमधील CSS नियमांना जोडते पॅडिंगया ब्लॉकमध्ये पूर्णपणे आणि तुलनेने स्थित घटकांसाठी नियमांसह.

CSS नियमांसाठी एक सामान्य सराव: तुम्ही समान पॅडिंग सर्व बाजूंनी, वर/खाली आणि उजवीकडे/डावीकडे किंवा प्रत्येक बाजूला स्वतंत्रपणे निर्दिष्ट करू शकता. उदाहरणार्थ,

• समास: 10px;
• पॅडिंग: 10px20px;
• पॅडिंग: 10px20px30px40px.

पहिल्या प्रकरणात, ज्या बाह्य कंटेनरमध्ये ते स्थित आहे त्या बाजूंच्या घटकाचे इंडेंटेशन सेट केले आहे. दुस-या प्रकरणात, वरच्या आणि खालच्या बाजूचे समास 10px आहेत, डावीकडे आणि उजवीकडे - 20px. तिसऱ्या प्रकरणात, इंडेंट्सचा आकार सर्व बाजूंनी दर्शविला जातो: वर, उजवीकडे, तळाशी आणि डावीकडे.

या सर्व प्रकरणांमध्ये, इंडेंटेशन शीर्ष CSS 10 px आहे.

घटकांची स्थिती बदलणारे नियम

लेआउट घटक पूर्णपणे स्थित नसल्यास, तो मध्ये स्थित आहे सामान्य प्रक्रियापृष्ठ निर्मिती.

आम्ही परिभाषित केल्यास scCurrInfo घटकातील शीर्ष CSS वर पॅडिंग केल्यास, ध्येय साध्य होईल, परंतु li स्तरावर असल्यास ते होणार नाही.

या उदाहरणात, पॅडिंग नियम वापरून: 40px; रुंदी आणि उंचीचे नियम 80px ने कमी करणे आवश्यक आहे. अन्यथा, scCurrInfo ब्लॉकचा आकार बाह्य ब्लॉकच्या सीमा ओलांडेल.

आम्ही scCurrInfo वर्णनातून पॅडिंग नियम काढून टाकल्यास, परंतु सूची आयटम शैली वर्णनामध्ये 20px मूल्यासह जोडल्यास, आम्हाला फक्त मिळेल शीर्ष इंडेंट. CSS हे मूल्य इतर पक्षांना लागू करणार नाही.

साहजिकच, इंडेंटेशन नियमाचा हा वापर प्रत्येक li घटकाला लागू होतो.

सामान्य सामग्री स्वरूपन पद्धती

काही विकासक ब्लॉक घटकांचा वापर करून पृष्ठे मांडून परिपूर्णता प्राप्त करतात. वरवर पाहता, ही एक उत्कृष्ट सराव आहे की टेबल्सपासून सुरुवात करा आणि स्वतःच समाप्त करा शैक्षणिक प्रक्रियाब्लॉक्सवर.

ब्लॉक लेआउटमध्ये अंतर्निहित स्वातंत्र्य आकर्षक आहे आणि विकसकाची कल्पना कठोर टेबल नियमांद्वारे मर्यादित असू शकत नाही: फक्त पंक्ती, फक्त सेल, फक्त क्षैतिज आणि अनुलंब विलीन करणे. रिलेशनल कल्पनांमध्ये विलक्षण काहीही नाही.

दरम्यान, टेबल्स, स्पष्ट तोटे व्यतिरिक्त, अनेक गुणात्मक फायदे आहेत. शीर्षस्थानी पॅडिंग तयार करताना, CSS डावीकडे, उजवीकडे पॅडिंग विचारात घेते (तळाशी एक विशेष क्षण आहे). टेबल सेल नियम आपल्याला अनुलंब आणि क्षैतिज दोन्ही संरेखन नियंत्रित करण्याची परवानगी देतात. पंक्ती शैली वापरणे आणि त्यांना सेल शैलीसह एकत्र करणे, आपण सामग्रीची जटिल दृश्ये तयार करू शकता.

आयताच्या स्वरूपात पृष्ठाचे नेहमीचे प्रतिनिधित्व ते टेबलच्या स्वरूपात सादर करण्यापासून अजिबात प्रतिबंधित करत नाही. हे आयत देखील आहेत, परंतु ते टेबल सेल देखील आहेत, म्हणजेच त्यांचे स्वतःचे नियम आहेत जे ब्लॉक्सच्या नियमांना पूरक आहेत.

निरपेक्ष स्थिती

POSITION या नियमासह ब्लॉक करा: absolute ; तो ज्या ब्लॉकमध्ये आहे त्या ब्लॉकच्या सापेक्ष त्याच्या निर्देशांकांद्वारे निर्धारित केलेल्या स्थानावर स्थित असेल.

वैशिष्ट्यपूर्ण CSS नियम- "सराव - सर्वोत्तम निकषसत्य" बहुतेक प्रकरणांमध्ये, विशेषत: जेव्हा क्रॉस-ब्राउझर सुसंगतता आवश्यक असते आणि मांडणी व्यक्तिचलितपणे केली जाते, तेव्हा कॅस्केडिंग स्टाईल शीटवर पूर्ण-पुस्तक पुस्तिकांचा अभ्यास करणे श्रेयस्कर आहे.

टेबल्स वापरल्याने अनेकदा सेल सामग्री बदलण्याच्या समस्या उद्भवतात. ब्लॉकमधील समान ऑफसेट नेहमीच सर्व घटकांवर परिणाम करत नाही. प्रयोग करून, आपण इच्छित परिणाम प्राप्त करू शकता. एक क्षुल्लक कार्य: कसे शीर्ष पॅडिंग काढून टाकणे हे CSS साठी नेहमीच क्षुल्लक उपाय नसते.

काही प्रकरणांमध्ये, जेव्हा आपल्याला काही खोलीत पृष्ठ घटकांचे लेआउट करावे लागते लोकप्रिय प्रणालीवेबसाइट सामग्री व्यवस्थापन, तरीही केवळ प्रायोगिक सरावाकडेच लक्ष देणे आवश्यक आहे, परंतु सहकार्यांच्या अनुभवाकडे देखील लक्ष देणे आवश्यक आहे.

बाह्य शैली पत्रकतुम्हाला एका फाईलमध्ये साइट फॉरमॅटिंगबद्दल माहिती केंद्रित करण्यास अनुमती देते. बाह्य शैली पत्रकाचा संदर्भ घेण्यासाठी, css मुख्य भागामध्ये असणे आवश्यक आहे शीर्षक नंतर पुढील ओळ लिहा

href विशेषता बाह्य शैली पत्रक फाइलचा मार्ग निर्दिष्ट करते. ही ओळसर्व वेब पृष्ठांच्या मजकुरात लिहिणे आवश्यक आहे जेथे बाह्य शैली पत्रक वापरले जावे.

अशा प्रकारे, तुम्ही style.css फाईलमध्ये केलेले बदल त्या फाईलचा संदर्भ देणाऱ्या सर्व पृष्ठांवर त्वरित प्रतिबिंबित होतात.

खाजगी शैली

वर्णनकर्त्याच्या वेगळ्या उदाहरणाच्या संबंधात तुम्हाला कोणतीही शैली खाजगीरित्या लागू करायची असल्यास, त्यासाठी तुम्हाला वापरण्याची आवश्यकता आहे. शैली विशेषता. हे तंत्र तुम्हाला स्टाईल शीट तयार न करता स्टाईलचा पूर्ण फायदा घेण्यास अनुमती देते. पृष्ठामध्ये आधीपासून अंतर्गत किंवा बाह्य स्टाईल शीटची लिंक असली तरीही शैलींचा खाजगी वापर केला जाऊ शकतो, कारण खाजगी शैलीला सर्वोच्च प्राधान्य आहे.

उदाहरण:

आयडी विशेषता

आपण एक शैली लागू करणे आवश्यक असल्यास वैयक्तिक घटकवेब पृष्ठे, नंतर तुम्हाला आयडी विशेषता वापरण्याची आवश्यकता आहे.

हे करण्यासाठी, आपल्याला इच्छित पृष्ठ घटक टॅगवर एक अभिज्ञापक नियुक्त करणे आवश्यक आहे. त्यानंतर तुम्ही अंतर्गत किंवा बाह्य शैली पत्रकात गुणधर्म परिभाषित करू शकता या घटकाचा. निर्दिष्ट स्वरूपन गुणधर्म केवळ निर्दिष्ट अभिज्ञापकाने चिन्हांकित केलेल्या घटकासाठी सेट केले जातील.