সিএসএস টেক্সট - Css Text



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


টেক্সট প্রপার্টি

টেক্সটের কাজ করার জন্য সিএসএস এর যে প্রপার্টিগুলো রয়েছে সেগুলো হল text-color, text-decoration, text-alignment, text-Transformation ইত্যাদি।


টেক্সট কালার

সিএসএস এর মাধ্যমে কোন টেক্সটের রং বা color নির্ধারণ করতে text-color প্রপার্টি ব্যবহার করা হয়।
সিএসএস ৩ ভাবে রং নির্ধারণ করা যায়। সেগুলো হল -
১) সরাসরি রঙের নাম উল্লেখ করে, যেমন - color:green;
২) RGB মান ব্যবহার করে, যেমন - rgb(00,55,99);
৩) হেক্সাডেসিম্যাল পদ্ধতিতে, যেমন - color:#005599;

নীচে একটি উদাহরণ দেখুন -

উদাহরণ দেখুন

h1 {color:blue;}
h2 {color:#0000ff;}
p {color:rgb(0,0,255);}




text-alignment

সিএসএস এর মাধ্যমে কোন টেক্সটের আনুভুমিক অবস্থান নির্ধারণ করার জন্য text-align প্রপার্টি ব্যবহার করা হয়।

টেক্সটর অবস্থান ডানে, বামে বা মাঝে নির্ধারণ করা যায়। text-align এর মান হতে পারে left, right, center বা justify

নীচে একটি উদাহরণ দেখুন -

উদাহরণ দেখুন

h1 {text-align:left;}
h2 {text-align:right;}
p {text-align:justify;}




text-transformation

কোন টেক্সট uppercase বা lowercase এর হবে কি না তা নির্ধারণ করা হয় সিএসএস text-transform প্রপার্টির মাধ্যমে।

সিএসএস text-decoration প্রপার্টির মান বা value হতে পারে uppercase বা lowercase. এছাড়াও কোন প্যারাগ্রাফ বা হেডিং এর প্রতিটি শব্দ বা word কে capitalize করতে সিএসএস text decoration প্রপার্টির মান বা value হবে capitalize.

নীচে text-transform প্রপার্টি ব্যবহার করার পদ্ধতি দেয়া হল -

উদাহরণ দেখুন

h1 {text-transform:uppercase;}
h2 {text-transform:lowercase;}
p {text-transform:capitalize;}




text-decoration

কোন টেক্সটের ডেকোরেসন নির্ধারণ করতে সিএসএস এর text-decoration প্রপার্টি ব্যবহার করা হয়। হাইপারলিংকের আন্ডারলাইন দূর করতে text-decoration প্রপার্টি ব্যবহার করা হয়।

text-decoration এর মান হতে পারে overline, line-through, underline, blink ইত্যাদি।

কোন টেক্সট এ text-decoration প্রপার্টি ব্যবহার করার নিয়ম নীচে দেখুন -

উদাহরণ দেখুন

h1{text-decoration:underline;}




সব টেক্সট প্রপার্টি

প্রপার্টি বর্ণনা
color কোন টেক্সটের রং নির্ধারণ করে।
direction কোন লেখা বা text এর writing direction বা দিক নির্ধারণ করে।
letter-spacing কোন টেক্সটে অবস্থিত বর্ণ বা letter সমূহের মাঝে ফাঁকা স্থান নির্ধারণ করে।
line-height টেক্সটের line height নির্ধারণ করে।
text-align টেক্সটের horizontal বা আনুভুমিক অবস্থান নির্ধারণ করে।
text-decoration টেক্সটে নানা রকম decoration নির্ধারণ করে।
text-indent কোন টেক্সট ব্লক এর প্রথম লাইনের indentation নির্ধারণ করে।
text-shadow টেক্সটে shadow effect তৈরি করে।
text-transform টেক্সটের capitalization অর্থাৎ লেখা ছোট হাতের না বড় হাতের হবে তা নির্ধারণ করা হয়।
unicode-bidi  
vertical-align কোন এলিমেন্টের vertical বা উলম্ব অবস্থান নির্ধারণ করে।
white-space কোন এলিমেন্টের মাঝে white-space নির্ধারণ করে।
word-spacing কোন টেক্সটে অবস্থিত word বা শব্দ সমূহের মাঝে ফাঁকা স্থান নির্ধারণ করে।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.