সিএসএস ব্যবহার: আগে এবং: ইনলাইন সিএসএসের সাথে সিউডো-এলিমেন্টগুলির পরে?

Question

আমি ইনলাইন সিএসএস (যেমন styleবৈশিষ্ট্যগুলিতে সিএসএস ) দিয়ে একটি এইচটিএমএল ইমেল স্বাক্ষর তৈরি করছি এবং এটি :beforeএবং :afterসিউডো-উপাদানগুলি ব্যবহার করা সম্ভব কিনা তা সম্পর্কে আমি আগ্রহী ।

যদি তা হয় তবে আমি কীভাবে ইনলাইন সিএসএস দিয়ে এরকম কিছু বাস্তবায়ন করব?

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }

Comments

সিউডো-ক্লাস বা ছদ্ম-উপাদানগুলিকে লক্ষ্য করতে আপনি ইনলাইন স্টাইল ব্যবহার করতে পারবেন না।

— ডেভিড মনিকাকে

সম্ভবত ইনলাইন শৈলীর সাথে সিএসএস সিউডো-শ্রেণীর

— চ্যাম্প

@ চ্যাম্প: সিউডো-এলিমেন্ট এবং সিউডো-ক্লাস একই জিনিস নয়, একই প্রশ্ন নয়। আমি এখানে আমার নিজস্ব উত্তর লিখতে।

— BoltClock

Answer 1

আপনি সিউডো-উপাদানগুলির জন্য ইনলাইন স্টাইল নির্দিষ্ট করতে পারবেন না।

এটি কারণ সিউডো-এলিমেন্টস, সিউডো-ক্লাসগুলির মতো ( এই অন্য প্রশ্নের আমার উত্তর দেখুন ) সিএসএসে সংজ্ঞায়িত করা হয়েছে ডকুমেন্ট ট্রিটির বিমূর্ততা হিসাবে যা এইচটিএমএলে প্রকাশ করা যায় না। একটি ইনলাইনstyleঅন্যদিকে, বৈশিষ্ট্য কোনও নির্দিষ্ট উপাদানের জন্য এইচটিএমএল-এর মধ্যে নির্দিষ্ট করা হয়।

যেহেতু ইনলাইন শৈলীগুলি কেবলমাত্র এইচটিএমএল এ ঘটতে পারে তাই এটি কেবলমাত্র এইচটিএমএল উপাদানের উপর প্রয়োগ করা হয় যা সেগুলি সংজ্ঞায়িত করা হয়, এবং এটি তৈরি করা কোনও ছদ্ম-উপাদানগুলিতে নয়।

একদিকে যেমন, সিউডো-এলিমেন্ট এবং সিউডো-ক্লাসের মধ্যে এই দিকের প্রধান পার্থক্য হ'ল ডিফল্ট হিসাবে উত্তরাধিকার সূত্রে প্রাপ্ত বৈশিষ্ট্যগুলি উত্পাদনকারী উপাদান দ্বারা এবং উত্তরাধিকার সূত্রে প্রাপ্ত হবে , অন্যদিকে ছদ্ম-শ্রেণীর শৈলীগুলি মোটেই প্রয়োগ হয় না। আপনার ক্ষেত্রে, উদাহরণস্বরূপ, আপনি যদি কোনও উপাদানের জন্য একটি ইনলাইন শৈলী বৈশিষ্ট্য স্থাপন করেন তবে এটি উত্তরাধিকার সূত্রে প্রাপ্ত হবে । সাবধানতাটি হ'ল আপনি ইনলাইন শৈলীর বৈশিষ্ট্যটি দিয়ে ঘোষণা করতে পারবেন না ; আপনার এটি অবশ্যই স্টাইলশিটে করতে হবে।:before:aftertext-align: justifytdtd:aftertd:after

Answer 2

