परिणाम:

वेब पेज के सभी पैराग्राफ में ग्रे टेक्स्ट का रंग

वेब पेज के सभी पैराग्राफ में ग्रे टेक्स्ट का रंग

बाहरी (जुड़ी हुई) शैलियाँ

बाहरी (संबंधित) शैलियों को एक्सटेंशन के साथ एक अलग फ़ाइल में परिभाषित किया गया है सीएसएस. बाहरी शैलियाँ साइट के सभी पृष्ठों को एक समान दिखने देती हैं।

शैलियों का वर्णन करने वाली फ़ाइल से लिंक करने के लिए, टैग का उपयोग करें एक कंटेनर में स्थित है ... .

इस टैग में दो विशेषताएँ निर्धारित होनी चाहिए: rel='स्टाइलशीट'और href, शैलियाँ फ़ाइल का पता परिभाषित करना।

उदाहरण

शैलियों को जोड़ना

वैश्विक और बाहरी शैलियों को जोड़ने का नियम शामिल है चयनकर्ताऔर विज्ञापन शैली.

नियम के बाईं ओर स्थित चयनकर्ता, उस तत्व को निर्धारित करता है जिसके लिए नियम निर्धारित किया गया है। अगला, में घुंघराले ब्रेसिज़शैली घोषणाओं को अर्धविराम से अलग करके सूचीबद्ध करता है। उदाहरण के लिए:

