আপনি যখন একটি ওয়েব পৃষ্ঠার জন্য পাঠ্য ডিজাইন করছেন, আপনি পাঠ্যটিতে অলঙ্করণ যোগ করতে চাইতে পারেন। উদাহরণস্বরূপ, আপনি গুরুত্বপূর্ণ কাজের জন্য একটি আন্ডারলাইন বা পুরানো পাঠ্যের মাধ্যমে একটি লাইন যোগ করতে চাইতে পারেন।

সেখানেই CSS টেক্সট-ডেকোরেশন প্রপার্টি আসে। টেক্সট-ডেকোরেশন প্রোপার্টি আপনাকে আন্ডারলাইন, ওভারলাইন এবং লাইন যোগ করতে দেয় যা টেক্সট ব্লকের মাধ্যমে দেখা যায়।

এই টিউটোরিয়ালটি উদাহরণ সহ আলোচনা করবে, কিভাবে টেক্সট-ডেকোরেশন প্রপার্টি এবং এর তিনটি সাব-প্রপার্টি ব্যবহার করতে হয়, যাতে CSS-এ টেক্সটের একটি ব্লকে ডেকোরেশন যোগ করা যায়। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি পাঠ্য-সজ্জা বৈশিষ্ট্য ব্যবহার করে পাঠ্য সাজানোর ক্ষেত্রে একজন বিশেষজ্ঞ হয়ে উঠবেন।

CSS পাঠ্য সজ্জা

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

যখন পাঠ্য আন্ডারলাইন করা হয়, এটি ব্যবহারকারীকে নির্দেশ করে যে যা আন্ডারলাইন করা হয়েছে তা পড়ার যোগ্য, উদাহরণস্বরূপ। উপরন্তু, পাঠ্য সজ্জা একটি ওয়েব পৃষ্ঠায় একটি অ্যাক্সেসযোগ্য অভিজ্ঞতা ডিজাইন করার একটি গুরুত্বপূর্ণ অংশ৷

৷

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

CSS-এ, টেক্সট-ডেকোরেশন শর্টহ্যান্ড প্রোপার্টি আপনাকে টেক্সটে যোগ করা সাজসজ্জা নির্দিষ্ট করতে দেয়। এই সম্পত্তিটি অন্য তিনটি বৈশিষ্ট্যের সংক্ষিপ্ত বিবরণ, যা হল:

টেক্সট-ডেকোরেশন-লাইন (প্রয়োজনীয়)
টেক্সট-ডেকোরেশন-রঙ (ঐচ্ছিক)
টেক্সট-ডেকোরেশন-স্টাইল (ঐচ্ছিক)

আপনার কোডকে আরও দক্ষ করতে পাঠ্য-সজ্জা বৈশিষ্ট্য ব্যবহার করার সময় এই বৈশিষ্ট্যগুলি একত্রিত করা যেতে পারে। প্রতিটিকে পৃথকভাবে নির্দিষ্ট করার পরিবর্তে, আপনি একটি পাঠ্য সজ্জা শৈলী সংজ্ঞায়িত করতে নিম্নলিখিত সিনট্যাক্স ব্যবহার করতে পারেন:

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

text-decoration: line color style;

পাঠ্য-সজ্জা বৈশিষ্ট্যের শৈলীগুলি উপস্থিত হওয়া উচিত এমন কোনও নির্দিষ্ট ক্রম নেই।

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

CSS পাঠ্য সজ্জার উদাহরণ

স্থানীয় বেকারি যাদের জন্য আমরা একটি সাইট তৈরি করছি তারা প্রত্যেক পৃষ্ঠায় শিরোনাম হাইলাইট করতে বলেছে।

উদাহরণস্বরূপ, About-এ পৃষ্ঠা, শিরোনাম About Us শিরোনামের প্রতি ব্যবহারকারীর দৃষ্টি আকর্ষণ করার জন্য একটি আন্ডারলাইন থাকা উচিত। প্রতিটি শিরোনামে একটি হালকা নীল একক আন্ডারলাইন থাকা উচিত এবং প্রতিটি লাইন 2px চওড়া হওয়া উচিত। আমরা নিম্নলিখিত কোড ব্যবহার করে এই ধরনের একটি শিরোনাম তৈরি করতে পারি:

