या ट्युटोरियलमध्ये तुम्ही css ला html ला कसे कनेक्ट करायचे ते शिकाल. उदाहरणांसह अनेक पर्याय पाहू. आम्ही वेगवेगळ्या ब्राउझरसाठी शैली आणि हॅकच्या असिंक्रोनस लोडिंगबद्दल देखील बोलू.

वेगळ्या फाईलमध्ये सीएसएसला एचटीएमएलशी कसे कनेक्ट करावे

आता मी तुम्हाला वेगळ्या स्टाइल फाइलसह सीएसएसला एचटीएमएलशी कसे कनेक्ट करायचे ते दाखवतो. एक वेगळी css फाईल तयार केली आहे. नंतर, विशेष आदेश वापरून, ते आवश्यक कागदपत्रांशी जोडते. या प्रकाराला बाह्य शैली पत्रक म्हणतात.

ही पद्धत सर्वात श्रेयस्कर आहे. हे तुम्हाला HTML दस्तऐवजांपासून स्वतंत्रपणे वेबसाइट शैली विकसित करण्यास अनुमती देते. शैली नंतर अनेक पृष्ठांवर एकाच style.css फाईलमध्ये वापरली जाऊ शकते.

आम्ही हेड टॅगमध्ये पथ अचूकपणे लिहितो. हे पृष्ठ प्रदर्शित करण्यासाठी सर्व आवश्यक सिस्टम माहिती निर्दिष्ट करते. हे असे जोडते:

इतर कनेक्शन पद्धती देखील आहेत. त्यांना फक्त अतिरिक्त पर्याय म्हणून वापरा.

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

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

जोपर्यंत CSS शैली HTML पृष्ठाशी जोडल्या जात नाहीत, तोपर्यंत त्यांच्या वापराचा कोणताही परिणाम होणार नाही. हे अनेक मार्गांनी केले जाऊ शकते.

ज्यांना व्हिडिओ स्वरूपात पहायला आवडते त्यांच्यासाठी.

यापैकी प्रत्येक पद्धत कशी कार्य करते हे दाखवण्यासाठी, उदाहरणार्थ, खालील सामग्रीसह html फाइल घेऊ.

CSS शैलीचे कार्य जे कनेक्ट केले जाईल ते परिच्छेद घटक बनवणे आहे

लाल रंगात.

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

पर्याय 1. स्टाइल विशेषता वापरून ओपनिंग टॅगच्या आत.

मुख्य भागाच्या आत असलेल्या पृष्ठावरील घटकांमध्ये शैली विशेषता जोडली जाऊ शकते. या विशेषताचे मूल्य CSS गुणधर्म आणि मूल्ये असू शकतात जी या घटकावर लागू केली जावीत.

हे एका विशिष्ट उदाहरणासह कसे कार्य करते ते पाहू. शैली विशेषता घटकामध्ये जोडली

परिच्छेद

कृपया लक्षात घ्या की या प्रकरणात निवडक वापरण्याची आवश्यकता नाही, कारण ज्या घटकांमध्ये शैली जोडल्या जातात ते आधीच परिभाषित केले आहे.

पर्याय २. शैली घटक आत.

CSS शैली समाविष्ट करण्याचा दुसरा मार्ग म्हणजे घटक वापरणे

पर्याय 3. बाह्य शैली फाइल कनेक्ट करत आहे.

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

या घटकासाठी निर्दिष्ट केलेल्या गुणधर्मांकडे लक्ष द्या.

ते देखील अनिवार्य आहेत. href विशेषता css फाईलचा मार्ग निर्दिष्ट करते ज्याचा समावेश करणे आवश्यक आहे.

style.css फाइलमध्ये खालील कोड आहे:

P(रंग:लाल;)

CSS शैली समाविष्ट करण्याचे हे 3 मार्ग सराव मध्ये बरेचदा वापरले जातात. मी तुम्हाला तुमच्या संगणकावर या उदाहरणांसह प्रयोग करण्यास प्रोत्साहित करतो. भविष्यात, हे आपल्यासाठी खूप उपयुक्त ठरेल.

म्हणून आम्ही सुरू ठेवतो नवशिक्यांसाठी html धडे. शेवटच्या धड्यात, मी हेड टॅग आणि पृष्ठाचे एचटीएमएल एन्कोडिंग कसे सेट करायचे याबद्दल बोललो, तसेच कीवर्ड आणि त्याचे वर्णन निर्दिष्ट केले. आज आपण काय शिकणार आहोत? या ट्युटोरियलमध्ये आपण टेम्प्लेटमध्ये स्टाइल्स कसे समाविष्ट करायचे ते शिकू. खाली अधिक तपशील.

