কিন্তু কোডিং করার সময়, প্রতিটি ওয়েব পৃষ্ঠার জন্য আলাদাভাবে একই CSS বৈশিষ্ট্য অন্তর্ভুক্ত করা কঠিন। সুতরাং, একটি সমাধান ব্যবহার করা প্রয়োজন যার মাধ্যমে একটি একক স্টাইল শীট তৈরি করা যায় এবং তারপরে একাধিক ফাইল সহজেই অ্যাক্সেস করা যায়।
CSS-এ @import নিয়ম কি?
CSS শৈলী বৈশিষ্ট্য অন্তর্ভুক্ত করার সর্বোত্তম উপায় হল @import নিয়ম ব্যবহার করে। @import অন্য স্টাইল শীট থেকে একটি CSS স্টাইলশীট আমদানি বা অ্যাক্সেস করতে ব্যবহৃত হয়। এটি ডেভেলপারের প্রচেষ্টাকে হ্রাস করে কারণ আমদানি করা স্টাইল শীটে যোগ করা সমস্ত বৈশিষ্ট্য সরাসরি শুধুমাত্র @import লিখে এবং তারপরে স্টাইল শীটের সঠিক নাম লিখে প্রয়োগ করা হয়।
@import নিয়মের সিনট্যাক্স
অন্য স্টাইলশীট থেকে একটি স্টাইল শীট অ্যাক্সেস করতে @import নিয়ম যোগ করার সিনট্যাক্স নিম্নরূপ:
@আমদানি 'stylesheetname.css' ;
@import নিয়ম নিম্নলিখিত পদ্ধতি দ্বারা যোগ করা যেতে পারে:
@আমদানি url ( stylesheetname.css ) ;
সহজভাবে, সিএসএস স্টাইলশীট ফাইলের নাম ইনভার্টেড কমা বা গোলাকার বন্ধনীতে যোগ করুন “ url 'লেখার পরে' @আমদানি ”
উদাহরণ: @import নিয়ম যোগ করা
@import নিয়ম কীভাবে কাজ করে তা বোঝার জন্য, আমরা একটি সাধারণ কোড স্নিপেট লিখি:
< h1 > এটি একটি সহজ পাঠ্য! < / h1 >উপরের কোড স্নিপেটে, একটি HTML ডকুমেন্টে একটি সাধারণ এক-লাইন বাক্য যুক্ত একটি
শিরোনাম রয়েছে। এই সাধারণ কোডটি নিম্নলিখিত আউটপুট তৈরি করবে:
কিছু CSS বৈশিষ্ট্য সংজ্ঞায়িত করার জন্য একটি স্টাইলশীট তৈরি করা যাক যা পরবর্তীতে উপরের ওয়েব পৃষ্ঠার ইন্টারফেসটি তৈরি করা ফাইল থেকে আমদানি করা যেতে পারে। আমরা আরেকটি ফাইল তৈরি করি এবং এর নাম ' স্টাইলশীট ' ফাইলের ধরন সহ ' হিসাবে ঘোষণা করা হয়েছে css ”, এবং কেবল
শিরোনাম এবং শরীরের জন্য কিছু বৈশিষ্ট্য যোগ করুন: h1 {
রঙ : মধ্যরাত নীল ;
পেছনের রং : আকাশী ;
পাঠ্য-সারিবদ্ধ : কেন্দ্র ;
}
শরীর {
পেছনের রং : হালকা নীল ;
}
শিরোনাম এবং বডির জন্য স্টাইল বৈশিষ্ট্য সম্বলিত স্টাইলশীট ফাইল অ্যাক্সেস করতে, আমাদের যে কোনো CSS ফাইলে @import নিয়ম যোগ করতে হবে যেখানে সেই স্টাইলিং প্রয়োজন।
শুধুমাত্র একটি সহজ @import নিয়ম যোগ করলে প্রতিটি ওয়েব পৃষ্ঠায় আলাদাভাবে বৈশিষ্ট্য টাইপ না করেই ওয়েব পৃষ্ঠা ইন্টারফেসে সমস্ত শৈলী বৈশিষ্ট্য প্রয়োগ করা হবে।
সুতরাং, @ import নিয়মটি লিখতে হবে:
@আমদানি 'stylesheet.css' ;' লিখে @ আমদানি নিয়ম যোগ করা হচ্ছে url এবং বৃত্তাকার বন্ধনীতে CSS ফাইলের নামও একই ফলাফল প্রদর্শন করবে:
@আমদানি url ( stylesheet.css ) ;বৈশিষ্ট্যগুলি সংজ্ঞায়িত করা হয়েছে ' স্টাইলশীট 'ফাইলটি শুধুমাত্র একটি সহজ যোগ করে বাস্তবায়িত হয়' @আমদানি 'এর জন্য নিয়ম:
এটি কোনো অতিরিক্ত প্রচেষ্টা ছাড়াই একটি ফাইলে CSS বৈশিষ্ট্য অন্তর্ভুক্ত করার সবচেয়ে সহজ উপায়।
CSS-এ @import নিয়মের সুবিধা
@import নিয়মটি সাধারণত নিম্নলিখিত কারণে ব্যবহৃত হয়:
- @import নিয়ম ব্যবহার করা ডেভেলপারের সময় এবং প্রচেষ্টাকে হ্রাস করে কারণ এটি শুধুমাত্র @import এর পরে সেই শীটের নাম লিখে একটি নির্দিষ্ট স্টাইল শীটের সমস্ত বৈশিষ্ট্য প্রয়োগ করে।
- বৃহৎ এবং জটিল ওয়েব অ্যাপে, @import নিয়মটি খুবই সুবিধাজনক বলে প্রমাণিত হয় কারণ একই শৈলীর বৈশিষ্ট্য একাধিক ফাইলে প্রয়োগ করা যেতে পারে শুধুমাত্র স্টাইল শীট ফাইলের নাম যোগ করে।
- স্টাইল শীট উপাদান যেমন হেডার, ফুটার, বডি, ইত্যাদি আলাদা স্টাইল শীট ফাইলগুলিতে সংরক্ষণ করা যেতে পারে এবং তারপরে @ import নিয়ম ব্যবহার করে, একটি থেকে শৈলী বৈশিষ্ট্যগুলি যোগ, অপসারণ বা মন্তব্য করার প্রয়োজন ছাড়াই প্রয়োজনীয় স্টাইলিং আমদানি করা যেতে পারে। ফাইল
এটি @import নিয়মের ব্যবহারকে সংক্ষিপ্ত করে এবং ব্যাখ্যা করে কিভাবে এই নিয়মটিকে CSS অন্তর্ভুক্ত করার সর্বোত্তম পদ্ধতি হিসেবে বিবেচনা করা হয়।
উপসংহার
একটি CSS স্টাইল শীট অন্য স্টাইল শীট থেকে সরাসরি আমদানি বা অ্যাক্সেস করা যেতে পারে এবং আমদানি করা স্টাইল শীটের সমস্ত বৈশিষ্ট্য সরাসরি ফাইলের ওয়েব পৃষ্ঠাতে প্রয়োগ করা হয় যেখানে এটি আমদানি করা হয়েছে। প্রতিটি ওয়েব পেজ ইন্টারফেসের জন্য প্রতিটি CSS প্রপার্টি আলাদাভাবে লেখার প্রয়োজন নেই। শুধু @import-এর সাথে CSS স্টাইল শীট ফাইলের নাম যোগ করতে হবে। এবং, এটি সিএসএস যোগ করার সর্বোত্তম পদ্ধতি হিসাবে বিবেচিত হয়।