<html>

<h1>About Us</h1>

<style>

h1 {
	text-decoration: lightblue solid underline;
}

CSS টেক্সট ডেকোরেশন আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

আমাদের HTML কোডে, আমরা

ট্যাগ ব্যবহার করে একটি হেডার সংজ্ঞায়িত করেছি যা `About Us` পাঠ্য দেখায়। ওয়েব পেজে তারপর, আমাদের CSS কোডে, আমরা একটি নিয়ম তৈরি করেছি যা আমাদের ওয়েব পৃষ্ঠার সমস্ত

উপাদানের জন্য প্রযোজ্য। এই নিয়মটি একটি আন্ডারলাইন তৈরি করতে পাঠ্য-সজ্জা বৈশিষ্ট্য ব্যবহার করে যা:

হালকা নীল রঙে প্রদর্শিত হয় ( `lightblue` দ্বারা চিহ্নিত )

একটি একক লাইন আছে (`solid` দ্বারা চিহ্নিত )

আন্ডারলাইন স্টাইল ব্যবহার করে (`underline` দ্বারা চিহ্নিত )

এটি পাঠ্য-সজ্জা বৈশিষ্ট্য ব্যবহার করে তৈরি একটি আন্ডারলাইনের একটি সাধারণ উদাহরণ। এখন, টেক্সট-ডেকোরেশন প্রপার্টি তৈরি করে এমন প্রতিটি প্রোপার্টি অন্বেষণ করি।

টেক্সট ডেকোরেশন লাইন (টেক্সট-ডেকোরেশন-লাইন)

টেক্সট-ডেকোরেশন-লাইন প্রোপার্টি আপনাকে লাইনের ধরন সেট করতে দেয় যা টেক্সটে প্রদর্শিত হবে যেখানে প্রোপার্টি প্রয়োগ করা হবে। এই সম্পত্তি গ্রহণ করা মান হল:

আন্ডারলাইন:একটি লাইন তৈরি করে যা পাঠ্যের একটি ব্লকের নীচে প্রদর্শিত হয়।
ওভারলাইন:একটি লাইন তৈরি করে যা পাঠ্যের একটি ব্লকের উপরে প্রদর্শিত হয়।
লাইন-থ্রু:একটি স্ট্রাইক-থ্রু লাইন তৈরি করে যা পাঠ্যের একটি ব্লকের মাঝখানে প্রদর্শিত হয়।
ব্লিঙ্ক:যে টেক্সটে স্টাইলটি প্রয়োগ করা হয়েছে সেটিকে ব্লিঙ্ক করে (এই স্টাইলটি অবমূল্যায়িত করা হয়েছে)।

যদি এই সম্পত্তিটি অন্য কোন পাঠ্য সজ্জা ছাড়া ব্যবহার করা হয়, একটি কঠিন, একক কালো আন্ডারলাইন প্রদর্শিত হবে।

এই সম্পত্তি কিভাবে কাজ করে তা বোঝাতে বেকারির উদাহরণে ফিরে আসা যাক। ধরুন বেকারি, যাকে জেফারসনের ফ্যামিলি বেকারি বলা হয়, আমাদেরকে তাদের About Us পাঠ্যটি স্টাইল করতে বলেছে। পৃষ্ঠা তারা আমাদেরকে তাদের লেখার কিছু অংশ আন্ডারলাইন করতে বলেছে।

এই কাজটি সম্পন্ন করার জন্য আমরা টেক্সট-ডেকোরেশন-লাইন প্রপার্টি ব্যবহার করতে পারি। আমরা যে কোডটি ব্যবহার করব তা এখানে:

<html>

<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.

Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>

<style>

.underline {
	text-decoration-line: underline;
}

CSS টেক্সট ডেকোরেশন আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

আসুন আমাদের কোড ভাঙ্গা যাক। আমাদের HTML কোডে, আমরা

ট্যাগের মধ্যে টেক্সটের একটি অনুচ্ছেদ তৈরি করেছি।

