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

समास आणि पॅडिंग: काय फरक आहे?

तुम्ही मजकूर फॉरमॅट करणे सुरू करण्यापूर्वी, तुम्ही समास आणि इंडेंट्स काय आहेत हे समजून घेतले पाहिजे. हे मार्कअप घटक काही प्रकरणांमध्ये वापरकर्त्याला सारखेच दिसत असूनही, त्यांच्यात मूलभूत फरक आहेत:

• फील्ड मालमत्तेद्वारे निर्दिष्ट केले आहे पॅडिंग, इंडेंट - समास;
• मार्जिन सामग्री आणि ब्लॉकची सीमा, इंडेंट - समीप ब्लॉक्सच्या सीमांमधील अंतराने निर्धारित केले जाते;
• घटकाच्या परिमाणे (रुंदी आणि उंची) मध्ये समास विचारात घेतले जाऊ शकतात किंवा नसू शकतात.

मार्जिन मालमत्ता

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

समास: 12px.

या ओळीचा अर्थ असा आहे की मजकूराच्या ब्लॉकभोवती (किंवा इतर कोणत्याही ब्लॉक) सर्व बाजूंनी 12 पिक्सेलचे इंडेंटेशन असेल. मध्यांतर वाढवण्यासाठी, उदाहरणार्थ, तीन वेळा, फक्त लिहा:

समास: 36px.

पण प्रत्येक बाजूला ब्लॉक्समधला मध्यांतर वेगवेगळा असेल तर? वेब पृष्ठ विकासक रेकॉर्डिंगचे अनेक प्रकार वापरतात:

1. समास: 11px 22px.
2. समास: 11px 22px 33px.
3. समास: 11px 22px 33px 44px.

पहिल्या उदाहरणात, 11 पिक्सेल ब्लॉकच्या खालच्या आणि वरच्या बॉर्डरमधून इंडेंट केले जातील आणि ब्लॉकच्या बाजूने 22 पिक्सेल. दुसऱ्या रेकॉर्डिंग फॉर्मनुसार, ब्लॉकच्या वरच्या काठाच्या आणि सामग्रीच्या दरम्यान 11 पिक्सेल, तळाच्या दरम्यान 33 पिक्सेल आणि बाजूंना 22 पिक्सेल असतील. तिसऱ्या प्रकरणात, पॅडिंग शीर्षस्थानी 11 पिक्सेल, उजवीकडे 22 पिक्सेल, तळाशी 33 पिक्सेल आणि डावीकडे 44 पिक्सेल असेल.

फक्त एका बाजूला ब्लॉक सीमेपर्यंतचे अंतर रेकॉर्ड करणे देखील शक्य आहे: समास-वर, समास-तळ, समास-डावीकडे, समास-उजवीकडे. गुणधर्मांची नावे रशियनमध्ये भाषांतरित करून, त्यांच्या उद्देशाचा अंदाज लावणे सोपे आहे. उदाहरणार्थ, खालील एंट्री म्हणते की उजवा मार्जिन 22 पिक्सेल असेल:

समास-उजवीकडे: 22px.

इतर बाजूंसाठी, ब्लॉकच्या आजूबाजूचे अंतर हे मूळ घटकाच्या मूल्याच्या बरोबरीचे मानले जाते.

मालमत्ता समास CSS मजकूर वर्टिकल इंडेंटेशन वापरताना विकासकाने लक्षात ठेवले पाहिजे असे वैशिष्ट्य आहे. समीप घटकांच्या मध्यांतरांची बेरीज केली जात नाही, परंतु एकमेकांवर अधिभारित केली जाते. उदाहरणार्थ, एक ब्लॉक असू द्या समास-तळाशी: 15px, आणि खाली त्याला लागून असलेला ब्लॉक मार्जिन-टॉप: 35px. शालेय अंकगणित आणि सामान्य ज्ञान असे सुचवते सामान्य इंडेंटेशनत्यांच्या दरम्यान 50 पिक्सेल असतील. व्यवहारात असे होत नाही. उच्च मालमत्ता मूल्यासह ब्लॉक करा समासत्याचा शेजारी "शोषून घेईल". परिणामी, घटकांमधील अंतर 35 पिक्सेल असेल.

"लाल रेघ

मध्ये एक दस्तऐवज काढत आहे मजकूर संपादक, वापरकर्ते प्रत्येकाला विचारण्यास प्राधान्य देतात नवीन परिच्छेदलाल रेषा वापरून. वापरून CSS इंडेंटेशनडावीकडील मजकूर तयार करणे सोपे आहे - बांधकाम वापरले जाते मजकूर-इंडेंट. हे असे लिहिले आहे:

