একাধিক সিএসএস নির্বাচনকারী গ্রুপিং

লোড স্পিড উন্নত করার জন্য একাধিক সিএসএস সিলেক্ট করুন

একটি সফল ওয়েবসাইট কার্যকারিতা একটি গুরুত্বপূর্ণ ফ্যাক্টর। যে সাইটটি অনলাইনে ইমেজগুলি ব্যবহার করে তা কার্যকর হবে । এই সাইট দর্শকদের জন্য ভাল সঞ্চালন এবং তাদের ডিভাইসের উপর দ্রুত লোড নিশ্চিত করতে সাহায্য করবে। ফলপ্রসূতা আপনার সামগ্রিক প্রক্রিয়ার একটি অংশ হওয়া উচিত, আপনি সময় এবং বাজেট উপর একটি সাইট এর অগ্রগতি রাখতে সাহায্য

শেষ পর্যন্ত, দক্ষতা ওয়েবসাইটের সৃষ্টি এবং দীর্ঘমেয়াদী সাফল্যের সব দিকের ভূমিকা পালন করে, সেই সাইট এর সিএসএস শীটের জন্য লেখা স্টাইলগুলি সহ। Leaner তৈরি করতে সক্ষম হওয়ায়, ক্লিনার CSS ফাইলটি আদর্শ এবং আপনি এটি উপভোগ করতে পারেন এমন একটি উপায়ে একাধিক সিএসএস সিলেক্টর একসাথে একত্রিত করে।

গ্রুপিং নির্বাচক

যখন আপনি সিএসএস সিলেকশনের গ্রুপ করেন, তখন আপনি আপনার শৈলী শীটের শৈলীগুলি পুনরাবৃত্ত না করে বিভিন্ন ধরণের বিভিন্ন ধরণের একই শৈলী প্রয়োগ করেন। দুই বা তিন বা তারও বেশি CSS নিয়ম থাকা সত্ত্বেও, সবগুলি একই জিনিস (উদাহরণস্বরূপ, লাল রঙের কিছু সেট করে), আপনার একটি সিএসএস নিয়ম রয়েছে যা আপনার পৃষ্ঠার জন্য সম্পন্ন হয়।

এই "নির্বাচক গোষ্ঠী" একটি পৃষ্ঠা উপকার কেন এই কারণে অনেক কারণ আছে প্রথম অফ্ট, আপনার স্টাইল শীট ছোট হবে এবং আরো দ্রুত লোড হবে। স্বীকার করা যায়, লোডিং সাইটগুলি ধীরগতির সময় স্টাইল শীট মূল অপরাধীদের মধ্যে অন্যতম নয়। সিএসএস ফাইলগুলি পাঠ্য ফাইল, সুতরাং এমনকি অস্পষ্ট ইমেজগুলির সাথে তুলনা করলেও সত্যিই দীর্ঘ সিএসএস শীটগুলি ক্ষুদ্র, ফাইল-সাইজ অনুযায়ী। এখনও, প্রতিটি সামান্য বিট সংখ্যা, এবং যদি আপনি আপনার CSS এর কিছু আকারের শেভ করতে পারেন এবং যে পৃষ্ঠাগুলিকে আরও দ্রুত লোড করতে পারেন, এটি সবসময় একটি ভাল জিনিস।

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

সিএসএস সিলেক্টকারী গ্রুপ কিভাবে?

আপনার শৈলী শীটে একসাথে সিএসএস সিলেক্ট করার জন্য, আপনি শৈলীতে একাধিক গোষ্ঠীভুক্ত নির্বাচককে পৃথক করার জন্য কমা ব্যবহার করেন। নীচের উদাহরণে, শৈলী পি এবং div উপাদান প্রভাবিত করে:

div, p {color: # f00; }

কমা মূলত "এবং" মানে সুতরাং এই নির্বাচক সমস্ত অনুচ্ছেদ উপাদান এবং সমস্ত বিভাগ উপাদান প্রযোজ্য। কমা হারিয়ে গেলে, এটি পরিবর্তে একটি বিভাগের একটি শিশু যে সমস্ত অনুচ্ছেদ উপাদান হতে হবে। এটি একটি খুব ভিন্ন ধরনের নির্বাচক, তাই এই কমা সত্যিই নির্বাচক মানে পরিবর্তন!

নির্বাচকমণ্ডলীর কোনও ফর্ম অন্য কোনও নির্বাচকের সাথে গোষ্ঠীভুক্ত করা যায়। এই উদাহরণে, একটি ক্লাস নির্বাচক একটি আইডি নির্বাচক গোষ্ঠীভুক্ত করা হয়:

p.red, #sub {color: # f00; }

সুতরাং এই শৈলী "লাল" এর ক্লাস অ্যাট্রিবিউটের সাথে কোনো অনুচ্ছেদের ক্ষেত্রে প্রযোজ্য, এবং যেকোন উপাদান (যেটি কোনও নির্দিষ্ট না করে) যেটি "সাব" এর একটি আইডি বৈশিষ্ট্য রয়েছে।

আপনি সংখ্যাগরিষ্ঠ নির্বাচকদের একত্রিত করতে পারেন, একক শব্দ এবং কম্পান্ড নির্বাচনকারীর নির্বাচকদের সহ। এই উদাহরণ চারটি ভিন্ন নির্বাচক রয়েছে:

p, .red, #sub, div a: লিঙ্ক {রঙ: # f00; }

সুতরাং এই সিএসএস নিয়ম নিম্নলিখিত প্রয়োগ করা হবে:

• কোন অনুচ্ছেদ উপাদান
• "লাল" শ্রেণীর সাথে কোনও উপাদান
• "উপ" এর একটি আইডি সহ কোনও উপাদান
• একটি বিভাগ এর দশক যে নোঙ্গর উপাদান "লিঙ্ক" ছদ্ম ক্লাস।

যে শেষ নির্বাচক একটি যৌগ নির্বাচক হয়। আপনি এই সিএসএস শাসনে অন্যান্য নির্বাচকদের সঙ্গে এটি সহজে মিলিত দেখতে পারেন। এই নিয়মের সাথে, আমরা এই 4 নির্বাচকদের # f00 (যা লাল) এর রং নির্ধারণ করছি, যা একই ফলাফল অর্জনের জন্য 4 টি পৃথক নির্বাচকদের লেখার জন্য পছন্দনীয়।

গ্রুপিং নির্বাচকদের আরেকটি সুবিধা হলো, যদি আপনি পরিবর্তন করতে চান, আপনি একাধিকের পরিবর্তে একক CSS নিয়ম সম্পাদনা করতে পারেন। এর মানে হল এই পদ্ধতিটি আপনাকে পৃষ্ঠার ওজন এবং সময় সংরক্ষণ করে যখন এটি ভবিষ্যতে সাইটটি বজায় রাখতে আসে।

কোনও নির্বাচনকারীকে গোষ্ঠীভুক্ত করা যায়

উপরের উদাহরণ থেকে আপনি যেহেতু দেখতে পারেন, কোনও বৈধ নির্বাচক একটি গ্রুপে স্থাপন করা যেতে পারে এবং ডকুমেন্টে থাকা সমস্ত উপাদানগুলিকে গোষ্ঠীভুক্ত সমস্ত উপাদানগুলির সাথে মেলে এমন স্টাইলের উপর ভিত্তি করে একই স্টাইলের সম্পত্তি থাকবে।

কিছু লোক কোডে সুবিন্যস্ততার জন্য পৃথক লাইনগুলিতে গোষ্ঠীভুক্ত উপাদানগুলিকে তালিকাভুক্ত করতে পছন্দ করে। ওয়েবসাইট এবং লোড স্পিডের উপস্থিতি একই। উদাহরণস্বরূপ, আপনি কোডগুলি এক রেখার কোডে এক স্টাইলের সম্পত্তি দিয়ে কমা দ্বারা বিন্যাসগুলি একত্রিত করতে পারেন:

তম, টিডি, পি .ড, div # ফার্স্টেড {রঙ: লাল; }

বা আপনি স্বচ্ছতার জন্য পৃথক লাইনের শৈলী তালিকা করতে পারেন:

ম,
TD,
p.red,
DIV আছে # firstred
{
লাল রং;
}

আপনি একাধিক সিএসএস সিলেক্ট করার জন্য ব্যবহার করেন এমন কোনও পদ্ধতি আপনার সাইটের গতি বাড়িয়ে দেয় এবং স্টাইলগুলিকে দীর্ঘমেয়াদি পরিচালনা করতে সহজ করে তোলে

জনিফার ক্রাইনিনের মূল রচনা 5/8/17 এ জেরেমি গিরিড দ্বারা সম্পাদিত