पी (पाठ-इंडेंट: 30px; फ़ॉन्ट-आकार: 14px; रंग: #666;)

शैली घोषणा एक जोड़ी है सीएसएस संपत्ति: सीएसएस मूल्य.

उदाहरण के लिए: लाल रंग

शैली को आंतरिक रूप से कनेक्ट करते समय, सीएसएस नियम, जो विशेषता मान है शैली, अर्धविराम द्वारा अलग की गई शैली घोषणाएँ शामिल हैं। उदाहरण के लिए:

सीएसएस चयनकर्ता

सार्वभौमिक चयनकर्ता

एक सार्वभौमिक चयनकर्ता HTML दस्तावेज़ में किसी भी तत्व से मेल खाता है।

तारांकन चिह्न (*) का उपयोग सार्वभौमिक चयनकर्ता को दर्शाने के लिए किया जाता है।

इसका उपयोग तब किया जाता है जब आपको किसी वेब पेज के सभी तत्वों के लिए समान शैली सेट करने की आवश्यकता होती है। उदाहरण के लिए:

* (मार्जिन: 0; पैडिंग: 0;)

कुछ मामलों में, तारांकन (*) वर्ण छोड़ा जा सकता है:
*।मेरी कक्षाऔर ।मेरी कक्षासमकक्ष,
*#मेरी आईडीऔर #मेरी आईडीसमकक्ष

टैग चयनकर्ता

चयनकर्ता कोई भी HTML टैग हो सकता है जिसके लिए स्टाइलिंग नियम परिभाषित हैं। उदाहरण के लिए:

H1 (रंग: लाल; पाठ-संरेखण: केंद्र;)

यदि कई तत्वों की शैली समान है, तो उनके अनुरूप चयनकर्ताओं को अल्पविराम से अलग करके स्टाइल शीट में सूचीबद्ध किया जा सकता है। उदाहरण के लिए:

H1, h2, h3, h4 (रंग: लाल; पाठ-संरेखण: केंद्र;)

आईडी चयनकर्ता

HTML किसी भी टैग को एक विशिष्ट पहचानकर्ता निर्दिष्ट करने की क्षमता प्रदान करता है। पहचानकर्ता विशेषता द्वारा निर्दिष्ट किया गया है पहचान. उदाहरण के लिए:

पहचानकर्ता मान लैटिन अक्षर से शुरू होना चाहिए और इसमें अक्षर (,), संख्याएं (), हाइफ़न (-), और अंडरस्कोर (_) हो सकते हैं।

सभी विशेषता मान पहचान HTML दस्तावेज़ में अद्वितीय होना चाहिए। अगर वे मिलते हैं पहचानसमान मानों के साथ, तो इन पहचानकर्ताओं को अनदेखा कर दिया जाता है, और वेब पेज कोड अमान्य हो जाता है।

सीएसएस कोड में, एक पहचानकर्ता चयनकर्ता को हैश चिह्न (#) द्वारा दर्शाया जाता है। पहचानकर्ता के बाद से पहचानकेवल अद्वितीय तत्वों पर लागू होता है, हैश चिह्न (#) से पहले टैग नाम आमतौर पर छोड़ दिया जाता है:

Div#a1 (रंग: हरा;)

इसी तरह

#a1 (रंग: हरा;)

उपयोग करने की सलाह दी जाती है पहचानतत्व को स्टाइल करने के लिए नहीं, बल्कि स्क्रिप्ट के माध्यम से या किसी लिंक का अनुसरण करके उस तक पहुंचने के लिए।

कक्षा चयनकर्ता

क्लास चयनकर्ताओं का उपयोग अक्सर स्टाइलिंग के लिए किया जाता है। टैग के लिए वर्ग विशेषता द्वारा निर्दिष्ट किया गया है कक्षा. उदाहरण के लिए:

कक्षा का नाम लैटिन अक्षर से शुरू होना चाहिए और इसमें अक्षर (,), संख्याएँ (), हाइफ़न (-), और अंडरस्कोर (_) हो सकते हैं।

यदि विशेषता पहचानविशिष्ट पहचान के लिए उपयोग किया जाता है, फिर विशेषता का उपयोग किया जाता है कक्षाटैग किसी न किसी समूह को सौंपा गया है।

सीएसएस कोड में, एक पहचानकर्ता चयनकर्ता को एक बिंदु (.) द्वारा दर्शाया जाता है। विभिन्न टैगों को एक ही वर्ग में वर्गीकृत किया जा सकता है। इस स्थिति में, अवधि (.) से पहले का टैग नाम हटा दिया जाता है:

I.हरा (रंग: #008000;) b.लाल (रंग: #f00;).नीला (रंग: #00f;)

एक टैग के लिए, आप एक ही समय में कई वर्गों को विशेषता में सूचीबद्ध करके निर्दिष्ट कर सकते हैं कक्षाएक स्थान के माध्यम से. इस मामले में, प्रत्येक निर्दिष्ट वर्ग की शैलियाँ तत्व पर लागू होती हैं।

यदि इनमें से कुछ वर्गों में समान शैली गुण हैं, लेकिन साथ में विभिन्न अर्थ, फिर सीएसएस कोड में नीचे स्थित क्लास के स्टाइल वैल्यू लागू किए जाएंगे।

विशेषता चयनकर्ता

ऐसे कई विशेषता चयनकर्ता हैं जिनका उपयोग आप किसी टैग को उसकी विशेषताओं के आधार पर स्टाइल करने के लिए कर सकते हैं।

टैग नाम और वर्गाकार ब्रैकेट ([)! के बीच कोई स्थान नहीं होना चाहिए!

सार्वभौमिक चयनकर्ता, टैग, पहचानकर्ता, वर्ग और विशेषता चयनकर्ता, और छद्म वर्ग सभी सरल चयनकर्ता हैं।

सरल चयनकर्ताओं को वेब दस्तावेज़ ट्री में तत्वों के संबंधों के आधार पर विशिष्ट अनुक्रमों में जोड़ा जा सकता है। ऐसे निर्माणों को कॉम्बिनेटर कहा जाता है।

प्रसंग चयनकर्ता

सबसे अधिक उपयोग किए जाने वाले कॉम्बिनरों में से एक संदर्भ चयनकर्ता है।

संदर्भ चयनकर्ता या वंशज चयनकर्ता कई तत्वों को परिभाषित करते हैं, जिनमें से एक दूसरे के भीतर समाहित होता है। एक संदर्भ चयनकर्ता में, सरल चयनकर्ताओं को एक स्थान से अलग किया जाता है।

उदाहरण

1. पुश्किन ए.एस.
   • "गोली मारना"
   • "बर्फ़ीला तूफ़ान"
   • "डबरोव्स्की"
2. गोगोल एन.वी.
   • "निरीक्षक"
   • "तारास बुलबा"
   • "मृत आत्माएं"
3. टॉल्स्टॉय एल.एन.
   • "युद्ध और शांति"
   • "अन्ना कैरेनिना"
   • "जी उठने"

परिणाम:

1. पुश्किन ए.एस.
   • "गोली मारना"
   • "बर्फ़ीला तूफ़ान"
   • "डबरोव्स्की"
2. गोगोल एन.वी.
   • "निरीक्षक"
   • "तारास बुलबा"
   • "मृत आत्माएं"
3. टॉल्स्टॉय एल.एन.
   • "युद्ध और शांति"
   • "अन्ना कैरेनिना"
   • "जी उठने"

बाल चयनकर्ता

एक बच्चा चयनकर्ता एक ऐसे तत्व की पहचान करता है जो दूसरे के अंदर ही होता है। चाइल्ड चयनकर्ता में, सरल चयनकर्ताओं को बड़े से बड़े चिह्न (>) द्वारा अलग किया जाता है।

उदाहरण

1. पुश्किन ए.एस.
   • "गोली मारना"
   • "बर्फ़ीला तूफ़ान"
   • "डबरोव्स्की"
2. गोगोल एन.वी.
   • "निरीक्षक"
   • "तारास बुलबा"
   • "मृत आत्माएं"
3. टॉल्स्टॉय एल.एन.
   • "युद्ध और शांति"
   • "अन्ना कैरेनिना"
   • "जी उठने"

परिणाम:

1. पुश्किन ए.एस.
   • "गोली मारना"
   • "बर्फ़ीला तूफ़ान"
   • "डबरोव्स्की"
2. गोगोल एन.वी.
   • "निरीक्षक"
   • "तारास बुलबा"
   • "मृत आत्माएं"
3. टॉल्स्टॉय एल.एन.
   • "युद्ध और शांति"
   • "अन्ना कैरेनिना"
   • "जी उठने"

आसन्न चयनकर्ता

एक आसन्न चयनकर्ता एक धन चिह्न (+) निर्दिष्ट करता है जो साधारण चयनकर्ताओं के दो अनुक्रमों को अलग करता है। इन अनुक्रमों द्वारा दर्शाए गए तत्व एक ही कंटेनर में समाहित होते हैं और दूसरा तुरंत पहले का अनुसरण करता है, किसी अन्य टैग द्वारा अलग नहीं किया जाता है।

उदाहरण

संवेदनशीलता

परिणाम:

संवेदनशीलता

आसन्न चयनकर्ता

एक आसन्न चयनकर्ता एक टिल्ड (~) वर्ण निर्दिष्ट करता है जो साधारण चयनकर्ताओं के दो अनुक्रमों को अलग करता है। इन अनुक्रमों द्वारा दर्शाए गए तत्व एक ही कंटेनर में समाहित हैं और दूसरा पहले का अनुसरण करता है (जरूरी नहीं कि सीधे)।

उदाहरण

संवेदनशीलता

"चेतन और अचेतन जीवन के सभी कार्य, उनकी उत्पत्ति के तरीके के अनुसार, प्रतिवर्त हैं।" उन्हें। सेचेनोव

रिफ्लेक्सोलॉजी रिफ्लेक्सिस के नियंत्रण के माध्यम से रोगों का उपचार है। इसका उपयोग जटिल उपचार कार्यक्रमों या व्यक्तिगत तकनीक के रूप में सफलतापूर्वक किया जाता है।

परिणाम:

संवेदनशीलता

"चेतन और अचेतन जीवन के सभी कार्य, उनकी उत्पत्ति के तरीके के अनुसार, प्रतिवर्त हैं।" उन्हें। सेचेनोव

रिफ्लेक्सोलॉजी रिफ्लेक्सिस के नियंत्रण के माध्यम से रोगों का उपचार है। इसका उपयोग जटिल उपचार कार्यक्रमों या व्यक्तिगत तकनीक के रूप में सफलतापूर्वक किया जाता है।

एक सीएसएस स्टाइल शीट, यदि हम परिभाषा को ही लें, तो यह एक दस्तावेज़ की उपस्थिति का वर्णन करने के लिए एक भाषा है। यानी HTML पेज की संरचना के लिए जिम्मेदार है, और CSS स्टाइल शीट पूरे डिजाइन के लिए जिम्मेदार है। मैंने यहां जानकारी संकलित की है जो आपको स्टाइल शीट का स्वतंत्र रूप से उपयोग करने की अनुमति देगी। मैं इस बारे में नहीं लिखूंगा कि इसे जानना कितना आवश्यक है, क्योंकि यह पहले से ही स्पष्ट है - इसके बिना आप साइट को कमोबेश सामान्य रूप में नहीं ला पाएंगे। यदि कोई अभी CSS शैलियाँ सीखना शुरू कर रहा है, तो ये सामग्रियाँ CSS सीखना शुरू करने के लिए पर्याप्त होंगी।

संरचित ज्ञान प्राप्त करने और HTML+CSS+JS को अपनी परियोजनाओं और ग्राहक परियोजनाओं के लिए यथासंभव प्रभावी ढंग से लागू करने के लिए, आपको नियमित रूप से अध्ययन करने और अपना स्तर बनाए रखने की आवश्यकता है।

लेकिन नींव रखना अच्छा है। कई लोग, अपने आप सीखते हुए, कई बुनियादी चीजें भूल जाते हैं और फिर ग्राहकों को परेशानी होती है, और व्यक्ति को समझ नहीं आता कि वे असंतुष्ट क्यों हैं।

ऐसी स्थितियों को उत्पन्न होने से रोकने के लिए सही क्रम में बुनियादी कौशल हासिल करना आवश्यक है। यदि आप वेबसाइट विकसित कर रहे हैं और इसमें आगे बढ़ना चाहते हैं, तो मैं ऑनलाइन स्कूलों में अध्ययन करने की सलाह देता हूं।

इससे आपके दैनिक कार्य से समय नहीं कटता है, लेकिन शिक्षकों की मदद से आप प्रश्न पूछ सकते हैं, आप बहुत तेजी से आगे बढ़ेंगे।

इन ऑनलाइन स्कूलों में से एक नेटोलॉजी है और मुझे पाठ्यक्रम " " पसंद आया, साथ ही, एक अन्य स्किलबॉक्स स्कूल के विकल्प के रूप में शैक्षिक पाठ्यक्रम " " भी पसंद आया। उनका ध्यानपूर्वक अध्ययन करना सुनिश्चित करें, और विशेष रूप से वे शिक्षक जो इस पाठ्यक्रम को पढ़ाते हैं।

1. बुनियादी बातें

मैं बिल्कुल बुनियादी बातों से शुरुआत करूंगा। जब मैंने यह साइट शुरू की, तो मैंने सीएसएस स्टाइल शीट सीखने पर छोटे ट्यूटोरियल लिखे। ये पाठ उन दोनों के लिए उपयुक्त हैं जो अभी शुरुआत कर रहे हैं और उन लोगों के लिए भी जो अपने ज्ञान को ताज़ा करने के लिए पहले से ही कुछ जानते हैं। वहां सब कुछ चित्रों और वास्तविक उदाहरणों में प्रस्तुत किया गया है।

एक छोटा सा विषयांतर:जब मैंने वेबसाइट निर्माण के विषय का अध्ययन करना शुरू किया, तो मैंने लगभग सब कुछ सीख लिया एचटीएमएल टैगऔर उन्होंने मुझे बहुत अधिक प्रेरित नहीं किया। लेकिन जब मैंने सीएसएस स्टाइल शीट का अध्ययन करना शुरू किया और प्रत्येक गुण को लागू करने का प्रयास किया - तो मुझे यह बहुत पसंद आया (अगर मुझे यह पसंद नहीं होता तो मैं इसे नहीं बनाता)। मैंने देखा कि आप बस अद्भुत चीजें कर सकते हैं सीएसएस का उपयोग करना. यह कोई प्रोग्रामिंग भाषा नहीं है जिसे सीखने में महीनों लग जाएं। स्टाइल शीट पर एक (अधिकतम दो) सप्ताह में महारत हासिल की जा सकती है।

बेशक, आप बिल्कुल सभी गुणों और उनके अर्थों का अध्ययन नहीं करेंगे, और यह आवश्यक नहीं है! आपको केवल मूल बातें जानने की आवश्यकता है ताकि आप इसे अपनी परियोजनाओं में लागू करना और उपयोग करना शुरू कर सकें। एक महत्वपूर्ण बारीकियां यह है कि आपको उस संपत्ति को तुरंत लागू करने की आवश्यकता है जिसे आपने वास्तविक उदाहरण पर सीखा है। चाहे इसे आपकी अपनी वेबसाइट हो या एक साधारण HTML वेबसाइट - इसमें कोई अंतर नहीं है। महत्वपूर्ण बात यह है कि आप इसे स्वयं लिखने का प्रयास करें और परिणाम देखें।

मेरी साइट पर बहुत सारे उदाहरण हैं जो सीएसएस का उपयोग करते हैं। एक साथ उनमें 100 से अधिक पाठ शामिल हैं! जब आप कम से कम बुनियादी बातें जानते हैं, तो आप पाठों से सभी उदाहरणों को सुरक्षित रूप से बदल और लागू कर सकते हैं।

कैस्केडिंग सीएसएस शैलियों की मूल बातें पर मेरे ट्यूटोरियल

2. CSS और CSS3 चीट शीट

ठीक है, आपने मूल बातें सीख लीं और कुछ दिनों के बाद आप "सफलता" के साथ सब कुछ भूल गए और, शायद, आप सोचते हैं कि यह आपकी चीज़ नहीं है और सब कुछ जटिल है। मैं आपको थोड़ा खुश करना चाहता हूं - मैं खुद हर किसी को नहीं जानता सीएसएस गुण. लेकिन मुझे उन्हें इंटरनेट पर देखने से कौन रोक रहा है?

सच है, अभी आप यांडेक्स या गूगल पर जाएंगे, फिर आपको जो रिक्वेस्ट चाहिए, वह टाइप करेंगे। और यदि खोज अभी भी आपको वह नहीं देती जो आपको चाहिए। आप इस तरह बहुत समय बिता सकते हैं और फिर भी वह नहीं पा सकते जो आप वास्तव में खोज रहे थे।

सौभाग्य से, अच्छे लोगों ने बहुत उपयोगी चीट शीट संकलित की हैं जिनसे मुझे एक से अधिक बार मदद मिली है। यह पता लगाना पर्याप्त है कि सब कुछ कहां है और फिर आवश्यक संपत्तियों को ढूंढना मुश्किल नहीं होगा।

CSS और CSS3 चीट शीट

वेबसाइट डिज़ाइन बनाते और विकसित करते समय ये बस अपूरणीय सामग्रियां हैं। ध्यान भटकने और संपत्तियों के विवरण के लिए इंटरनेट पर खोज करने में लगने वाला समय कई गुना कम हो गया है।

सच है, जैसा कि आप समझते हैं, जितना अधिक आप वेबसाइट बनाते हैं या डिज़ाइन करते हैं, उतना ही कम आपको इस टूलटिप को देखना पड़ता है, क्योंकि सभी आवश्यक गुण हमेशा मेमोरी में रहते हैं। लेकिन फिर भी, चीट शीट के इस सेट को हाथ में रखना अतिश्योक्तिपूर्ण नहीं होगा।

यह स्कूल जैसा है:भले ही आप चीट शीट का उपयोग न करें, फिर भी आपकी आत्मा इससे किसी तरह शांत रहती है 😆।

पाठ के अतिरिक्त - HTML चीट शीट

सीएसएस चीट शीट के अलावा, HTML चीट शीट भी हैं। यदि आप कोई टैग भूल गए हैं, तो आप उन्हें हमेशा इस HTML चीट शीट में देख सकते हैं। किसी एक बटन पर क्लिक करने के बाद डाउनलोड लिंक दिखाई देगा सोशल नेटवर्कइस वीडियो के नीचे.

निष्कर्ष

यदि आप शुरुआती हैं और सीएसएस की मूल बातें सीख रहे हैं, तो मेरे सीएसएस ट्यूटोरियल आपके लिए बिल्कुल सही हैं। उनमें सामग्री संक्षेप में प्रस्तुत की गई है और आपको केवल अपने हाथों से दोहराना है कि पाठ किस बारे में है। और अधिक अनुभवी वेबमास्टर भी सभी पाठों को शीघ्रता से देखकर अपने ज्ञान को ताज़ा करने में सक्षम होंगे। आप CSS और CSS3 चीट शीट भी डाउनलोड कर सकते हैं, जो आपको मूल गुणों को न भूलने में मदद करेगी और हमेशा हाथ में रहेगी, इस स्थिति में आप आवश्यक जानकारी को तुरंत देख और याद रख सकते हैं।

और हां, लेख के मुख्य बिंदु।

सीएसएस- कैस्केडिंग स्टाइल शीट्स (कैस्केडिंग स्टाइल शीट्स) एक उपकरण है जो आपको HTML टैग्स में विभिन्न दृश्य गुणों को सेट करने की अनुमति देता है।

डेवलपर्स की आधिकारिक वेबसाइट: http://www.w3.org/TR/CSS21/cover.html।

CSS नियमों से बना है. नियमों का एक नाम और एक अर्थ होता है। वे एक कोलन (नियम का नाम: नियम मान) द्वारा अलग किए गए हैं। हम नियमों के अर्थों में कोई उद्धरण चिह्न नहीं लगाते! उदाहरण:

लाल रंग; पृष्ठभूमि: #cccccc ;

लेकिन आप CSS को HTML से कैसे जोड़ते हैं? HTML कोड में दस्तावेज़ शैलियाँ कैसे लिखें? इसके लिए 3 समाधान हैं:

• अनुलग्नक (इनलाइन)।
• एंबेडिंग.
• लिंक करना.

दस्तावेज़ का आधार html है, और उस पर CSS पहले से ही लागू है। विशेष रूप से दस्तावेज़ के लिए, सीएसएस का कोई मतलब नहीं है।

नेस्टिंग विधि (इनलाइन) सीएसएस

शैली विशेषता का उपयोग किया जाता है. इसे किसी भी दृश्य रूप से प्रदर्शित तत्व में रखा जा सकता है। सीएसएस नियम शैली में लिखे गए हैं (नियम का नाम: नियम मान), कई नियम अर्धविराम से अलग किए गए हैं (; सीएसएस में नियम का अंत है):

सादे पाठ

"रंग:लाल; पृष्ठभूमि:#cccccc"> इस पैराग्राफ को इनलाइन विधि का उपयोग करके स्टाइल किया गया है।

सीएसएस एम्बेडिंग विधि

इस्तेमाल किया गया विशेष तत्व"शैली", जिसके अंदर सीएसएस नियम लिखे होते हैं। स्टाइल के अंदर हम CSS भाषा में ही लिखते हैं। उदाहरण:

इस उदाहरण में, हमने "पी" पैराग्राफ तत्व के लिए एक नियम लिखा है। दूसरी पंक्ति में हमने एक चयनकर्ता लिखा (जिन टैगों पर सीएसएस नियम लागू किया जाएगा)। नियम स्वयं घुंघराले कोष्ठक "( )" में लिखा गया है।

"शैली" तत्व को केवल "सिर" तत्व में रखा गया है।

सीएसएस लिंकिंग विधि

हर बार दस्तावेज़ में स्टाइल न लिखने के लिए (दस्तावेज़ अपलोड न करने के लिए), आपको सीएसएस नियमों को एक ही स्थान पर लिखना होगा और उन्हें विभिन्न दस्तावेज़ों पर (असीमित संख्या में) लागू करना होगा।

ऐसा करने के लिए, हम सभी सीएसएस नियमों को एक अलग रख देते हैं पाठ फ़ाइल. इस फ़ाइल को आमतौर पर .css एक्सटेंशन दिया जाता है। और फिर आप तुरंत देख सकते हैं कि इसमें शैली नियम शामिल हैं। आप इसे किसी भी चीज़ के साथ भ्रमित नहीं कर सकते।

फिर हम इस अलग सीएसएस फ़ाइल को अपने HTML दस्तावेज़ से कैसे लिंक कर सकते हैं? ऐसा करने के लिए, मुख्य अनुभाग में निम्नलिखित कोड का उपयोग करें:

वे। फ़ाइल को हाइपरलिंक के माध्यम से शैलियों के साथ निर्दिष्ट करें। ब्राउज़र स्टाइल फ़ाइल को लोड करता है और उसके नियमों को संपूर्ण दस्तावेज़ पर लागू करता है। मूलतः यह "शैली" तत्व के समान ही काम करता है, लेकिन एक अलग फ़ाइल में है। और हम किसी भी डॉक्यूमेंट में CSS फ़ाइल का लिंक डाल सकते हैं। यह बहुत सुविधाजनक है, क्योंकि... मैं शैलियों को एक ही फ़ाइल में संपादित करता हूँ; एक बार स्टाइल शीट डाउनलोड करने के बाद, जब आप अगले पृष्ठों पर जाते हैं, तो ब्राउज़र अब इस सीएसएस फ़ाइल की तलाश नहीं करेगा, यह इसे कैश (डाउनलोड की गई फ़ाइलों का एक प्रकार का अस्थायी भंडारण) से प्राप्त करेगा। इस तरह मैं ट्रैफ़िक बचाता हूं और पेज डिस्प्ले की गति बढ़ाता हूं।

ध्यान! "लिंक" तत्व एकल href विशेषता के साथ काम नहीं करेगा। क्योंकि इस हाइपरलिंक का उपयोग विभिन्न उद्देश्यों के लिए किया जाता है। यह एक सेवा हाइपरलिंक है जो इंगित कर सकता है विभिन्न प्रकार केफ़ाइलें जिनका उपयोग आपके पृष्ठों के लिए विभिन्न उद्देश्यों के लिए किया जा सकता है। ब्राउज़र को यह बताने के लिए कि यह एक स्टाइलशीट है, rel विशेषता का उपयोग किया जाता है (rel=”स्टाइलशीट”)। यह लोड किए जा रहे दस्तावेज़ और हमारे मुख्य दस्तावेज़ के बीच संबंध के प्रकार को निर्दिष्ट करता है। ब्राउज़र अब समझता है कि लोड किया जा रहा दस्तावेज़ एक स्टाइल शीट है।

सीएसएस (कैस्केडिंग स्टाइल शीट्स), या कैस्केडिंग स्टाइल शीट्स, का उपयोग मार्कअप भाषा में लिखे गए वेब दस्तावेज़ की उपस्थिति का वर्णन करने के लिए किया जाता है। सीएसएस शैली नियम निर्धारित करता है जो वेब पेजों पर रखे गए तत्वों की उपस्थिति को बदलता है, दस्तावेज़ में रंग, फ़ॉन्ट, आकार, सीमाओं, पृष्ठभूमि और स्थान जैसे उनके विवरणों को ठीक करता है।

आप सीएसएस कोड को सीधे मार्कअप तत्व में एक विशेषता मान के रूप में एम्बेड कर सकते हैं शैली. यह विशेषता सभी HTML तत्वों के लिए उपलब्ध है। सीएसएस का उपयोग करके, आप किसी दिए गए HTML तत्व के लिए कई स्टाइलिंग गुण निर्दिष्ट कर सकते हैं। प्रत्येक संपत्ति का एक नाम और एक मान होता है, जिसे कोलन (:) द्वारा अलग किया जाता है। प्रत्येक घोषित संपत्ति को अर्धविराम (;) द्वारा अलग किया जाता है।

किसी तत्व के लिए यह ऐसा ही दिखता है

सीएसएस शैलियाँ जोड़ने के तरीके

सीएसएस मानक किसी वेब पेज पर स्टाइल शीट लागू करने के लिए तीन विकल्प प्रदान करता है:

• बाहरी स्टाइल शीट - एक अलग .css फ़ाइल में स्टाइल शीट नियमों को परिभाषित करना, और फिर एक टैग का उपयोग करके इस फ़ाइल को HTML दस्तावेज़ में शामिल करना
• आंतरिक तालिकाशैलियाँ - एक टैग का उपयोग करके स्टाइल शीट नियमों को परिभाषित करना

  उदाहरण: आंतरिक स्टाइल शीट

  • खुद कोशिश करना "

  शीर्षक

  पहले पाठ करें

  पाठ दो

  पाठ तीन

  शीर्षक

  पहले पाठ करें

  पाठ दो

  पाठ तीन

  
  
  

  इस उदाहरण में, हम CSS का उपयोग करके तत्व के लिए पृष्ठभूमि रंग सेट करते हैं : पृष्ठभूमि-रंग: हल्का हरा, शीर्षकों के लिए रंग और फ़ॉन्ट प्रकार

  : रंग नीला; फ़ॉन्ट-परिवार: वर्दाना, साथ ही पैराग्राफ के लिए फ़ॉन्ट आकार, रंग और केंद्र पाठ संरेखण

  : फ़ॉन्ट-आकार:20px; लाल रंग; पाठ-संरेखण:केंद्र.

  अंतर्निर्मित शैली

  जब आपको किसी HTML पृष्ठ के एक तत्व को प्रारूपित करने की आवश्यकता होती है, तो शैली विवरण को पहले से ही विशेष शैली विशेषता का उपयोग करके सीधे शुरुआती टैग के अंदर रखा जा सकता है। उदाहरण के लिए:

  अनुच्छेद

  ऐसी शैलियों को बिल्ट-इन (इनलाइन), या एम्बेडेड कहा जाता है। किसी तत्व के शुरुआती टैग के भीतर सीधे परिभाषित नियम बाहरी सीएसएस फ़ाइल में परिभाषित नियमों के साथ-साथ तत्व के भीतर परिभाषित नियमों को ओवरराइड करते हैं

  शीर्षक

  पहले पाठ करें

  पाठ दो

  पाठ तीन

  
  
  

  कार्य

  • केंद्र पाठ संरेखण

    इनलाइन पैराग्राफ़ शैली का उपयोग करके, टेक्स्ट को केंद्र में रखें।

  हम पहले से ही जानते हैं कि वेबसाइट को सुंदर और स्टाइलिश दिखने के लिए हमें सीएसएस फ़ाइल के साथ काम करना होगा। और हमारी शैलियों को लागू करने के लिए हमें संयोजन की आवश्यकता है HTML फ़ाइलऔर एक सीएसएस फ़ाइल।

  इस ऑपरेशन को करने के लिए कई विकल्प हैं: नेस्टेड स्टाइल शीट, बाहरी स्टाइल शीट और इनलाइन स्टाइल का उपयोग करना।

  आज हम बाद वाले तरीके के बारे में बात करेंगे।

  HTML टैग में स्टाइल इंजेक्ट करना

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

  उदाहरण के लिए, आइए पाठ के दो अलग-अलग अनुच्छेदों के लिए अलग-अलग फ़ॉन्ट आकार सेट करें:

  < p style= "font-size:25px;" >पाठ के इस टुकड़े को 25 पिक्सेल की अक्षर ऊंचाई पर सेट करें। < p style= "फ़ॉन्ट-आकार:15px; रंग:#2400ff;"> और इस पाठ में 15 पिक्सेल ऊंचे अक्षर होंगे, और हम एक ही समय में कई शैलियों के उपयोग को प्रदर्शित करने के लिए इसे नीला रंग भी देंगे।

  कमियां

  उदाहरण पूरी तरह से दर्शाता है कि इस तरह की स्टाइलिंग पेज कोड को कैसे रोकती है।

  आप इस शैलीकरण तकनीक का उपयोग करने के कुछ और नुकसान भी नोट कर सकते हैं। उनमें से पहला पूरे दस्तावेज़ में शैली का प्रसार है, जो भविष्य में संपादन की प्रक्रिया को काफी जटिल बना देगा।

  बड़ी मात्रा में टेक्स्ट को फ़ॉर्मेट करना भी मुश्किल होगा. मुझे लगता है कि प्रत्येक पैराग्राफ के लिए एक फ़ॉन्ट आकार निर्दिष्ट करने की संभावना से कोई भी खुश नहीं है, खासकर यदि ऐसे 40 पैराग्राफ हैं।

  अंतर्निहित शैलियों का उपयोग करते समय भी, छद्म-वर्गों का उपयोग करना असंभव हो जाता है, जो काफी हद तक वेब डिजाइनर के हाथों को बांध देता है।

  यह उस भ्रम पर भी ध्यान देने योग्य है जो शैली विशेषता के उपयोग में उभरना निश्चित है। शैलियों को दर्ज करते समय विभिन्न उद्धरणों के उपयोग के कारण यह भ्रम उत्पन्न होगा।

  स्पष्टता के लिए, आइए नीचे दिए गए उदाहरण को देखें:

  < div style= "फ़ॉन्ट-फ़ैमिली: "रोबोटो कंडेंस्ड", सैन्स-सेरिफ़">प्रविष्टि सही है. < div style= "फ़ॉन्ट-फ़ैमिली: "रोबोटो कंडेंस्ड", सैन्स-सेरिफ़">यह भी सही है. < div style= "font-family: " Roboto Condensed ", sans-serif" >यह सही प्रविष्टि नहीं है. < div style= "font-family: " Roboto Condensed ", sans-serif" >और ये भी सच नहीं है

  ऊपर दी गई गणनाओं को देखते हुए, तार्किक निष्कर्ष स्वयं पता चलता है कि अंतर्निहित शैलियों का उपयोग कई महत्वपूर्ण जटिलताओं और असुविधाओं से जुड़ा है।

  इनलाइन स्टाइल का उपयोग कब करें

  तमाम कमियों के बावजूद, अंतर्निहित शैली का आविष्कार व्यर्थ नहीं गया। प्रोग्रामेटिक स्टाइल असाइनमेंट के मामले में वेबमास्टर अक्सर उनकी ओर रुख करते हैं। उदाहरण के लिए, आइए इस कोड को देखें

  < div id= "productRate" > < div style= "width: 40%" >

  इस ब्लॉक के लिए आवश्यक चौड़ाई रिकॉर्ड करना एक सरल ऑपरेशन होगा।

  यदि किसी उपयोगकर्ता की पृष्ठभूमि छवि (उदाहरण के लिए) को व्यवस्थापक भूमिका से बदलना आवश्यक हो तो ऐसी ही स्थिति उत्पन्न हो सकती है। इस स्थिति में, img टैग उपयुक्त नहीं हो सकता है। इसलिए, यह शैली विशेषता का उल्लेख करने योग्य है:

  < div style= "background:url(fon.jpg)" >

  इसके अलावा, पॉप-अप विंडो बनाते समय प्रोग्रामर अक्सर अंतर्निहित शैलियों की ओर रुख करते हैं। अक्सर यह प्रक्रिया इस प्रकार होती है: जिस ब्लॉक के डिज़ाइन पर काम किया जा रहा है उसे डिस्प्ले:ब्लॉक सौंपा गया है, और शेष विंडो को डिस्प्ले:नॉन का उपयोग करके छिपा दिया गया है ताकि वे प्रोग्रामर के काम में हस्तक्षेप न करें। यहाँ एक उदाहरण है:

  < div class = "element" style= "display:block" >पॉप-अप विंडो जिसे वर्तमान में डिज़ाइन किया जा रहा है

  जमीनी स्तर

  अंतर्निहित शैलियों का उपयोग करना कई कठिनाइयों और असुविधाओं से जुड़ा है, हालांकि, कुछ तत्वों को डिजाइन करने की प्रक्रिया में, वेबमास्टर अक्सर अपने काम को अनुकूलित करने के लिए इस पद्धति का सहारा लेते हैं।