সিএসএস টিউটোরিয়ালঃ ১২তম পর্ব(টেক্সট এ্যালাইনমেন্ট)

0
391 বার দেখা হয়েছে।

সিএসএস ধারাবাহিক টিউটোরিয়ালের এই পর্বে আলোচনা করবো টেক্সট এ্যালাইনমেন্ট নিয়ে। তো চলুন…

Horizontal Text Alignment:

কোন প্যারাগ্রাফ বা লাইনে ডান থেকে বায়ে লিখাকে পদবিন্যাস বা এ্যালাইন করাই হছে হরিজন্টাল এ্যালাইনমেন্ট। পদবিন্যাস করতে text-align প্রোপার্টি এবং ভ্যালু হিসেবে left/right/center/justify ব্যবহার করতে হবে। কোন ইলিমেন্টে এর ফন্ট স্টাইল দিতে নিচের স্টাইলটি অ্যাপ্লাই করতে হবেঃ

Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন texthalign বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…

Vertical Text Alignment

কোন প্যারাগ্রাফ বা লাইনে উপর থেকে নিচে লিখাকে পদবিন্যাস বা এ্যালাইন করাই হছে ভার্টিক্যাল এ্যালাইনমেন্ট। পদবিন্যাস করতে text-align প্রোপার্টি এবং ভ্যালু হিসেবে baseline/ sub/ sup/ text-top/ middle/ text-bottom/ bottom/ percentege/ length ব্যবহার করতে হবে। কোন ইলিমেন্টে এর ফন্ট স্টাইল দিতে নিচের স্টাইলটি অ্যাপ্লাই করতে হবেঃ

Note: উপরের কোড টুকুর আউটপুট ব্রাউজার এ ঠিকমতো দেখায় কিনা সেটা প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু হুবহু নিজের হাতে লিখুন, ভুলেই কপি-পেস্ট করবেন না। ফাইলের নাম দিন textvalign বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। মনে রাখতে হবে, প্রতিটি HTML ডকুমেন্ট .html ফরমেটে (Save) সংরক্ষণ করতে হবে। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…

Note: Vertical Text Alignment এর পরিবর্তণ পেতে ভার্টিক্যালি কয়েকটি পারাগ্রাফ নিয়ে কাজ করতে হবে।

বুঝতে কোথাও সমস্যা হলে আমার ফেসবুক গ্রুপেপেজে অথবা ব্লগের জিজ্ঞাসা পাতা’য় জানাতে পারেন।  🙂

Series Navigation<< সিএসএস টিউটোরিয়ালঃ ১১তম পর্ব(লাইন হাইট এবং টেক্সট ইনডেন্ট)সিএসএস টিউটোরিয়ালঃ ১৩তম পর্ব(Ordered List) >>
Print Friendly, PDF & Email

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.