স্প্যান এবং ডিভ HTML উপাদানগুলি কীভাবে ব্যবহার করবেন

বৃহত্তর শৈলী এবং বিন্যাস নিয়ন্ত্রণের জন্য CSS এবং span ব্যবহার করুন।

অনেকগুলি ওয়েব ডিজাইন এবং এইচটিএমএল / সিএসএসের নতুন ব্যক্তিরা ওয়েবপেজগুলি তৈরি করার সময় এবং

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

এলিমেন্ট ব্যবহার করে

DIV উপাদান আপনার ওয়েব পৃষ্ঠায় লজিক্যাল বিভাগ নির্ধারণ করে।

এটি মূলত একটি বাক্স যা আপনি অন্য HTML উপাদানগুলি স্থাপন করতে পারেন যা যৌগিকভাবে একসঙ্গে যায়। একটি বিভাগে এটিতে একাধিক অন্যান্য উপাদান থাকতে পারে, যেমন অনুচ্ছেদ, শিরোনাম, তালিকা, লিঙ্ক, চিত্র ইত্যাদি। এর ভিতরে অন্যান্য বিভাগ থাকতে পারে যাতে আপনার এইচটিএমএল ডকুমেন্টে অতিরিক্ত কাঠামো এবং প্রতিষ্ঠান সরবরাহ করতে পারে।

Div উপাদানটি ব্যবহার করতে, একটি পৃথক বিভাগ হিসাবে আপনি চান এমন আপনার পৃষ্ঠার ক্ষেত্রের আগে একটি খোলা

ট্যাগ স্থাপন করুন এবং এটির পরে একটি ঘনিষ্ঠ ট্যাগ করুন:

div এর বিষয়বস্তু

যদি আপনার পৃষ্ঠার এলাকাটি কিছু অতিরিক্ত তথ্য প্রয়োজন যা আপনি সিএসএস এর সাথে শৈলীতে ব্যবহার করতে চান তবে আপনি একটি আইডি নির্বাচনকারী (যেমন,

id = "myDiv">), বা একটি শ্রেয় নির্বাচক (যেমন, ক্লাস = "বড় ডিভ">)। এই বৈশিষ্ট্যগুলি উভয় তারপর সিএসএস ব্যবহার করে নির্বাচিত বা জাভাস্ক্রিপ্ট ব্যবহার করে সংশোধন করা যাবে। বর্তমান আইডির পরিবর্তে শ্রেণী নির্বাচনকারীর পরিবর্তে বর্তমান সর্বোত্তম অনুশীলনগুলি ভাগ করা যায়, কারণ নির্দিষ্ট ID নির্বাচনকারীর সংখ্যা সত্য, তবে, আপনি এক একটি ব্যবহার করতে পারেন এবং এমনকি একটি বিভাগ এবং একটি ক্লাস নির্বাচক উভয় একটি বিভাগ দিতে পারেন।

কখন

ভার্সন <বিভাগ> ব্যবহার করতে হবে

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

  • যদি আপনি পৃষ্ঠার সেই এলাকার শৈলী যোগ করার জন্য কেবলমাত্র উপাদানটি চান তবে আপনাকে div উপাদানটি ব্যবহার করতে হবে।
  • যদি বিষয়বস্তুটি অন্তর্ভুক্ত করা হয় তবে এটি একটি স্বতন্ত্র ফোকাস এবং তার নিজের উপর দাঁড়াতে পারে, আপনি পরিবর্তে বিভাগ উপাদান ব্যবহার করতে চাইতে পারেন।

পরিশেষে, উভয় divs এবং বিভাগগুলি একইভাবে ভালো আচরণ করে এবং আপনি তাদের কোনটি মূল্য দিতে পারেন এবং CSS এর সাহায্যে তাদের আপনার শৈলীর চেহারা পেতে পারেন। এই উভয় ব্লক স্তরের উপাদান।

এলিমেন্টের ব্যবহার

স্প্যান এলিমেন্ট ডিফল্টরূপে একটি ইনলাইন উপাদান। এটি div এবং বিভাগ উপাদান থেকে পৃথক করে সেট করে। স্প্যান উপাদানটি সাধারণত একটি নির্দিষ্ট টুকরাটি সাধারণত সাধারণভাবে পাঠানো হয়, যাতে এটি অতিরিক্ত "হুক" প্রদান করে যা পরবর্তীতে স্টাইল করতে পারে। সিএসএস এর সাথে ব্যবহার করা হয়, এটি এটি সংযুক্ত টেক্সট এর শৈলী পরিবর্তন করতে পারে; যাইহোক, কোন শৈলী অ্যাট্রিবিউট ছাড়াই, স্প্যান এলিমেন্টের শুধুমাত্র টেক্সট এ কোন প্রভাব নেই।

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


উজ্জ্বল পাঠ্য এবং অ হাইলাইট করা পাঠ্য।

সিএসএস (যেমন, ক্লাস = "হাইলাইট">) দিয়ে পাঠ্য শৈলীতে স্প্যান এলিমেন্টে ক্লাস = "হাইলাইট" বা অন্য বর্গ যোগ করুন।

স্প্যান এলিমেন্টের কোনও প্রয়োজনীয় বৈশিষ্ট্য নেই, তবে তিনটি যেটি সবচেয়ে উপযোগী, সেটি ডিভি উপাদানগুলির মতই।

  • শৈলী
  • শ্রেণী
  • আইডি

যখন আপনি নথিতে একটি নতুন ব্লক-স্তরের উপাদান হিসাবে যে বিষয়বস্তুকে ব্যাখ্যা না করেই বিষয়বস্তু শৈলী পরিবর্তন করতে চান স্প্যান ব্যবহার করুন

উদাহরণস্বরূপ, যদি আপনি লাল রঙের একটি H3 শিরোনামের দ্বিতীয় শব্দটি চান, তবে আপনি স্প্যান এলিমেন্টের সাথে এই শব্দটিকে ঘিরে ধরতে পারেন যা এই শব্দটিকে লাল পাঠ হিসেবে রূপ দিতে পারে। শব্দ এখনও h3 উপাদান অংশ, কিন্তু এখন এছাড়াও লাল প্রদর্শন:

এটি আমার অসাধারণ শিরোনাম

২/2/17 তারিখে জেরেমি গিয়ার্ড দ্বারা সম্পাদিত