CSS Box Model খুঁঁটিনাটি Part-01
Post No:16
আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা CSS Box Model সম্পর্কে জানবো।
আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib
একনজরে দেখে নেই আজকের ব্লগ থেকে আমরা কি কি বিষয় জানতে পারবো ও শিখতে পারবো
১। Height,width কী এবং কি ভাবে use করতে হয়।
২। Border-radies কী এবং কি ভাবে use করতে হয়।
৩। padding,margine কী এবং কি ভাবে use করতে হয়।
৪। Box-shadow,text-shadow কি ভাবে use করতে হয়।
Height/ উচ্চতাঃ
একটি এলিমেন্টের height নির্ধারন করার জন্য height প্রোপার্টি ব্যবহার করা হয়,সাধারণত block-level element এর ক্ষেত্রে প্রয়োগ করা যায়।
ডিজাইন করার সময় যদি কোন section/div/tag এর height ফিক্সড রাখতে হয় তখন আমরা height এলিমেন্ট ব্যাবহার করি,যেমনঃ
Height প্রোপার্টির ভ্যালু-সমূহ:
autoব্রাউজারে ডিফল্ট একটি Height থাকে।
height এর মধ্যে px, cm ইত্যাদি নির্ধারণ করা যায়।
Intail সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে।
inherit এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়।
Max-height:
একটি এলিমেন্টের সর্বোচ্চ(maximum) height সেট করার জন্য ব্যবহার করা হয়।
Min-height:
একটি এলিমেন্টের সর্বনিম্ন(minumum) height সেট করার জন্য ব্যবহার করা হয়।
এটি height প্রোপার্টির ভ্যালু min-height প্রোপার্টির ভ্যালু থেকে ছোট হওয়ার ক্ষেত্রে প্রতিরোধ করে।
Width/ দৈর্ঘ্যঃ
একটি এলিমেন্টের width প্রোপার্টি দিয়ে width নির্দিষ্ট করা হয়।Inline-block element কোন tag কে নিদিষ্ট ডিজাইন করার জন্য width ব্যবহার করা হয়।যেমনঃ
Width প্রোপার্টির ভ্যালু-সমূহঃ
autoব্রাউজারে ডিফল্ট একটি width থাকে।
lengthwidth এর মধ্যে px, cm ইত্যাদি নির্ধারণ করা যায়।
%কন্টেইন ব্লকের জন্য width এর মধ্যে পার্সেন্ট(%) নির্ধারণ করা যায়।
Intail সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে।
inherit এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়।
Max-width:
একটি এলিমেন্টের maximum width সেট করার জন্য max-width প্রোপার্টিটি ব্যবহার করা হয়। দৈর্ঘ্য নির্ণয়ের বিভিন্ন একক যেমনঃ px, cm ইত্যাদি অথবা পারসেন্ট(%) ব্যবহার করে একটি এলিমেন্টের max-width সেট করা যেতে পারে। অথবা max-width এর ভ্যালু none সেট করা যেতে পারে। অর্থাৎ ডিফল্টভাবে যার কোনো কোন maximum width থাকবে না। জেনে রাখা ভাল যে, যখন ব্রাউজার উইন্ডো থেকে এলিমেন্টের width বড় হয় তখন ব্রাউজার এলিমেন্টটিতে একটি হরিজন্টাল স্ক্রলবার যুক্ত করে নেয়। এক্ষেত্রে max-width প্রোপার্টিটি ব্যবহার করে এই সমস্যার সমাধান করা যায়।
Min-width:
একটি এলিমেন্টের সর্বনিম্ন(minumum) width সেট করার জন্য ব্যবহার করা হয়।
Border-radius:
border-radius প্রোপার্টি একটি এলিমেন্টে গোলাকার কর্নার করতে ব্যবহৃত হয়।
border-radius প্রোপার্টি দ্বারা সহজেই চারটি বর্ডার-*-রেডিয়াসের প্রোপার্টি নির্ধারণ করা যায়।
যদি আপনি border-radius প্রোপার্টির জন্য একটি ভ্যালু দেন, তাহলে রেডিয়াস ৪টি কর্নারের জন্য প্রয়োগ হবে।
আপনি চাইলে প্রত্যেকটি কর্নারের জন্য আলাদাভাবে ভ্যালু দিতে পারেন। নিচে কিছু নিয়ম দেয়া হলোঃ
একটি ভ্যালুঃ চারটি কর্নার সমান ভাবে গোলাকার হয়।
দুইটি ভ্যালুঃ ১ম ভ্যালু উপর থেকে বামে এবং নিচ থেকে ডানে, ২য় ভ্যালু উপর থেকে ডান এবং নিচ থেকে বামে প্রয়োগ করে প্রয়োগ করে।
তিনটি ভ্যালুঃ ১ম ভ্যালু উপর থেকে বামে, ২য় ভ্যালু উপর থেকে ডানে এবং নিচ থেকে বামে, ৩য় ভ্যালু নিচ থেকে ডানে প্রয়োগ করে।
চারটি ভ্যালুঃ ১ম ভ্যালু উপর থেকে বামে, ২য় ভ্যালু উপর থেকে ডানে, ৩য় ভ্যালু নিচ থেকে ডানে এবং ৪র্থ ভ্যালু নিচ থেকে বামে প্রয়োগ করে।
যেমনঃ
১. একটি ভ্যালু- border-radius: 15px;
২. দুইটি ভ্যালু - border-radius: 15px 50px;
৩. তিনটি ভ্যালু - border-radius: 15px 50px 30px;
৪. চারটি ভ্যালু - border-radius: 15px 50px 30px 5px;
উপরের চিত্র তে যদি আমরা লক্ষ্য করে তাহলে দেখতে পাচ্ছি যে Border-radius চারটি ভ্যালুর মধ্য দুটি ব্যবহার করা হয়েছে। আর বাকি দুটি ভ্যালু 0 দেওয়া হয়েছে। আমরা এই ভাবে ভ্যালু গুলো ব্যবহার করে নিজের ইচ্ছা মতো বিভিন্ন ডিজাইন করতে পারবো।
আসুন Border-radius ব্যবহার করে মজার একটা জিনিস দেখি
উপরের চিত্র তে যদি আমরা লক্ষ্য করি তাহলে দেখতে পাচ্ছি যে Border-radius:50%; ব্যবহার করা হয়েছে যার ফলে আমরা গোলাকার বৃত্ত দেখতে পাচ্ছি। আপনি এই ভাবে বিভিন্ন Percent( % ) ব্যবহার করে ডিজাইন করতে পারবেন।
আমরা যদি আরোও কয়েকটা উদাহরণ দেখি তাহলে বুঝতে সুবিধা হবেঃ
আশাকরি এখন ভালো ভাবে বুঝতে পেরেছেন।
Padding:
কোন এইচটিএমএল এলিমেন্টের বর্ডার এবং এলিমেন্ট কন্টেন্টের মধ্যকার ফাঁকা স্থান নির্ধারণ করতে সিএসএস এর প্যাডিং প্রোপার্টি গুলো ব্যবহার করা হয়।
সিএসএস এর প্যাডিং প্রোপার্টি গুলো, সুনির্ধারিতভাবে নির্দিষ্ট করে দেয় কোন কন্টেন্টের চারপাশের অর্থাৎ বর্ডারের ভেতর ফাঁকা স্থান। অর্থাৎ সিএসএস প্যাডিং প্রপার্টি এলিমেন্ট ও বর্ডার এর মধ্যবর্তী ফাঁকা স্থান নির্ধারণ করে। প্যাডিং এর পৃষ্ঠদেশ বা background এ কোন রঙ ব্যবহার করা যায় না, এটি পুরোপুরি স্বচ্ছ বা transparent অর্থাৎ অদৃশ্য হয়।
ভিন্ন ভিন্ন প্যাডিং প্রপার্টি গুলো ব্যবহার করে, স্বাধীনভাবে কোন এইচটিএমএল এলিমেন্ট এর চতুর্দিকে প্যাডিং নির্ধারণ করা যায়। প্যাডিং প্রোপার্টি গুলো হল - padding-left, padding-right, padding-top এবং padding-bottom.
সকল প্যাডিং প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন:
Second Part Link:https://blog.shikhun.net/css-box-model-part-02