এই অনুচ্ছেদের ভিতরে জেফারসনের পারিবারিক বেকারির একটি বিবরণ রয়েছে। এছাড়াও, দুটি পদ —most well-known for our bagels এবং come to Jeffersons ট্যাগের মধ্যে আবদ্ধ থাকে, যা অনুচ্ছেদের বাকি অংশ থেকে পাঠ্যকে আলাদা করতে ব্যবহৃত হয়।

আমাদের CSS কোডে, আমরা একটি নিয়ম সংজ্ঞায়িত করি যা underline ক্লাস সহ সমস্ত উপাদানের ক্ষেত্রে প্রযোজ্য . সুতরাং, আমাদের ক্ষেত্রে, আমাদের সমস্ত ট্যাগগুলি আমাদের সংজ্ঞায়িত স্টাইল ব্যবহার করে, কারণ প্রতিটি ট্যাগ ক্লাস underline-এও বরাদ্দ করা হয়। . আমরা যে নিয়মটি হাইলাইট করতে চেয়েছিলাম তাতে একটি একক কালো আন্ডারলাইন যোগ করতে টেক্সট-ডেকোরেশন-লাইন ব্যবহার করে সংজ্ঞায়িত করা হয়েছে।

টেক্সট ডেকোরেশন কালার (টেক্সট-ডেকোরেশন-রং)

টেক্সট-ডেকোরেশন-কালার প্রপার্টি আপনাকে একটি শৈলীতে প্রয়োগ করা টেক্সট ডেকোরেশনের রঙ নির্ধারণ করতে দেয়। ধরুন আমরা আমাদের শেষ উদাহরণে সংজ্ঞায়িত আন্ডারলাইনগুলিকে সবুজ রঙে দেখাতে চাই। আমরা নিম্নলিখিত শৈলী ব্যবহার করে এটি ঘটতে পারি:

<html>

<p>The Jefferson's Family Bakery, founded in 1899, is a family bakery that serves delicious baked goods to the people of Seattle, Washington. Our bakery is <span class="underline">most well-known for our bagels</span>, which have been reviewed highly by a number of local publications since we started selling them in 1950.

Today, Jeffersons employs ten people who work tirelessly to make the breads, rolls, and assorted baked goods enjoyed by our customers. If you're in the mood for a good bagel, bread, or baked cake, <span class="underline">come to Jeffersons</span>!</p>

<style>

.underline {
	text-decoration-line: underline;
	text-decoration-color: green;
}

CSS টেক্সট ডেকোরেশন আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

আমাদের CSS কোডে, আমরা একটি পাঠ্য-সজ্জা-রঙ শৈলীর নিয়ম যোগ করেছি যার মান green আছে . এটি টেক্সট-ডেকোরেশন-লাইন ব্যবহার করে সবুজে সংজ্ঞায়িত আন্ডারলাইনের রঙ সেট করে।

আমরা পাঠ্য-সজ্জা-লাইনের জন্য একটি মানও নির্দিষ্ট করেছি, যা আমাদের লাইন শৈলী তৈরি করতে প্রয়োজনীয়।

টেক্সট ডেকোরেশন স্টাইল (টেক্সট-ডেকোরেশন-স্টাইল)

টেক্সট-ডেকোরেশন-স্টাইল প্রপার্টি আপনাকে সেই স্টাইল সেট করতে দেয় যেখানে টেক্সট ডেকোরেশন টেক্সট ব্লকে প্রদর্শিত হবে। পাঠ্য-সজ্জা-শৈলী সম্পত্তি নিম্নলিখিত মানগুলির যে কোনো একটি গ্রহণ করে:

কঠিন:একটি একক লাইন তৈরি করে।
ডবল:একটি ডবল লাইন তৈরি করে।
ড্যাশড:একটি ড্যাশড লাইন তৈরি করে।
ডটেড:একটি ডটেড লাইন তৈরি করে।
তরঙ্গায়িত:একটি তরঙ্গায়িত লাইন তৈরি করে।

