পাঠ্য সন্নিবেশ করতে সিএসএস ব্যবহার করে

Question

আমি সিএসএসে তুলনামূলকভাবে নতুন, এবং এটি পাঠ্যের স্টাইল এবং বিন্যাস পরিবর্তন করতে ব্যবহার করেছি।

আমি এখন এটি নীচে প্রদর্শিত হিসাবে পাঠ্য সন্নিবেশ করতে ব্যবহার করতে চাই:

<span class="OwnerJoe">reconcile all entries</span>

যা আমি আশা করি যে আমি এটি হিসাবে দেখাতে পারি:

জো এর টাস্ক: সমস্ত এন্ট্রি মিলিয়ে

এটি হ'ল কেবল "মালিক জো" শ্রেণির হয়ে, আমি চাই পাঠ্যটি Joe's Task:প্রদর্শিত হোক।

আমি কোড সহ এটি করতে পারে:

<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.

তবে এটি ক্লাস এবং পাঠ্য উভয়কেই সুনির্দিষ্টভাবে অপ্রয়োজনীয় মনে হচ্ছে।

আমি যা খুঁজছি তা কি সম্ভব?

সম্পাদনা ওয়ান ধারণা হ'ল এটিকে একটি তালিকা আইটেম হিসাবে সেট করার চেষ্টা করা <li>যেখানে "বুলেট" হ'ল " জোসের কাজ " পাঠ্য। বুলেটগুলির জন্য কীভাবে বিভিন্ন বুলেট-শৈলী এবং এমনকি চিত্রগুলি সেট করা যায় তার উদাহরণ আমি দেখতে পাচ্ছি। তালিকা-বুলেটের জন্য কি কোনও ছোট্ট পাঠ্য ব্যবহার করা সম্ভব?

Comments

<li> ধারণাটি ভাল অনুশীলন নয়। আপনি যদি সত্যিই এটি করতে চান তবে পরিবর্তে একটি টেম্প্লেটিং ভাষাটি দেখুন।

— গ্যারি

সিএসএস 3 ব্যবহার করার মতো শব্দগুলি: সিউডো-এলিমেন্টগুলির পরে বা এর পরে: আপনি সত্যিকার অর্থেই সিএসএস জমিতে অপ্রয়োজনীয় স্থানান্তরিত হবেন (কারণ আপনার মালিকজ, ওনারজেন ইত্যাদির জন্য সিএসএস বিবৃতি যুক্ত করতে হবে)

— ম্যাট বেকম্যান

@ ম্যাট বেকম্যান: আমার সাথে তা ঠিক আছে। আমি আমার প্রতিটি ব্যবহারকারীর জন্য সিএসএস ব্লকগুলি সহজেই সংজ্ঞায়িত করতে পারি। এইচটিএমএল এ বারবার পুনরাবৃত্তি আমার ক্ষেত্রে অত্যধিক মনে হয়।

— অ্যাবেলেঙ্কি

আমি মনে করি বৃহত্তর দর্শকদের জন্য এটির আরও ব্যবহারিক ব্যবহার label.required:before {content: "* ";}সম্ভবত প্রয়োজনীয় ক্ষেত্রগুলির সামনে একটি নক্ষত্র যুক্ত করা পছন্দ করবে perhaps

— প্যাট্রিক

Answer 1

এটির জন্য তবে একটি সিএসএস 2 সক্ষম ব্রাউজার প্রয়োজন (সমস্ত বড় ব্রাউজার, আই 8 +)।

.OwnerJoe:before {
  content: "Joe's Task:";
}

তবে আমি বরং এর জন্য জাভাস্ক্রিপ্ট ব্যবহার করার পরামর্শ দিচ্ছি। JQuery সহ:

$('.OwnerJoe').each(function() {
  $(this).before($('<span>').text("Joe's Task: "));
});

Comments

কোলনের পরে স্থান হওয়া উচিত।

— সিস্টেম PAUSE

