সিএসএস সিলেক্টর টিউটোরিয়াল

0
9
css
css

সিএসএস সিলেক্টর কে সিএসএস এর হৃদপিন্ড বলা হয়।বিভিন্ন ধরনের সিলেক্টর আছে,এসব দিয়ে এইচটিএমএল পেজের এলিমেন্ট সিলেক্ট করা যায় এবং সিলেক্ট করার পর নিজের ইচ্ছেমত স্টাইলিং করা যায়।সিএসএস সিলেক্টর এর ব্যাপারে খুব গভীর এবং স্বচ্ছ ধারনা থাকতে হবে।সিলেক্টর নিয়ে কাজ করার আগে কিছু টার্ম জানতে হবে যেমন:

এইচটিএমএল এলিমেন্ট

এট্রিবিউট

রুল সেট বা রুল ইত্যাদি..

css selector tutorial

01.h4
02.{
03.background-color:white;
04.font-size:12px;
05.}
06.p
07.{
08.color:red;
09.}

এখানে h4, p এসব হচ্ছে সিলেক্টর,h4 এর দ্বারা এইচটিএমএল পেজের <h4></h4> এর ভিতরে যা আছে তা সিলেক্ট করবে বা বলা যায় h4 এলিমেন্ট সিলেক্ট করবে।

h4 এর পর সেকেন্ড ব্রাকেট যেখান থেকে শুরু হয়েছে এবং p এর আগে যেখানে সেকেন্ড ব্রাকেট শেষ হয়েছে এইটুকু ডিক্লেয়ারেশন ব্লক।

সেকেন্ড ব্রাকেটের ভিতরে সবটুকু হচ্ছে ডিক্লেয়ারেশন।

background-color হচ্ছে প্রোপার্টি এবং white হচ্ছে এর ভ্যালু।

আর পুরোটা অর্থ্যাৎ h4 থেকে শুরু করে এর সেকেন্ড ব্রাকেট যেখানে শেষ হয়েছে এইটুকু রুল বা রুল সেট।

উপরের কোডে দুটি রুল আছে h4 এবং p

নিচে বিভিন্ন সিলেক্টর এর নাম এবং এরা কিভাবে কাজ করে তা দেয়া হল:

* (ইউনিভার্সাল সিলেক্টর)

ইউনিভার্সাল সিলেক্টর এইচটিএমএল পেজের প্রতিটি এলিমেন্ট কে সিলেক্ট করে।যেমন নিচের কোডটি সব এইচটিএমএল এলিমেন্ট এর রং লাল করে দেবে।

1.* {color:red;}

অনেকে padding, margin এখানে 0 করে দেন যেমন

1.*{
2.margin:0;
3.padding:0;
4.}

এই কাজটি করা অপ্রোয়জনীয়,এতে ব্রাউজারের উপর চাপ বেশি পরে তাই অনেকে এটা করতে নিষেধ করেন।

আইডি সিলেক্টর

ক্লাস সিলেক্টর

টাইপ সিলেক্টর

1.p{
2.background-color:orange;
3.}
4.a{
5.color:maroon;
6.}

p, a হচ্ছে এখানে টাইপ সিলেক্টর।p সিলেক্টর এইচটিএমএল পেজের সব <p> এলিমেন্ট কে সিলেক্ট করবে এবং এদের ব্যাকগ্রাউন্ড রং কমলা করে দেবে আর a সিলেক্টর এইচটিএমএল সব লিংক কে সিলেক্ট করে রং খয়েরি করে দেবে।

ডিসেনডেন্ট সিলেক্টর

1.li a {
2.text-decoration: none;
3.color:red;
4.}

এইচটিএমএল ফাইল

01.<div id="menu">
02.<ul>                                       
03.<li><a href="#" title="">সি এস এস</a></li>
04.<li><a href="#" title="">এইচটিএমএল</a>
05.<ul
06.<li> Child </li
07.</ul>
08.</li>
09.<li><a href="#" title="">জাভাস্ত্রিপ্ট</a></li>
10.<li><a href="#" title="">পি এইচ পি</a></li>
11.<li><a href="#" title="">মাই এস কিউ এল</a></li>
12.</ul>
13.</div>

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

সিডো ক্লাস (pseudo class)

1.a:link{color:blue;}
2.a:visited { color: blue; }
3.a:hover{color:red;}
4.a:active { color: red; }

