ওয়েব স্কুল বিডি : সুপ্রিয় শিক্ষার্থী বন্ধুরা, শুভেচ্ছা নিয়ো। আমরা গত পর্বে ব্যাকগ্রাউন্ড নিয়ে আলোচনা করেছিলাম। আজ তোমাদের টেক্সট, টেক্সট কালার, টেক্সট ডেকরেশন, টেক্সট ট্রান্সফরমেশন নিয়ে আলোচনা করা হলো :
টেক্সট (Text) :
টেক্সট কালার (Text Color):
টেক্সট ডেকরেশন (Text Decoration) :
কোন টেক্সট এর সাথে HTML এর ট্যাগের মাধ্যমে লিংক যুক্ত করলে টেক্সটটির নিচে স্ট্রেট লাইন আসে। উক্ত স্ট্রেট লাইন স্থানান্তরিত করার জন্য, টেক্সট ডেকরেশন ব্যবহার করা হয়। স্ট্রেট লাইনকে টেক্সট এর উপরে স্থান দেয়ার জন্য Declaration করতে হবে text-decoration:overline;। স্ট্রেট লাইনকে টেক্সট এর মধ্যস্থানে স্থান দেয়ার জন্য Declaration করতে হবে text-decoration:line-through; । স্ট্রেট লাইনকে টেক্সট এর নিচে স্থান দেয়ার জন্য Declaration করতে হবে text-decoration:underline; টেক্সট কে পর্যয়ক্রমিকভাবে দৃশ্যমান এবং অদৃশ্য করার জন্য Declaration করতে হবে text-decoration:blink; স্ট্রেট লাইনকে সম্পূর্ণরূপে দূর করার জন্য Declaration করতে হবে text-decoration:none;।
টেক্সট ট্রান্সফরমেশন (Text Transformation) :
টেক্সট অন্তর্ভূক্ত অক্ষর সমূহকে বড় হাতের বা ছোট হাতের অক্ষরে অথবা প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের অক্ষরে রূপান্তরের জন্য টেক্সট ট্রান্সফরমেশন ব্যবহার করা হয়। টেক্সট এর অন্তর্ভূক্ত সকল অক্ষরকে বড় হাতের অক্ষরে রূপান্তরের জন্য Declaration করতে হবে text-transform:uppercase; ছোট হাতের অক্ষরে রূপান্তরের জন্য Declaration করতে হবে text-transform:lowercase; প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের অক্ষরে রূপান্তরের জন্য Declaration করতে হবে text-transform:capitalize; ।
টেক্সট (Text) :
ওয়েব সাইটের প্রধান উপাদান হচ্ছে টেক্সট। সৌন্দর্য বৃদ্ধির জন্য এবং বিশেষ কিছু সুবিধা পাবার জন্য css এর মাধ্যমে টেক্সট এর স্টাইল তৈরি করা হয়। টেক্সট এর স্টাইল তৈরির জন্য বেশ কয়েকটি বিষয় Declaration এ উল্লেখ করতে হয়। এগুলো হচ্ছে
- টেক্সট কালার (Text Color)
- টেক্সট এলাইনমেন্ট (Text Alignment)
- টেক্সট ডেকরেশন (Text Decoration)
- টেক্সট ট্রান্সফরমেশন (Text Transformation)
আমরা সাধারণত HTML এর মাধ্যমে টেক্সট ব্যবহারের জন্য <P>, <h1>,<h2>,<a> সহ আরো কিছু ট্যাগ ব্যবহার করি। এসকল টেক্সট এর কালার নির্ধারণের জন্য Declaration করতে হবে p { color: #FC9 } বা এর অনুরূপ। p এর স্থানে অন্যান্য ট্যাগের ক্ষেত্রে h1, h2 , a, body, অথবা কোন ট্যাগের id বা class বসতে পারে। টেক্সট এর কালার নির্ধারণের জন্য তিন ধরণের Declaration হতে পারে। যেমন
p { color: #FC9}
p {color:blue;}
p {color:rgb(255,0,0);}
টেক্সট এলাইনমেন্ট (Text Alignment):
ওয়েব পেজে টেক্সটকে সাজানোর জন্য টেক্সট এলাইনমেন্ট ব্যবহার করা হয়। টেক্সটকে পেজের বাম পাশে রাখার জন্য Declaration করতে হবে text-align:left; অনুরূপভাবে ডান পাশে রাখার জন্য Declaration করতে হবে text-align:right; মধ্যস্থানে রাখার জন্য Declaration করতে হবে text-align:center; । যদি টেক্সট এর প্রতিটা লাইন একই আকারে সাজাতে চাই তাহলে Declaration করতে হবে text-align:justify ।p {color:blue;}
p {color:rgb(255,0,0);}
টেক্সট ডেকরেশন (Text Decoration) :
কোন টেক্সট এর সাথে HTML এর ট্যাগের মাধ্যমে লিংক যুক্ত করলে টেক্সটটির নিচে স্ট্রেট লাইন আসে। উক্ত স্ট্রেট লাইন স্থানান্তরিত করার জন্য, টেক্সট ডেকরেশন ব্যবহার করা হয়। স্ট্রেট লাইনকে টেক্সট এর উপরে স্থান দেয়ার জন্য Declaration করতে হবে text-decoration:overline;। স্ট্রেট লাইনকে টেক্সট এর মধ্যস্থানে স্থান দেয়ার জন্য Declaration করতে হবে text-decoration:line-through; । স্ট্রেট লাইনকে টেক্সট এর নিচে স্থান দেয়ার জন্য Declaration করতে হবে text-decoration:underline; টেক্সট কে পর্যয়ক্রমিকভাবে দৃশ্যমান এবং অদৃশ্য করার জন্য Declaration করতে হবে text-decoration:blink; স্ট্রেট লাইনকে সম্পূর্ণরূপে দূর করার জন্য Declaration করতে হবে text-decoration:none;।
টেক্সট ট্রান্সফরমেশন (Text Transformation) :
টেক্সট অন্তর্ভূক্ত অক্ষর সমূহকে বড় হাতের বা ছোট হাতের অক্ষরে অথবা প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের অক্ষরে রূপান্তরের জন্য টেক্সট ট্রান্সফরমেশন ব্যবহার করা হয়। টেক্সট এর অন্তর্ভূক্ত সকল অক্ষরকে বড় হাতের অক্ষরে রূপান্তরের জন্য Declaration করতে হবে text-transform:uppercase; ছোট হাতের অক্ষরে রূপান্তরের জন্য Declaration করতে হবে text-transform:lowercase; প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের অক্ষরে রূপান্তরের জন্য Declaration করতে হবে text-transform:capitalize; ।
অনুশীলন প্রজেক্ট:
<html>
<head>
<title> www.webschoolbd.com</title>
<style>
body{background:#090}
h1{
color:#C00;
text-align:center;
text-decoration:overline;
}
p{
color:blue;
text-align:left;
text-decoration:line-through;
}
#right{
color:black;
text-align:right;
text-decoration:underline;
text-transform:uppercase;
}
h6 {
text-decoration:blink;
text-transform:lowercase;
}
.mar{
color:rgb(150,0,0);
font-size:25px;
text-decoration:none
text-transform:capitalize;
}
</style>
</head>
<body >
<h1>www.webschoolbd</h1>
<p>
বাংলাদেশের প্রথম অনলাইন ভিত্তিক ট্রেনিং সেন্টার <br />
বাংলাদেশের প্রথম অনলাইন ভিত্তিক ট্রেনিং সেন্টার <br />
বাংলাদেশের প্রথম অনলাইন ভিত্তিক ট্রেনিং সেন্টার <br />
</p>
<h6>This is an example of blink</h6>
<p id="right">
বাংলাদেশের প্রথম অনলাইন ভিত্তিক <br />ট্রেনিং সেন্টার <br />
বাংলাদেশের প্রথম অনলাইন ভিত্তিক<br />ট্রেনিং সেন্টার </p>
<marquee>
<p class="mar"> 24 / 7 Support</p>
</marquee>
</body>
</html>
<head>
<title> www.webschoolbd.com</title>
<style>
body{background:#090}
h1{
color:#C00;
text-align:center;
text-decoration:overline;
}
p{
color:blue;
text-align:left;
text-decoration:line-through;
}
#right{
color:black;
text-align:right;
text-decoration:underline;
text-transform:uppercase;
}
h6 {
text-decoration:blink;
text-transform:lowercase;
}
.mar{
color:rgb(150,0,0);
font-size:25px;
text-decoration:none
text-transform:capitalize;
}
</style>
</head>
<body >
<h1>www.webschoolbd</h1>
<p>
বাংলাদেশের প্রথম অনলাইন ভিত্তিক ট্রেনিং সেন্টার <br />
বাংলাদেশের প্রথম অনলাইন ভিত্তিক ট্রেনিং সেন্টার <br />
বাংলাদেশের প্রথম অনলাইন ভিত্তিক ট্রেনিং সেন্টার <br />
</p>
<h6>This is an example of blink</h6>
<p id="right">
বাংলাদেশের প্রথম অনলাইন ভিত্তিক <br />ট্রেনিং সেন্টার <br />
বাংলাদেশের প্রথম অনলাইন ভিত্তিক<br />ট্রেনিং সেন্টার </p>
<marquee>
<p class="mar"> 24 / 7 Support</p>
</marquee>
</body>
</html>
Tags
CSS