टेम्पलेटमध्ये डिझाइन शैली कशी समाविष्ट करावी?सुरूवातीस, याबद्दल जाणून घेऊया CSS शैली काय आहेत. CSS डिझाइन शैली हे HTML, XHTML आणि XML मार्कअप भाषा वापरून लिहिलेल्या WEB पृष्ठांसाठी डिझाइन साधन आहे. ते निर्दिष्ट केले जाऊ शकतात, जसे की HTML दस्तऐवजातच, किंवा बाहेरून कनेक्ट केलेले, म्हणजे. वेगळ्या फाईलमध्ये वर्णन करा. मी प्रथम आणि द्वितीय दोन्ही पद्धतींचा विचार करण्याचा प्रस्ताव देतो. जवळजवळ सर्वकाही वेब पृष्ठे आणि वेबसाइट्स CSS स्टाइल वापरा.

1. CSS डिझाइन शैली कनेक्ट करण्याची पद्धत HTML दस्तऐवजाच्या आत आहे किंवा अंतर्गत शैली कनेक्ट करणे आहे.
जर वेगळ्या फाईलमध्ये शैली निर्दिष्ट केल्या नसतील, तर त्या टॅगच्या आत दस्तऐवजात निर्दिष्ट केल्या पाहिजेत. . दस्तऐवजात CSS शैली कनेक्ट करण्याचे उदाहरण:

.....

अशा प्रकारे जोडलेल्या शैली संपूर्ण दस्तऐवजात वैध, परंतु तुम्हाला ते फक्त एका ब्लॉकसाठी निर्दिष्ट करायचे असल्यास काय? या टॅगची विशेषता वापरून तुम्ही विशिष्ट ब्लॉक (टॅग) अंतर्गत शैलीचे वर्णन करू शकता - शैली. एका टॅगसाठी शैली कनेक्ट करण्याचे उदाहरण:

यादृच्छिक मजकूर आकार 15 आणि लाल रंग

अशा प्रकारे वर्णन केलेल्या शैली आहेत इतर दस्तऐवज टॅग प्रभावित करू नका.

2. एक पद्धत जी तुम्हाला दुसऱ्या फाईलमधून शैली कनेक्ट करण्यास किंवा बाह्य डिझाइन शैली कनेक्ट करण्यास अनुमती देते.

जर तुमच्याकडे वेगळ्या फाईलमध्ये शैली असतील तर त्यांना एका विशेष ओळीने जोडणे आवश्यक आहे. संपूर्ण HTML दस्तऐवजासाठी शैली निर्दिष्ट करण्यासाठी, आम्ही टॅग वापरू , जे टॅगच्या आत स्थित असणे आवश्यक आहे ज्याबद्दल मी बोललो होतो. अशा कनेक्शनचे उदाहरणः

शैली असलेल्या फाईलचा मार्ग टॅगच्या या भागात दर्शविला आहे: href="style.css" कोट्समध्ये. उदाहरणामध्ये शैली फाइल समाविष्ट आहे जी HTML दस्तऐवजाच्या समान फोल्डरमध्ये राहते.

तुम्ही बाह्य शैलींना दुसऱ्या मार्गाने देखील कनेक्ट करू शकता - विशेष @import निर्देशासह, जे टॅगमध्ये संलग्न आहे. . निर्देश वापरून कनेक्शनचे उदाहरण @आयात:

.....

css शैली फाइल, किंवा त्याऐवजी त्याचा मार्ग, या पद्धतीमध्ये कंसात दर्शविला आहे.

दुसऱ्या पद्धतीमध्ये वर्णन केलेली शैली कनेक्शन टॅग दरम्यान स्थित असणे आवश्यक आहे .

तुम्हाला XML दस्तऐवजासाठी CSS शैली समाविष्ट करायची असल्यास, तुम्हाला खालील ओळ वापरण्याची आवश्यकता आहे:

या कनेक्शन पद्धतीमध्ये, शैलींसह फाइलचा मार्ग अवतरणांमध्ये दर्शविला जातो.

आजचा धडा संपला! आनंदी मांडणी आणि नवीन ज्ञान!

तुम्हाला युरोपला जायचे आहे का? तुला पाहिजे

