ক্যাসকেডিং স্টাইল শীট (সিএসএস) আপনাকে সেই উপাদানটিতে প্রয়োগ করা গুণাবলীগুলিতে হুকিং করে একটি উপাদানটির উপস্থিতি সংজ্ঞায়িত করার অনুমতি দেয়। এই গুণাবলীগুলি হয় এবং আইডি বা একটি শ্রেণি হতে পারে এবং, সমস্ত গুণাবলীগুলির মতো, তারা যে উপাদানগুলি সংযুক্ত থাকে সেগুলিতে সহায়ক তথ্য যোগ করে।
কোন উপাদানের সাথে আপনি যুক্ত করেন তার উপর নির্ভর করে, আপনি সেই উপাদান এবং সমগ্র ওয়েবসাইটের চেহারা এবং অনুভূতি অর্জনের জন্য প্রয়োজনীয় প্রয়োজনীয় চাক্ষুষ শৈলীগুলি প্রয়োগ করতে একটি CSS নির্বাচক লিখতে পারেন।
যদিও আইডি বা ক্লাসগুলি সিএসএসের নিয়মগুলির সাথে তাদের হুকিংয়ের উদ্দেশ্যে কাজ করে, আধুনিক ওয়েব ডিজাইন পদ্ধতিগুলি আইডিগুলির উপর ক্লাসগুলির পক্ষে পক্ষপাতিত্ব করে, কারণ এটি সামগ্রিকভাবে কম নির্দিষ্ট এবং সহজে কাজ করার পক্ষে সহজ। হ্যাঁ, আপনি এখনও আইডি ব্যবহার করে এমন অনেক সাইট পাবেন, তবে অতীতের তুলনায় ক্লাসগুলি আধুনিক ওয়েব পৃষ্ঠাগুলিতে নেওয়া হয়েছে তার তুলনায় আরও বেশি স্পষ্টভাবে প্রয়োগ করা হচ্ছে।
সিএসএস একক বা একাধিক ক্লাস?
বেশিরভাগ ক্ষেত্রে আপনি একটি উপাদানতে একটি একক শ্রেণিবদ্ধ বৈশিষ্ট্য বরাদ্দ করবেন, তবে আপনি আসলে আইডিগুলির সাথে একমাত্র শ্রেণির মধ্যে সীমাবদ্ধ নয়। একটি উপাদানটি শুধুমাত্র একটি আইডি বৈশিষ্ট্য থাকতে পারে তবে আপনি একেবারে একটি উপাদান একাধিক শ্রেণী দিতে পারেন এবং কিছু ক্ষেত্রে, এটি করার ফলে আপনার পৃষ্ঠাটি শৈলীকে আরও সহজ এবং আরও বেশি নমনীয় করে তুলবে!
যদি আপনি একটি উপাদানতে একাধিক ক্লাস বরাদ্দ করতে চান, তবে আপনি অতিরিক্ত ক্লাস যোগ করতে পারেন এবং কেবল আপনার গুণাবলীতে একটি স্থান দিয়ে আলাদা করতে পারেন।
উদাহরণস্বরূপ, এই অনুচ্ছেদের তিনটি শ্রেণী রয়েছে:
এই অনুচ্ছেদের টেক্সট হবে
এটি অনুচ্ছেদে নিম্নলিখিত তিনটি ক্লাস সেট করে:
- Pullquote
- বৈশিষ্ট্যযুক্ত
- বাম
এই শ্রেণির মানগুলির প্রত্যেকের মধ্যে স্পেস লক্ষ্য করুন। যারা স্পেস বিভিন্ন, পৃথক ক্লাস হিসাবে তাদের সেট আপ হয়। এই কারণে শ্রেণির নামগুলিতে তাদের স্থান থাকতে পারে না, কারণ এগুলি পৃথক শ্রেণী হিসাবে সেট করে। উদাহরণস্বরূপ, যদি আপনি কোনও স্থান ছাড়াই "পুলকোয়েট-বৈশিষ্ট্যযুক্ত-বাম" ব্যবহার করেন, তবে এটি একটি বর্গমূল হবে, তবে উপরের উদাহরণটি, যেখানে এই তিনটি শব্দ একটি স্পেস দিয়ে আলাদা করা হয়, সেগুলি পৃথক মান হিসাবে সেট করে। আপনার ওয়েবপৃষ্ঠাতে কোন ক্লাসের মূল্যগুলি ব্যবহার করতে হবে তা নির্ধারণ করার সাথে সাথে এই ধারণাটি বুঝতে গুরুত্বপূর্ণ।
HTML এ আপনার ক্লাসের মানগুলি একবারের পরে, আপনি এগুলি আপনার CSS এ ক্লাস হিসাবে নির্দিষ্ট করতে পারেন এবং আপনি যে শৈলীগুলি যোগ করতে চান তা প্রয়োগ করুন। উদাহরণ স্বরূপ.
.pullquote {…}.featured {…}পি। বামে {…}
এই উদাহরণগুলিতে, সিএসএস ঘোষণা এবং মূল্য জোড়াগুলি কোঁকড়া ধনুর্বন্ধনীগুলির অভ্যন্তরে থাকবে, যা সেই শৈলীগুলিকে উপযুক্ত নির্বাচককে প্রয়োগ করা হবে।
আপনি একটি নির্দিষ্ট উপাদান একটি বর্গ সেট (উদাহরণস্বরূপ,p.left), আপনি এখনও শ্রেণীগুলির একটি তালিকা হিসাবে এটি ব্যবহার করতে পারেন; যাইহোক, সচেতন থাকবেন যে এটি শুধুমাত্র সেই উপাদানগুলিকে প্রভাবিত করবে যা সিএসএসে নির্দিষ্ট করা হয়েছে। অন্য কথায়, দী p.left শৈলী শুধুমাত্র এই বর্গের সাথে অনুচ্ছেদের জন্য প্রযোজ্য হবে কারণ আপনার নির্বাচক আসলে এটি "বর্গমূলের বর্গমূলের অনুচ্ছেদে" অনুচ্ছেদে প্রয়োগ করতে বলছেন। বিপরীতে, উদাহরণস্বরূপ অন্য দুটি নির্বাচক একটি নির্দিষ্ট উপাদান নির্দিষ্ট করে না, সুতরাং তারা যে শ্রেণী উপাদানগুলি ব্যবহার করে এমন যেকোনো উপাদান প্রয়োগ করবে।
একাধিক ক্লাসের উপকারিতা
একাধিক ক্লাস উপাদানটির জন্য বিশেষ প্রভাব যুক্ত করতে পারে যে উপাদানটির জন্য সম্পূর্ণ নতুন শৈলী তৈরি না করেই।
উদাহরণস্বরূপ, আপনি বাম বা ডান উপাদানের ভাসমান করতে সক্ষম হবেন। আপনি দুটি ক্লাস লিখতে পারে
বাম এবং
অধিকার শুধু সঙ্গে
ভাসা: বামে; এবং
ভাসা: ডান; তাদের মধ্যে. তারপরে, যখনই আপনার একটি উপাদান ছিল তখন আপনাকে বামে ভাসতে হবে, আপনি কেবল তার বর্গ তালিকায় বর্গটিকে "বামে" যুক্ত করুন।
এখানে হাঁটা একটি জরিমানা লাইন আছে, তবে। ওয়েব মান স্টাইল এবং কাঠামো বিচ্ছেদ dictate মনে রাখবেন। স্টাইলটি সিএসএসে থাকা অবস্থায় এইচটিএমএল এর মাধ্যমে পরিচালনা করা হয়। যদি আপনার এইচটিএমএল ডকুমেন্টটি এমন উপাদানগুলির সাথে পূর্ণ থাকে যা সকলের "লাল" বা "বাম" মতো শ্রেণির নাম থাকে, যা এমন নাম যা নির্দেশ করে যে তারা কীভাবে তার চেয়ে উপাদানগুলি দেখবে তবে আপনি গঠন এবং শৈলীর মধ্যে যে লাইনটি অতিক্রম করছেন। আমি এই কারণের জন্য যতটা সম্ভব আমার অ-শব্দার্থিক ক্লাসের নাম সীমাবদ্ধ করার চেষ্টা করি।
একাধিক ক্লাস, সেমেন্টিক্স, এবং জাভাস্ক্রিপ্ট
একাধিক ক্লাস ব্যবহার করার আরেকটি সুবিধা এটি আপনাকে আরও অনেক মিথস্ক্রিয়া সম্ভাবনার দেয়।
আপনি কোনও প্রাথমিক ক্লাসগুলি সরিয়ে ছাড়াই জাভাস্ক্রিপ্ট ব্যবহার করে বিদ্যমান উপাদানগুলিতে নতুন ক্লাসগুলি প্রয়োগ করতে পারেন। আপনি একটি উপাদান semantics সংজ্ঞায়িত ক্লাস ব্যবহার করতে পারেন। এর মানে হল আপনি অতিরিক্ত শ্রেণীগুলিতে যোগ করতে পারেন যে উপাদানটির অর্থ কীভাবে অর্থাত্ সংজ্ঞায়িত করে। Microformats কিভাবে কাজ করে।
একাধিক ক্লাসের অসুবিধা
আপনার উপাদানের উপর একাধিক ক্লাস ব্যবহার করার সবচেয়ে বড় অসুবিধা এটি সময়ের দিকে তাকান এবং পরিচালনা করার জন্য এটি একটি অপ্রয়োজনীয় করে তুলতে পারে। কোন স্টাইলগুলি কোনও উপাদানকে প্রভাবিত করছে তা নির্ধারণ করা এবং কোন স্ক্রিপ্ট এটির উপর প্রভাব ফেলছে তা নির্ধারণ করা কঠিন হতে পারে। আজকের বুটস্ট্র্যাপের মতো উপলব্ধ কাঠামোগুলির মধ্যে অনেকটি একাধিক ক্লাসের উপাদানগুলি ব্যবহার করে। আপনি যদি সতর্ক না হন তবে সেই কোডটি হাত থেকে বের হতে পারে এবং খুব দ্রুত সঙ্গে কাজ করতে পারে।
আপনি যখন একাধিক ক্লাস ব্যবহার করেন, তখন আপনি এক শ্রেণীর স্টাইলের স্টাইল থাকার ঝুঁকিটি চালাতে পারেন এমনকি যদি আপনি এটির জন্য মনোনীত না হন তবেও অন্যের শৈলীটি ওভাররাইড করে। এটি তখন আপনার শৈলীগুলির প্রয়োগ হওয়া উচিত বলে মনে হচ্ছে না কেন তা বোঝা কঠিন করে তুলতে পারে। আপনি যে এক উপাদান প্রয়োগ বৈশিষ্ট্য সঙ্গে এমনকি, সুনির্দিষ্ট সচেতন হতে হবে!
গুগল ক্রোমে ওয়েবমাস্টার টুলস মত একটি টুল ব্যবহার করে আপনি আরও সহজেই দেখতে পারেন যে আপনার ক্লাসগুলি আপনার শৈলীগুলিকে কীভাবে প্রভাবিত করছে এবং দ্বন্দ্বপূর্ণ শৈলী এবং বৈশিষ্ট্যগুলির এই সমস্যা এড়াতে পারে।
