সিএসএস লিংক টিউটোরিয়াল (Pseudo Class)

সিএসএস লিংক টিউটোরিয়াল (Pseudo Class)

সিএসএস এর মাধ্যমে এনকর ট্যাগ বা  লিংকে এ আমরা ইফেক্ট যোগ করতে পারি।http://w3bay.com

সিএসএস এনকর/লিংক অবস্থা: আপনি কি জানেন  লিংক এর চারটি ভিন্ন অবস্থা আছে। সিএসএস এর মাধ্যমে প্রতিটি অবস্থাকে    customize করা যায়। নিচের keyword গুলো আলাদা অবস্থা নির্দেশ করে।http://w3bay.com

১ link –এটি একটি লিংক যেটি ব্যবহার হয়নি ।http://w3bay.com

২ visited - এটি একটি লিংক যা পূর্বে ব্যবহার হয়েছে কিন্তূ লিংকের ঊপর mouse রাখা হয়নি।http://w3bay.com

৩ hover - এটি একটি লিংক যার ঊপর মাউস রাখার সাথে সাথে visual ইফেক্ট দেখাবে।http://w3bay.com

৪ active - এটি একটি লিংক যেটা বর্তমানে সক্রিয় আছে

সিএসএস Pseudo-Classes:http://w3bay.com

সিএসএস Pseudo-Classe এর মাধ্যমে আমরা  সিএসএস লিংক এর চারটি অবস্থাকে(state)modify করতে পারি।http://w3bay.com

সিএসএস কার্সর (CSS Cursor)

আমরা   উইন্ডোজ, লিনাক্স ব্যবহার সময় বিভিন্ন মাউস কার্সর আইকন দেখেছি। বিভিন্ন পরিস্থিতি সাপেক্ষে মাউস কার্সর এর আইকন বিভিন্ন হয়। জনসাধারন যখন আপনার site visit করবে সেখানেও  বিভিন্ন পরিস্থিতি সাপেক্ষে মাউস এর আইকন বিভিন্ন করে তৈরী করা যায়। যা সিএসএস দ্বারা করা সম্ভব ।http://w3bay.com

সিএসএস কার্সর আইকন: এবার আপনাদের দেখাবো কিভাবে বিভিন্ন এইচটিএমএল এলিমেন্ট এর জন্য মাউস কার্সর আইকন পরিবর্তন করা যায়।http://w3bay.com

১ default -  normal mouse cursor icon প্রদর্শন করে।

২ wait –   এই  mouse icon নির্দেশ করে যে computer চিন্তা করছে।http://w3bay.com

৩ crosshair -  cross hair চিহ্ন প্রদর্শন করে।http://w3bay.com

৪ text -   এই "I" shape icon   টি   নির্দেশ করে যে, যখন আপনি কোন text কে select  করবেন।http://w3bay.com

৫ pointer – এই hand icon  টি   নির্দেশ করে যে, যখন আপনি কোন এইচটিএমএল link ঊপর hover করবেন।

৬ help- এই  icon  টি   নির্দেশ করে যে  আপনি কোন বিষয়ে সাহায্য বা প্রশ্ন করতে চাচ্ছেন (question mark)

সিএসএস পজিশন টিউটোরিয়াল (CSS Position)

সিএসএস পজিশন এর মাধ্যমে আমরা এইচটিএমএল এলিমেন্টs  এর exact পজিশন নির্দেশ করতে পারি।

Position Relative: Relative position দ্বারা এইচটিএমএল এলিমেন্ট এর position অন্য এলিমেন্ট এর সাপেক্ষে পরিবর্তন করা যায়।http://w3bay.com

h3 {position: relative; top: 15px; left: 150px;}

p {position: relative; left: -10px;}http://w3bay.com

Move Left -   এক্ষেত্রে left এর জন্য negative value ব্যবহার করতে হবে।

Move Right - এক্ষেত্রে left এর জন্য positive value ব্যবহার করতে হবে।

Move Up -     এক্ষেত্রে top এর জন্য negative value ব্যবহার করতে হবে।     .

Move Down - এক্ষেত্রে left এর জন্য positive value ব্যবহার করতে হবে।

Position Absolute:http://w3bay.com

absolute position  দ্বারা  এইচটিএমএল এলিমেন্ট এর exact position (pixel value) নির্দেশ করা যায়।

h3 {position: absolute; top: 50px; left: 45px;}http://w3bay.com

p{position: absolute; top: 75px; left: 75px;}http://w3bay.com

Position Fixedhttp://w3bay.com

একটা এলিমেন্টের পজিশন যদি ফিক্সড করে দেন তাহলে সেটা ব্রাউজারের উইন্ডো সাপেক্ষে অবস্থান করবে এবং ব্রাউজার যদি স্ক্রল করেন তবুও সেটা স্থির (fixed) থাকবে।http://w3bay.com

উদাহরন:এখানে দেখুন "স্ক্রল করলেও আমি সরবনা" এই লাইনটির পজিশন ফিক্সড করে দেয়া হয়েছে তাই স্ক্রল করলেও এটি তার অবস্থান থেকে সরবেনা।http://w3bay.com

Note: Internet Explorer 7 (and higher) supports the fixed value if a !DOCTYPE is specified.

নোট:Internet Explorer এ এটি support করবে যদি এর !DOCTYPE নির্দিষ্ট করে দেন।http://w3bay.com