हॅलो, ॲनाटॉमी ऑफ बिझनेस प्रकल्पाच्या प्रिय वाचकांनो. वेबमास्टर अलेक्झांडर तुमच्यासोबत आहे! मागील लेखात, आम्ही सीएसएस शैली काय आहेत आणि WEB प्रोग्रामिंगमध्ये ते किती महत्त्वाचे आहेत ते पाहिले.

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

चला विलंब करू नका आणि प्रारंभ करूया!

वेगळ्या CSS फाइलसह!

शैली कनेक्ट करण्याचा सर्वात सोयीस्कर आणि सोपा मार्ग म्हणजे शैलींसह एक वेगळी फाइल कनेक्ट करणे. हे करण्यासाठी, टेक्स्ट एडिटर नोटपॅड++ (किंवा इतर कोणत्याही) चा वापर करून .css एक्स्टेंशनसह फाइल तयार करा आणि ती फाइल ज्या फोल्डरमध्ये ठेवायची आहे त्याच फोल्डरमध्ये ठेवा.

नंतर टॅग दरम्यान HTML फाईलमध्ये खालील कोड पोस्ट करा:

आता या सगळ्याचा अर्थ काय ते पाहू:

दुवा # इंग्रजीतून अनुवादित म्हणजे “लिंक”. अशा प्रकारे आपण ब्राउझरला दाखवतो की आपण पुढे काय बोलणार आहोत ही लिंक आहे. rel= # या विशेषतासह आम्ही दाखवतो की CSS फाइल HTML फाइलशी कशी संबंधित आहे. "stylesheet" # म्हणजे CSS फाइल ही कॅस्केडिंग स्टाईल शीट आहे. type="text/css" # येथे सर्व काही सोपे आहे: हा एक संकेत आहे की फाइल मजकूर स्वरूपात लिहिलेली आहे आणि तिचा विस्तार आहे .css href="style.css" # ही CSS शैली असलेल्या फाईलची लिंक आहे.

माझ्या मते, CSS शैली समाविष्ट करण्याचा हा सर्वात प्राधान्याचा मार्ग आहे.

आम्ही थेट HTML फाइलमध्ये शैली लिहितो (पहिली पद्धत)

CSS शैली निर्दिष्ट करण्याचा पुढील मार्ग म्हणजे त्यांना थेट HTML दस्तऐवजात लिहिणे. हे असे दिसते:

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

HTML मध्ये कॅस्केडिंग शैली पत्रके ठेवणे (दुसरी पद्धत)

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

येथे एक उदाहरण आहे: HTML दस्तऐवजात CSS शैली प्रदर्शित करणे

कृपया लक्षात घ्या की टॅगच्या आत आम्ही कुरळे ब्रेसेस वापरून CSS नियमांनुसार कोड देखील लिहितो. पुढील लेखांमध्ये मी CSS मधील वाक्यरचना नियमांबद्दल अधिक तपशीलवार बोलेन.

एका HTML दस्तऐवजावर एकाधिक CSS फाइल्स कनेक्ट करणे.

HTML नियम अनेक CSS फायली एकाच वेळी समाविष्ट करण्याची परवानगी देतात. बरेच वेबमास्टर हे वापरतात: ते मजकूर आणि प्रतिमांसाठी स्वतंत्र CSS फाइल तयार करतात. किंवा पृष्ठाच्या शीर्षलेख, तळटीप आणि मुख्य भागासाठी स्वतंत्र फाइल्स. हे कसे अंमलात आणायचे ते पाहू या.

आम्ही अनेक CSS शैली फाइल्स तयार करत आहोत. त्यांची नावे style-1.css आणि style-2.css असू द्या. आम्ही ते HTML फाइलसह त्याच फोल्डरमध्ये पद्धत क्रमांक एक प्रमाणे ठेवतो.

येथे एक उदाहरण आहे: HTML दस्तऐवजात CSS शैली प्रदर्शित करणे

सर्व काही पहिल्या पद्धतीसारखेच आहे, केवळ या प्रकरणात आम्ही एकाच वेळी दोन फायलींचे दुवे सूचित करतो.

CSS फाईलला त्याच प्रकारच्या फाईलमध्ये लिंक करा.

वरील सर्व पद्धतींव्यतिरिक्त, एक पद्धत आहे जी तुम्हाला एका CSS फाईलमध्ये इतर अनेकांच्या लिंक्स ठेवण्याची परवानगी देते!

हे खालीलप्रमाणे लागू केले आहे:
प्रथम, आम्हाला किमान एक CSS फाइल तुमच्या कोडशी त्याच प्रकारे जोडणे आवश्यक आहे.

