ব্রাউজারে ব্যবহারকারী স্টাইলিংয়ের জন্য সিএসএস বোঝা

13

আমি আমার ওয়েব ব্রাউজারে একটি নির্দিষ্ট সাইটের উপস্থিতিতে একটি নির্দিষ্ট পরিবর্তন করতে চাই। এই সাইটটি সিএসএস ব্যবহার করে, তাই আমার মনে হয় আমার কী করা উচিত তা কোনও ইউএসএস সিএসএস ওভাররাইড লিখুন (দয়া করে এটি ভুল হলে আমাকে সংশোধন করুন)।

আমার ব্রাউজারগুলি হ'ল ফায়ারফক্স (যার জন্য আমি মনে করি আমার কিছু লেখা উচিত chrome/userContent.css) এবং Chrome ( User\ StyleSheets/Custom.css)।

আমি যে নির্দিষ্ট পরিবর্তনটি করতে চাই তা হ'ল /unix// এর সমস্ত পৃষ্ঠায় পটভূমি প্যাটার্ন (গা dark় বিন্দু) মুছে ফেলা । তবে আরও সাধারণভাবে, দয়া করে আমাকে কীভাবে মাছ ধরতে হবে তা শিখুন: কী প্যারামিটারটি পরিবর্তন করতে হবে তা আমি কীভাবে খুঁজে বের করব এবং আমি কোনও ব্যবহারকারী সিএসএসে এই পরিবর্তনটি কীভাবে লিখব?

— গিলস 'তাই খারাপ হওয়া বন্ধ করুন'
সূত্র

15

আমি কেবল ফায়ারফক্সের সাথে পরিচিতির সাথে কথা বলতে পারি, কারণ এটি আমার প্রধান ব্রাউজার। আপনার অনুরোধটি পূরণের জন্য আমি এখানে জিনিসগুলিকে সাধারণ রাখার চেষ্টা করব। সেই লক্ষ্যে, আমি 2 টি উদাহরণ অন্তর্ভুক্ত করব, আপনার এবং এমন একটি যা এর মধ্যে আরও বাস্তব-বিশ্বের পাঠ রয়েছে। প্রথমত, ব্যবহারকারীর সিএসএস তৈরি আরও সহজ করার জন্য আমরা কয়েকটি সরঞ্জাম পেয়ে যাব।

সর্বশেষতম ফায়ারফক্সে আপডেট করুন। সাম্প্রতিক সংস্করণগুলির কয়েকটিতে ওয়েব সাইট পরিদর্শক সরঞ্জামগুলির বিস্তৃতি ছিল, সুতরাং আপনি সেগুলি চাইবেন।
Alচ্ছিক : ফায়ারব্যাগ এক্সটেনশনটি ইনস্টল করুন যা আপনাকে আরও বেশি শক্তিশালী সাইট পরিদর্শক সরঞ্জাম দেয়। (ব্যক্তিগতভাবে, আমি ব্যবহারকারী সিএসএস তৈরি করার জন্য ফায়ারব্যাগ ব্যবহার করি না, তবে সম্পূর্ণতার জন্য আমি এখানে একটি উল্লেখ অন্তর্ভুক্ত করছি)
স্টাইলিশ এক্সটেনশানটি ইনস্টল করুন । এটি একটি ব্যবহারকারী সিএসএস কেন্দ্রিক এক্সটেনশন যা ব্যবহারকারী সিএসএসের নির্মাণকে ব্যাপকভাবে সরল করে।

এখন এখন, আসলে কিছু লিখতে। এগিয়ে যাওয়ার আগে আপনার এইচটিএমএল এবং সিএসএসের সাথে একটি প্রাথমিক পরিচিতি থাকা উচিত। ডাব্লু 3 স্কুলগুলিতে এইচটিএমএল এবং সিএসএসের মূল কাঠামো এবং সিনট্যাক্সের সাথে নিজেকে পরিচিত করার জন্য শালীন টিউটোরিয়াল রয়েছে । এই উত্তরের জন্য, আমি আশাবাদী একটি নবাগতকে উদাহরণটি সম্পাদন করার জন্য যথেষ্ট সহায়তা করার জন্য পর্যাপ্ত তথ্য অন্তর্ভুক্ত করব।

