একটি মাস্টার স্টাইলশীট সঙ্গে ডিফল্ট ব্রাউজার স্টাইলিং সরান কিভাবে

এই টিপস সঙ্গে ঘটনা পান

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

ডিফল্ট ব্রাউজার শৈলী সহায়ক হতে পারে, তবে অনেক ক্ষেত্রে ওয়েব ডিজাইনার এই শৈলীগুলি সরাতে চান যাতে তারা স্টাইলগুলির সাথে নতুন করে শুরু করতে পারে যাতে তারা 100% নিয়ন্ত্রণে থাকে। এটি "মাস্টার স্টাইলশীট" নামে পরিচিত যা ব্যবহার করা হয়।

একটি মাস্টার স্টাইলশিট আপনার সমস্ত ডকুমেন্টে কল করা প্রথম স্টাইলশীট হওয়া উচিত। আপনি ডিফল্ট ব্রাউজার সেটিংস মুছে ফেলার জন্য একটি মাস্টার স্টাইলশীট ব্যবহার করেন যা ক্রস-ব্রাউজার ওয়েব ডিজাইনে সমস্যার সৃষ্টি করতে পারে। একবার আপনি একটি মাস্টার স্টাইলশীট দিয়ে স্টাইলগুলি মুছে ফেলার পরে, আপনার ডিজাইন সমস্ত ব্রাউজারে একই জায়গায় থেকে শুরু হয় - যেমন পেইন্টিংয়ের জন্য একটি পরিষ্কার ক্যানভাস।

গ্লোবাল ডিফল্টগুলি

আপনার মাস্টার স্টাইলশীটটি পৃষ্ঠায় মার্জিন, প্যাডিং এবং সীমানা বের করে শূন্যতা শুরু করে। কিছু ওয়েব ব্রাউজার দস্তাবেজের অংশটিকে ব্রাউজারের প্যানের প্রান্তগুলি থেকে ইন্ডেন্টের 1 বা 2 পিক্সেল ডিফল্ট করে। এটি নিশ্চিত করে যে তারা সব একই প্রদর্শন করে:

html, শরীর {মার্জিন: 0 পিএক্স; প্যাডিং: 0 পিএক্স; সীমানা: 0 পিএক্স; }

আপনি ফন্ট সুসংগত করতে চান। ফন্ট সাইজ 100 শতাংশ বা 1 দশ পর্যন্ত সেট করতে ভুলবেন না, যাতে আপনার পৃষ্ঠাটি অ্যাক্সেসযোগ্য হয়, কিন্তু আকার এখনও সুসঙ্গত। এবং লাইন-উচ্চতা অন্তর্ভুক্ত করতে ভুলবেন না

শরীর {ফন্ট: 1em / 1.25 এরিয়েল, হেলিটিটা, সান-সেরিফ; }

শিরোনাম ফরম্যাটিং

হেডলাইন বা হেডার ট্যাগগুলি (H1, H2, H3, ইত্যাদি) সাধারণত তাদের মধ্যে চারপাশে বড় মার্জিন বা প্যাডিং সহ গাঢ় পাঠ্যে ডিফল্ট থাকে। ওজন, মার্জিন এবং প্যাডিং সাফ করার মাধ্যমে, আপনি নিশ্চিত করতে পারেন যে এই ট্যাগগুলি এখনও অতিরিক্ত (অথবা ছোট) অতিরিক্ত শৈলী ছাড়া তাদের চারপাশের পাঠের তুলনায় বেশি।

h1, h2, h3, h4, h5, h6 {মার্জিন: 0; প্যাডিং: 0; ফন্ট-ওজন: স্বাভাবিক; ফন্ট-পরিবার: এরিয়েল, হেলিটিটা, সান-সেরিফ; }

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

সাধারণ পাঠ্য বিন্যাস

শিরোনামগুলির পাশাপাশি, অন্য পাঠ্য ট্যাগ রয়েছে যা আপনাকে পরিষ্কার করতে হবে। এক সেট যে মানুষ প্রায়ই ভুলে যায় টেবিল সেল ট্যাগ (TH এবং TD) এবং ফর্ম ট্যাগ (SELECT, TEXTAREA এবং INPUT)। আপনি যদি তাদের শরীর এবং অনুচ্ছেদ টেক্সট হিসাবে একই আকারে সেট না করেন, তবে আপনি ব্রাউজারগুলি কীভাবে তাদের রেন্ডার করতে পারেন তার উপর আপনি অস্পষ্টভাবে বিস্মিত হতে পারেন।