दुसरे म्हणजे, आधीच कनेक्ट केलेल्या फाईलमध्ये खालील कोड प्रविष्ट करा:

@import url("style-2.css");

या ओळीत आमच्या फाइलमध्ये अतिरिक्त CSS फाइल समाविष्ट आहे. तुम्हाला CSS कनेक्ट करण्यात काही अडचण असल्यास, तुम्ही त्यांना टिप्पण्यांमध्ये विचारू शकता.
आम्ही मागील दोन धड्यांमधून शिकलो त्याप्रमाणे, CSS तंत्रज्ञान हे एक शक्तिशाली साधन आहे ज्यामध्ये प्रत्येक वेबमास्टरने प्रभुत्व मिळवले पाहिजे! सामग्रीचे एकत्रीकरण सुधारण्यासाठी, प्राप्त माहिती एकत्रित करण्यासाठी मी प्रत्येक धड्याच्या शेवटी प्रशिक्षण व्हिडिओ + चाचणी जोडण्याचे ठरवले.

साहित्य निश्चिती चाचणी:

आम्हाला HTML फाईलमध्ये त्याची लिंक देऊन CSS फाइल समाविष्ट करणे आवश्यक आहे. खालीलपैकी कोणती पद्धत योग्य आहे?

पर्याय 1:

पर्याय २:

पर्याय 3:

पर्याय 4:

आम्ही सीएसएस कॅस्केड थेट एचटीएमएल फाइलमध्ये ठेवू शकतो का?

ब्लॉग साइटच्या प्रिय वाचकांना नमस्कार. एचटीएमएलला समर्पित लेखांच्या ब्लॉकनंतर, मी तुमची सीएसएसशी ओळख करून देण्याचा निर्णय घेतला, कारण दस्तऐवज डिझाइन करण्यासाठी मार्कअप साधने पुरेसे नाहीत. सर्वसाधारणपणे, वेबसाइट्स कशी तयार करायची हे शिकण्याच्या प्रक्रियेत HTML शिकणे हा फक्त पहिला टप्पा आहे सीएसएस शिकणे; चला तर मग जाणून घेऊया CSS म्हणजे काय आणि त्यांची गरज का आहे?.

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

कॅस्केडिंग शैली पत्रके(हे संक्षेप आहे CSS - कॅस्केडिंग स्टाइल शीट्स) हे पॅरामीटर्स (शैली) चा एक संच आहे जो वेब पृष्ठाच्या स्वतःचे आणि त्याच्या वैयक्तिक घटकांचे वर्णन करतो. या सेटिंग्ज पृष्ठ पार्श्वभूमी, मजकूर रंग, परिच्छेद संरेखन, सारणी सीमा पर्याय आणि बरेच काही नियंत्रित करतात.

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

त्यामुळे, सुरवातीपासून वेबसाइट तयार करताना आणि विद्यमान प्रकल्पात बदल करताना तुम्हाला कॅस्केडिंग स्टाईल शीट्सच्या क्षमतांचे किमान ज्ञान आवश्यक असेल. सर्वप्रथम, वेबसाइट डिझाइनवर काम करताना हे ज्ञान आवश्यक असेल.

शैली जोडणे किंवा HTML दस्तऐवजात CSS कसे कनेक्ट करावे

आम्ही कॅस्केडिंग स्टाईल शीटच्या वाक्यरचना किंवा गुणधर्मांबद्दल बोलण्यापूर्वी, तुम्हाला ते HTML दस्तऐवजाशी कसे जोडायचे ते शिकणे आवश्यक आहे. सीएसएसला एचटीएमएलशी जोडण्याचे तीन मार्ग आहेत.

1. पहिली पद्धत म्हणजे .css एक्स्टेंशनसह वेगळ्या फाईलमध्ये किंवा अनेक फाईल्समध्ये शैली ठेवणे. या प्रकरणात, CSS शैली कनेक्ट करण्यासाठी, वापरा दुवा, ज्यामध्ये बाह्य शैली फाइलचा मार्ग आहे. हे मेटा टॅग हेड टॅग दरम्यान संबंधित वेब पृष्ठाच्या शीर्षलेख विभागात ठेवलेला आहे. ते लिहिण्याचे स्वरूप येथे आहे:

