ক্যাসকেডিং স্টাইল শীট (সিএসএস) নমুনা সঙ্গে সংক্ষিপ্ত বিবরণ

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

সিএসএস এবং অক্ষর সেট

প্রথম জিনিস প্রথমে, আপনার CSS নথির চরিত্র সেট সেট করুন UTF-8 । যদিও আপনি সম্ভবত যে পৃষ্ঠাগুলি ডিজাইন করেছেন তার অধিকাংশই ইংরেজিতে লেখা হয় তবে কিছু লোকাল ভাষাগত এবং সাংস্কৃতিক প্রেক্ষাপটে স্থানীয়ভাবে অভিযোজিত হতে পারে। যখন তারা হয়, utf-8 প্রক্রিয়া সহজ করে। বহিরাগত স্টাইল শীটের অক্ষর সেটটি সেটিকে HTTP হেডারের উপরে অগ্রাধিকার দেওয়া হবে না, তবে অন্যান্য সমস্ত পরিস্থিতিতে এটি হবে।

অক্ষর সেট সেট করা সহজ। CSS নথির প্রথম লাইনের জন্য লিখুন:

@ চারসেট "utf-8";

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

পাতা শারীরিক স্টাইলিং

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

এইচটিএমএল, শরীর { মার্জিন: 0 পিএক্স; প্যাডিং: 0 পিএক্স; সীমানা: 0px; }

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

এইচটিএমএল, শরীর { রঙ: # 000; পটভূমি: #fff; }

ডিফল্ট ফন্ট শৈলী

ফন্ট সাইজ এবং ফন্ট পরিবারটি এমন কিছু যা নকশাটি একবার ধরে নেয় তবে এটি অবশ্যই অবশ্যম্ভাবীভাবে পরিবর্তিত হবে তবে এটি 1 ম ডিফল্ট ফন্টের আকার এবং আরিয়াল, জেনেভা, বা অন্য কোন সান-সেরিফ ফন্টের ডিফল্ট ফন্টের সাথে শুরু হবে। Ems ব্যবহার পৃষ্ঠাটি যতটা সম্ভব অ্যাক্সেসযোগ্য রাখে, এবং একটি সান-সেরিফ ফন্ট স্ক্রীনে আরও সুস্পষ্ট হয়।

html, body, p, th, td, li, dd, dt { ফন্ট: 1 ম Arial, Helvetica, Sans-Serif; }

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

শিরোনাম

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

h1, h2, h3, h4, h5, h6 { ফন্ট-পরিবার: অ্যারিয়াল, হেলভেটিকা, সান-সেরিফ; } h1 {ফন্ট সাইজ: 2em; } H2 {ফন্ট সাইজ: 1.5em; } h3 {ফন্ট সাইজ: 1.2em; } H4 {ফন্ট সাইজ: 1.0em; } H5 {ফন্ট সাইজ: 0.9em; } H6 {ফন্ট সাইজ: 0.8em; }

লিংক ভুলবেন না

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

নীল ছায়া গো লিঙ্ক সেট করতে, সেট করুন:

• লিংক নীল হিসাবে
• পরিদর্শন লিঙ্ক অন্ধকার নীল হিসাবে
• হোভার লিঙ্ক হালকা নীল হিসাবে
• সক্রিয় লিঙ্ক এমনকি নীল নীল হিসাবে

যেমন এই উদাহরণে দেখানো হয়েছে:

একটি: লিঙ্ক {রঙ: # 00f; }একটি: পরিদর্শন {রঙ: # 009; }একটি: হভার {রঙ: # 06f; }একটি: সক্রিয় {রঙ: # 0 সিএফ; }

একটি মোটামুটি নিরপেক্ষ রঙের স্কিমের সাথে লিঙ্কগুলি স্টাইলিং করে, এটি নিশ্চিত করে যে আপনি ক্লাসগুলির কোনটি ভুলে যাবেন না এবং ডিফল্ট নীল, লাল এবং বেগুনি তুলনায় এটিকে একটু কম করে তোলে।

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

এখানে সম্পূর্ণ স্টাইল শীট:

@ চারসেট "utf-8"; এইচটিএমএল, শরীর { মার্জিন: 0 পিএক্স; প্যাডিং: 0 পিএক্স; সীমানা: 0px; রঙ: # 000; পটভূমি: #fff; } html, body, p, th, td, li, dd, dt { ফন্ট: 1 ম Arial, Helvetica, Sans-Serif; } h1, h2, h3, h4, h5, h6 { ফন্ট-পরিবার: অ্যারিয়াল, হেলভেটিকা, সান-সেরিফ; } h1 {ফন্ট সাইজ: 2em; } H2 {ফন্ট সাইজ: 1.5em; } h3 {ফন্ট সাইজ: 1.2em; } H4 {ফন্ট সাইজ: 1.0em; } H5 {ফন্ট সাইজ: 0.9em; } H6 {ফন্ট সাইজ: 0.8em; } একটি: লিঙ্ক {রঙ: # 00f; } একটি: পরিদর্শন {রঙ: # 009; } একটি: হভার {রঙ: # 06f; } একটি: সক্রিয় {রঙ: # 0 সিএফ; }