টিউটোরিয়াল

•.¸¸.•´¨`সহজ বাংলায় টিউটোরিয়াল নিয়ে CSS ( Cascading Style Sheets) শিখুন-৭.¸¸.•´¨ `•.¸¸.•´¨`

লিখেছেন টিজে

06/08/2012

863

বিসমিল্লাহির রাহমানির রাহিম

আপনারা সকলে কেমন আছেন । নিশ্চয় ভালো । আজ অনেক দিন পর হাজির হলাম আপনাদের সামনে আপনাদের অতি পছন্দের টিউটোরিয়াল সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন হাজির হলাম । আসুন আমরা নতুন টিউন দেখার আগে অবশ্যই আগের টিউটোরিয়াল গুলো জ্বালাই করে নেই

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন (১-৩)

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব ৪

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৫

সহজ বাংলায় সি এস এস/ C S S(CASCADING STYLE SHEET ) শিখুন : পর্ব -৬

CSS Styling Links

এটি সম্পর্কে আর কি বলবো । এটি দ্বারা আপনি সি এস এস এর যে কোন সম্পত্তি যেমন রঙ, ফন্ট পরিবার, পটভূমি, ইত্যাদি তে স্টাইল করা যায় ।

লিংকের চারটি ভিন্ন ভিন্ন অবস্থান আছে । সেগুলো হচ্ছে ঃ

LINK : এটি একটি সাধারন লিঙ্ক । যেটি এখন ও ব্যবহার হয় নি ।মানে লিংক প্রথমবার ব্যবহার না করা পর্যন্ত যেভাবে প্রদর্শিত হয় ।

VISITED :এটি হচ্ছে পরিদর্শন লিংক । অর্থ্যাৎ এটি এমন লিংক যেটি এক বা একাধিক বার ব্যবহার হয়েছে ।

HOVER :এটি এমন একটি লিংক যেটির উপর মাউস রাখলে ভিজুয়েল ইফেক্ট দেখা দিবে ।
ACTIVE : এটি একটি সচল লিংক । অর্থ্যাৎ লিংকের উপর মাউস দ্বারা ক্লিক করলে লিংকটি যেভাবে দেখাবে তাকে সক্রিয় লিংক বলে ।

তাহলে আসুন আমরা উদাহরণের মাধ্যমে দেখি কি করে একই সাথে চারটি পার্টের ব্যবহার করতে পারিঃ

তাহলে চলুন এই বার উদাহরণ দেখা যাক।

♦নোটপ্যাড খুলুন

♦ নিচের মত করে কোড লিখুন

a:link {color:#C0C0C0;} /* unvisited link */
a:visited {color:#000000 ;} /* visited link */
a:hover {color:339966;} /* mouse over link */
a:active {color:#FF9966;} /* selected link */

body{background:#0000FF}

p {font-size:200px;}

p {font-size:100px;}

</style>
<head>

<body>

<p style=”background-color:#FF0000″><b><a href=”http://www.tunerpage.com/” >TUNER PAGE </a></b></p>

<p style=”background-color:#00FFFF”><a href=”http://www.tunerpage.com/css-bangla-tutorial” > CSS ( Cascading Style Sheets)</a></p>

</body>

</html>

♦আপনি আপনার নির্দিষ্ট নামে সেভ করুন । অবশ্যই নাম সেভ করার সময় নামের শেষে .HTML লিখবেন ।

♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । আপনারা নিশ্চয় বুজতে পারছেন যে আমি লিংক ছাড়া আর কিছু যোগ করেছি এগুলোর সাথে আমি আগেই আপনাদের পরিচয় করিয়েছি । সেগুলো হচ্ছে ফ্রন্ট সাইজ এবং ব্যাক গ্রাউন্ড কালার । আপনারা ইচ্ছা করলে ফ্রন্ট সাইজ এবং গ্রাউন্ড কালার বাদ দিয়ে করতে পারেন ।

♦এই বার এই লিংকে ক্লিক করে দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ

CSS Text Decoration(টেক্সট সজ্জা)

এখানে লিংক থেকে সকল প্রকার বাড়তি প্রসাধনী সরিয়ে ফেলা হবে । কারন এটি নিয়ে তেমন কিছু বলার নাই

তাহলে চলুন এই বার উদাহরণ দেখা যাক।

♦নোটপ্যাড খুলুন

♦ নিচের মত করে কোড লিখুন

<html>

<head>

p {font-size:200px;}

</style>

</head>

<body>
<p><b><a href=”http://www.tunerpage.com/archives/123281” >TUNER PAGE TJ CLUB</a></b></p>

</body>

</html>

♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । আমি এখানে সামান্য কিছু বাড়তি যোগ করেছি সেটি হচ্ছে ফ্রন্ট সাইজ (p {font-size:200px;}) আপনি ইচ্ছা করলে এটি নাও যোগ করতে পারেন ।

♦এই বার এই লিংকে ক্লিক করে দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ

CSS Background Color(পটভূমির রঙ )

নামটি শুনে নিশ্চয় বুজতে পারছেন যে এটির কাজ কি । এটি দ্বারা আমরা লিংকের ব্যাক গ্রাউন্ড কালার করবো এটি কাজ আমি আপনাদের প্রথমেই দেখিয়েছি ।এখন তাও একবার দেখিয়ে দিচ্ছি । কারন এটিতে আমরা অন্য পন্থা ব্যবহার করবো ।

তাহলে চলুন এই বার উদাহরণ দেখা যাক।

♦নোটপ্যাড খুলুন

♦ নিচের মত করে কোড লিখুন

<html>

<head>

p {font-size:100px;}

</style>

</head>

<body>
<p><b><a href=”http://www.tunerpage.com/archives/104685 “>TUNER PAGE Library</a></b></p>

</body>

</html>

♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন ।আমি এখানে সামান্য কিছু বাড়তি যোগ করেছি সেটি হচ্ছে ফ্রন্ট সাইজ (p {font-size:200px;}) আপনি ইচ্ছা করলে এটি নাও যোগ করতে পারেন ।

♦এই বার এই লিংকে ক্লিক করে দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ

নতুন কিছু স্টাইল

ভালো করে লক্ষ্য করে দেখুন আমি a:link {background-color:003366;} /* unvisited link */এই এলিমেন্ট গুলো আগে শুধু মাত্র “a” বসিয়েছি কিন্তু কোন সংখ্যা বসাইনি । এখন আমি দেখাব “a” পরে যদি one , two , three এরূপ সংখ্যা দ্বারা কি করে বসাতে হয় । আর কি কি পরিবর্তন হতে পারে ।

তাহলে চলুন এই বার উদাহরণ দেখা যাক।

♦নোটপ্যাড খুলুন

♦ নিচের মত করে কোড লিখুন

<html>

<head>

a.two:link {color:CadetBlue;}
a.two:visited {color:00008B;}
a.two:hover {font-size:200%;}

a.three:link {color:F0FFFF;}
a.three:visited {color:006400;}
a.three:hover {background:FFD700;}

a.four:link {color:Lavender;}
a.four:visited {color:66CDAA;}

a.four:hover{font-style:oblique;}
a.five:link {color:9370D8;text-decoration:none;

a.five:visited {color:00FF7F;text-decoration:none;}

a.five:hover {text-decoration:underline;}

</style>

</head>

<body>

<p><b><a class=”one” href=”http://www.tunerpage.com/” >TUNER PAGE </a></b></p>
<p><b><a class=”two” href=”http://www.tunerpage.com/” >TUNER PAGE </a></b></p>
<p><b><a class=”three” href=”http://www.tunerpage.com/” > TUNER PAGE </a></b></p>
<p><b><a class=”four” href=”http://www.tunerpage.com/” > TUNER PAGE </a></b></p>
<p><b><a class=”five” <a href=”http://www.tunerpage.com/” >TUNER PAGE </a></b></p>
</body>

</html>

♦এই বার লেখাটি যে কোন ব্রাউজারে ওপেন করুন । আসুন এই বার আমরা দেখি আমরা এখানে কি কি পরিবর্তন করেছি

এটিতে মাউস রাখলে লিংকের কালার পরিবর্তন করছি ।

a.one:link {color:0066FF;}
a.one:visited {color:6666FF;}
a.one:hover {color:#008B8B;}

2. এটিতে মাউসের এরো রাখলে লিংকের লেখার সাইজের পরিবর্তন হচ্ছে । কারন এখানে আমরা ফ্রন্টের (a.two:hover {font-size:200%;}) সাইজের পরিবর্তন করেছি ।

3.এটিতে আমরা ব্যাক গ্রাউন্ড কালার ব্যবহার করেছি । a.three:hover {background:FFD700;} এটি সম্পর্কে অন্য একটি উদাহরণে দেখানো হয়েছেন ।

4. এটিতে ফ্রন্ট পরিবর্তন হচ্ছে কারন এখানে দুটি ফ্রন্ট ব্যবহার করা হয়েছে । four:hover{font-style:oblique;} । একটি হচ্ছে প্যারাগ্রাফ ফ্রন্ট অন্যটি obique ফ্রন্ট ।

5. এখানে লিংকের নিচ থেকে আন্ডার লাইন তুলে দেয়া হয়েছে ।a.five:link {color:9370D8;text-decoration:none;

a.five:visited {color:00FF7F;text-decoration:none;}

a.five:hover {text-decoration:underline;}

♦এই বার এই লিংকে ক্লিক করে দেখুন তো আপনারটি এই রুপ হয়েছে কিনাঃ

একটি মানবিক আবেদন :

ছরিয়ে ছিটিয়ে থাকা ঢাকা সহরের রাজপথে শুয়ে থাকে বুকের মাঝে চাপা যন্ত্রনা নিয়ে অশংখ বয়স্ক মানুষেরা। কেউ হয়েছেন ঘর ছাড়া, কারো আবার ছেলে মেয়ে ত্যাগ করেছেন উনাদের, কিছু আছেন যাদের যাবার কোন জায়গা নেই, কিছু আবার আর্থিক অসহায় তাই বৃদ্ধা আশ্রমেও ঠায় পাচ্ছেন না। উনাদের মাঝে কিছু চোখেও দেখেন না, কেউবা আবার লাঠি নিয়ে হাঁটেন, অনেকে প্রতিদিন ক্ষুধার যন্ত্রণায় ভুগছেন পরনে কারো কারো ভালো একটি কাপড় পর্যন্ত নেই। আমরা ঠিক করেছি এবারের ঈদে এই সকল অপারক এবং অসহায় বয়স্ক মানুষের জন্য কিছু উপহার সামগ্রী সংগ্রহ করব। উপহারের মধ্যে আমাদের মূল লক্ষ্য শাড়ি এবং লুঙ্গি। যে যাই পারি আমরা সাহায্য করব। আসুন আমাদের এই বৃদ্ধ/বৃদ্ধা মা/বাবাদের পাশে এসে সবাই দাঁরাই। সেজন্য আমাদের আর্থিক সাহায্যের প্রয়োজন যে যেভাবে পারেন এগিয়ে আসুন। এই উদ্দ্যোগে যদি আমাদের পাশে এসে কেউ না দাড়ায় তবুও আমরা নির্ভীকভাবে সামনে এগিয়ে যাব। অন্তত দশটি বৃদ্ধ/বৃদ্ধা মা/বাবার মুখে যদি হাসি ফুটাতে পারি তাহলে সেটাই আমাদের স্বার্থকতা।

আজ এই পর্যন্তই আবার দেখা হবে আগামি পর্বে নতুন কিছু নিয়ে । যাবার আগে আপনাদের একটি ফ্রী উপদেশ দিয়ে যাই তা হল নিজে শিখুন এবং অন্য কে শিখতে সহয়তা করুন ।