নমুনা স্টাইল শীট সঙ্গে ক্যাসকেডিং স্টাইল শীট একটি সংক্ষিপ্ত বিবরণ
যখন আপনি স্ক্র্যাচ থেকে কোনও ওয়েবসাইট তৈরি করেন, তখন এটি শৈলীতে বর্ণিত মৌলিক শৈলীর সাথে শুরু করতে স্মার্ট। এটি একটি পরিষ্কার ক্যানভাস এবং তাজা brushes দিয়ে শুরু মত। ওয়েব ডিজাইনারদের মুখোমুখি হওয়া প্রথম সমস্যাগুলির মধ্যে একটি হল ওয়েব ব্রাউজারগুলি সব ভিন্ন। ডিফল্ট ফন্ট সাইজ প্ল্যাটফর্ম থেকে প্ল্যাটফর্ম পর্যন্ত আলাদা, ডিফল্ট ফন্ট পরিবারটি ভিন্ন, কিছু ব্রাউজার শরীরের ট্যাগের মার্জিন এবং প্যাডিংকে সংজ্ঞায়িত করে যখন অন্যগুলি না, এবং তাই। আপনার ওয়েব পেজগুলির জন্য ডিফল্ট শৈলী নির্ধারণ করে এই অসঙ্গতির কাছাকাছি পান।
CSS এবং অক্ষর সেট
প্রথম জিনিস প্রথম, আপনার CSS নথির অক্ষর সেটটি utf-8 এ সেট করুন । যদিও এটি সম্ভবত আপনার বেশিরভাগ পৃষ্ঠা ডিজাইন ইংরেজিতে লিখিত আছে তবে কিছু স্থানীয় ভাষাগত এবং সাংস্কৃতিক প্রেক্ষাপটে রূপান্তর করা যেতে পারে। তারা যখন, ইউটিএফ -8 প্রক্রিয়াটি সহজ করে দেয়। বহিরাগত স্টাইল শীটের অক্ষর সেট সেট করা একটি HTTP হেডারের উপরে অগ্রাধিকার গ্রহণ করবে না, তবে অন্য সকল পরিস্থিতিতে, এটি হবে
অক্ষর সেট সেট করা সহজ। CSS নথির প্রথম লাইনের জন্য লিখুন:
@ চরসেট "ইউটিএফ -8";এই ভাবে, আপনি যদি বিষয়বস্তু সম্পত্তি বা শ্রেণি এবং আইডি নামের আন্তর্জাতিক অক্ষর ব্যবহার করেন তবে স্টাইল শীটটি সঠিকভাবে কাজ করবে।
পাতা শরীর স্টাইলিং
পরের জিনিস একটি ডিফল্ট শৈলী শীট মার্জিন, প্যাডিং, এবং সীমানা আউট শূন্য শৈলী প্রয়োজন। এটি নিশ্চিত করে যে সমস্ত ব্রাউজার একই জায়গায় সামগ্রী রাখে, এবং ব্রাউজার এবং সামগ্রীগুলির মধ্যে কোনও লুকানো জায়গা নেই। বেশিরভাগ ওয়েব পেজগুলির জন্য, এটি পাঠ্যের প্রান্তের খুব কাছাকাছি, তবে সেখানে এটি গুরুত্বপূর্ণ যে সেখানে পটভূমি চিত্রগুলি এবং লেআউট বিভাগগুলি সঠিকভাবে সঠিকভাবে কাটা হয়।
html, শরীর {মার্জিন: 0 পিএক্স; প্যাডিং: 0 পিএক্স; সীমানা: 0 পিএক্স; }ডিফল্ট ফরগ্রাউন্ড বা ফন্টের রং কালো এবং ডিফল্ট ব্যাকগ্রাউন্ড কালার সাদা সেট করুন। যদিও এটি বেশিরভাগ ওয়েবপৃষ্ঠা ডিজাইনের জন্য সবচেয়ে বেশি পরিবর্তন করবে, প্রথমে এই মানক রঙ এবং এইচটিএমএল ট্যাগটি সেট করা হলে প্রথমে পৃষ্ঠাটি সহজেই পড়তে ও কাজ করে।
html, শরীর {রঙ: # 000; পটভূমি: #fff; }ডিফল্ট ফন্ট শৈলী
ফন্ট সাইজ এবং ফন্ট পরিবারটি এমন কিছু যা অনিবার্যভাবে পরিবর্তিত হবে যখন নকশাটি ধরে রাখা হবে কিন্তু 1 ম এর ডিফল্ট ফন্টের আকার এবং এরিয়েল, জেনেভা বা অন্য কোন সেন্স-সেরিফ ফন্টের একটি ডিফল্ট ফন্ট পরিবারের সাথে শুরু হবে। Ems ব্যবহার করে পৃষ্ঠাটিকে যতটা সম্ভব অ্যাক্সেসযোগ্য রাখা এবং পর্দার উপর একটি সেন্স-সেরিফ ফন্টটি আরও সুস্পষ্ট।
html, body, p, th, td, li, dd, dt {font: 1em এরিয়েল, হেল্তুটিকা, সান-সেরিফ; }অন্যান্য স্থানে যেখানে আপনি পাঠ্য খুঁজে পেতে পারেন কিন্তু পি , তম , টিডি , লি , ডিডি এবং ডিটি বেস ফন্ট নির্ধারণ করার জন্য একটি ভাল শুরু। শুধু এইচটিএমএল এবং শরীর অন্তর্ভুক্ত করুন, কিন্তু আপনি এইচটিএমএল বা শরীরের জন্য আপনার ফন্ট সংজ্ঞায়িত যদি অনেক ব্রাউজার ফন্ট পছন্দ ওভাররাইড।
শিরোনাম
এইচটিএমএল শিরোনামগুলি আপনার সাইটকে সাহায্য করার জন্য এবং সার্চ ইঞ্জিনগুলি আপনার সাইটে আরও গভীরে ঢুকতে গুরুত্বপূর্ণ। শৈলী ছাড়া, তারা সবই মোটামুটি কুশ্রী, তাই তাদের সকলের উপর ডিফল্ট শৈলী স্থাপন করুন এবং ফন্ট পরিবার এবং প্রতিটিের জন্য ফন্ট মাপ নির্ধারণ করুন।
h1, h2, h3, h4, h5, h6 {ফন্ট-পরিবার: এরিয়েল, হেলিটিটা, সান-সেরিফ; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {ফন্ট সাইজ: 1.2 এমএম; } h4 {font-size: 1.0em; } h5 {ফন্ট সাইজ: 0.9 এমএম; } h6 {ফন্ট-আকার: 0.8 এম; }লিঙ্কগুলি ভুলে যান না
লিংক রং স্টাইলিং প্রায় সবসময় নকশা একটি গুরুত্বপূর্ণ অংশ, কিন্তু আপনি ডিফল্ট শৈলী তাদের না সংজ্ঞায়িত না হলে, সম্ভাবনা আপনি ছদ্ম ক্লাস অন্তত একটি ভুলে যাবেন। নীল রঙের কিছু ছোট্ট প্রকরণের সাথে তাদের সংজ্ঞায়িত করুন এবং আপনার সাইটের সংজ্ঞায়িত রঙ প্যালেট একবারের পরে পরিবর্তন করুন।
নীল রঙের লিঙ্কগুলি সেট করতে, সেট করুন:
- নীল হিসাবে লিঙ্ক
- গাঢ় নীল হিসাবে লিঙ্ক পরিদর্শন
- হালকা নীল হিসাবে লিঙ্কগুলি হভার করুন
- সক্রিয় লিঙ্কগুলি এমনকি নিখুঁত নীল হিসাবে
এই উদাহরণে যেমন দেখানো হয়েছে:
একটি: লিঙ্ক {রঙ: # 00f; } a: পরিদর্শন {রঙ: # 009; } a: hover {color: # 06f; } a: সক্রিয় {color: # 0cf; } মোটামুটি নিখুঁত রঙের স্ক্রিপ্টগুলির সাথে লিঙ্কগুলি স্টাইল করার দ্বারা এটি নিশ্চিত করে যে আমি কোনও ক্লাস ভুলে যাব না এবং ডিফল্ট নীল, লাল ও বেগুনি থেকেও কম আওয়াজ করে।সম্পূর্ণ স্টাইল শীট
এখানে সম্পূর্ণ স্টাইল শীট:
@ চরসেট "ইউটিএফ -8"; html, শরীর {মার্জিন: 0 পিএক্স; প্যাডিং: 0 পিএক্স; সীমানা: 0 পিএক্স; রঙ: # 000; পটভূমি: #fff; } html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 {ফন্ট-পরিবার: এরিয়েল, হেলিটিটা, সান-সেরিফ; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {ফন্ট সাইজ: 1.2 এমএম; } h4 {font-size: 1.0em; } h5 {ফন্ট সাইজ: 0.9 এমএম; } h6 {ফন্ট-আকার: 0.8 এম; } a: লিঙ্ক {color: # 00f; } a: পরিদর্শন {রঙ: # 009; } a: hover {color: # 06f; } a: সক্রিয় {color: # 0cf; }