WEB DESIGN - CSS Psudo Class PART 05

 

Psudo Class

বিভিন্ন উপাদানের অবস্থান, অবস্থা ইত্যাদি সিলেক্টর দ্বারা সিলেক্ট করে, বিশেষ ইফেক্ট দেয়ার জন্য সিউডো ক্লাস ব্যবহার করা হয়।

Syntax:

selector:pseudo-class {property:value;}

selector.class:pseudo-class {property:value;}

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

বিভিন্ন ধরণের সিউডো  ক্লাস

•       (Anchor Pseudo class)

•       (First child Pseudo-class)

•       (lang Pseudo-class

Psudo Element

সিউডো ক্লাসের মতই বিভিন্ন উপাদানের অবস্থান, অবস্থা ইত্যাদি সিলেক্টর দ্বারা সিলেক্ট করে, বিশেষ ইফেক্ট দেয়ার জন্য সিউডো ইলিমেন্ট ব্যবহার করা হয়।

selector::pseudo-element {property:value;}

selector.class:pseudo-element {property:value;}

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

 বিভিন্ন ধরণের সিউডো ইলিমেন্ট

•       First letter Pseudoelement

•       first line Pseudoelement

•       Before Pseudo element

•       After Pseudo element

CSS Media Types & Media query

বিভিন্ন মিডিয়া ধরন/ডিভাইসের জন্য বিভিন্ন স্টাইল ব্যবহার করতে @media Rule ব্যবহার করা হয়।

সিএসএস(২)-এ একে মিডিয়া ধরন বলা হতো, কিন্তু সিএসএস(৩)-তে এটাকে মিডিয়া কুয়েরি বলা হয়।

মিডিয়া কুয়েরি ডিভাইসের ক্ষমতা দেখে, এবং অনেক কিছু চেক করার জন্য ব্যবহার করা যেতে পারে,

•       width and height of the viewport

•       width and height of the device

•       orientation (is the tablet/phone in landscape or portrait mode?)

•       resolution

@media not|only mediatype and (expressions) {
  CSS-Code;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

media types প্রোপার্টির ভ্যালু-সমূহ

•       all - সকল মিডিয়া টাইপ ডিভাইসের জন্য ব্যবহার করা হয় ।

•       aural - অননুমোদিত। বক্তৃতা এবং সাউন্ড সমন্বয়কারীদের জন্য ব্যবহার করা হয়।

•       braille - অননুমোদিত। ব্রেইল স্পর্শিয় প্রতিক্রিয়া ডিভাইসের জন্য ব্যবহার করা হয়।

•       embossed - অননুমোদিত। পেইজ ব্রেইল প্রিন্টারের জন্য ব্যবহার করা হয় ।

•       handheld - অননুমোদিত। ছোট বা হ্যান্ডহোল্ড ডিভাইসের জন্য ব্যবহার করা হয়।

•       print - প্রিন্টারের জন্য ব্যবহার করা হয়।

•       projection - অননুমোদিত। প্রোজেক্ট উপস্থাপনার জন্য ব্যবহার করা হয় যেমনঃ স্লাইড।

•       screen -কম্পিউটার স্ক্রিন, ট্যাবলেট, স্মার্টফোন ইত্যাদির জন্য ব্যবহার করা হয়।

•       speech - স্ক্রিনরিডারদের জন্য ব্যবহার করা হয় যেটি উচ্চস্বরে পেজটি "পড়ে" ।

•       tty - অননুমোদিত। টেলিটাইপ এবং টার্মিনাল মিডিয়ার মত একটি fixed-pitch অক্ষর গ্রিড ব্যবহার করতে ব্যবহার করা হয়।

•       tv - অননুমোদিত। টেলিভিশন-ধরনের ডিভাইসের জন্য ব্যবহার করা হয়।