এই নিবন্ধটি একটি আকর্ষণীয় এবং একটি গুরুত্বপূর্ণ বিষয় হিসাবে পরিচিত হিসাবে নিয়ে আসে নির্বাচক এবং সমর্থনমূলক ব্যবহারিক বিক্ষোভের সাথে এটি অনুসরণ করে। নিম্নলিখিত পয়েন্টারগুলি এই নিবন্ধে কভার করা হবে,
- স্টাইলিং এইচটিএমএল উপাদানসমূহ
- সিএসএস নির্বাচক
- সিএসএস আইডি নির্বাচনকারী
- সিএসএস শ্রেণি নির্বাচক
- সিএসএস ইউনিভার্সাল সিলেক্টর
- সিএসএস গ্রুপ নির্বাচক
সুতরাং আমাদের এখন শুরু করা যাক,
স্টাইলিং এইচটিএমএল উপাদানসমূহ
আসুন আমরা সিএসএস নির্বাচনকারীদের কাছে যাওয়ার আগে CSS কী তা বুঝতে পারি। যদি এইচটিএমএলকে কঙ্কাল হিসাবে বিবেচনা করা হয়, তবে সিএসএস (ক্যাসকেডিং স্টাইল শীট) পেশী এবং ত্বকের মতো is মস্তিষ্কটি জাভাস্ক্রিপ্ট। সুতরাং, একটি ওয়েব পৃষ্ঠার জন্য, সিএসএস শৈলীগুলি মূলত বিন্যাস এবং নকশা। ইমেজ এবং পাঠ্যের অবস্থান থেকে শুরু করে ফন্টের আকার এবং পটভূমির রঙ পর্যন্ত, CSS ব্রাউজারে এইচটিএমএল উপাদানগুলি কীভাবে দেখায় তা নিয়ন্ত্রণ করে।
আপনি সিএসএস আরও ভালভাবে বুঝতে পারবেন, সিএসএস নির্বাচকরা কী তা সম্পর্কে আপনার যদি উপলব্ধি থাকে তবে। এই নির্বাচকগুলি আপনাকে নির্দিষ্ট এইচটিএমএল উপাদানগুলিকে টার্গেট করতে দেয় যাতে আপনি তাদের সাথে সঠিক স্টাইল প্রয়োগ করতে পারেন।
আসুন আমরা বুঝতে পারি যে কীভাবে আমরা এইচটিএমএল উপাদানগুলি নির্বাচন করতে পারি,
উপাদানগুলি কীভাবে নির্বাচন করবেন?
বলুন, আপনি একটি নির্দিষ্ট শিরোনাম একটি ওয়েব পৃষ্ঠার বাকী সামগ্রী থেকে আলাদা স্টাইল করতে চান। এখন, সিএসএস নির্বাচনকারীদের ব্যবহার করে আপনি এইচটিএমএল উপাদানটিকে আলাদাভাবে স্টাইল করতে লক্ষ্য করতে পারেন। সিএসএস নির্বাচকগুলি উপাদানগুলির সংজ্ঞা দিতে সহায়তা করে যার জন্য সিএসএসের বিধিগুলির একটি নির্দিষ্ট সেট প্রযোজ্য। বিভিন্ন ধরণের সিএসএস নির্বাচনকারী রয়েছে যা আপনাকে স্টাইল করতে চান এমন উপাদানগুলি স্পষ্টভাবে বেছে নিতে দেয়। আপনি পুরো ওয়েব পৃষ্ঠাকে একটি সাধারণ স্টাইলিং দিতে পারেন এবং তারপরে পৃষ্ঠার অন্যান্য উপাদানগুলিকে স্টাইল করার জন্য আপনার কাজ করতে পারেন।
নির্বাচকরা একটি সিএসএস নিয়মের একটি অংশ, এবং এই নির্বাচকরা সিএসএস ব্লক ঘোষণার ঠিক আগে আসে। আরও ভাল বোঝার জন্য, আপনি নীচের চিত্রটি উল্লেখ করতে পারেন।
সিএসএস নির্বাচকদের নিবন্ধটি নিয়ে চলছে
সিএসএস নির্বাচক
এই নির্বাচক আপনাকে তার নামে একটি এইচটিএমএল উপাদান নির্বাচন করতে দেয়।
নীচের কোডটি বিবেচনা করুন:
সেলেনিয়ামে কীওয়ার্ড চালিত কাঠামো
p {পাঠ্য-সারিবদ্ধ: কেন্দ্রের রঙ: ম্যাজেন্টা}এই স্টাইলটি প্রতিটি অনুচ্ছেদে প্রয়োগ করা হবে।
অনুচ্ছেদ 1
অনুচ্ছেদ 2
এই কোডটি আপনাকে নিম্নলিখিত আউটপুট দেবে:
এই স্টাইলটি প্রতিটি অনুচ্ছেদে প্রয়োগ করা হবে
অনুচ্ছেদ 1
অনুচ্ছেদ 2
উপরের কোডে, এইচটিএমএল উপাদানগুলি কেন্দ্র-বিন্যস্ত করা হয়েছে এবং রঙ 'ম্যাজেন্টা' রয়েছে।
সিএসএস নির্বাচকদের নিবন্ধটি নিয়ে চলছে
সিএসএস আইডি নির্বাচনকারী
এইচটিএমএল উপাদানটির আইডি বৈশিষ্ট্যটি নির্বাচন করে আপনি সেই নির্দিষ্ট উপাদানটি নির্বাচন করতে পারেন। যেহেতু আইডি কোনও পৃষ্ঠায় অনন্য, আপনি আইডি বৈশিষ্ট্যটি ব্যবহার করে সঠিক উপাদানটি নির্বাচন করতে পারেন।
আপনি এই উপাদানটির আইডি অনুসরণ করে '#' ব্যবহার করে এইচটিএমএল উপাদান নির্বাচন করতে পারেন। উদাহরণস্বরূপ, '# প্রথম নাম' উপাদানটি নির্বাচন করে যেখানে আইডি 'প্রথম নাম' রয়েছে।
নিম্নলিখিত কোড বিবেচনা করুন:
# para1 {পাঠ্য-সারিবদ্ধ: কেন্দ্রের রঙ: কমলা}ওহে বিশ্ব
এই অনুচ্ছেদ প্রভাবিত হবে না।
উপরের কোডের আউটপুট হল:
ওহে বিশ্ব
এই অনুচ্ছেদ প্রভাবিত হবে না।
আপনি উপরের আউটপুটে দেখতে পাচ্ছেন, id = ”para1 including অন্তর্ভুক্ত করে আমরা সেই উপাদানটির রঙ কমলাতে পরিবর্তন করতে সক্ষম হয়েছি। অন্য উপাদানগুলির মধ্যে এটি নেই তবে এটি প্রভাবিত হয় না।
সিএসএস নির্বাচকদের নিবন্ধটি নিয়ে চলছে
সিএসএস শ্রেণি নির্বাচক
শ্রেণি নির্বাচক ব্যবহার করে আপনি এইচটিএমএল উপাদান নির্বাচন করতে পারেন যার একটি নির্দিষ্ট শ্রেণীর বৈশিষ্ট্য রয়েছে। আপনি ক্লাসের নাম অনুসরণ করে একটি পিরিয়ড (ফুলস্টপ প্রতীক) ব্যবহার করে নির্বাচককে সংজ্ঞায়িত করতে পারেন। উদাহরণস্বরূপ, .intro ক্লাসটি 'ইন্ট্রো' রয়েছে এমন উপাদানগুলি নির্বাচন করে। একটি জিনিস মনে রাখতে হবে আপনি কোনও সংখ্যা দিয়ে কোনও শ্রেণির নাম শুরু করতে পারবেন না।
নিম্নলিখিত কোড বিবেচনা করুন:
। সেন্টার {পাঠ্য-প্রান্তিককরণ: কেন্দ্রের রঙ: গোলাপীএই শিরোনামটি গোলাপী এবং কেন্দ্র-প্রান্তযুক্ত।
এই অনুচ্ছেদটি গোলাপী এবং কেন্দ্র বিন্যস্ত।
উপরের কোডটির আউটপুট হল:
এই শিরোনামটি গোলাপী এবং কেন্দ্র-প্রান্তযুক্ত।
এই অনুচ্ছেদটি গোলাপী এবং কেন্দ্র বিন্যস্ত।
আপনি একটি নির্দিষ্ট উপাদান জন্য সিএসএস শ্রেণি নির্বাচক ব্যবহার করতে পারেন। আপনি যদি কেবল একটি নির্দিষ্ট উপাদানকে স্টাইল করতে চান তবে ক্লাস সিলেক্টরের সাথে আপনি উপাদানটির নামটি ব্যবহার করতে পারেন।
উদাহরণস্বরূপ, নিম্নলিখিত কোড বিবেচনা করুন:
p.center {পাঠ্য-সারিবদ্ধ: কেন্দ্রের রঙ: গোলাপীএই শিরোনাম প্রভাবিত হয় না
এই অনুচ্ছেদটি গোলাপী এবং কেন্দ্র বিন্যস্ত।
উপরের কোডটির আউটপুট হল:
এই শিরোনাম প্রভাবিত হয় না
এই অনুচ্ছেদটি গোলাপী এবং কেন্দ্র বিন্যস্ত।
আউটপুটে আপনি দেখতে পাচ্ছেন, শিরোনাম h2 শৈলী দ্বারা প্রভাবিত হয় না। যেহেতু আমরা 'p.center' নির্দিষ্ট করেছি, কেবল অনুচ্ছেদটি স্টাইল দ্বারা প্রভাবিত।
এই সিএসএস নির্বাচক নিবন্ধটি নিয়ে এগিয়ে চলেছেন,
সিএসএস ইউনিভার্সাল সিলেক্টর
এই ধরণের নির্বাচককে ওয়াইল্ডকার্ড চরিত্র হিসাবে বিবেচনা করা যেতে পারে যা পৃষ্ঠার সমস্ত উপাদান নির্বাচন করে। এটি পৃষ্ঠার সমস্ত উপাদান নির্বাচন করে এবং এটি '*' দ্বারা নির্দিষ্ট করা হয়।
উদাহরণস্বরূপ, নীচের কোডটি বিবেচনা করুন:
* {রঙ: গা dark় রঙের ফন্ট-আকার: 30px}এটি একটি পরীক্ষা (ছোট ফন্ট)
এটি একটি অনুচ্ছেদ।
উপরের কোডের আউটপুট হল:
ওহে বিশ্ব
এটি একটি পরীক্ষা (ছোট ফন্ট)
এটি একটি অনুচ্ছেদ।
যেমন আপনি আউটপুটে দেখতে পাচ্ছেন, গ্রুপ নির্বাচক ব্যবহার করে সংজ্ঞায়িত সমস্ত উপাদানগুলির একই শৈলীর সংজ্ঞা রয়েছে - সেগুলি কেন্দ্র-বিন্যস্ত এবং ফন্টের রঙ সায়ান।
এটি আমাদের নিবন্ধের শেষে নিয়ে আসে।
আমাদের দেখুন যা প্রশিক্ষকের নেতৃত্বাধীন লাইভ প্রশিক্ষণ এবং বাস্তব জীবনের প্রকল্পের অভিজ্ঞতার সাথে আসে। এই প্রশিক্ষণটি আপনাকে ব্যাক-এন্ড এবং ফ্রন্ট-এন্ড ওয়েব প্রযুক্তিগুলির সাথে কাজ করার দক্ষতায় দক্ষ করে তোলে। এটিতে ওয়েব ডেভলপমেন্ট, জিক্যুয়ারি, অ্যাঙ্গুলার, নোডজেএস, এক্সপ্রেসজেএস এবং মঙ্গোডিবি প্রশিক্ষণ অন্তর্ভুক্ত রয়েছে।
আমাদের জন্য একটি প্রশ্ন আছে? অনুগ্রহ করে নিবন্ধের মন্তব্য বিভাগে এটি উল্লেখ করুন এবং আমরা আপনার কাছে ফিরে আসব।