विज्ञापन

पिछले एक दशक में सीएसएस सबसे महत्वपूर्ण बदलाव वेबपेज है, और इसने शैली और सामग्री के पृथक्करण का मार्ग प्रशस्त किया। आधुनिक तरीके से, XHTML परिभाषित करता है अर्थ सिमेंटिक मार्कअप क्या है और यह इंटरनेट हमेशा के लिए कैसे बदल जाएगा [प्रौद्योगिकी समझाया] अधिक पढ़ें संरचना - वेबपेज का अर्थ और सामग्री, जबकि सीएसएस प्रस्तुति के साथ खुद को चिंतित करता है। जबकि हम में से अधिकांश थोड़ा HTML लिखने में सहज हैं, हमें लगता है कि CSS किसी प्रकार का काला जादू है। मैं इन 5 बेबी-स्टेप्स को बदलने की उम्मीद करता हूं सीएसएस जादूगर.

यह लेख उन उपयोगकर्ताओं के लिए लक्षित है जिनके पास अभी तक सीएसएस के साथ बहुत कम अनुभव है, हालांकि उम्मीद है कि सभी के लिए यहां कुछ है।

(१) व्याकरण

किसी भी भाषा की तरह, CSS में इसका एक निश्चित व्याकरण है, और यह पहली बार में थोड़ा "कंप्यूटर प्रोग्राम" प्रतीत हो सकता है, लेकिन यह वास्तव में चीजों की एक सूची है। सभी सीएसएस इस तरह लिखा जाता है:

चयनकर्ता {संपत्ति: मूल्य; संपत्ति मूल्य; संपत्ति मूल्य;}

जैसा कि आप पहले से ही जानते हैं, CSS वेबपेज में एक चयनित तत्व के लिए एक शैली लागू करके काम करता है। उदाहरण के लिए, यह बताने के लिए कि आपके सभी लिंक कैसे दिखाए जाते हैं, आप चयनकर्ता के रूप में "a" का उपयोग करेंगे। विभिन्न गुण और मूल्य जो आप अनुभव के साथ सीखेंगे, लेकिन कुछ आसान हैं - रंग, बॉडर, जैसी चीजें फॉंट-साइज़, हाईट सभी कुछ संभावित गुण हैं, जिनके मूल्य लाल हो सकते हैं, 14pt, 150%, 1000px - वास्तव में यह है आसान। आइए देखें कि हम सभी लिंक को लाल करने की शैली के बारे में क्या कहेंगे:

{{रंग: लाल;}

आप एक ही समय में कॉमा के साथ एक से अधिक प्रकार के तत्व करने के लिए CSS के समान ब्लॉक का उपयोग कर सकते हैं:

ए, एच 2, एच 3 {रंग: लाल ;;

यह न केवल सभी लिंक बनाता है, बल्कि सभी एच 2 और एच 3 हेडिंग भी एक ही लाल रंग में है। ध्यान दें कि वे सभी अलग-अलग आकार के हो सकते हैं, क्योंकि यह विशेष कोड ब्लॉक केवल रंग बदलता है।

(2) कक्षा और आईडी चयनकर्ता

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

उदाहरण के लिए, आपके पेज के HEADER, CONTENT और FOOTER ब्लॉकों के लिए आपके पास एक बड़ा DIV हो सकता है - इसलिए ID के रूप में उन लोगों को परिभाषित करना एक स्मार्ट कदम होगा। दूसरी ओर कक्षाओं का उपयोग तब किया जाता है जब शैली के तत्वों को पूरे पृष्ठ में दोहराया जाने की संभावना होती है। शायद आप चाहते हैं कि आइटमों का एक गुच्छा 2px ठोस लाल सीमा के साथ गोल कोनों वाला हो - बजाय बाहर लिखने के एक ही इनलाइन शैली एक लाख बार, आप इसके लिए एक वर्ग को परिभाषित करेंगे, और उन तत्वों के लिए कक्षा संलग्न करेंगे बजाय। तो आप इन आईडी और कक्षाओं को कैसे परिभाषित करते हैं?

साइड बार

CSS में इन मदों को लक्षित करने के लिए आप उपयोग करेंगे:

.red-rounded {// यह एक वर्ग है। सीमा-त्रिज्या: 5 पीएक्स; सीमा: 2px ठोस लाल; } # उल्टा {।। } // यह एक आईडी है।

(३) वंशज

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

# साइडबार h1 {फ़ॉन्ट-आकार: 20px;}

यह "साइडबार" की आईडी के साथ आइटम को ढूंढ लेगा, जब यह चयन को सभी तक सीमित कर देगा

उस के भीतर निहित है, और केवल उन लोगों के लिए शैली लागू होते हैं।

इसलिए, यदि आप किसी भी तरह से अपने सभी सामानों का समूह बना सकते हैं, तो वंशगत चयनकर्ताओं का उपयोग करना सबसे अच्छा है क्योंकि यह एक गुच्छा जोड़ने से भी कम कोड है। class = "" हर चीज की परिभाषा।

(४) यह सीएसएस कहां लगाना है?

CSS से निपटने का सबसे अच्छा तरीका है कि आप इसे अपने HTML से पूरी तरह से अलग कर लें। एक फ़ाइल बनाएं जिसे आप पसंद करते हैं।। और बस इस लाइन को अपने HTML हेडर में जोड़ें:

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

CSS जोड़ने का तीसरा स्थान इनलाइन है, लेकिन आपको इससे भी सावधान रहना चाहिए। कुछ भी इनलाइन जैसे जोड़ा:

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

(५) फायरबग प्राप्त करें, या क्रोम का उपयोग करें

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

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

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