আপনি যখন একটি ওয়েব পৃষ্ঠা ডিজাইন করছেন, আপনি সম্ভবত ওয়েব পৃষ্ঠায় প্রদর্শিত উপাদানগুলির জন্য নির্দিষ্ট আকার নির্দিষ্ট করতে চাইবেন। উদাহরণস্বরূপ, আপনি একটি বাক্সের একটি নির্দিষ্ট উচ্চতা বা পাঠ্যের একটি লাইন একটি নির্দিষ্ট প্রস্থের জন্য চাইতে পারেন।
এখানেই CSS উচ্চতা এবং প্রস্থ বৈশিষ্ট্যগুলি আসে৷ উচ্চতা এবং প্রস্থ বৈশিষ্ট্যগুলি আপনাকে CSS-এ একটি উপাদানের উচ্চতা এবং প্রস্থ নির্ধারণ করতে দেয়৷
এই টিউটোরিয়ালটি উদাহরণ সহ আলোচনা করবে, CSS উচ্চতা এবং প্রস্থ বৈশিষ্ট্যগুলির মূল বিষয়গুলি এবং প্রতিক্রিয়াশীল উপাদানগুলি ডিজাইন করতে সর্বনিম্ন এবং সর্বোচ্চ উচ্চতা এবং প্রস্থ বৈশিষ্ট্যগুলি কীভাবে ব্যবহার করতে হয়। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি ওয়েব পৃষ্ঠায় একটি উপাদানের আকার সেট করতে CSS উচ্চতা এবং প্রস্থ বৈশিষ্ট্যগুলি ব্যবহার করতে বিশেষজ্ঞ হবেন।
CSS উচ্চতা এবং প্রস্থ
একটি ওয়েব পৃষ্ঠায় একটি উপাদানের উচ্চতা এবং প্রস্থ সেট করা আপনাকে ওয়েব পৃষ্ঠায় উপাদানটি গ্রহণ করবে এমন স্থান নির্ধারণ করতে দেয়৷ এটি আপনাকে আপনার ওয়েব পৃষ্ঠার উপাদানগুলির জন্য একটি কাঠামো তৈরি করতে সাহায্য করতে পারে যাতে প্রতিটি উপাদান আপনার প্রয়োজনের উপর ভিত্তি করে সঠিকভাবে উপস্থিত হয়।
একটি উপাদান অনুভূমিকভাবে এবং উল্লম্বভাবে কতদূর প্রসারিত করতে পারে তা নির্ধারণ করতে, আপনি যথাক্রমে প্রস্থ এবং উচ্চতা বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন।
প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি আপনাকে একটি বাক্সের বিষয়বস্তুর এলাকার জন্য একটি নির্দিষ্ট প্রস্থ এবং উচ্চতা সেট করতে দেয়। এর মানে হল যে প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি একটি বাক্সের বিষয়বস্তুর স্থান নিয়ন্ত্রণ করে এবং একটি বাক্সের জন্য কোন মার্জিন বা প্যাডিং সেটকে প্রভাবিত করে না।
উচ্চতা এবং প্রস্থ বৈশিষ্ট্য নিম্নলিখিত সিনট্যাক্স ব্যবহার করে:
height: heightValue; width: widthValue;
উচ্চতার মান এবং প্রস্থ মান নিম্নলিখিত মানগুলির যে কোনো একটি গ্রহণ করতে পারে:
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
- অটো:ব্রাউজার স্বয়ংক্রিয়ভাবে উচ্চতা এবং প্রস্থ গণনা করে।
- দৈর্ঘ্য:px, em, rem, ইত্যাদিতে একটি বাক্সের প্রস্থ বা উচ্চতা।
- শতাংশ:ব্লকের আকারের শতাংশ হিসাবে একটি বাক্সের প্রস্থ বা উচ্চতা যেখানে একটি উপাদান উপস্থিত হয়৷
- প্রাথমিক:বক্সের জন্য নির্দিষ্ট করা ডিফল্ট মান।
- উত্তরাধিকারঃ যে বক্সে একটি উপাদান উপস্থিত হয় তার প্রস্থ বা উচ্চতার সমান মান।
এখন যেহেতু আমরা উচ্চতা এবং প্রস্থের বৈশিষ্ট্যগুলির মূল বিষয়গুলি জানি, আমরা এই বৈশিষ্ট্যগুলির প্রতিটির একটি উদাহরণ অন্বেষণ করতে পারি৷
CSS উচ্চতা এবং প্রস্থ বৈশিষ্ট্যগুলি
ধরুন আমরা দ্য পিকল্ড অ্যাপল নামে একটি স্থানীয় ক্যাফের জন্য একটি ওয়েবসাইট ডিজাইন করছি। এই ক্যাফে আমাদেরকে তাদের ওয়েবসাইটের "সম্পর্কে" পৃষ্ঠায় একটি বাক্স তৈরি করতে বলেছে, যাতে ক্যাফের একটি সংক্ষিপ্ত বিবরণ সংরক্ষণ করা উচিত৷
এই বাক্সটি 200px চওড়া এবং 200px লম্বা হওয়া উচিত এবং একটি হালকা ধূসর পটভূমি থাকা উচিত। এই মাত্রাগুলিকে আমরা ওয়েব পৃষ্ঠায় যোগ করতে চাই এমন অন্যান্য উপাদানগুলি যখন আমরা প্রয়োগ করি তখন তা উপযুক্ত হবে তা নিশ্চিত করার জন্য বেছে নেওয়া হয়েছে৷
আমরা বক্স তৈরি করতে নিম্নলিখিত কোড ব্যবহার করতে পারি:
<html>
<p class="aboutBox">The Pickled Apple, based in Springfield, Illinois, has been proudly serving high-quality teas, specialty coffees, and delicious cakes since 2004.</p>
<style>
.aboutBox {
height: 200px;
width: 200px;
background-color: lightgray;
}
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আসুন আমাদের কোড ভাঙ্গা যাক। আমাদের HTML ফাইলে, আমরা
ট্যাগ ব্যবহার করে পাঠ্যের একটি অনুচ্ছেদ তৈরি করেছি। এই
ট্যাগের ক্লাসের নাম aboutBox আছে , যা আমরা আমাদের CSS ফাইলে পাঠ্যের অনুচ্ছেদের স্টাইল করতে ব্যবহার করি।
আমাদের CSS ফাইলে, আমরা একটি শৈলীর নিয়ম সংজ্ঞায়িত করেছি যা aboutBox শ্রেণীর নাম সহ যেকোনো উপাদানের ক্ষেত্রে প্রযোজ্য। . এই শৈলীর নিয়মটি একটি উপাদানের উচ্চতা 200px, একটি উপাদানের প্রস্থ 200px এবং একটি উপাদানের পটভূমির রঙ হালকা ধূসরে সেট করে।
যদি আমরা চাই যে আমাদের উপাদানটি 100px চওড়া হোক, আমরা প্রস্থের বৈশিষ্ট্যটিকে 100px এর সমান হতে পরিবর্তন করতে পারি। অথবা যদি আমরা চাই যে আমাদের উপাদানটি 300px লম্বা হোক, আমরা উচ্চতার বৈশিষ্ট্যটি 300px এর সমান হতে পরিবর্তন করতে পারি।
CSS সর্বনিম্ন এবং সর্বোচ্চ দৈর্ঘ্যের বৈশিষ্ট্যগুলি
প্রস্থ এবং উচ্চতা নির্দিষ্ট মান। এর মানে হল যে আপনি যে প্রস্থ এবং উচ্চতা নির্দিষ্ট করেছেন তা একই থাকবে এবং আপনি যদি উইন্ডোর আকার পরিবর্তন করেন বা অন্য কোনও ডিভাইসে ওয়েব পৃষ্ঠাটি দেখেন তবে পরিবর্তন হবে না (যদি না আপনি একটি আপেক্ষিক উচ্চতা মান ব্যবহার করেন, যেমন পিতামাতার আকারের শতাংশের মতো উপাদান)।
এটি বোঝা গুরুত্বপূর্ণ কারণ আপনি যদি একটি অ্যাক্সেসযোগ্য অভিজ্ঞতা ডিজাইন করতে চান তবে উপাদানগুলির জন্য নির্দিষ্ট উচ্চতা এবং প্রস্থ সেট করা ব্যবহারিক নাও হতে পারে। উদাহরণ স্বরূপ, আপনি যদি একটি ছবির প্রস্থ 500px উল্লেখ করেন, তাহলে ছবি ভুলভাবে রেন্ডার হতে পারে যদি কোনো ব্যবহারকারী মোবাইল ডিভাইসে সাইটটি দেখেন, যার স্ক্রীনের আকার ছোট হতে পারে।
সেখানেই সর্বনিম্ন এবং সর্বোচ্চ দৈর্ঘ্যের মানগুলি আসে৷
একটি উপাদানকে বিভিন্ন স্ক্রীন এবং ভিউপোর্ট আকারের সাথে মানিয়ে নিতে, আপনি সর্বনিম্ন-প্রস্থ, সর্বোচ্চ-প্রস্থ, সর্বনিম্ন-উচ্চতা এবং সর্বোচ্চ-উচ্চতা বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন। আপনি যখন এই বৈশিষ্ট্যগুলি নির্দিষ্ট করবেন, প্রস্থ এবং উচ্চতার জন্য নির্দিষ্ট করা মানগুলি ওভাররাইড করা হবে৷
ন্যূনতম-উচ্চতা বৈশিষ্ট্য একটি সম্পত্তির সর্বনিম্ন উচ্চতা সংজ্ঞায়িত করে। যদি ন্যূনতম-উচ্চতা নির্দিষ্ট করা হয়, একটি উপাদানের উচ্চতা কখনই মিন-উচ্চতার মানের চেয়ে কম হতে পারে না। ন্যূনতম-প্রস্থ বৈশিষ্ট্য একটি সম্পত্তির সর্বনিম্ন প্রস্থকে সংজ্ঞায়িত করে এবং একইভাবে কাজ করে।
একইভাবে, আপনি যদি একটি সম্পত্তির সর্বোচ্চ উচ্চতা বা প্রস্থ নির্ধারণ করতে চান, আপনি যথাক্রমে সর্বোচ্চ-উচ্চতা এবং সর্বোচ্চ-প্রস্থ ব্যবহার করতে পারেন।
আগের থেকে আমাদের ক্যাফে উদাহরণে ফিরে আসা যাক। ধরুন আমরা ব্যবহারকারীর স্ক্রিনের আকারের উপর নির্ভর করে আমাদের বক্সের প্রস্থ পরিবর্তন করতে চাই। বাক্সের সর্বাধিক প্রস্থ 500px হওয়া উচিত এবং আমাদের বক্স কখনই 100px এর চেয়ে সংকীর্ণ হওয়া উচিত নয়। আমরা নিম্নলিখিত কোড ব্যবহার করে এই লক্ষ্যটি অর্জন করতে পারি:
<html>
<p class="aboutBox">The Pickled Apple, based in Springfield, Illinois, has been proudly serving high-quality teas, specialty coffees, and delicious cakes since 2004.</p>
<style>
.aboutBox {
max-width: 500px;
min-width: 100px;
background-color: lightgray;
}
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আসুন আমাদের কোডটি ভেঙে ফেলি এবং এটি কীভাবে কাজ করে তা নিয়ে আলোচনা করি। আমাদের HTML ফাইলে, আমরা
ট্যাগের মধ্যে পাঠ্যের একটি অনুচ্ছেদ নির্দিষ্ট করেছি যাতে আমাদের প্রথম উদাহরণের মতো একই পাঠ্য রয়েছে। পাঠ্যের এই অনুচ্ছেদের সাথে যুক্ত ক্লাসের নাম হল aboutBox .
আমাদের CSS ফাইলে, আমরা aboutBox এর সাথে যুক্ত তিনটি বৈশিষ্ট্য উল্লেখ করেছি ক্লাস।
সর্বাধিক-প্রস্থ বৈশিষ্ট্যটি 500px এ সেট করা হয়েছে, যার অর্থ বাক্সের সর্বাধিক প্রস্থ 500px। ন্যূনতম-প্রস্থের বৈশিষ্ট্যটি 100px-এ সেট করা হয়েছে, যার অর্থ বক্সটি কখনই 100px-এর চেয়ে সংকীর্ণ প্রদর্শিত হবে না, ব্যবহারকারী যে ডিভাইসে সাইটটি দেখছেন না কেন। ব্যাকগ্রাউন্ড-কালার প্রপার্টি লাইটগ্রেতে সেট করা হয়েছে, যা আমাদের বক্সের পটভূমির রঙ হালকা ধূসরে সেট করে।
ব্রাউজারের আকারের উপর নির্ভর করে এই বক্সের আকার পরিবর্তন হবে। সুতরাং, আপনি যদি ব্রাউজার উইন্ডোটি ছোট করেন, বাক্সের আকার সেই অনুযায়ী পরিবর্তিত হবে। যাইহোক, ব্রাউজার উইন্ডো যত বড়ই হোক না কেন,
ট্যাগের প্রস্থ কখনই 500px এর বেশি হবে না।
উপসংহার
CSS উচ্চতা এবং প্রস্থ বৈশিষ্ট্য আপনাকে একটি ওয়েব পৃষ্ঠায় একটি উপাদানের উচ্চতা এবং প্রস্থ নির্ধারণ করতে দেয়।
যাইহোক, এই বৈশিষ্ট্যগুলি একটি উপাদানের উচ্চতা এবং প্রস্থের জন্য একটি নির্দিষ্ট মান সেট করে। আপনি যদি ব্রাউজার উইন্ডোর আকারের উপর নির্ভর করে একটি বাক্সের আকার পরিবর্তন করতে চান তবে আপনি ন্যূনতম-উচ্চতা, সর্বনিম্ন-প্রস্থ, সর্বোচ্চ-উচ্চতা এবং সর্বাধিক-প্রস্থ বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন।
এই টিউটোরিয়ালটি উদাহরণের সাথে আলোচনা করা হয়েছে, CSS-এ উচ্চতা এবং প্রস্থের মূল বিষয়গুলি, কীভাবে উচ্চতা এবং প্রস্থের বৈশিষ্ট্যগুলি ব্যবহার করতে হয় এবং কীভাবে একটি ওয়েবে একটি উপাদানের আকার সেট করতে সংশ্লিষ্ট সর্বোচ্চ এবং সর্বনিম্ন উচ্চতা এবং প্রস্থ বৈশিষ্ট্যগুলি ব্যবহার করতে হয়। পৃষ্ঠা এখন আপনি একজন বিশেষজ্ঞের মতো উচ্চতা এবং প্রস্থ বৈশিষ্ট্যগুলি ব্যবহার শুরু করতে প্রস্তুত!