मजकूर-इंडेंट: 11px.

म्हणजेच, परिच्छेदाची पहिली ओळ 11 पिक्सेलने डाव्या काठाच्या सापेक्ष हलवली जाईल. वेब पृष्ठावरील मजकूर संपादकातील दस्तऐवज सारखा बनविण्यासाठी, आपण अतिरिक्तपणे सेट केले पाहिजे, म्हणजे, लिहा:

मजकूर-इंडेंट: 11px;

text-align: justify.

पिक्सेल व्यतिरिक्त, चिन्हांचे वर्णन करताना, इतर युनिट्स - इंच, बिंदू, टक्केवारी वापरण्याची परवानगी आहे. ब्लॉकमध्ये 10% चे CSS टेक्स्ट पॅडिंग असू द्या. 500 पिक्सेलच्या ब्लॉक रुंदीसह, लाल रेषा 50 पिक्सेल (500 च्या 10%) असेल.

च्या साठी या मालमत्तेचेमूल्य सेट केले जाऊ शकते वारसा. ही नोंद म्हणते की ब्लॉक मूळ ब्लॉकच्या समान गुणधर्माचा वापर करते.

मजकूर-इंडेंट: इनहेरिट.

आश्चर्याची गोष्ट म्हणजे, हे नकारात्मक मूल्य देखील घेऊ शकते! या प्रकरणात, तथाकथित ओव्हरहँग्स तयार होतात, म्हणजेच मुख्य मजकूर जागेवर राहतो आणि पहिली ओळ 22 पिक्सेलने डावीकडे हलविली जाते:

मजकूर-इंडेंट: -22px.

ब्राउझरच्या डाव्या सीमेच्या पलीकडे जाण्यापासून अक्षरे रोखण्यासाठी, याव्यतिरिक्त मजकूर-इंडेंटफील्ड सेट करण्यासाठी तुम्हाला बांधकाम वापरण्याची आवश्यकता आहे:

पॅडिंग-डावीकडे: 22px.

बेसिक CSS गुणधर्मविचारासाठी. आणि सराव त्यांना एकत्रित करण्यात मदत करेल. तुमच्या वेबसाइट डेव्हलपमेंटमध्ये तुम्ही जे शिकलात ते लागू करण्यासाठी येथे काही अंतिम टिपा आहेत:

• लाल रेषा आणि मजकूर इंडेंटेशन भिन्न संकल्पना आहेत आणि त्यांना सूचित करण्यासाठी भिन्न गुणधर्म वापरले जातात;
• उभ्या इंडेंटसाठी, गणिताचे नियम लागू होत नाहीत - मध्यांतर ओव्हरलॅप होतात, मोठ्या मूल्यासह घटक "विजय";
• नकारात्मक परिच्छेद इंडेंटेशनप्रतिमा वापरून परिच्छेदाची पहिली ओळ दर्शविण्यासाठी वापरली जाते.

HTML पृष्ठ तयार करताना मार्जिन आणि पॅडिंग अतिशय महत्त्वाच्या शैली आहेत. ते आपल्याला घटकांना अधिक अचूकपणे स्थान देण्याची, आवश्यक अंतरांसह एक फ्रेम तयार करण्याची परवानगी देतात. दोन्ही शैली खूप समान आहेत आणि समान कार्ये करतात. पण तरीही मतभेद आहेत.

घटक एकमेकांच्या शेजारी नेस्टेड किंवा स्थित असू शकतात. खालील उदाहरण पाहू.

आमच्याकडे दोन टेबल्स आहेत, लिंबू आणि निळे, एक दुसऱ्याच्या खाली स्थित आहे. सारण्यांमध्ये एक सेल असतो. पहिल्या टेबल सेलमध्ये लाल ब्लॉक आहे. हे उदाहरण वापरून, समास आणि इंडेंट कसे कार्य करतात ते पाहू.

फील्ड शैलीनुसार सेट केले जातात पॅडिंग. ही शैली फक्त कंटेनर घटकांवर लागू होते, ज्यामध्ये इतर घटक असू शकतात. शैली आपल्याला घटकाच्या कडा आणि त्यातील सामग्री दरम्यान मार्जिन सेट करण्याची परवानगी देते. शैली समासतुम्हाला घटकापासून दुसऱ्या घटकाच्या जवळच्या सीमांवर इंडेंट सेट करण्याची अनुमती देते. दुसऱ्या घटकाच्या सीमा मूळ कंटेनरच्या सीमा तसेच पृष्ठाच्या स्वतःच्या कडा असू शकतात.