p, th, td, li, dd, dt, ul, ol, blockquote, q, আদ্যক্ষরা, abbr, a, ইনপুট, নির্বাচন, পাঠ্যরেখা {মার্জিন: 0; প্যাডিং: 0; ফন্ট: স্বাভাবিক স্বাভাবিক স্বাভাবিক 1EM / 1.25 এরিয়েল, হেললেটিকা, সান-সেরিফ; }

আপনার উদ্ধৃতি (BLOCKQUOTE এবং Q), আদ্যক্ষর, এবং সংক্ষেপে একটু অতিরিক্ত শৈলী প্রদানের জন্য এটি চমৎকার, যাতে তারা একটু বেশি দাঁড়ায়:

ব্লককোট {মার্জিন: 1.25েম; প্যাডিং: 1.25em} q {font-style: italic; } আদ্যক্ষরা, abbr {কার্সারঃ সাহায্য; সীমান্তের নীচে: 1 পক্স ড্যাশ; }

লিঙ্ক এবং চিত্র

লিংক পরিচালনা করা সহজ এবং যে aforementioned উজ্জ্বল নীল আন্ডারলাইন টেক্সট থেকে পরিবর্তন। আমি সবসময় আমার লিঙ্ক অধীন থাকা পছন্দ করি, কিন্তু যদি আপনি এটি একটি ভিন্ন উপায় পছন্দ করেন তবে আপনি এই বিকল্পগুলি আলাদাভাবে সেট করতে পারেন। আমি মাস্টার শৈলী শীট রং অন্তর্ভুক্ত না, কারণ নকশা উপর নির্ভর করে

একটি, একটি: লিঙ্ক, একটি: পরিদর্শিত, একটি: সক্রিয়, একটি: হভার {টেক্সট - প্রসাধন: নিম্নরেখা; }

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

img {সীমানা: কেউ না; }

টেবিল

টেবিলের লেআউট ব্যবহারের জন্য আর ব্যবহার করা হয় নি, তবে আপনি এখনও সাইটের প্রকৃত ট্যাবলউয়ার ডেটা ব্যবহার করতে পারেন। এটি এইচটিএমএল টেবিলের একটি সূক্ষ্ম ব্যবহার। আমরা ইতিমধ্যে নিশ্চিত করেছি যে আপনার টেবিলের সেলগুলির জন্য ডিফল্ট পাঠ্য আকার একই, তবে আপনার টেবিলের একই রকম থাকা উচিত এমন কিছু অন্যান্য শৈলী রয়েছে:

টেবিল {মার্জিন: 0; প্যাডিং: 0; সীমান্ত: কেউ না; }

ফরম

অন্যান্য উপাদানের মতো, আপনার ফর্মে চারপাশের মার্জিন এবং প্যাডিংগুলি পরিষ্কার করা উচিত। আরেকটি জিনিস যা আমি করতে চাই তা হল ফর্ম ট্যাগটিকে " ইনলাইন " হিসাবে পুনর্লিখন করা যাতে এটি অতিরিক্ত স্পেস যোগ করে না যেখানে আপনি কোডটি ট্যাগে রাখেন। অন্যান্য পাঠ্য উপাদানের সাথে, আমি নির্বাচন, পাঠ্যরেয়ার এবং ইনপুট উপরে ফন্ট তথ্য সংজ্ঞায়িত করি, যাতে এটি আমার বাকি পাঠ্যাংশের মতই।

ফর্ম {মার্জিন: 0; প্যাডিং: 0; প্রদর্শন: ইনলাইন; }

এটি আপনার লেবেলগুলির জন্য কার্সার পরিবর্তন করার জন্য একটি ভাল ধারণা। এটি লোকেদের এটি দেখতে দেয় যে লেবেলটি যখন এটি ক্লিক করবে তখন কিছু করবে।

লেবেল {কার্সার: পয়েন্টার; }

সাধারণ ক্লাস

