CSS লাইন-উচ্চতা বৈশিষ্ট্য বিভিন্ন HTML উপাদানের লাইন উচ্চতা নির্ধারণ করে। এটি সাধারণত পাঠ্যের লাইনের মধ্যে দূরত্ব সেট করতে ব্যবহৃত হয়। কীওয়ার্ড, শতাংশ বা সংখ্যাসূচক মান ব্যবহার করে একটি লাইনের উচ্চতা সেট করা যেতে পারে।
CSS লাইন-উচ্চতা বৈশিষ্ট্য ডেভেলপারদের একটি ওয়েব পৃষ্ঠায় দুটি ইনলাইন উপাদানের মধ্যে স্থান নির্ধারণ করতে দেয়। বিকাশকারীরা প্রায়ই একটি ওয়েব পৃষ্ঠায় পাঠ্যের লাইনের মধ্যে দূরত্ব বাড়াতে বা কমাতে CSS লাইন-উচ্চতা বৈশিষ্ট্য ব্যবহার করে।
এই টিউটোরিয়ালটি আলোচনা করবে কিভাবে CSS লাইন-উচ্চতা বৈশিষ্ট্য ব্যবহার করতে হয়। আপনাকে শুরু করতে সাহায্য করার জন্য আমরা একটি উদাহরণ উল্লেখ করব। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি আপনার কোডে লাইন-উচ্চতার বৈশিষ্ট্য ব্যবহার করতে পারদর্শী হয়ে উঠবেন।
CSS লাইন-উচ্চতা
CSS লাইন-উচ্চতা বৈশিষ্ট্য একটি লাইন বাক্সের উচ্চতা সেট করে। লাইন বক্স হল সেই লাইন যা CSS এ একটি বক্স তৈরি করে। এই পদ্ধতিটি প্রায়ই পাঠ্যের লাইনের মধ্যে দূরত্ব সেট করতে ব্যবহৃত হয়।
লাইনের উচ্চতা সামঞ্জস্য করা আপনাকে একটি ওয়েব পৃষ্ঠায় পাঠ্যের লাইনের (বা অন্যান্য উপাদান) মধ্যে পরোক্ষভাবে ব্যবধান সামঞ্জস্য করতে দেয়। এটি অনেকটা মাইক্রোসফট ওয়ার্ডে ডবল স্পেস বা 1.15 স্পেসযুক্ত টেক্সট ফর্ম্যাট করার মতো।
CSS লাইন-উচ্চতা বৈশিষ্ট্যের জন্য সিনট্যাক্স নিম্নরূপ:
line-height: lineHeight;
"লাইন উচ্চতা" একটি দৈর্ঘ্যের মানকে বোঝায় যা একটি উপাদানের লাইনের উচ্চতা সেট করে।
লাইন-উচ্চতার বৈশিষ্ট্যের সাথে আপনি যে তিন ধরনের মান ব্যবহার করতে পারেন তা হল দৈর্ঘ্য, সংখ্যা এবং শতাংশ:
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
| মান | বিবরণ | উদাহরণ মান | এর ফলাফল উদাহরণ মান |
| দৈর্ঘ্য | পরিমাপের একটি নির্দিষ্ট একক (যেমন em, px, এবং cm) ব্যবহার করে লাইনের উচ্চতা সেট করে। | 10px, 15px, 20px | যদি আপনি 10px নির্দিষ্ট করেন, তাহলে আপনার লাইনের উচ্চতা হবে 10px। |
| নম্বর | রেখার উচ্চতা ফন্ট সাইজের একাধিক মাপের সমান হতে সেট করে। | 1, 1.8, 2 | যদি আপনার ফন্টের আকার 10px হয়, তাহলে আপনার লাইনের উচ্চতা হবে যথাক্রমে 10px, 18px এবং 20px। |
| শতাংশ | এলিমেন্টের ফন্ট সাইজের শতাংশ হিসাবে লাইনের উচ্চতা সেট করে। | 30%, 50%, 110% | যদি আপনার ফন্টের আকার 10px হয়, তাহলে আপনার লাইনের উচ্চতা হবে যথাক্রমে 3px, 5px এবং 11px। |
বিকল্পভাবে, আপনি "স্বাভাবিক" কীওয়ার্ড নির্দিষ্ট করতে পারেন। এই কীওয়ার্ডটি ব্রাউজার ডিফল্টের ব্যবহার নির্দিষ্ট করে। দর্শক কোন ব্রাউজার ব্যবহার করছে তার উপর নির্ভর করে এই মানটি সাধারণত 1.2 এর কাছাকাছি হয়।
আপনি যদি একটি বাক্সে লাইন-উচ্চতা বৈশিষ্ট্য প্রয়োগ করেন, তবে সেই বাক্সের সমস্ত পাঠ্য আপনার নির্দিষ্ট করা লাইনের উচ্চতা ব্যবহার করবে।
অ্যাক্সেসিবিলিটির উপর একটি নোট
লাইনের ব্যবধান পরিবর্তন করা লাইন-উচ্চতার বৈশিষ্ট্যের একটি সাধারণ ব্যবহার। এটি কারণ আপনি সর্বদা নিশ্চিত করতে চান যে লাইনগুলির মধ্যে পর্যাপ্ত স্থান রয়েছে। লাইনের মধ্যে পর্যাপ্ত স্থান না থাকলে, পাঠ্য পড়তে অসুবিধা হতে পারে।
যে টেক্সট পড়তে অসুবিধা হয় তাদের উপর বিশেষভাবে গুরুতর প্রভাব ফেলে যাদের দৃষ্টি প্রতিবন্ধকতা রয়েছে। আপনি একটি ওয়েবসাইট তৈরি করার সময় অ্যাক্সেসযোগ্যতা সবসময় বিবেচনা করা উচিত।
আপনি যখন CSS-এ একটি উপাদানের লাইনের উচ্চতা সেট করতে একটি সংখ্যা ব্যবহার করছেন, তখন আপনার 1.5-এর কম কোনো মান ব্যবহার করা উচিত নয়। এর কারণ হল লাইনের উচ্চতার জন্য 1.5-এর কম মানগুলি দৃষ্টি প্রতিবন্ধী পাঠকদের জন্য আপনার ওয়েবসাইট ব্যবহার করা আরও কঠিন করে তুলতে পারে৷
লাইন-উচ্চতা CSS উদাহরণ
ধরুন আমরা একটি স্থানীয় কুকিং ক্লাবের ওয়েবসাইটের জন্য একটি "আমাদের সম্পর্কে" পৃষ্ঠা ডিজাইন করছি। পৃষ্ঠাটিতে একটি শিরোনাম রয়েছে যার পরে একটি পাঠ্যের একটি অনুচ্ছেদ রয়েছে যা ক্লাবের একটি বর্ণনার রূপরেখা দেয়৷
আমরা আমাদের পাঠ্যকে সঠিকভাবে ফাঁক করতে চাই। সুতরাং, আমরা ওয়েব পৃষ্ঠায় টেক্সট অনুচ্ছেদের লাইন উচ্চতা 1.6rem সেট করার সিদ্ধান্ত নিই। আমরা এই কোড ব্যবহার করে তা করতে পারি:
<html>
<h2>About Us</h2>
<p>Fantastic Chefs, founded in 2007, is a cooking club local to Seattle, WA. Our cooking club meets on a weekly basis to share recipes, discuss cooking techniques, and make food together. Every Saturday afternoon, our members gather at our Seattle-based kitchen.</p>
<style>
p {
font-size: 16px;
line-height: 1.6rem;
}
আমাদের কোড ফিরে আসে:
আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।
আমাদের HTML ফাইলে, আমরা একটি
ট্যাগ ব্যবহার করে একটি "আমাদের সম্পর্কে" শিরোনাম সংজ্ঞায়িত করেছি। তারপরে, আমরা ফ্যান্টাস্টিক শেফের একটি বর্ণনা লিখেছিলাম এবং সেই বিবরণটিকে HTML
ট্যাগের মধ্যে সংযুক্ত করেছিলাম।
আমাদের CSS ফাইলে, আমরা একটি নিয়ম সংজ্ঞায়িত করেছি। আমাদের নিয়ম দুটি CSS বৈশিষ্ট্য ব্যবহার করে। আমরা সমস্ত
HTML ট্যাগের জন্য লাইনের উচ্চতা 1.6rem এবং ফন্টের আকার 16px এ সেট করেছি৷
আমরা লাইন-উচ্চতা বৈশিষ্ট্যের সাথে পরিমাপের "rem" ইউনিটটি রুট উপাদানের ফন্ট-আকারের সাথে সম্পর্কিত একটি লাইনের উচ্চতা সেট করে। "rem" এর অর্থ হল "মূল উপাদান।" সুতরাং, যেহেতু আমাদের ফন্টের আকার ছিল 16px, পাঠ্যের এই অনুচ্ছেদের জন্য আমাদের লাইনের উচ্চতা ছিল 25.6px (16px * 1.6)।
উপরের অনুচ্ছেদের পাঠ্যটি পর্যাপ্তভাবে ফাঁক করা হয়েছে এবং ওভারল্যাপ করে না।
আমরা উপরের উদাহরণে আমাদের
ট্যাগ উভয়ই প্রভাবিত হবে৷
৷উপসংহার
CSS লাইন-উচ্চতা বৈশিষ্ট্য একটি লাইন বাক্সের উচ্চতা সেট করে। সাধারণত, এই বৈশিষ্ট্যটি একটি অনুচ্ছেদ বা শিরোনামে পাঠ্যের লাইনের মধ্যে ব্যবধান সেট করতে ব্যবহৃত হয়। লাইন-উচ্চতা সাধারণ কীওয়ার্ড, শতাংশ, দৈর্ঘ্য বা একটি সংখ্যাসূচক মান ব্যবহার করে সেট করা যেতে পারে।
এই টিউটোরিয়ালে CSS লাইন-উচ্চতা বৈশিষ্ট্যের মৌলিক বিষয় এবং আপনি কীভাবে এটি আপনার কোডে ব্যবহার করতে পারেন তা নিয়ে আলোচনা করা হয়েছে। এখন আপনার কাছে একটি বিশেষজ্ঞের মতো CSS লাইন-উচ্চতা বৈশিষ্ট্য ব্যবহার শুরু করার জন্য প্রয়োজনীয় জ্ঞান রয়েছে!
আপনি কি ওয়েব ডেভেলপার হতে চাইছেন? সেরা শেখার সংস্থান এবং কোর্সগুলির বিষয়ে বিশেষজ্ঞ টিপস এবং নির্দেশনার জন্য আমাদের কীভাবে শিখবেন সিএসএস গাইড দেখুন৷
