Rasel khan web programming

সোমবার, ৩০ এপ্রিল, ২০১২

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


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

লেখক  রাসেল খান  
সিএসএস টেক্সট এর মাধ্যমে আপনি  টেক্সট এর spacing, decoration,  এবং alignment নিয়ন্ত্রন করতে পারেন

টেক্সট Decoration:

টেক্সট Decoration এর মাধ্যমে আমরা লিংক এর underline দুর করতে পারি তাছাড়া line-through,
overline এবং underline  ইত্যাদি টেক্সট এ ব্যব্হার করতে পারি
1.h4{ text-decoration: line-through; }
2.h5{ text-decoration: overline; }
3.h6{ text-decoration: underline; }
4.a { text-decoration: none; }
প্রদর্শন:

This header has a line through the middle

This header has an overline
This header has an underline
This is a link without an underline - See our CSS Link tutorial for more information

টেক্সট Indent:

সিএসএস text-indent কে আমরা এইচটিএমএল (<pre>)  ট্যাগ পরিবর্তে ব্যবহার করতে পারিvalues
or percentages ব্যবহার করে আমরা text-indent নির্দিষ্ট করিtext indent মানে লেখাটি বাম দিকে থেকে কতটুকু
ছাড় দিয়ে শুরু হবে
1.p { text-indent: 20px; }
2.h5 { text-indent: 30%; }
প্রদর্শন:
This is a paragraph that uses a text indentation with the value of 20px. This is the recommended usage of text indentation.
This is a header that uses a text indentation of 30%. Webcoachbd does not recommend indenting your text with percentages.

টেক্সট Align:

সাধারনত  website default হিসাবে টেক্সট Align: left নিবার্চিত থাকেটেক্সট Align attribute এর সাহায্যে
টেক্সট  এর বিভিন্ন Alignment দেয়া যায়
1.p { text-align: right; }
2.h5{ text-align: justify; }
প্রদর্শন:
This paragraph is aligned to the right side of the HTML element. If you ever find a use
for using right justify, please let us know. Just kidding, we don't really want to know.
This header is justified. We recommend that you either align your text to the left, which is the
default setting, or justify your text. But feel free to experiment with all the available
alignment options that are at your disposal.

টেক্সট Transform:

টেক্সট Transform এর মাধ্যমে টেক্সট এর দ্রুত capitalize করা যায়
1.p { text-transform: capitalize; }
2.h5{ text-transform: uppercase; }
3.h6{ text-transform: lowercase; }
প্রদর্শন:
Hi, I am happy to see you.

Hi, I am happy to see you.

Hi, I am happy to see you.

সিএসএস White Space:

white-space attribute এর মাধ্যমে লেখাটি  এক লাইনে চলতে থাকবে যতক্ষন না আপনি break <br />
ট্যাগ না দিবেন
1.p { white-space: nowrap; }
প্রদর্শন:
This paragraph will not wrap until I tell it to with a break tag.
</br> ট্যাগ দিলে তারপর থেকে নিচে লাইন যাবে

সিএসএস Word Spacing:

সিএসএস Word Spacing attribute এর মাধ্যমে পাশাপাশি শব্দগলোর মধ্যে gap এর পরিমান নির্ধারন করে দেয়া যায়
1.p { word-spacing: 10px; }
প্রদর্শন:
This paragraph has a word-spacing value of 10px.

সিএসএস Letter Spacing:

সিএসএস letter-spacing attribute এর মাধ্যমে শব্দের মধ্যে বর্ণ গুলোর মধ্যে gap এর পরিমান নির্ধারন করে
দেয়া যায়
1.p { letter-spacing: 3px; }
প্রদর্শন:
This is a paragraph with letter-spacing of 3px.

কোন মন্তব্য নেই:

একটি মন্তব্য পোস্ট করুন