বেকারি উদাহরণে ফিরে আসা যাক। ধরুন বেকারি আমাদের About the Jeffersons শিরোনামে একটি বিন্দুযুক্ত আন্ডারলাইন যোগ করতে বলেছে। About Us-এ পৃষ্ঠা এই আন্ডারলাইনটি হালকা নীল রঙে প্রদর্শিত হওয়া উচিত এবং ডটেড শৈলী ব্যবহার করা উচিত। আমরা নিম্নলিখিত কোড ব্যবহার করে এই আন্ডারলাইন তৈরি করতে পারি:

<html>

<h2>About the Jeffersons</h2>

<style>

h2 {
	text-decoration-line: underline;
	text-decoration-color: lightblue;
	text-decoration-style: dotted;
}

CSS টেক্সট ডেকোরেশন আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

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

একটি হাইপারলিঙ্ক থেকে আন্ডারলাইন অপসারণ

টেক্সট-সজ্জা বৈশিষ্ট্য সাধারণত একটি ঐতিহ্যগত HTML লিঙ্কে প্রদর্শিত আন্ডারলাইনগুলি সরাতে ব্যবহৃত হয়। কারণ টেক্সট-ডেকোরেশন প্রপার্টি none মান গ্রহণ করে , যা একটি উপাদানে প্রয়োগ করা ডিফল্ট পাঠ্য শৈলীগুলি সরাতে ব্যবহৃত হয়।

ডিফল্টরূপে, আপনি যখন ট্যাগ ব্যবহার করে একটি লিঙ্ক সংজ্ঞায়িত করবেন, তখন একটি আন্ডারলাইন প্রদর্শিত হবে। যাইহোক, সমস্ত ওয়েবসাইট তাদের লিঙ্কের নীচে আন্ডারলাইন দেখাতে চায় না।

ধরুন জেফারসনের পারিবারিক বেকারি ওয়েবসাইটে Contact Us লেবেল সহ একটি হাইপারলিঙ্ক রয়েছে , যা /contact.html পৃষ্ঠার সাথে লিঙ্ক করে তাদের সাইটে। এখানে হাইপারলিংকের জন্য HTML কোড আছে:

<a href="/contact.html">Contact Us</a>

যখন আমরা এই উপাদানটি রেন্ডার করি, নিম্নলিখিত প্রতিক্রিয়াটি ফিরে আসে: আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

আপনি দেখতে পাচ্ছেন, লিঙ্কটি নীল এবং একটি আন্ডারলাইন সহ প্রদর্শিত হবে। যদি আমরা এই আন্ডারলাইনটি সরাতে চাই, তাহলে আমরা নিম্নলিখিত কোডটি ব্যবহার করতে পারি:

<html>

<a href="/contact.html">Contact Us</a>

<style>

a {
	text-decoration: none;
}

আমাদের HTML/CSS কোডের আউটপুট দেখতে উপরের কোড এডিটরে বোতাম।

আপনি দেখতে পাচ্ছেন, আমাদের দ্বিতীয় উদাহরণে আমাদের লিঙ্কের নীচের আন্ডারলাইনগুলি সরানো হয়েছে। আমাদের CSS কোডে, আমরা পাঠ্য-সজ্জা ব্যবহার করেছি:কোনো নিয়ম নেই এবং প্রতিটি ট্যাগে এটি প্রয়োগ করেছি। এটি যে উপাদানগুলিতে এটি প্রয়োগ করা হয়েছে তা থেকে যে কোনও পাঠ্য সজ্জাকে সরিয়ে দেয়, যা এই ক্ষেত্রে প্রতিটি ট্যাগ।

উপসংহার

টেক্সট ডেকোরেশন হল এমন একটি উপায় যেখানে আপনি একটি ওয়েব পেজে নির্দিষ্ট টেক্সটের প্রতি দৃষ্টি আকর্ষণ করতে পারেন এবং টেক্সটটিকে আরও নান্দনিকভাবে আনন্দদায়ক ভাবে দেখাতে পারেন।

CSS টেক্সট-ডেকোরেশন প্রপার্টি, এবং এর সাথে সম্পর্কিত বৈশিষ্ট্য, আপনাকে ওয়েব পেজে টেক্সট ব্লক দ্বারা ব্যবহৃত সাজসজ্জাকে সংজ্ঞায়িত করতে দেয়।

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