মাস্টার স্টাইলশীটটির এই অংশে আপনাকে এমন ক্লাসগুলি সংজ্ঞায়িত করা উচিত যা আপনাকে বুঝতে দেয়। এইসব ক্লাসের বেশির ভাগই আমি ব্যবহার করি। মনে রাখবেন যে তারা কোনো নির্দিষ্ট উপাদান সেট করা হয় না, যাতে আপনি তাদের যা প্রয়োজন তা নির্ধারণ করতে পারেন:

পরিষ্কার করুন। } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textcenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {প্রদর্শন: ব্লক; মার্জিন বাম: অটো; মার্জিন-ডান: অটো; } / * প্রস্থ সেট করতে ভুলবেন না * / .bold {font-weight: bold; } .italic {font-style: italic; }। শর্টকাট {টেক্সট-সজ্জা: নিম্নরেখা; }। অনির্বাচিত {মার্জিন-বাম: 0; প্যাডিং-বাম: 0; } .nomargin {মার্জিন: 0; }। নোটপ্যাডিং {প্যাডিং: 0; } .nobullet {list-style: none; তালিকা-শৈলী-চিত্র: কেউ না; }

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

সম্পূর্ণ মাস্টার স্টাইলশীট

/ * গ্লোবাল ডিফল্ট * / html, শরীর {মার্জিন: 0 পিএক্স; প্যাডিং: 0 পিএক্স; সীমানা: 0 পিএক্স; } শরীর {ফন্ট: 1em / 1.25 এরিয়েল, হেলিটিটা, সান-সেরিফ; } / * হেডলাইনস * / h1, h2, h3, h4, h5, h6 {মার্জিন: 0; প্যাডিং: 0; ফন্ট-ওজন: স্বাভাবিক; ফন্ট-পরিবার: এরিয়েল, হেলিটিটা, সান-সেরিফ; } / * টেক্সট শৈলী * / পি, তম, টিডি, লি, ডিডি, dt, উল, ol, ব্লককোট, q, আদ্যক্ষরা, abbr, a, ইনপুট, নির্বাচন, পাঠ্যরেখা {মার্জিন: 0; প্যাডিং: 0; ফন্ট: স্বাভাবিক স্বাভাবিক স্বাভাবিক 1EM / 1.25 এরিয়েল, হেললেটিকা, সান-সেরিফ; } ব্লককোট {মার্জিন: 1.25েম; প্যাডিং: 1.25em} q {font-style: italic; } আদ্যক্ষরা, abbr {কার্সারঃ সাহায্য; সীমান্তের নীচে: 1 পক্স ড্যাশ; } ছোট {font-size: .85em; } বড় {ফন্ট সাইজ: 1.2 এমএম; } / * লিঙ্ক এবং চিত্রগুলি * / একটি, একটি: লিঙ্ক, একটি: পরিদর্শন, একটি: সক্রিয়, একটি: হভার করা (টেক্সট সজ্জা: নিম্নরেখা; } img {সীমানা: কেউ না; } / * টেবিল * / সারণি {মার্জিন: 0; প্যাডিং: 0; সীমান্ত: কেউ না; } / * ফরম * / ফর্ম {মার্জিন: 0; প্যাডিং: 0; প্রদর্শন: ইনলাইন; } লেবেল {কার্সার: পয়েন্টার; } / * সাধারণ ক্লাস * /। চাইল্ড {পরিষ্কার: উভয়; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textcenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {প্রদর্শন: ব্লক; মার্জিন বাম: অটো; মার্জিন-ডান: অটো; } / * প্রস্থ সেট করতে ভুলবেন না * / .bold {font-weight: bold; } .italic {font-style: italic; }। শর্টকাট {টেক্সট-সজ্জা: নিম্নরেখা; }। অনির্বাচিত {মার্জিন-বাম: 0; প্যাডিং-বাম: 0; } .nomargin {মার্জিন: 0; }। নোটপ্যাডিং {প্যাডিং: 0; } .nobullet {list-style: none; তালিকা-শৈলী-চিত্র: কেউ না; }

জনিফার ক্রাইনিনের মূল রচনা 10/6/17 এ জেরেমি গিয়ার্ড দ্বারা সম্পাদিত