:link, :visited, :hover, :active এসব হচ্ছে সিডো ক্লাস।ধরুন উপরের এইচটিএমএল ফাইলটির জন্য যদি এই রুলটি প্রয়োগ করেন তাহলে সব লিংক এবং ভিজিটেড লিংক এর রং হবে নীল।আর হোভার এবং সক্রিয় লিংক এর রং হবে লাল।সিএসএস কোডটি ইচ্ছে করলে এভাবে লিখতে পারতেন।

1.a:link, a:visited { color: blue; }
2.a:hover, a:active { color: red; }

এডজেইসেন্ট সিলেক্টর (Adjacent Selector)

1.h2+h3{
2.color:lime;
3.}

ধরুন আপনি <h3> এলিমেন্টকে টার্গেট করতে চাচ্ছেন,শুধুমাত্র ঐ <h3> কে যেটা <h2> এর ইমিডিয়েট পরে আছে।উপরের কোড দ্বারা আপনার এইচটিএমএল পেজের হেডিং ৩ এর রং lime হবে যদি সেটা হেডিং ২ এর পরে থাকে।

*<h2> এরপর যদি অন্য কোন এলিমেন্ট থাকে এবং এরপর <h3> থাকে তাহলে এই <h3> এর রং lime হবেনা কারন এটা <h2> এর ইমিডিয়েট পরে নেই।

*h2+h3 দেখে এটা মনে করা যাবেনা যে দুটোরই রং lime হবে,শুধু <h3> পরিবর্তন হবে।

direct children সিলেক্টর

1.div#menu> ul { border: 1px solid black; }

এই রুলটি যদি উপরের এইচটিএমএল পেজে প্রয়োগ করেন তাহলে  ul এলিমেন্ট এর উপর একটা বর্ডার হবে তবে Children লেখাটির উপর বর্ডার আসবেনা যদিও এটা আরেকটা ul এর মধ্যে আছে।কারন Children লেখাটি যে ul এর মধ্যে আছে সেটা menu আইডির direct children নয়।

এট্রিবিউট সিলেক্টর

1.img[src="/css selector.jpg"] {
2.border: 5px solid #000000;
3.}

আপনার এইচটিএমএল ফাইলে যদি নিচের মত লাইন থাকে তাহলে উপরের কোডটি দিয়ে <img> এলিমেন্টের এট্রিবিউট সিলেক্ট করে এর বর্ডার ৫ পিক্সেল এবং বর্ডার রং কালো করে দেবে।

1.<img src="/css selector.jpg" width="510" height="205">

গ্রুপিং সিলেক্টর

যদি একাধিক এলিমেন্টের একই স্টাইল করতে চান তখন গ্রুপিং সিলেক্টর ব্যবহার করবেন।ধরুন আপনি চাচ্ছেন আপনার পেজের সব হেডিং এবং লিংক এর রং একই হবে তখন নিচের মত করে লিখতে পারেন।

1.h1,h2,h3,h4,a{
2.color:red;
3.}

ধরুন আপনার পেজের একটা ডিভের (div)এর আইডি হচ্ছে menu (id=”menu”) আার এই ডিভের ভিতরে সব লিংক এবং হেডিং এর রং লাল করতে চাচ্ছেন তখন এভাবে

1.#menu a, #menu h1,#menu h2, #menu h3{
2.color:red;
3.}

*আপনি যদি #menu a,h1,h2… এভাবে লেখেন তাহলে ভুল হবে।

ইন্টারনাল সিএসএস টিউটোরিয়াল (Internal CSS)

Cascading Style Sheets লেখার তিনটি ধরন আছে যেমন – internal, external এবং inline। যখন আপনারা  ইন্টারনাল সিএসএস ব্যবহার করবেন তখন অবশ্যই একটা নতুন ট্যাগ যোগ করতে হবে যেটা হচ্ছে  <style> tag  এবং যা HTML  <head> ট্যাগ এর ভিতরে রাখতে হবে। নিচে উদাহরন দেয়া হলো।

01.<html>
02.<head>
03.<style>
04.</style>
05.</head>
06.<body>
07.<p>Your page's content!</p>
08.</body>
09.</html>

এমত অবস্থায় পেজে নতুন কিছু দেখাবে না। এই style ট্যাগ টি শুধু ব্রাউজার কে বলবে যে তারা এই পেজে নতুন কিছু CSS element যোগ করতে যাচ্ছে ।

LEAVE A REPLY

Please enter your comment!
Please enter your name here