स्टाईल फाईलचा मार्ग href विशेषताचे मूल्य म्हणून रेकॉर्ड केला जातो. rel विशेषता ब्राउझरला लिंक टॅग संदर्भित फाइल काय आहे ते सांगते. "स्टाईलशीट" हे मूल्य सूचित करते की ही फाइल बाह्य शैली पत्रक आहे. प्रकार विशेषता फाइलचा MIME प्रकार निर्दिष्ट करते. बाह्य शैली पत्रकासाठी, MIME प्रकार "text/css" आहे.

एचटीएमएल कोडमध्ये सीएसएस शैली कनेक्ट करण्यासाठीची ओळ अशी दिसेल:

...
.css"/>
...

या पद्धतीचा फायदा असा आहे की बाह्य शैली पत्रकएकाच वेळी अनेक वेब पेजेसशी लिंक करता येते.

2. दुसरा मार्ग म्हणजे तथाकथित लिहिणे जागतिक शैली, जे वेब पृष्ठाच्या html कोडमध्ये थेट लिहिलेले आहेत. त्यांना दुहेरी खोलीत बंद केले आहे शैली टॅगआणि सामान्यतः हेड टॅग दरम्यान हेड विभागात ठेवले जाते:

...

...

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

3. तिसरी पद्धत तथाकथित अंगभूत किंवा अंतर्गत शैली आहे. हे करण्यासाठी, तुम्हाला फक्त आवश्यक html टॅगमध्ये ठेवण्याची आवश्यकता आहे शैली विशेषता, ज्यामध्ये पॅरामीटर्स म्हणून CSS गुणधर्मांचा संच समाविष्ट आहे:

राखाडी पार्श्वभूमी आणि लाल मजकुरासह परिच्छेद

शिवाय, शैली विशेषता मध्ये निर्दिष्ट केलेले गुणधर्म फक्त एका html घटकाला लागू होतात. सामान्यतः, साइट डिझाइन डीबग करण्याच्या टप्प्यावर शैली कनेक्ट करण्याची ही पद्धत वापरली जाते आणि नंतर परिणामी CSS गुणधर्म बाह्य शैली असलेल्या फाइलमध्ये हस्तांतरित केले जातात.

CSS शैली तयार करणे. कॅस्केडिंग शैली पत्रक वाक्यरचना - नियम, गुणधर्म, निवडक.

निवडकर्ता (
मालमत्ता: मूल्य;
मालमत्ता: मूल्य;
...
मालमत्ता: मूल्य
}

त्या. शैली नियमामध्ये शैली निवडक आणि शैली गुणधर्मांची सूची त्यांच्या मूल्यांसह कुरळे ब्रेसेसमध्ये समाविष्ट असते (“(” आणि “)”):

• निवडकर्तावेब पृष्ठाच्या घटकांना बांधण्यासाठी वापरले जाते ज्यावर त्याचा प्रभाव वाढवावा;
• “प्रॉपर्टी: व्हॅल्यू” जोड्या अर्धविराम (";") द्वारे विभक्त केल्या जातात आणि त्यापैकी पाहिजे तितक्या असू शकतात;
• शेवटची जोडी “प्रॉपर्टी: व्हॅल्यू” आणि क्लोजिंग कर्ली ब्रेस मधील अर्धविराम चिन्ह वगळले जाऊ शकते;
• शैली मालमत्ता html पृष्ठ घटकाच्या पॅरामीटर्सपैकी एक दर्शवते: मजकूर रंग, फॉन्ट प्रकार, इंडेंटेशन रक्कम;
• CSS नियम लिहिताना स्पेसेस आणि लाइन ब्रेक्स हे गंभीर नसतात, ब्राउझर त्याकडे दुर्लक्ष करतो, त्यामुळे तुम्ही कोडला तुम्हाला हवे तसे फॉरमॅट करू शकता;
• कोड केस संवेदनशील देखील नाही.

हे स्पष्ट करण्यासाठी, काही उदाहरणे पाहू.

चला हा CSS नियम पाहू:

• body हा एक निवडक आहे जो टॅगचे नाव दर्शवतो ;
• बॅकग्राउंड — स्टाइल प्रॉपर्टी जी बॅकग्राउंड पॅरामीटर्स सेट करण्यासाठी वापरली जाते;
• #0000FF हे बॅकग्राउंड स्टाइल प्रॉपर्टीचे मूल्य आहे, जो RGB फॉरमॅटमधील कलर कोड आहे.

परिणामी, ही शैली वेब पृष्ठाच्या मुख्य घटकावर लागू केली जाईल आणि पृष्ठ पार्श्वभूमी निर्दिष्ट रंगात रंगेल. प्रश्नातील शैली म्हणतात टॅग ओव्हरराइड शैली, कारण निवडकर्ता हे वर्ण नसलेले टॅग नाव आहे< и >.