পৃষ্ঠায় নেভিগেট করুন। (আপনার ক্ষেত্রে, /unix// )
আপনি যে উপাদানটি কাজে লাগাতে চাইছেন তার উপর ডান ক্লিক করুন। (এই ক্ষেত্রে পৃষ্ঠার যে কোনও জায়গায়, পটভূমি পুরো পৃষ্ঠাটিকে প্রভাবিত করে)
পপ-আপ মেনু থেকে 'পরিদর্শন উপাদান' নির্বাচন করুন। এটি ফায়ারফক্সের একীভূত পরিদর্শন সরঞ্জামগুলি ব্যবহার করে, আমি এখানে ফায়ারব্যাগকে সম্বোধন করব না, তবে এটিতে একই জাতীয় ফলস এবং বৈশিষ্ট্য রয়েছে।
এটি ফায়ারফক্স উইন্ডোর নীচে এবং পাশে প্যানেল খুলবে। নীচে, আপনি এইচটিএমএল দেখছেন। ডানদিকে, আপনি নির্বাচিত পৃষ্ঠার উপাদানটির জন্য সিএসএস বিধিগুলি দেখছেন (যা আপনি ডান ক্লিক করেছেন)। নীচে, চারদিকে নেভিগেট করতে বিভিন্ন উপাদানের উপরে ক্লিক করুন। পৃষ্ঠাটি উপাদানগুলির গাছে সাজানো হয়েছে এবং আপনি গাছের প্রতিটি নোড ধসে বা প্রসারিত করতে পারেন। আপনি উপাদানগুলিতে ক্লিক করার সাথে সাথে নির্বাচিত উপাদানটি পৃষ্ঠাতে হাইলাইট হবে।
সাধারণভাবে, এই মুহুর্তে, আপনি মূল উপাদানগুলি (গাছগুলিতে সেই উপাদানটি ধারণ করে এমন আইটেমগুলি) সহ আপনি যে উপাদানটি হেরফের করতে চাইছেন তা পরীক্ষা করতে চাইবেন। আপনাকে যে উপাদানটি ব্যবহার করতে হবে তা শনাক্ত করুন। উদাহরণস্বরূপ, আপনি যদি এই পৃষ্ঠার উত্তরগুলির সাথে গোলযোগ করছেন, আপনি <p> উপাদানটির সাথে শুরু করে একটি উত্তরের পাঠ্য রেখেছেন তবে আপনি এই পাঠ্যের চারপাশে সমস্ত জিনিসই যুক্ত করতে চান / ডাউন ভোটের তীর, পোস্টারের তথ্য, ভাগ / সম্পাদনা / পতাকা লিঙ্কগুলি ইত্যাদি So তাই আপনি < উত্তর> # আইডি এবং একটি শ্রেণীর একটি আইডি রয়েছে <ডিভ> ট্যাগে কয়েকটি স্তর নেভিগেট করুন "উত্তর", কারণ সেই উপাদানটিতে একটি উত্তরের সমস্ত উইন্ডো-ড্রেসিং উপাদান রয়েছে। এটিতে ক্লিক করুন এবং আপনি ওয়েবপৃষ্ঠার সেই অংশটি হাইলাইট হয়ে উঠতে দেখবেন। (এই উদাহরণে, পৃষ্ঠার পটভূমি <body> ট্যাগের মধ্যে শীর্ষের কাছাকাছি হবে be এইচটিএমএলের শীর্ষে স্ক্রোল করুন এবং <body> ট্যাগ ক্লিক করুন))
এরপরে, আপনাকে এই উপাদানটির CSS বৈশিষ্ট্যগুলি সনাক্ত করতে হবে যা আপনি হেরফের করতে চান। ডানদিকে সিএসএস দেখুন এবং আপনি যে বৈশিষ্ট্যগুলি পরিবর্তন করতে চান তা সন্ধান করুন। ব্যক্তিগতভাবে, আমি সিএসএসে বেশ নতুন, তাই এই মুহুর্তে, আমি প্রায়শই গুগল 'সিএসএস' + সম্পত্তি সম্পর্কে এবং এটি কীভাবে আচরণ করে সে সম্পর্কে আরও জানার জন্য একটি সম্পত্তি নাম করব। আমার উদাহরণ অবিরত যেখানে আমরা একটি এসই উত্তর খুঁজছি, আসুন আমরা বলি যে আমরা উত্তরটির চারপাশে মার্জিনগুলি পরিবর্তন করতে চাই। All.css ফাইলের একটি প্রান্তিক সম্পত্তি 0 পিক্সারে সেট করা আছে তবে স্পষ্টতই এই উপাদানগুলির চারপাশে একটি মার্জিন রয়েছে। কিছু গুগলিং আমাকে প্যাডিংয়ের বৈশিষ্ট্যগুলি সন্ধান করতে শেখায়, কারণ এটি কোনও আইটেমের চারপাশে মার্জিনকেও প্রভাবিত করতে পারে। নিশ্চিতভাবেই, প্যাডিং সম্পর্কিত দুটি সম্পত্তি রয়েছে যা উত্তরের উপর সেট করা হয়েছে, প্যাডিং-নীচে এবং প্যাডিং-শীর্ষ। (আপনার নির্দিষ্ট ইস্যুটির জন্য, আপনি একটি পটভূমি চিত্র সন্ধান করছেন, সুতরাং সিএসএস বৈশিষ্ট্যে 'ব্যাকগ্রাউন্ড' সন্ধান করুন You উপরের কাছাকাছি একটি 'পটভূমি' সম্পত্তি দেখতে পাবেন It এটি পৃষ্ঠার শরীরের উপাদানগুলিতে প্রযোজ্য oo গুগলিং " সিএসএস ব্যাকগ্রাউন্ড সম্পত্তি " শিখতে কিভাবে যে সম্পত্তি কাজ, শো আপনি যে এটি একটি রং বা কোনো চিত্রে একটি URL ধারণ করতে পারে, বিভিন্ন সংশোধনকারীদের করেন। একটু নেভিগেট করার পর কিভাবে নিচে খনন পটভূমি চিত্র সম্পত্তি কাজ, আমরা কিছু দেখতে দরকারী তথ্য, 'কিছুই নয়' এর ডিফল্ট মান We আমরা ব্যাকগ্রাউন্ড চিত্রটিকে এর ডিফল্ট মানটিতে ফেরাতে চাই, সুতরাং আমাদের সেই তথ্যটি দরকার)
এখন আমরা স্টাইলিশ ব্যবহার করি। স্টাইলিশ ব্যতীত বিকল্পটি হ'ল আপনি আপনার উত্তরে পোস্ট করা ফাইলগুলি সম্পাদনা করবেন। স্টাইলিশ আমাদের সহজেই অনেক সাইটের ব্যবহারকারী সিএসএস পরিচালনা করতে সক্ষম করে। স্টাইলিশ আপনার ফায়ারফক্স উইন্ডোটিতে একটি সামান্য আইকন যুক্ত করেছে, এটিতে ক্লিক করুন তারপরে "একটি নতুন শৈলী লিখুন" -> "জন্য" (এই সাইট)। কম "যান the শৈলীর একটি নাম দিন এবং optionচ্ছিকভাবে কিছু ট্যাগ দিন You আপনি তারপরে সক্ষম হবেন এই স্টাইলটি সুপারইজার ডটকম বা স্ট্যাকেক্সচেঞ্জ.কম ইত্যাদির ক্ষেত্রে প্রযোজ্য হিসাবে পৃথক করার জন্য এই উইন্ডোটি এমন একটি টেমপ্লেট দেয় যা আমাদের কেবলমাত্র এই ডোমেনের জন্য সিএসএস পরিবর্তন করতে দেয় you যদি আপনাকে কোনও নির্দিষ্ট ইউআরএল জন্য সিএসএস পরিবর্তন করতে হয় তবে আপনি এটি করতে পারে বা আপনি কেবল একটি ফাঁকা শৈলীও পেতে পারেন যদি আপনি সমস্ত সাইটের ক্ষেত্রে প্রযোজ্য সিএসএস লিখতে চান, কেবল স্টাইলিশ মেনু থেকে উপযুক্ত প্রবেশিকাটি নির্বাচন করুন my আমার উত্তর-সংশোধনকারী উদাহরণের জন্য, আপনি '
```
@namespace url(http://www.w3.org/1999/xhtml);

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

}
```
@ -Moz নথি ব্লক মধ্যে কিছু করা প্রযোজ্য হবে শুধুমাত্র প্রথম বন্ধনী আছে ডোমেনে। উপরের সাহসী আইটেমগুলি দেখুন। উত্তরের জন্য প্যাডিং পরিবর্তন করতে, আপনি পাঠ্য বাক্সটি এমন হতে আপডেট করুন:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {
    .answer {
        padding-bottom:0px;
        padding-top:0px;
    }
}
```
ব্যক্তিরা CSS, তাই আমরা প্রথমেই নির্বাচন করছি জানি না এই ভেঙ্গে বর্গ (অতএব একটি "।" শুরুতে যায়। যদি আমরা আইডি দিয়ে নির্বাচন করা হয়েছে, আমরা একটি "#" করা চাই সেখানে।) উত্তর (সুতরাং 'উত্তর')। তারপরে আমরা নির্বাচিত আইটেমটির বৈশিষ্ট্যগুলি তালিকা পরিবর্তন করতে আমরা একটি কোঁকড়ানো ধনুর্বন্ধনী সহ একটি ব্লক খুলি। প্রথমে আমরা প্যাডিং-নীচে পরিবর্তন করছি এবং এটি 0 পিক্সেলে সেট করছি । তারপরে প্যাডিং-টপের জন্য আমরা একই কাজ করি । প্রতিটি সম্পত্তি এবং মান একটি আধা-কোলন দিয়ে শেষ হয়। তারপরে আমরা একটি কোঁকড়ানো ধনুর্বন্ধনী সঙ্গে ব্লক বন্ধ। (আপনার ইউনিক্স উদাহরণে আপনি এটি করবেন:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none;
    }
}
```
এখানে আপনি unix.stackex بدل.com ডোমেনে কাজ করছেন। আমরা "বডি" উপাদানটি নির্বাচন করছি (যখন এইচটিএমএল উপাদান নির্বাচন করা হয় তখন সিএসএস নির্বাচকও হয়, এখানে # বা। এসের প্রয়োজন নেই)। আমরা কোনটিকেই ব্যাকগ্রাউন্ড সেট করছি না))
আমি আপনার দৃষ্টি আকর্ষণ করছি স্টাইলিশ স্টাইল-সম্পাদনা উইন্ডোর নীচে বোতামগুলির দিকে। "প্রাকদর্শন" আপনার টাইপ করা পরিবর্তনগুলি কার্যকর করবে, যাতে আপনি সেগুলিকে ক্রিয়াতে দেখতে পান। "সংরক্ষণ করুন" পরিবর্তনগুলি সংরক্ষণ করবে। "বাতিল" বেশ সুস্পষ্ট। আপনার ব্যবহারকারীর সিএসএস পরিবর্তন করার জন্য, আপনি যেভাবে চান পরিবর্তনটি সেভাবে কাজ করেছে কিনা তা দেখতে আপনি পূর্বরূপ ক্লিক করতে চান। উভয় উদাহরণে, আপনি দেখতে পাবেন যে এটি কার্যকর হয়নি। এর একটি গুরুত্বপূর্ণ কারণ আছে, যা আমি এখন সম্বোধন করছি।
ব্যবহারকারী সিএসএস বনাম লেখক সিএসএস বনাম ব্রাউজার সিএসএসের সাথে কীভাবে ডিল করবেন তা নির্ধারণের জন্য সিএসএসের অগ্রাধিকারগুলির একটি নির্দিষ্ট স্তরক্রম রয়েছে। সাধারণত, পৃষ্ঠাটির লেখক দ্বারা লিখিত একটি পৃষ্ঠার জন্য আমাদের সিএসএস রয়েছে এবং এতে সেই পৃষ্ঠায় থাকা অনেক উপাদানের নিয়ম থাকবে। যখন কোনও নিয়ম লেখক দ্বারা সংজ্ঞায়িত করা হয় না, তবে আপনার ব্যবহারকারী সিএসএসে থাকে, তখন আপনার ব্রাউজারটি এটি ব্যবহার করবে। যদি তাদের উভয়েরই সেই উপাদানটির জন্য সিএসএস সংজ্ঞায়িত না হয় তবে ব্রাউজারটি সেই উপাদানটিতে নিজস্ব ডিফল্ট সিএসএস বিধি ব্যবহার করে। সুতরাং এখানে ওজনের একটি শ্রেণিবিন্যাস রয়েছে, লেখক> ব্যবহারকারী> ব্রাউজার। যদি তিনটিটিতেই কোনও কিছু সংজ্ঞায়িত করা হয় তবে উচ্চতর ওজনের CSS টি জিতে যাবে এবং এর CSS কার্যকর হবে take উচ্চ-ওজন সিএসএসকে ওভাররাইড করার জন্য কম ওজনের CSS পাওয়ার একটি উপায় রয়েছে এবং এগুলি তাদেরকে গুরুত্বপূর্ণ হিসাবে মনোনীত করে। আপনি "! গুরুত্বপূর্ণ" অন্তর্ভুক্ত করে এটি করেন
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none !important;
    }
}
```
এখন আবার প্রাকদর্শন ক্লিক করুন, এবং আপনি দেখতে পাবেন যে আপনার ব্যবহারকারী সিএসএস কাজ করে। সংরক্ষণ করুন এবং উপভোগ ক্লিক করুন।

আপনি যদি ক্রোম ব্যবহার করছেন তবে এর অন্তর্নির্মিত পরিদর্শক ইতিমধ্যে খুব ভাল। এখানে একটা হল আড়ম্বরপূর্ণ এক্সটেনশন । আপনি সিএসএস পরিবর্তনগুলি কিছুটা ভিন্নভাবে প্রবেশ করুন: "ইনস্টল করা শৈলীগুলি পরিচালনা করুন" নির্বাচন করুন এবং তারপরে "নতুন স্টাইল লিখুন" ক্লিক করুন, কোড বাক্সের নীচে পোস্টটি প্রয়োগ করতে সাইটগুলি বা URL প্যাটার্নগুলি প্রবেশ করুন এবং " কোড "বাক্স, যেমন

body {
  background:none !important;
}

— উত্সাহী
সূত্র

2

প্রাসঙ্গিক সিএসএস সম্পত্তি চিহ্নিত করতে ফায়ারব্যাগ ইনস্টল করুন এবং তারপরে এটিকে ওভাররাইড করার জন্য গ্রিসমোনকি স্ক্রিপ্ট লিখুন ।

— বেঞ্জামিন বান্নিয়ার
সূত্র

2

গ্রিসমোনকি ব্যবহারের সুযোগ সিএসএসের সম্পত্তি হিসাবে স্ক্রুতে গাড়ি চালানোর জন্য হাতুড়ি ব্যবহারের মতো। এটি কাজ করে তবে এটি মার্জিত নয় এবং আপনি পথে কিছু ভাঙ্গার সম্ভাবনা রয়েছে।

— কালেব

2

আপনি সাইটে লাগিয়ে দিলে আপনি যা করেন আপনি তা করেন

foo.bar { background-pattern:none; }

পরে যুক্ত

!important

আগে }। ব্যবহারকারীহীন-সিএসএস ব্যবহারের বিষয়ে এখানে কিছু বিশদ রয়েছে যা এখনও আপনার ব্যবহারের জন্য এটি ব্যাখ্যা করে।

— tobylane
সূত্র