সিএসএস, বা ক্যাসকেডিং স্টাইল শীট, ওয়েব ডিজাইন শিল্পের কোনও সাইটটিতে চাক্ষুষ শৈলী যুক্ত করার গ্রহণযোগ্য উপায়। সিএসএস দিয়ে, আপনি পৃষ্ঠা বিন্যাস, রং, টাইপোগ্রাফি, পটভূমি চিত্র এবং আরও অনেক কিছু নিয়ন্ত্রণ করতে পারেন। মূলত, যদি এটি একটি ভিজ্যুয়াল স্টাইল হয়, তবে সিএসএসটি আপনার শৈলীগুলিকে আপনার ওয়েবসাইটগুলিতে আনতে উপায়।
আপনি যখন কোনও দস্তাবেজে CSS শৈলী যোগ করেন, তখন আপনি লক্ষ্য করতে পারেন যে দস্তাবেজটি আর দীর্ঘতর হতে শুরু করে। এমনকি কয়েকটি পৃষ্ঠা সহ একটি ছোট সাইটও একটি বড় সিএসএস ফাইলের সাথে শেষ হতে পারে - এবং প্রচুর পরিমাণে প্রচুর সামগ্রী এবং প্রচুর সংখ্যক পৃষ্ঠাতে প্রচুর CSS ফাইল থাকতে পারে। এটি প্রতিক্রিয়াশীল সাইটগুলি দ্বারা সংযোজিত হয়েছে যা শৈলী পত্রগুলিতে প্রচুর মিডিয়া ক্যোয়ারীগুলি অন্তর্ভুক্ত করে, যাতে ভিজ্যুয়ালগুলি কীভাবে দেখায় এবং পৃষ্ঠাটি বিভিন্ন স্ক্রীনের জন্য কীভাবে বের হয়।
হ্যাঁ, সিএসএস ফাইল দীর্ঘ পেতে পারেন। এটি সাইটের কার্যকারিতা এবং ডাউনলোডের গতির ক্ষেত্রে এটি একটি বড় সমস্যা নয়, কারণ এমনকি একটি দীর্ঘ CSS ফাইলটি খুব ছোট হতে পারে (যেহেতু এটি সত্যিই একটি পাঠ্য নথি)। এখনও, পৃষ্ঠা গতিতে আসে প্রতিটি সামান্য বিট গণনা, তাই আপনি যদি আপনার শৈলী শীট leaner করতে পারেন, এটি একটি ভাল ধারণা। এই যেখানে "কমা" আপনার স্টাইল শীট খুব সহজেই আসতে পারেন!
কমাস এবং সিএসএস
আপনি সিএএস নির্বাচক সিনট্যাক্সে কমা খেলে কোন ভূমিকা অবাক করেছেন। বাক্য হিসাবে, কমা বিচ্ছিন্নতা - কোড না - বিভাজক এনেছে। একটি সিএসএস নির্বাচক কমা একই শৈলী মধ্যে একাধিক নির্বাচক পৃথক করে।
উদাহরণস্বরূপ, নিচের কিছু সিএসএস দেখুন।
th {রঙ: লাল; }td {রঙ: লাল; }p.red {রঙ: লাল; }div # firstred {রঙ: লাল; }
এই সিনট্যাক্স দিয়ে, আপনি যে আপনি চান বলছেন ম ট্যাগ, TD ট্যাগ, লাল রঙের সাথে অনুচ্ছেদ ট্যাগ এবং আইডি দিয়ে ডিভ্যাগ ট্যাগটি স্টাইলের রঙ লাল করার জন্য সকলকে অগ্রাধিকার দেয়।
এটি পুরোপুরি গ্রহণযোগ্য সিএসএস, তবে এটিকে লেখার ক্ষেত্রে দুটি উল্লেখযোগ্য ত্রুটি রয়েছে:
- ভবিষ্যতে, যদি আপনি এই বৈশিষ্ট্যের ফন্টের রঙটি নীলতে পরিবর্তন করার সিদ্ধান্ত নেন, তবে আপনার শৈলী পত্রিকায় এটিকে চারবার পরিবর্তন করতে হবে।
- এটি আপনার স্টাইল শীটের অতিরিক্ত অক্ষর যোগ করে যা আপনার দরকার নেই। এই 4 টি শৈলী ওভারকিউল বলে মনে হচ্ছে না, তবে আপনি যদি আপনার সমগ্র স্টাইল শীট জুড়ে এটি চালিয়ে যান তবে লাইনগুলি যোগ করা হবে এবং এটির চাদরটি অনেক বেশি হবে, যা তার চেয়ে বেশি বড় হবে।
এই ত্রুটিগুলি এড়াতে এবং আপনার সিএসএস ফাইলটি স্ট্রিমলাইন করতে, আমরা কমা ব্যবহার করার চেষ্টা করব।
পৃথক নির্বাচকদের জন্য কমাস ব্যবহার করে
4 টি পৃথক সিএসএস নির্বাচক এবং 4 টি নিয়ম লেখার পরিবর্তে, আপনি প্রতিটি শৈলীগুলিকে কমা দিয়ে পৃথক নির্বাচকদের পৃথক করে এক নিয়ম সম্পত্তিতে একত্রিত করতে পারেন। এখানে কীভাবে এটি করা হবে:
th, td, p.red, div # firstred {color: red; }
কমা অক্ষরটি মূলত নির্বাচকর ভিতরে "এবং" শব্দ হিসাবে কাজ করে। তাই এই টি প্রযোজ্যজ ট্যাগ এবংTD ট্যাগ লাল এবং ক্লাস লাল এবং আইডি সঙ্গে div ট্যাগ সঙ্গে অনুচ্ছেদ ট্যাগ। আমরা ঠিক আগে যা ছিল, কিন্তু 4 টি সিএসএস নিয়ম প্রয়োজন পরিবর্তে আমাদের একাধিক নির্বাচকদের সাথে একক নিয়ম রয়েছে। কমা যা নির্বাচক হিসাবে করে তা হল, এটি আমাদেরকে এক নিয়মে একাধিক নির্বাচক রাখতে দেয়।
এই পন্থাগুলি কেবলমাত্র বিনীত, পরিচ্ছন্ন CSS ফাইলগুলির জন্য নয়, এটি ভবিষ্যতের আপডেটগুলিকে আরও সহজ করে তোলে। এখন যদি আপনি লাল থেকে নীল রঙ পরিবর্তন করতে চেয়েছিলেন তবে আপনাকে কেবলমাত্র স্থানীয় 4 স্টাইলের নিয়মগুলির পরিবর্তে এক অবস্থানে পরিবর্তন করতে হবে! পুরো সিএসএস ফাইল জুড়ে এই সময় সঞ্চয় সম্পর্কে চিন্তা করুন এবং আপনি দেখতে পাবেন এটি কীভাবে দীর্ঘ সময় ধরে আপনার সময় ও স্থান উভয়টি সংরক্ষণ করবে!
সিনট্যাক্স পরিবর্তন
কিছু লোক প্রতিটি সিলেক্টরটিকে নিজের লাইনে আলাদা করে সিএসএসকে আরও সুস্পষ্ট করে তুলতে পছন্দ করে, এটি উপরের লাইনে একটিকে লিখিত করার পরিবর্তে। এই যে কিভাবে করা হবে:
ম,TD,p.red,DIV আছে # firstred{লাল রং;}
লক্ষ্য করুন যে প্রতিটি নির্বাচকর পরে আপনি কমা রাখেন এবং তারপরে পরবর্তী নির্বাচককে তার নিজস্ব লাইনটিতে ভঙ্গ করতে "প্রবেশ করান" ব্যবহার করুন। আপনি চূড়ান্ত নির্বাচক পরে একটি কমা যোগ করবেন না।
আপনার নির্বাচকদের মধ্যে কমাগুলি ব্যবহার করে, আপনি ভবিষ্যতে আপডেট করা আরও সহজ এবং আরও সহজে পড়তে সহজতর একটি আরও কমপ্যাক্ট স্টাইল শীট তৈরি করেন!
জেনারেল ক্রাইনিনের মূল নিবন্ধ। 5/8/17 তারিখে জেরেমি গিরার্ড দ্বারা সম্পাদিত