या शैली सेट करण्याचे अनेक मार्ग आहेत. उदाहरणार्थ, मोजमापाच्या काही युनिटमध्ये (px, ex, em, pt, cm, आणि याप्रमाणे) एका युक्तिवादासह सर्व समास किंवा इंडेंट्सचा आकार थेट निर्दिष्ट करा:

पॅडिंग: 3px; समास: 3px;

या प्रकरणात, समास आणि इंडेंट चारही बाजूंनी समान असतील. स्पेसद्वारे विभक्त केलेले दोन वितर्क निर्दिष्ट करताना:

पॅडिंग: 3px 5px; समास: 3px 5px;

पहिला मार्जिन/इंडेंट्सचे प्रमाण वरच्या आणि खालच्या बाजूला ठरवेल, दुसरा - डावीकडे आणि उजवीकडे. जेव्हा तीन युक्तिवाद दिले जातात:

पॅडिंग: 3px 5px 2px; समास: 3px 5px 2px;

पहिला मार्जिन/इंडेंटेशन शीर्षस्थानी आहे, दुसरा डावीकडे आणि उजवीकडे आहे, तिसरा तळाशी आहे. चार युक्तिवादांसह:

पॅडिंग: 3px 5px 2px 6px; समास : 3px 5px 2px 6px ;

पहिला मार्जिन/स्पेस वर आहे, दुसरा उजवीकडे आहे, तिसरा तळाशी आहे, चौथा डावीकडे आहे. हे लक्षात ठेवणे सोपे आहे: प्रथम शीर्षस्थानी आहे, नंतर घड्याळाच्या दिशेने. याव्यतिरिक्त, तुम्ही योग्य शैली वापरून, विशिष्ट काठासाठी मार्जिन आणि पॅडिंग स्वतंत्रपणे सेट करू शकता: पॅडिंग-टॉप, पॅडिंग-उजवीकडे, पॅडिंग-तळाशी, पॅडिंग-डावीकडे, मार्जिन-टॉप, समास-उजवे, समास-तळाशी, समास-डावीकडे. या शैलींचे मूल्य केवळ एक युक्तिवाद असू शकते, जे दिलेल्या बाजूसाठी मार्जिन/पॅडिंगचे प्रमाण निर्दिष्ट करते.

आकृतीमध्ये, लाल ब्लॉक टेबल सेलच्या आत आहे आणि त्याच्या सीमांना लागून आहे, म्हणजेच, सेलला कोणतेही समास नाहीत. शैली वापरून सेल मार्जिन सेट करूया:

पॅडिंग: 5px;

परिणामी, पृष्ठ खालीलप्रमाणे बदलेल:

आता इंडेंटेशन्स पाहू. दोन टेबल एकमेकांना लागून आहेत, जर आपल्याला त्यांना थोडे वेगळे करायचे असेल तर आपण इंडेंट लागू करू शकतो. येथे दोन पर्याय आहेत: एकतर पहिल्या सारणीचा तळाचा इंडेंट सेट करा किंवा दुसऱ्या सारणीचा वरचा इंडेंट सेट करा. चला दुसरा वापरुया:

मार्जिन-टॉप: 5px;

कृपया लक्षात घ्या की फील्डच्या बाबतीत जसे आहे तसे आम्ही इंडेंटेशन टेबलवर सेट करतो, टेबल सेलवर नाही. हा निकाल आहे:

तसे, पहिल्या प्रकरणात (लाल ब्लॉक आणि मूळ सेलच्या सीमांमधील अंतर), ब्लॉक इंडेंट सेट करून समान प्रभाव प्राप्त केला जाऊ शकतो. सर्वसाधारणपणे, काहीतरी स्पष्ट नसल्यास, टिप्पण्यांमध्ये आम्हाला कळवा.

चाचणी पृष्ठाचा HTML कोड:

<html > <डोके > <शीर्षक >चाचणी</शीर्षक> <meta http-equiv = "सामग्री-प्रकार" सामग्री = "text/html;charset=utf-8" > </head> <शरीर > <शैली >टेबल (रुंदी: 200px; उंची: 150px; सीमा: 1px ठोस #555; बॉर्डर-कोलॅप्स: कोलॅप्स) td (उभ्या-संरेखित: शीर्ष; पॅडिंग: 0px) div (रुंदी: 100px; उंची: 100px; पार्श्वभूमी: लाल)< <टेबल शैली = "पार्श्वभूमी: चुना" > <tr > <td शैली = "पॅडिंग: 5px" > <div शैली = "मार्जिन: 0px" ></div> </td> </tr> </टेबल> <टेबल शैली = "पार्श्वभूमी: स्कायब्लू; मार्जिन-टॉप: 5px"> <tr > <td ></td> </tr> </टेबल> </body> </html> 12 जुलै 2011 दुपारी 01:14 वाजता

CSS निवडक आणि संयोजकांसाठी अर्थशास्त्र

• CSS

• भाषांतर

CSS वाक्यरचना सोपी आहे आणि ती समजून घेण्यासाठी तुम्हाला IT मध्ये PhD ची गरज नाही. तथापि, हे काही पैकी एक आहे लोकप्रिय भाषा, जे शब्दाच्या खऱ्या अर्थाने तार्किक नाही. JavaScript आणि PHP सारख्या इतर वेब प्रोग्रामिंग भाषांच्या विपरीत, CSS पारंपारिक तर्क वापरून समस्या सोडवत नाही. अल्गोरिदम जसे की “जर X, तर Y करा”, मध्ये अन्यथाकरा Z" किंवा "सर्व Ys निवडा, नंतर त्यांच्यासह X करा" CSS सारख्या भाषेत लागू केले जाऊ शकत नाही. सोप्या भाषेत सांगायचे तर, ही डिझाईनसाठी बनलेली भाषा आहे, डिझायनर्सची भाषा आहे, विकसकांसाठी नाही. काही अनुभवी प्रोग्रामरमी ज्या लोकांसोबत काम केले त्यांनी याच कारणासाठी CSS शिकण्यासाठी खूप मेहनत घेतली.

CSS शिकणे वर्ग आणि आयडी तसेच वापरासह सुरू होते. आणि # थेट घटक नियुक्त करण्यासाठी. पूर्णपणे कार्यक्षम वेबसाइट तयार करण्यासाठी हे पुरेसे आहे, परंतु ते पुरेसे नाही लवचिक उपायडिझाइनच्या संपूर्ण बदलाच्या बाबतीत. या हार्ड-टू-पोच आयटम व्यवस्थापित करण्यासाठी एक पर्यायी दृष्टिकोन पाहू.

शेजारी संबंधित संयोजक

चला निवडकर्त्यासह प्रारंभ करूया, ज्यामध्ये सोयीस्कर आहे कठीण परिस्थिती, - शेजारच्या संबंधित संयोजकाकडून. + चिन्ह वापरून दोन घटक जोडून समीप संबंधित संयोजक दर्शविला जातो:

H1+p
ते वेगळे उभे करते पुढील p-घटक, DOM मधील h1 घटकानंतर लगेच स्थित. टायपोग्राफिक सिद्धांत सूचित करतो की आपण मजकूराच्या परिच्छेदांमध्ये इंडेंट्स वापरावे, परंतु जर ते दुसर्या परिच्छेदाचे अनुसरण करतात तरच. सराव मध्ये, हे पहिले वगळता सर्व परिच्छेद इंडेंट करण्यासाठी वापरले जाऊ शकते:
p + p ( मजकूर-इंडेंट: 1em; )
class="first" वापरून पहिला परिच्छेद हायलाइट करण्यापेक्षा हे अधिक सोयीचे आहे. तीन ओळी, वर्ग नाहीत आणि पूर्ण ब्राउझर समर्थन. जर तुम्ही p टॅग्जमध्ये साइटच्या सामग्रीशी संबंधित img टॅग लावले (खरं तर, तुम्ही असे केले पाहिजे), तुम्ही फक्त -1em चे नकारात्मक मूल्य वापरून त्यांचे डावे समास परत हलवू शकता:
p + p img ( समास-डावीकडे: -1em; )
तेही सोपे, बरोबर? इतर सर्व परिच्छेद न बदलता हेडिंगनंतर लगेच येणाऱ्या सर्व परिच्छेदांची पहिली ओळ निवडायची असेल तर? पुन्हा आपण व्ह्यू क्लास वापरू शकतो. समीप कंपाउंड कॉम्बिनेटर आणि स्यूडो-एलिमेंटपासून बनवलेला साधा सिलेक्टर हे काम करेल:
h1 + p::प्रथम-ओळ (फॉन्ट-व्हेरिएंट: स्मॉल-कॅप्स; )
टीप: स्यूडो-एलिमेंट:फर्स्ट-लाइन CSS 2.1 मध्ये स्वीकारण्यात आली होती, परंतु CSS 3 नोटेशन:: स्यूडो-क्लासेस आणि स्यूडो-एलिमेंटमध्ये फरक करण्यासाठी वापरते.

आनुवंशिक संयोजक

सामान्य मार्कअप प्रोटोकॉल म्हणजे #page किंवा #wrap मधील काही नामांकित घटकांमध्ये विभाग ठेवणे: