ब्राउज़र में उपयोगकर्ता स्टाइल के लिए सीएसएस को समझना

13

मैं अपने वेब ब्राउज़र में एक विशिष्ट साइट की उपस्थिति में एक विशिष्ट परिवर्तन करना चाहता हूं। यह साइट CSS का उपयोग करती है, इसलिए मुझे लगता है कि मुझे क्या करना चाहिए एक उपयोगकर्ता CSS ओवरराइड लिख रहा है (कृपया मुझे सही करें अगर यह गलत है)।

मेरे ब्राउज़र फ़ायरफ़ॉक्स हैं (जिसके लिए मुझे लगता है कि मुझे कुछ लिखना चाहिए chrome/userContent.css) और क्रोम ( User\ StyleSheets/Custom.css)।

मैं जो विशिष्ट परिवर्तन करना चाहता हूं, वह /unix// के सभी पृष्ठों पर पृष्ठभूमि पैटर्न (डार्क डॉट्स) को हटाने के लिए है । लेकिन आम तौर पर, कृपया मुझे सिखाएं कि मछली कैसे करें: मुझे कैसे पता चलेगा कि किस पैरामीटर को बदलना है, और मैं उपयोगकर्ता चेस में यह बदलाव कैसे लिखूं?

— गिल्स 'एसओ- बुराई होना बंद करो'
स्रोत

15

मैं केवल फ़ायरफ़ॉक्स के साथ परिचितता के साथ बोल सकता हूं, क्योंकि यह मेरा मुख्य ब्राउज़र है। आपके 'मुझे मछली सिखाने' के अनुरोध को पूरा करने के लिए मैं यहां चीजों को सामान्य रखने की कोशिश करूंगा। उस अंत तक, मैं 2 उदाहरणों को शामिल करूंगा, आपका और एक और जिसमें अधिक वास्तविक दुनिया के पाठ हैं। सबसे पहले, हम उपयोगकर्ता सीएसएस निर्माण को आसान बनाने के लिए कुछ उपकरण प्राप्त करेंगे।

नवीनतम फ़ायरफ़ॉक्स पर अपडेट करें। हाल के कुछ संस्करणों में वेब साइट इंस्पेक्टर टूल के विस्तार हुए हैं, इसलिए आप उन्हें चाहते हैं।
वैकल्पिक: फायरबग एक्सटेंशन स्थापित करें जो आपको अधिक शक्तिशाली साइट निरीक्षक उपकरण देता है। (व्यक्तिगत रूप से, मैं उपयोगकर्ता CSS बनाने के लिए Firebug का उपयोग नहीं करता, लेकिन मैं पूर्णता के लिए यहां एक उल्लेख शामिल करता हूं)
स्टाइलिश एक्सटेंशन स्थापित करें । यह एक उपयोगकर्ता CSS-केंद्रित एक्सटेंशन है जो उपयोगकर्ता CSS के निर्माण को बहुत सरल करता है।

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

