সিএসএস টেক্সক্ট টিউটোরিয়াল (CSS Text Tutorial in Bangla)

 

টেক্সট এ শুধু ফন্ট দিয়ে সব রকম সৌন্দর্য আনা যায়না। তাই সিএসএস এ আরো বেশ কিছু প্রোপার্টিজ আছে যেগুলি দিয়ে টেক্সটকে নানানভাবে সাজানো যায়।

text-align এবং text-transform প্রোপার্টির কি কি মান হতে পারে এগুলি আগেই আলোচনা হয়েছে।

text-indent প্রোপার্টি দিয়ে একটা এলিমেন্টে যে টেক্সট আছে সেটার প্রথম লাইনকে আড়াআড়ি ভাবে সরিয়ে দেয়া যায়। পিক্সেল কিংবা শতকরা মান দিতে পারেন। যেমন

1.text-indent : 200px;

 

** মাইনাস (-) মানও দেয়া যায়। মাইনাস দিলে বাম দিকে সরতে থাকবে।

 

** মুলত এটার সবচেয়ে বেশি ব্যবহার হয় যখন a এলিমেন্টের ভিতরের লেখাকে সরানোর জন্য। কারন লেখা সরিয়ে সাধারনত ছবি দেয়া হয়। যেহেতু a এর start এবং end ট্যাগেরে মধ্যে কোন লেখা থাকতেই হয় তাই text-indent এর মান অনেক বেশি দিয়ে উইন্ডো থেকে লুকানোর কাজে ব্যবহৃত হয়।

 

line-height দিয়ে ঠিক করা যায় যে লাইনগুলির উচ্চতা কেমন হবে।

1.line-height: 2;

2./* or */

3.line-height:20px;

20px দিয়ে তো বোঝাই যাচ্ছে লাইনের উচ্চতা ২০ পিক্সেল করে হবে। line-height : 2 দিয়ে বোঝায় টেক্সটের উচ্চতার ২ গুন বেশি হবে এক একটা লাইনের উচ্চতা।

 

** % দিয়েও এর মান দেয়া যায়। বাই ডিফল্ট এটার মান normal থাকে।

 

letter-spacing দিয়ে অক্ষরের মাঝে দুরত্ব বাড়ানো যায়।

1.letter-spacing : 20px;

 

বাই ডিফল্ট এটারও মান normal থাকে।

 

word-spacing দিয়ে letter-spacing এর মতই কাজ হবে শুধু এটা দিয়ে শব্দের মধ্যে দুরত্ব কমানো বাড়ানো যায়।

1.word-spacing: 20px;

ব্যাখ্যা letter-spacing এর মত।

 

text-decoration একটা কাজের প্রোপার্টি, এটা দিয়ে টেক্সট এর নিচে রেখা টেনে দেয়া, মাঝ দিয়ে রেখা টানা ইত্যাদি করা হয়।

এর মান বাই ডিফল্ট none থাকে। এটা থাকলে নরমাল থাকবে।

মান underline দিলে ঐ এলিমেন্টের সব লেখার নিচে রেখা দেখাবে।

overline দিলে উপরে রেখাটি দেখাবে

line-through দিলে মাঝ দিয়ে রেখাটি চলে যাবে

1.text-decoration : line-through;

 

** এনকর ট্যাগে (<a></a>)  বাই ডিফল্ট একটা রেখা থাকে। দেখবেন সব লিংকের নিচে একটা রেখা। এটা সরানোর জন্য text-decoration:none; বহুলভাবে ব্যবহৃত হয়।

 

white-space দিয়ে লেখা কি মুড়িয়ে নাকি হবহু যেমন ডকুমেন্টে টাইপ করা হয়েছে তেমন দেখাবে এসব ঠিক করা যায়।

1.white-space : nowrap;

2./* or */

3.white-space : pre;

বাই ডিফল্ট এটার মান normal থাকে।

nowrap থাকলে লেখা এক লাইনে দেখাবে আর pre দিলে হবহু যেমন ডকুমেন্টে লেখা হয়েছে তেমনি দেখাবে।

 

সিএসএস ৩ text-shadow নামে একটা নতুন প্রোপার্টি এসেছে এটা দিয়ে টেক্সট এ বিশেষ ইফেক্ট দেয়া যায়।

1.text-shadow: 2px 3px 3px #555;

 

প্রথম ৩ টি পিক্সেল মান হচ্ছে যথাক্রমে আড়াআড়িভাবে ছায়া, লম্বালম্বিভাবে ছায়া কতটুকু হবে এবং blur . সবশেষে #555 দিয়ে রং দিয়েছি আপনি ইচ্ছেমত রং দিতে পারেন।

 

সিএসএস ৩ আরেকটি প্রোপার্টি হল text-overflow. যখন কন্টেইনারের (যেখানে টেক্সটগুলি আছে) আয়তনের চেয়ে লেখা বেশি হয়ে যাবে। এটা তখনি কাজ করে যদি কন্টেইনারের মধ্যে overflow প্রোপার্টির মান hidden, auto বা scroll থাকে সাথে সাথে white-space এর মান nowrap থাকে।

1.p{

2.overflow:hidden;

3.white-space:nowrap;

4.text-overflow: ellipsis;

5.}

ellipsis দেয়ার কারনে অতিরিক্ত টেক্সট আর না দেখিয়ে ডট ডট (...) চিহ্ন দেখাবে। আপনি যদি ডট চিহ্ন না দেখিয়ে অন্য চিহ্ন দিতে চান তাহলে text-overflow: "--" এভাবে দিতে হবে মানে কোটেশনের ভিতর চিহ্নটি।

মান যদি clip দেন তাহলে বাকি লেখা দেখাবেনা এবং কোন ডট চিহ্নও দেখাবেনা।

এগুলিই বেশি ব্যবহৃত হয়। এগুলি ছাড়া সিএসএস ৩ আরো কিছু প্রোপার্টিজ আছে যেমন

text-wrap, word-wrap, text-emphasis, text-outline ইত্যাদি নিয়ে পরে বিস্তারিত দেয়া হবে।