উপরে উল্লিখিত হিসাবে: এটি একটি সিএসএস সিউডো-শ্রেণি / এলিমেন্ট ইনলাইন কল করা সম্ভব নয়। আমি এখন যা করেছি তা হ'ল: আপনার উপাদানটিকে একটি অনন্য শনাক্তকারী, এফ.এক্স। একটি আইডি বা একটি অনন্য ক্লাস। এবং একটি মানানসই <style>উপাদান লিখুন

<style>#id29:before { content: "*";}</style>
<article id="id29">
  <!-- something -->
</article>

কৃপণভাবে, তবে কি ইনলাইন সিএসএস নেই ..?

Comments

এটি ইনলাইন সিএসএস নয়। ইনলাইন সিএসএসের জন্য পৃথক এইচটিএমএল উপাদানগুলিতে স্টাইল = "" বৈশিষ্ট্যটি প্রেরণ করা প্রয়োজন। সাধারণভাবে জিএসএসে ফর্ম্যাট করা সিএসএস প্রেরণের জন্য প্রয়োজনীয়, যা <স্টাইল> ট্যাগগুলিতে যেকোন কিছু বাদ দেয়। অটোমেটরের জন্য এখানে ( zurb.com/ink/inliner.php ) দেখুন

— কেজ

আমি মনে করি এটি অনূদিত সিউডো-উপাদানগুলিতে আপনি পেতে পারেন এটি সবচেয়ে কাছের। এখনো ভালো, নতুন ব্যবহার scopedশৈলী এবং :root(এই এত শান্ত) psuedo ক্লাসের: <article><style scoped>:root:before { content: "*";}</style><!-- something --></article>।

— বেন জে

সংশোধন: :scopeসিউডো-ক্লাসটি ব্যবহার করুন :<article><style scoped>:scope:before { content: "*";}</style><!-- something --></article>

— বেন জে

এই স্টাফটি খুব নতুন, সম্ভবত বাস্তবায়িত হয়নি এবং সম্ভবত পরিবর্তন হবে। এটি বর্তমান এইচটিএমএল স্পেক ( scopeডি স্টাইল) এবং সিএসএস স্পেক ( :scope) এ রয়েছে । আমার আরো স্পষ্ট করা উচিত।

— বেন জে

<স্টাইল> ... </style> ট্যাগগুলি ব্যবহার করে অভ্যন্তরীণ বা এম্বেড থাকা সিএসএস, ইনলাইন সিএসএস নয়।

— জেমস অ্যান্ডারসন জুনিয়র

Answer 3

আপনি ইনলাইনটিতে ডেটা ব্যবহার করতে পারেন

 <style>   
 td { text-align: justify; }
 td:after { content: attr(data-content); display: inline-block; width: 100%; }
</style>

<table><tr><td data-content="post"></td></tr></table>

Comments

এটি সিউডো-উপাদান data-contentহিসাবে বৈশিষ্ট্য মুদ্রণ করে content। ইনলাইন সিএসএস দিয়ে সিউডো-উপাদান তৈরির সাথে এর কোনও যোগসূত্র নেই।

— নীল ক্যাস্পারসন

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

— ওয়ান্টে

কারওর পরে সামগ্রীতে গতিশীল সামগ্রী যুক্ত করতে চাইলে এটির পক্ষে আসলেই খুব ভাল উত্তর। এই সমস্যার সাথে সম্পর্কিত হতে পারে না, তবে গুগলের মাধ্যমে এই সমাধানটি অনুসন্ধান করার সময় এই প্রশ্নটি প্রদর্শিত হচ্ছে।

— Aleks

ডকুমেন্টেশন দেখুন ।

— user4642212

Answer 4

ডেভিড থমাস যেমন বলেছিলেন তেমন ইনলাইন সিএসএস -তে সিউডো-ক্লাস বা সিউডো-এলিমেন্টকে লক্ষ্য করা যায় না । আরও তথ্যের জন্য সিউডো-ক্লাস সম্পর্কে বোল্টক্লকের এই উত্তরটি দেখুন

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