पृष्ठ पर नेविगेट करें। (आपके मामले में, /unix// )
उस तत्व पर राइट क्लिक करें जिसे आप हेरफेर करना चाहते हैं। (इस मामले के लिए पृष्ठ पर कहीं भी बहुत कुछ, क्योंकि पृष्ठभूमि पूरे पृष्ठ को प्रभावित करती है)
पॉप-अप मेनू से Select इंस्पेक्ट एलिमेंट ’का चयन करें। यह फ़ायरफ़ॉक्स के एकीकृत निरीक्षण उपकरण का उपयोग करता है, मैं यहां फायरबग को संबोधित नहीं करूंगा, लेकिन इसमें समान पैन और विशेषताएं हैं।
यह फ़ायरफ़ॉक्स विंडो के नीचे और तरफ पैनल खोलता है। तल पर, आप HTML देख रहे हैं। दाईं ओर, आप चयनित पृष्ठ तत्व के लिए CSS नियम देख रहे हैं (जो आपके द्वारा राइट-क्लिक की गई चीज़ होगी)। तल पर, चारों ओर नेविगेट करने के लिए विभिन्न तत्वों पर क्लिक करें। पृष्ठ को तत्वों के पेड़ में व्यवस्थित किया गया है, और आप पेड़ में प्रत्येक नोड को ध्वस्त या विस्तारित कर सकते हैं। जैसे ही आप तत्वों पर क्लिक करते हैं, चयनित तत्व पृष्ठ पर ही प्रकाश डाला जाएगा।
सामान्य तौर पर, इस बिंदु पर, आप उस तत्व का निरीक्षण करना चाहेंगे, जिसे आप हेरफेर करने के लिए देख रहे हैं, साथ ही इसके मूल तत्व (वे आइटम जिनमें ट्री में वह तत्व हैं)। उस तत्व को पहचानें जिसे आपको वास्तव में हेरफेर करना होगा। उदाहरण के लिए, यदि आप इस पृष्ठ के उत्तरों के साथ खिलवाड़ कर रहे हैं, तो आप <p> तत्व से शुरू करेंगे, जिसमें उत्तर का पाठ शामिल है, लेकिन आप पाठ के चारों ओर, जैसे कि सभी सामग्री को शामिल करना चाहते हैं / नीचे वोट तीर, पोस्टर की जानकारी, शेयर / एडिट / फ्लैग लिंक आदि, इसलिए आप कुछ स्तरों को <div> टैग पर नेविगेट करते हैं, जिसमें "उत्तर - ####" और तीर का एक वर्ग होता है "जवाब", जैसा कि वह तत्व है जिसमें एक उत्तर के सभी विंडो-ड्रेसिंग तत्व शामिल हैं। उस पर क्लिक करें, और आप देखेंगे कि वेबपेज का वह हिस्सा हाइलाइट हो जाएगा। (इस उदाहरण में, पृष्ठ की पृष्ठभूमि <body> टैग के भीतर शीर्ष के पास होगी । HTML के शीर्ष पर स्क्रॉल करें, और <body> टैग पर क्लिक करें।)
अगला, आपको इस तत्व के सीएसएस गुणों की पहचान करने की आवश्यकता है जिसे आप हेरफेर करना चाहते हैं। सीएसएस को दाईं ओर देखें, और उन गुणों को ढूंढें जिन्हें आप बदलना चाहते हैं। व्यक्तिगत रूप से, मैं सीएसएस के लिए बहुत नया हूं, इसलिए इस बिंदु पर, मैं अक्सर संपत्ति के बारे में अधिक जानने के लिए Google 'सीएसएस' + एक संपत्ति का नाम होगा और यह कैसे व्यवहार करता है। मेरे उदाहरण को जारी रखते हुए, जहां हम एसई उत्तर को देख रहे हैं, मान लें कि हम उत्तर के चारों ओर मार्जिन बदलना चाहते हैं। All.css फ़ाइल में 0px पर मार्जिन गुण सेट है, लेकिन स्पष्ट रूप से इन तत्वों के आसपास एक मार्जिन है। कुछ googling मुझे पैडिंग प्रॉपर्टीज की तलाश करना सिखाती हैं, क्योंकि वे किसी आइटम के मार्जिन को भी प्रभावित कर सकते हैं। निश्चित रूप से, पेडिंग से संबंधित दो गुण हैं जो एक उत्तर, पेडिंग-बॉटम और पैडिंग-टॉप पर सेट हैं। (अपने विशिष्ट मुद्दे के लिए, आप एक पृष्ठभूमि छवि की तलाश कर रहे हैं, इसलिए CSS गुणों में 'पृष्ठभूमि' देखें। आपको शीर्ष के पास एक 'पृष्ठभूमि' गुण दिखाई देगा । यह उस पृष्ठ के मुख्य तत्वों पर लागू होता है। " Googling " css पृष्ठभूमि संपत्ति " यह जानने के लिए कि वह संपत्ति कैसे काम करती है, आपको यह दिखाती है कि इसमें विभिन्न संशोधक के साथ-साथ एक छवि के लिए एक रंग या URL हो सकता है। पृष्ठभूमि-छवि संपत्ति कैसे काम करती है, यह जानने के लिए थोड़ा नेविगेट करने के बाद , हम कुछ देखते हैं उपयोगी जानकारी, 'कोई नहीं' का डिफ़ॉल्ट मान । हम पृष्ठभूमि छवि को उसके डिफ़ॉल्ट मान पर वापस लाना चाहते हैं, इसलिए हमें उस जानकारी की आवश्यकता होगी।)
अब हम स्टाइलिश का उपयोग करते हैं। बिना स्टाइलिश का विकल्प आपके उत्तर में पोस्ट की गई फ़ाइलों को संपादित करना होगा। स्टाइलिश हमें कई साइटों के उपयोगकर्ता सीएसएस को आसानी से प्रबंधित करने में सक्षम बनाता है। स्टाइलिश आपके फ़ायरफ़ॉक्स विंडो में एक छोटा सा आइकन जोड़ता है, उस पर क्लिक करें फिर "एक नई शैली लिखें" -> "के लिए" (यह साइट) .com "। शैली को एक नाम दें और वैकल्पिक रूप से कुछ टैग दें। आप तब सक्षम होंगे।" Superuser.com या Stackexchange.com आदि पर लागू होने के रूप में इस शैली को अलग करने के लिए। यह विंडो हमें एक टेम्पलेट देती है जो हमें इस डोमेन के लिए सीएसएस को बदलने की सुविधा देती है। यदि आपको किसी विशिष्ट यूआरएल के लिए सीएसएस को बदलने की आवश्यकता है, तो आप। ऐसा कर सकते हैं या आप केवल एक खाली शैली प्राप्त कर सकते हैं यदि आप सीएसएस लिखना चाहते हैं जो सभी साइटों पर लागू होता है, बस स्टाइलिश मेनू से उपयुक्त प्रविष्टि का चयन करें। मेरे उत्तर-संशोधित उदाहरण के लिए, आप '
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {

}
```
@ -मोज़-डॉक्यूमेंट ब्लॉक में रखी गई कोई भी चीज़ कोष्ठक में वहाँ के डोमेन पर ही लागू होगी । ऊपर बोल्ड आइटम देखें। उत्तरों के लिए पैडिंग को बदलने के लिए, आप टेक्स्ट बॉक्स को इस तरह अपडेट करते हैं:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {
    .answer {
        padding-bottom:0px;
        padding-top:0px;
    }
}
```
लोग हैं, जो सीएसएस, हम पहले चयन किए जाने वाले पता नहीं है के लिए इस तोड़ने के लिए वर्ग (Ergo एक "।" शुरू में चला जाता है। अगर हम आईडी के आधार पर चयन करने गए थे, हम एक "#" डाल था वहाँ।) जवाब (अतः 'उत्तर')। फिर हम चयनित आइटम के गुणों को सूचीबद्ध करने के लिए एक घुंघराले ब्रेस के साथ एक ब्लॉक खोलते हैं जिसे हम बदल देंगे। पहले हम पैडिंग-बॉटम में बदलाव कर रहे हैं और इसे 0 पिक्सल्स पर सेट कर रहे हैं । फिर हम पैडिंग-टॉप के लिए भी ऐसा ही करते हैं । प्रत्येक संपत्ति और मूल्य एक अर्ध-उपनिवेश के साथ समाप्त हो गया है। फिर हम एक घुंघराले ब्रेस के साथ ब्लॉक को बंद कर देते हैं। (आपके यूनिक्स उदाहरण में, आप ऐसा करेंगे:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none;
    }
}
```
यहां आप unix.stackexchange.com डोमेन पर काम कर रहे हैं। हम "बॉडी" एलिमेंट का चयन कर रहे हैं (जब HTML एलिमेंट का चयन करना भी CSS चयनकर्ता होता है, यहाँ #s या .s की कोई आवश्यकता नहीं है)। हम पृष्ठभूमि को किसी के लिए सेट नहीं कर रहे हैं।)
मैं स्टाइलिश स्टाइल-संपादन विंडो के निचले भाग के बटन पर आपका ध्यान आकर्षित करता हूं। "पूर्वावलोकन" आपके द्वारा टाइप किए गए परिवर्तनों को लागू करेगा, ताकि आप उन्हें कार्रवाई में देख सकें। "सहेजें" परिवर्तनों को बचाएगा। "रद्द करें" बहुत स्पष्ट है। आपके द्वारा किए जा रहे बहुत से उपयोगकर्ता सीएसएस को बदलने के लिए, आप यह देखने के लिए पूर्वावलोकन पर क्लिक करना चाहेंगे कि क्या परिवर्तन ने उस तरीके से काम किया है जैसा आप चाहते थे। दोनों उदाहरणों में, आप देखेंगे कि यह काम नहीं किया। इसका एक महत्वपूर्ण कारण है, जिसे अब मैं संबोधित करता हूं।
सीएसएस में उपयोगकर्ता सीएसएस बनाम लेखक सीएसएस बनाम ब्राउज़र सीएसएस से निपटने के तरीके का निर्धारण करने के लिए प्राथमिकताओं की एक विशिष्ट पदानुक्रम है। आम तौर पर, हमारे पास पृष्ठ के लेखक द्वारा लिखे गए पृष्ठ के लिए सीएसएस होता है, और उस पृष्ठ पर कई तत्वों के लिए नियम होंगे। जब कोई नियम लेखक द्वारा परिभाषित नहीं किया जाता है, लेकिन आपके उपयोगकर्ता CSS में है, तो आपका ब्राउज़र उसका उपयोग करेगा। यदि उनमें से किसी ने भी सीएसएस को उस तत्व के लिए परिभाषित नहीं किया है, तो ब्राउज़र उस तत्व पर अपने स्वयं के डिफ़ॉल्ट सीएसएस नियमों का उपयोग करता है। तो यहाँ वजन का एक पदानुक्रम है, लेखक> उपयोगकर्ता> ब्राउज़र। यदि किसी चीज को तीनों में परिभाषित किया जाता है, तो उच्च-भार वाला सीएसएस जीत जाएगा और इसका सीएसएस प्रभाव पड़ेगा। उच्च-वजन वाले CSS को ओवरराइड करने के लिए कम-वजन सीएसएस प्राप्त करने का एक तरीका है, और यह उनके लिए महत्वपूर्ण है। आप "महत्वपूर्ण!"
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none !important;
    }
}
```
अब पुन: पूर्वावलोकन पर क्लिक करें, और आप देखेंगे कि आपका उपयोगकर्ता CSS काम करता है। सहेजें पर क्लिक करें और आनंद लें।

यदि आप Chrome का उपयोग कर रहे हैं, तो इसका अंतर्निहित इंस्पेक्टर पहले से ही बहुत अच्छा है। एक स्टाइलिश विस्तार भी है । आप सीएसएस संशोधनों को थोड़ा अलग तरीके से दर्ज करते हैं: "स्थापित शैलियों को प्रबंधित करें" चुनें, फिर "नई शैली लिखें" पर क्लिक करें, कोड बॉक्स के नीचे पोस्ट लागू करने के लिए साइट या URL पैटर्न दर्ज करें, और केवल डोमेन-विशिष्ट सीएसएस में दर्ज करें " कोड ”बॉक्स, जैसे;

body {
  background:none !important;
}

— इच्छुक
स्रोत

2

प्रासंगिक सीएसएस संपत्ति की पहचान करने के लिए फायरबग स्थापित करें और फिर इसे ओवरराइड करने के लिए एक ग्रीसीकेम स्क्रिप्ट लिखें ।

— बेंजामिन बैनियर
स्रोत

2

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

— कालेब

2

यदि आप साइट पर डाल रहे हैं तो आप क्या करेंगे

foo.bar { background-pattern:none; }

फिर जोड़िए

!important

से पहले }। यहां गैर-उपयोगकर्ता-सीएसएस उपयोग पर थोड़ा विवरण दिया गया है जो अभी भी इसे आपके उपयोग के लिए समझाता है।

— tobylane
स्रोत