आणखी एक उदाहरण पाहू:

h1 (
फॉन्ट-आकार: 24px;
रंग: हिरवा;
}

ही शैली सूचित करते की ब्राउझर टॅगमध्ये ठेवलेला कोणताही मजकूर प्रदर्शित करेल

हिरवा आहे आणि त्याचा फॉन्ट आकार 24 पिक्सेलवर सेट करेल.

टॅग निवडक म्हणून, टॅग नावाव्यतिरिक्त, आपण निर्दिष्ट करू शकता वर्ग:

पिवळा मजकूर (रंग:पिवळा)

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

या परिच्छेदामध्ये नारिंगी मजकूर आहे

उदाहरणामध्ये, आम्ही टॅगशी बांधील आहोत

क्लासचे नाव यलो टेक्स्ट वापरून Css नियम. परिणामी, या परिच्छेदातील मजकूर केशरी रंगात प्रदर्शित होईल.

तुम्ही स्पेसद्वारे विभक्त केलेल्या clsss विशेषताचे मूल्य म्हणून एकाधिक शैली वर्ग नावे निर्दिष्ट करू शकता. या प्रकरणात, शैली वर्गांची क्रिया असेल:

कर्सिव्ह टेक्स्ट (फॉन्ट-शैली: इटालिक)

पिवळा तिर्यक मजकूर

या उदाहरणात, टॅगवर

आम्ही एकाच वेळी दोन वर्ग जोडले: यलो टेक्स्ट आणि कर्सिव्ह टेक्स्ट. परिणामी, टॅगची सामग्री पिवळ्या आणि तिर्यक फॉन्टमध्ये प्रदर्शित केली जाईल.

वर्गांव्यतिरिक्त, सीएसएस नियम निवडकर्ता म्हणून वापरले जाऊ शकतात ओळखकर्ता, जे घटकासाठी एक अद्वितीय नाव निर्दिष्ट करते. येथे सर्व काही शैली वर्गांच्या बाबतीत सारखेच आहे, फक्त काही फरक आहेत:

• CSS नियम निवडक मध्ये, अभिज्ञापकाचे नाव देखील निर्दिष्ट केले आहे, परंतु त्याच्या नावासमोर बिंदूऐवजी, हॅश चिन्ह "#" ठेवले आहे;
• html घटकास बंधनकारक द्वारे केले जाते id विशेषता, ज्याचे मूल्य हॅश चिन्हाशिवाय शैलीच्या नावावर सेट केले आहे;
• id विशेषताचे मूल्य पृष्ठामध्ये अद्वितीय असणे आवश्यक आहे, म्हणजेच html कोडमध्ये id विशेषताच्या दिलेल्या मूल्यासह फक्त एक घटक असू शकतो, अन्यथा कोड वैध राहणार नाही.

स्पष्टतेसाठी एक उदाहरण पाहू:

#textcenter(मजकूर-संरेखित: केंद्र;)

मध्यभागी मजकूर

id विशेषता वापरून p (परिच्छेद) घटकाशी css नियम जोडलेला आहे, जो मजकूर पृष्ठाच्या मध्यभागी संरेखित करतो. या id विशेषता मूल्यासह पृष्ठावर घटक तयार करण्याची परवानगी नाही, अन्यथा html कोड वैध राहणार नाही.

शैलीचे वर्णन करण्याच्या विचारात घेतलेल्या पद्धतींव्यतिरिक्त, css तुम्हाला तयार करण्याची परवानगी देते एकत्रित शैलीआणि एकाच वेळी अनेक समान शैली सेट करा. चला एक उदाहरण पाहू:

h1.redtext, p मजबूत (रंग: लाल)

उदाहरणामध्ये, स्वल्पविरामाने विभक्त केलेले दोन निवडक निर्दिष्ट केले आहेत: “h1.redtext” आणि “p strong”. प्रथम निवडकर्ता म्हणतो की सर्व h1 घटकांमध्ये ज्यांचे वर्ग गुणधर्म मूल्य रेडटेक्स्टच्या समतुल्य आहे, मजकूर लाल रंगात प्रदर्शित केला जाईल. दुसऱ्या सिलेक्टरमध्ये, p टॅगमध्ये नेस्ट केलेल्या सर्व मजबूत घटकांसाठी समान गोष्ट होईल:

हे शीर्षक लाल रंगात दिसते

साधा मजकूर, लाल मजकूर