css_part18
CSS দ্বারা Font Style তৈরী করা
Font এর Property গুলি দিয়ে ফন্টের family,
size, boldnessসহ বিভিন্ন Style নির্ধারণ করা হয়। HTML অংশে এর অধিকাংশ property
ও value নিয়ে আলোচনা করা
হয়েছে। তবে আবারও একটু আলোকপাত করা যাক।
Font Family নির্ধারণ
মুলত ৩ ধরণের Font Family তে Fontগুলি বিভক্ত।
1.
Serif - যেমন Time
New Roman বা Georgia ইত্যাদি। এই ফন্টগুলির প্রত্যেক কর্নারে একটি ছোট ত্রিভূজ থাকে।
Times
New Roman
Georgia
2.
Sans-serif - যেমন Arial,
Verdana ইত্যাদি। এই ফন্টগুলি সরাসরি লাইন বা কার্ভ দিয়ে
তৈরী। এগুলির কর্নারে কোন ত্রিভুজ বা রেখা নাই। এগুলি কম্পিউটার স্ত্রিনে বা ওয়েব
পেজে বেশী ব্যবহৃত হয়।
Arial
Verdana
Verdana
3.
Monospace -
যেমন Courier New, Lucida Console ইত্যাদি। এই ফন্টগুলির প্রত্যেকটি Width সমান এবং Character এর মাঝে স্পেসও সমান।
Courier New
Lucida Console
চলুন নিচের কোডিংসহ একটি প্রোগ্রাম তৈরী করে নেওয়া যাক। মনে রাখবেন Font-Family
প্রোপার্টিজ এর Value হিসাবে একধিক নাম ব্যবহার করার কারণে, Browser প্রথম Fontটি সার্পোট না করলে পরবর্তী Fontটি খুজবে। এক্ষেত্রে আরও একটি বিষয় মনে রাখবেন কোন Font এর নাম একাধিক Word নিয়ে গঠিত হলে সেটি ডাবল
কোটেশন চিহ্নের (‘‘ ’’) মধ্যে রাখবেন এবং একটি নাম থেকে অন্য নামের মধ্যে একটি কমা
চিহ্ন (,) দিয়ে পার্থক্য তৈরী করুন।
যেমন P { Font- Family: “Times New Roman”, Times, Scrif }
Program_CSS042
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<!DOCTYPE
html>
<html>
<head>
<title>CSS
Font Style properties</title>
<style>
p.serif{font-family:"Times
New Roman",Times,serif;}
p.sserif{font-family:Arial,Helvetica,sans-serif;}
p.mono{font-family:"Courier
New", "Lucida Console";}
</style>
</head>
<body>
<p
class="serif">This is a sample with Times New Roman
font.</p>
<p
class="sserif">This is a sample with Arial font.</p>
<p
class="mono">This is a sample with Courier New font.</p
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
Font Style নির্ধারণ
আমরা HTML অংশে Bold, Italic, Underline ইত্যাদি কিভাবে করতে হয় সে সম্বদ্ধে জেনেছি। Font Style অনেকটা একই কাজই করে থাকে। Font Style প্রোপার্টিতে সাধারণত ৩টি Value ব্যবহার করা হয়
যেমন Normal (ডিফল্ড), Italic (Italic) এবং oblique (Italic এর মত)
Program_CSS043
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<!DOCTYPE
html>
<html>
<head>
<title>CSS
Font Style properties</title>
<style>
p.normal
{font-style:normal;}
p.italic
{font-style:italic;}
p.oblique
{font-style:oblique;}
</style>
</head>
<body>
<p
class="normal">The Nova Computer, this is normal style.</p>
<p
class="italic">The Nova Computer, this is italic style.</p>
<p
class="oblique">The Nova Computer, this is oblique
style.</p> </body> </html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
Font Size নির্ধারণ
Font Size প্রোপার্টিজ দ্বারা ফন্টের সাইজ নির্ধারন করা হয়। এর Value গুলো হচ্ছে px(pixel), em (ই এম) ও % (percent),
এ বিষয়ে HTML অংশে বিসত্মারিত
ব্যাখ্যা দেওয়া আছে। তবে এখানেও সামান্য আলোকপাত করা হচ্ছে। ডিফল্ট Font
Size হচ্ছে 16px বা 1em বা 100% | এছাড়া Font Size এর জন্য হেডিং
এলিমেন্ট H1 থেকে H6 ব্যবহার করা হয়। হেডিংকেও কাস্টমাইজ করা যায়। নিচে সবগুলো Value ব্যবহার করে একটি প্রোগ্রাম তৈরী করা হয়েছে। লক্ষ করুন
Program_CSS044
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<!DOCTYPE
html>
<html>
<head>
<title>CSS
Font Size properties</title>
<style>
p.size
{font-size:40px;} /* 40px/16=2.5 time big*/
p.em
{font-size:2.5em;} /* 40px/16=2.5em */
p.persent{font-size:250%;}
/* 40px/16=250% */
</style>
</head>
<body>
Look!
This is normal Paragraph 100% or 16px or 1em
<p
class="size"> Stylish Paragraph 40px </p>
<p
class="em"> Stylish Paragraph 2.5em </p>
<p
class="persent"> Stylish Paragraph 250% </p>
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
এছাড়াও অন্য Value গুলো হচ্ছে xx-small,
x-small, small, Medium, large , x-large, xx- large, smaller ও larger
Font- Weight (গাঢ়ত্ত্ব) নির্ণয়
আমরা জানি Font কে Bold (গাঢ়) করা যায়। এছাড়াও Font-Weight প্রোপার্টি দ্বারা ভিন্ন ভিন্ন গাঢ়ত্ত্ব নির্ণয় করা যাবে। এজন্য Value
গুলো হচ্ছে bold, bolder, lighter এবং 100 থেকে 900 পর্যমত্ম। 400 size হচ্ছে ডিফল্ট বা Normal
size এবং 700 হচ্ছে bold এর সমান। তবে কম্পিউটারের মনিটরের ডিসপ্লে
ক্ষমতার উপর নির্ভর করে এটি প্রদর্শিত হয়। নিচের মত প্রোগ্রাম তৈরী করুন
Program_CSS045
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী করুন।
<!DOCTYPE
html>
<html>
<head>
<title>CSS
Font Style properties</title>
<style>
p.normal
{font-weight:normal;}
p.lighter
{font-weight:lighter;}
p.bolder
{font-weight:bolder;}
p.morebold
{font-weight:900;}
</style>
</head>
<body>
<p
class="normal">Nova Computer.</p>
<p
class="lighter">Nova Computer.</p>
<p
class="bolder">Nova Computer.</p>
<p
class="morebold">Nova Computer.</p>
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
Font Variant নির্ণয়
এটি দ্বারা টেক্সটকে Small-Cap করা যায়। অর্থ্যাৎ
সমসত্ম Font কে Capital letter ( uppercase) এ রুপামত্মরিত করা যায় । তবে আগে যদি বড় হাতের অক্ষর থাকে তবে এটি
অপেক্ষাকৃত বড় আকারে প্রদর্শিত হয় Font- varient প্রোপার্টির Value গুলো হচ্ছে normal
(ডিফল্ট) এবং small-cap. চলুন নিচের মত প্রোগ্রাম তৈরী করা যাক।
Program_CSS046
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<!DOCTYPE
html>
<html>
<head>
<title>CSS
Font Style properties</title>
<style>
p.smallcap
{font-variant:small-caps;}
</style>
</head>
<body>
this
is nova computer normal. <br />
This
is Nova Computer normal.
<p class="smallcap">this is nova computer
varient.<br />
This
is Nova Computer varient.</p>
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
The
writer of this book has told that he has written this book with the
concept of "teach yourself". On the other hand, Web Design is a thing which is
interesting to learn. He has also told that the book is full of fan and
enjoyment so that a person can learn Web Design by himself by playing with
the example projects of this book. Book's CD Link below...
RELATED POST LINKS BELOW ********************************************
Next_