প্রাথমিক পরীক্ষাগুলি বিষয়বস্তু-সম্পত্তি ভালভাবে কাজ করে তা নির্দেশ করে। উত্তরটি পাওয়ার জন্য অভিনন্দন যখন প্রত্যেকে প্রত্যেকে বলেন যে এটি করা যায় না। :)

— অ্যাবেলেঙ্কি

পুরানো IE কে কভার করার জন্য, আপনি শর্তাধীন কোড. google.com/p/ie7-js অন্তর্ভুক্ত করতে পারেন যা আপনার সিএসএসকে সমস্ত ব্রাউজারের জন্য একই থাকতে পারে। এটি jQuery এর একটি বিকল্প যা মানের কাছাকাছি।

— সিস্টেম PAUSE

আপনি বরং জাভাস্ক্রিপ্ট ব্যবহার করার পরামর্শ দিবেন কেন?

— রিকি

আকর্ষণীয়: এক বা দুটি কলোনের সাথে কাজ করছে বলে মনে হয়, যেমন .OwnerJoe:beforeএবং.OwnerJoe::before

— মিঃ কেনেডি

Answer 2

JQuery ব্যবহার করে যে উত্তরটি প্রত্যেকে পছন্দ করে বলে মনে হচ্ছে তার একটি বড় ত্রুটি রয়েছে, যা এটি স্কেলযোগ্য নয় (অন্তত এটি লিখিত হিসাবে)। আমি মনে করি মার্টিন হ্যানসেনের সঠিক ধারণা আছে যা HTML5 টি data-*বৈশিষ্ট্য ব্যবহার করা attrib এবং আপনি এমনকি অ্যাডাস্ট্রোফও সঠিকভাবে ব্যবহার করতে পারেন:

এইচটিএমএল:

<div class="task" data-task-owner="Joe">mop kitchen</div>
<div class="task" data-task-owner="Charles" data-apos="1">vacuum hallway</div>

CSS:

div.task:before { content: attr(data-task-owner)"'s task - " ; }
div.task[data-apos]:before { content: attr(data-task-owner)"' task - " ; }

আউটপুট:

Joe's task - mop kitchen
Charles' task - vacuum hallway

Comments

JQuery এর বিপরীতে CSS সামগ্রী ব্যবহার করার একটি আকর্ষণীয় পার্শ্ব প্রতিক্রিয়া হ'ল বিষয়বস্তু দ্বারা সরবরাহিত পাঠ্যটি নির্বাচনযোগ্য নয়, যা পছন্দসই বা নাও হতে পারে ....

— জেফ

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

— '20:

Answer 3

সিএসএস সামগ্রী বৈশিষ্ট্যের অ্যাটর () ফাংশনটিও দেখুন। এটি একটি পাঠ্য নোড হিসাবে উপাদানটির প্রদত্ত বৈশিষ্ট্যকে আউটপুট করে। এটি এর মতো ব্যবহার করুন:

<div class="Owner Joe" />

div:before {
  content: attr(class);
}

এমনকি নতুন HTML5 কাস্টম ডেটা বৈশিষ্ট্য সহ:

<div data-employeename="Owner Joe" />

div:before {
  content: attr(data-employeename);
}

Comments

এটি একটি উপায়ে আরও ভাল ধারণা - সামগ্রী প্রদর্শন করার জন্য CSS শ্রেণি তৈরির ধারণাটিকে আমি ঘৃণা করি। এটি স্কিল ক্যোয়ারির উপর ভিত্তি করে সিএসএস গতিশীল ভিত্তিতে উত্পন্ন করতে পারে। আমি নির্বাচক দ্বারা প্রতিস্থাপন করা হবে div[data-employeename]:before।

— জনি

Answer 4

ঠিক এটির মতো কোড করুন:

.OwnerJoe {
  //other things here
  &:before{
    content: "Joe's Task: ";
  }
}

Comments

এটি বৈধ সিএসএস নয়, তবে স্যাস সিনট্যাক্স।

— আসফান্দ কাজী