অনেক উপায় আছে যা আপনি ওয়েবপেজে সিএসএস স্টাইল প্রয়োগ করতে পারেন, উভয় বাহ্যিক স্টাইল শীট বা ইনলাইন স্টাইল সহ । যদি আপনি একটি বহিরাগত স্টাইল শীট ব্যবহার করছেন, যা HTML ডকুমেন্টের চেহারা এবং অনুভূতিকে নির্দেশ করার প্রস্তাবিত উপায়, এক উপায় @ ইম্পোর্ট ব্যবহার করতে হবে।
@ ইম্পোর্ট নিয়ম আপনাকে আপনার নথিতে গুরুত্বপূর্ণ বহিরাগত স্টাইল শীটগুলির অনুমতি দেয় - হয় একটি HTML পৃষ্ঠায় বা এমনকি অন্য CSS ডকুমেন্টেও। বেশ কয়েকটি ছোট, ফোকাসযুক্ত ফাইলগুলি (লেআউটের জন্য একটি, টাইপোগ্রাফির জন্য এক, চিত্রগুলির জন্য এক ইত্যাদি) এগুলি বেশ কয়েকটি ভেঙে ফেলতে পারে, কখনও কখনও সেই ফাইলগুলি পরিচালনা করতে এবং তাদের বিভিন্ন শৈলীগুলি পরিচালনা করতে আরও সহজ করে তোলে। আপনি যদি সেই সুবিধাটি উপভোগ করতে চান, তবে সেগুলি বিভিন্ন ফাইলগুলি আমদানি করে যা আপনার ওয়েব পেজের প্রদর্শনের জন্য তাদের সমস্ত কাজ করার জন্য আপনাকে কী করতে হবে।
এইচটিএমএল ইনপুট আমদানি
আপনার এইচটিএমএল এর @ ইম্পোর্ট নিয়ম ব্যবহার করতে, আপনি ডকুমেন্টের
এ নিম্নলিখিতটি যোগ করবেন::
<শৈলী>
@import url ("/ styles / default.css");
এই কোডটি এখন এই HTML পৃষ্ঠায় ব্যবহারের জন্য এই শৈলী শীট আমদানি করবে এবং আপনি যে এক ফাইলের মধ্যে আপনার সব শৈলী পরিচালনা করতে পারে। গুরুত্বপূর্ণ স্টাইলশীটস থেকে নেতিবাচক দিক এই পদ্ধতি হল এই পদ্ধতি সমান্তরাল ডাউনলোডের জন্য অনুমতি দেয় না। এই পদ্ধতিটি ব্যবহার করে আমদানি করা অন্য কোনও CSS ফাইলগুলি সহ পৃষ্ঠাটির বাকি অংশে চলে যাওয়ার আগে পৃষ্ঠাটিকে সম্পূর্ণ স্টাইলশীটটি ডাউনলোড করতে হবে। এটি আপনার পৃষ্ঠার গতি এবং ডাউনলোডের কার্যকারিতার উপর নেতিবাচক প্রভাব ফেলবে। আজকের ওয়েবসাইটের সাফল্যের জন্য কী কী পৃষ্ঠাের পারফরম্যান্স গুরুত্বপুর্ণ তা বিবেচনা করে, শুধুমাত্র এই দুর্ঘটনার কারণ হতে পারে আপনি @import ব্যবহার করে এড়াতে চান কেন?
বিকল্প পথ বা পন্থা
আপনার এইচটিএমএল এ @ ইম্পোর্ট ব্যবহার করার বিকল্প হিসাবে, আপনি এই মত যে CSS ফাইল লিঙ্ক করতে পারেন:
এটিই @ ইম্পোর্টের সাথে একইভাবে এই ফাংশনটি আপনাকে এক সেন্ট্রাল অবস্থান / ফাইল থেকে আপনার সব সিএসএস পরিচালনা করতে দেয়, তবে এই পদ্ধতিটি একটি ডাউনলোড দৃষ্টিকোণ থেকে অগ্রাধিকারযোগ্য। আপনি যদি এখনও বিভিন্ন ধরনের স্ট্রিংগুলিকে পৃথক ফাইলগুলিতে ভাগ করতে চান তবে আপনি এটি চালিয়ে যেতে পারেন এবং আপনার মাস্টার CSS ফাইলের ভিতরে @import কার্যকারিতা ব্যবহার করতে পারেন। এর মানে হল যে আপনার বাহ্যিক CSS ফাইলগুলি পৃথকভাবে পরিচালিত হতে পারে, কিন্তু যেহেতু তারা সমস্ত এক মাস্টার সিএসএস-এ আমদানি করে, তাই কর্মক্ষমতা উন্নত হয়।
CSS এ আমদানি করা
উপরের কোডের উদাহরণটি ব্যবহার করে "default.css" ফাইলটি আপনার HTML পৃষ্ঠায় ব্যবহার করতে হবে। যে CSS ফাইল ভিতরে, আপনি আপনার বিভিন্ন পৃষ্ঠা শৈলী আছে হবে। আপনি ঐ সমস্ত পৃষ্ঠাগুলির বিস্তারিত বিবরণগুলি পেতে পারেন, অথবা সহজে ব্যবস্থাপনা পরিচালনার জন্য তাদের পৃথক করার জন্য @import ব্যবহার করতে পারেন। আবার, আসুন আমরা 4 আলাদা CSS ফাইল ব্যবহার করি - এক লেআউটের জন্য, টাইপোগ্রাফির জন্য এক এবং চিত্রগুলির জন্য এক। চতুর্থ ফাইল হল আমাদের "মাস্টার" ফাইল যা আমাদের পৃষ্ঠাটি লিঙ্ক করে (এই উদাহরণের জন্য, এটি "default.css")। যে মাস্টার সিএসএস ফাইলের শীর্ষে আমরা নীচে দেখানো নিয়ম যোগ করতে পারি:
@import url ('/ styles / layout.css');
@import url ('/ styles / type.css');
@import url ('/ styles / images.css');
লক্ষ্য করুন যে এই নিয়মগুলি আপনার CSS ফাইলে সমস্ত অন্যান্য সামগ্রী আগে তাদের কাজ করতে হবে। এই আমদানি নিয়ম আগে আপনি অন্য কোন সিএসএস শৈলী থাকতে পারে না!
ঐ আমদানির নিয়মগুলির নীচে, আপনার ডিফল্ট শীটটিতে আপনি যে অন্যান্য CSS স্টাইলগুলি চান সেটি যুক্ত করতে পারেন। যখন যে প্রধান সিএসএস ফাইলটি লোড করা হয়, এটি প্রথমে এই আলাদা ফাইলগুলি আমদানি করবে এবং স্টাইলশিটের শীর্ষে তাদের স্টাইল যুক্ত করবে। এটি তখন আপনার সমস্ত অন্যান্য স্টাইলগুলি এই আমদানি করা লোকেদের নীচে থাকবে, সম্পূর্ণ CSS ফাইল তৈরি করবে যা ওয়েব ব্রাউজার আপনার সাইট প্রদর্শন করতে ব্যবহার করবে। আপনি ছোট, আরো নিবদ্ধ ফাইলগুলির পরিচালনার সুবিধা পেতে পারেন যখন একটি স্টাইলশীটটি যেটি এইচটিএমএল-এর সাথে যুক্ত থাকে।
মিডিয়া অনুসন্ধানের জন্য & # 64; আমদানি ব্যবহার করা হচ্ছে
একটি বিষয় যা আপনি প্রতিক্রিয়াশীল ওয়েবসাইট শৈলীগুলির জন্য আপনার ওয়েবসাইটের মিডিয়া ক্যোয়ারীগুলিকে আলাদা ফাইলে আলাদা করতে বিবেচনা করতে পারেন। কারণ এই প্রতিক্রিয়াশীল শৈলী আপনার সাইট এর অন্যান্য শৈলী নিয়ম পাশাপাশি যখন বিভ্রান্তিকর হতে পারে, একটি ভিন্ন ফাইল তাদের নিজস্ব উপর থাকার আকর্ষণীয় হতে পারে। এই পদ্ধতির সাথে একটি উদ্বেগ হল যে, আপনার @ ইমপোর্টের নিয়মগুলি অবশ্যই প্রথমে হওয়া উচিত, এর মানে হল আপনার মিডিয়া প্রশ্নগুলি আপনার সাইটের বাকিগুলির আগে লোড হবে। যখন মোবাইল-এর প্রথম প্রতিক্রিয়াশীল সাইট তৈরি করা হয় যা কার্য সম্পাদন করে, তখন এটি একটি সমস্যা হতে পারে। এই কারণেই, আপনি প্রস্তাব করেন যে আপনি আপনার সাইটের প্রতিক্রিয়াশীল শৈলীগুলি আলাদাভাবে অংশ না করে এবং আপনার সাইটে তাদের আনতে @import ব্যবহার করুন। হ্যাঁ, এটা করতে সুবিধাজনক বলে মনে হতে পারে, কিন্তু দুর্বলতাগুলি সেই বেনিফিটের চেয়েও বেশি।
আমি কি ব্যবহার করতে চাচ্ছি? # 64; আমদানী কি?
না, তুমি কর না. অনেকগুলি সাইট কেবল একটি ফাইলের ভিতরে তাদের সমস্ত প্রধান শৈলী প্রদর্শন করে, এবং সেই ফাইলটি যত বড় হয়, তা পরিচালিত হয় (এটিই আমার নিজের কাজের ক্ষেত্রে এটিই)। যদি আপনি @import সহায়ক পেতে পারেন তবে এটি আপনার ওয়ার্কফ্লোের অংশ হতে পারে। অন্যথায়, আপনি নিরাপদে ওয়েবপৃষ্ঠাগুলি তৈরি করতে পারেন যা আপনার সমস্ত সিএসএস নিয়মগুলির একক স্টাইলশীট।
ব্রাউজার সাপোর্ট
খুব, খুব পুরানো ব্রাউজারগুলি এই @import রীতিগুলির মধ্যে কিছু সমস্যার সম্মুখীন হয়, তবে এই ব্রাউজারগুলি আপনার জন্য একটি সমস্যা হতে পারে এই দিনটি অসম্ভব। এটি বিশেষভাবে সত্য যে ইন্টারনেট এক্সপ্লোরারের পুরোনো সংস্করণগুলির জন্য জীবনের শেষ তারিখ শেষ হয়ে গেছে। পরিশেষে, যদি আপনি আপনার এইচটিএমএল বা সিএসএস-এ ইম্পোর্ট রুল ব্যবহার করার সিদ্ধান্ত নেন, তাহলে আপনার ব্রাউজারের লিগ্যাসি সংস্করণগুলির সাথে সমস্যাগুলি নাও হতে পারে, যদি না আপনার IE এর অবিশ্বাস্যভাবে পুরানো সংস্করণগুলির সমর্থন প্রয়োজন হয়।
জনিফার ক্রাইনিনের মূল রচনা জেরেমি গিয়ার্ড দ্বারা সম্পাদিত