আমরা ছদ্ম-উপাদানগুলির জন্য একই ব্যবহার লিখতে পারি

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

Comments

আমার উত্তর এবং প্রশ্নে আমার মন্তব্য দেখুন।

— BoltClock

হ্যাঁ এক নয় কিন্তু যে কারণগুলির পিছনে সেগুলি ইনলাইন ব্যবহার করা যায় না ঠিক একই?

— চ্যাম্পে

উত্তরগুলি একই, তবে প্রশ্নগুলি খুব আলাদা।

— বোল্টক্লক

Answer 5

আপনি ইনলাইন সিএসএসে সিউডো উপাদান তৈরি করতে পারবেন না।

তবে, আপনি যদি স্টাইলসীটে সিউডো উপাদান তৈরি করতে পারেন তবে তার মূল উপাদানটিতে একটি ইনলাইন স্টাইল সেট করে এটি ইনলাইন স্টাইল করার একটি উপায় আছে এবং এরপরে সিউডো উপাদানটি স্টাইল করার জন্য উত্তরাধিকারী কীওয়ার্ড ব্যবহার করুন:

<parent style="background-image:url(path/to/file); background-size:0px;"></p>

<style> 
   parent:before{
      content:'';
      background-image:inherit;
      (other)
   }
</style>

কখনও কখনও এটি সহজ হতে পারে।

Answer 6

হ্যাঁ এটি সম্ভব , উদাহরণ হিসাবে আপনি আগে বা আগে যে উপাদানটি যুক্ত করেছেন তার জন্য কেবল ইনলাইন স্টাইল যুক্ত করুন

 <style>
     .horizontalProgress:after { width: 45%; }
 </style><!-- Change Value from Here -->

 <div class="horizontalProgress"></div>

Comments

এটি একটি ইনলাইন স্টাইলশিট। ইনলাইন সিএসএস নয়।

— এসগার

এটি প্রকৃত প্রশ্নের সমাধান করে না এমনটি বাদে এই কোডটি ভুল, ::afterএবং ::beforeসিউডো-উপাদানগুলির content: valueঅন্যথায় ডিফল্টর প্রয়োজন হয় content:noneযার ফলস্বরূপ কিছুই হয় না।

— zer00ne

<স্টাইল> ... </style> ট্যাগগুলি ব্যবহার করে অভ্যন্তরীণ বা এম্বেড থাকা সিএসএস, ইনলাইন সিএসএস নয়।

— জেমস অ্যান্ডারসন জুনিয়র

Answer 7

পূর্বে উল্লিখিত হিসাবে, আপনি ছদ্ম শ্রেণির স্টাইলিংয়ের জন্য ইনলাইন উপাদান ব্যবহার করতে পারবেন না । সিউডো ক্লাসের আগে এবং পরে এলিমেন্টের রাজ্য হয়, প্রকৃত উপাদান নয়। আপনি সম্ভবত এটির জন্য জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন।

Comments

তারা ছদ্ম- উপাদান যা রাজ্য নয়।

— user4642212

Answer 8

যদি আপনার এইচটিএমএলটির নিয়ন্ত্রণ থাকে তবে আপনি সিউডোর পরিবর্তে একটি আসল উপাদান যুক্ত করতে পারেন। : পূর্বে এবং: সিউডো উপাদানগুলি সরাসরি খোলা ট্যাগের পরে বা বন্ধ ট্যাগের ঠিক আগে প্রদর্শিত হয়। এই CSS এর জন্য ইনলাইন সমতুল্য

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }

এরকম কিছু হবে:

<table>
<tr>
<td style="text-align: justify;">
TD Content
<span class="inline_td_after" style="display: inline-block; width: 100%;"></span>
</td>
</tr>
</table>

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

Answer 9

তুমি ব্যবহার করতে পার

parent.style.setProperty("--padding-top", (height*100/width).toFixed(2)+"%");

সিএসএসে

el:after{
  ....
  padding-top:var(--padding-top, 0px);
}