CSS প্রোক্সি ইলেক্ট্রন

প্রতীকী কি?

CSS প্রতীকী ইলেকট্রনিকের নির্দিষ্ট অংশের শৈলী সমাযোজন করার জন্য ব্যবহৃত

উদাহরণস্বরূপ, এটি ব্যবহৃত হতে পারে:

  • ইলেকট্রনিকের প্রথম অক্ষর এবং প্রথম লাইনের শৈলী সমাযোজন করা
  • ইলেকট্রনিকের কনটেন্টের আগে বা পরে কনটেন্ট যোগ করা

সংজ্ঞায়িত

প্রতীকীর সংজ্ঞায়িত

selector::pseudo-element {
  property: value;
}

::first-line প্রতীকী

::first-line প্রতীকী লিখিত প্রথম লাইনে বিশেষ শৈলী যোগ করার জন্য ব্যবহৃত

নিচের উদাহরণটি সকল <p> ইলেকট্রনিকের প্রথম লাইনে শৈলী সমাযোজন করে

উদাহরণ

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

আপনার নিজেই প্রয়োগ করুন

প্রত্যাহার::first-line প্রতীকী শুধুমাত্র ব্লক ইলেকট্রনিক প্রযোজ্য

নিচের এই অবস্থা প্রযোজ্য ::first-line প্রতীকী:

  • ফন্ট অবস্থা
  • রঙ অবস্থা
  • পটভূমি অবস্থা
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

দৃষ্টান্তদ্বিহাইপহেশ সংজ্ঞায়িত - ::first-line তুলনা :first-line

একটি দ্বিহাইপহেশ সংজ্ঞায়িত প্রতীকীকে CSS3-এ একটি হাইপহেশ সংজ্ঞায়িত প্রতীকীর জায়গায় প্রতিস্থাপন করেছে। এটি W3C প্রয়াসপ্রতীকীএবংপ্রতীকীপ্রয়াস

CSS2 এবং CSS1-এ, প্রতীকী এবং প্রতীকী একটি হাইপহেশ সংজ্ঞায়িত

পূর্ববর্তী সামঞ্জস্য রাখার জন্য, CSS2 এবং CSS1 প্রতীকী একটি হাইপহেশ সংজ্ঞায়িত

::first-letter প্রতীকী

::first-letter প্রতীকী লিখিত প্রথম অক্ষরে বিশেষ শৈলী যোগ করার জন্য ব্যবহৃত

নিচের উদাহরণটি সকল <p> ইলেকট্রনিকের চীনা লিখিত প্রথম অক্ষরের ফরম্যাট সমাযোজন করে

উদাহরণ

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

আপনার নিজেই প্রয়োগ করুন

প্রত্যাহার::first-letter প্রতীকী শুধুমাত্র ব্লক ইলেকট্রনিক প্রযোজ্য

নিচের এই অবস্থা ::first-letter প্রতীকী প্রযোজ্য

  • ফন্ট অবস্থা
  • রঙ অবস্থা
  • পটভূমি অবস্থা
  • বাহ্যিক মাঝামাঝি
  • অভ্যন্তরীণ মাঝামাঝি
  • কিনারা অবস্থা
  • text-decoration
  • vertical-align（যখন "float" "none" হয় তবে）
  • text-transform
  • line-height
  • float
  • clear

মিথ্যা প্রতিভা এবং CSS শ্রেণী

মিথ্যা প্রতিভা CSS শ্রেণীর সাথে ব্যবহার করা যেতে পারে:

উদাহরণ

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

আপনার নিজেই প্রয়োগ করুন

উপরোক্ত উদাহরণটি class="intro" এর প্রথম অক্ষরকে লাল রঙে এবং বড় ফন্টে দেখাবে。

বহুবহু মিথ্যা প্রতিভা

আরও কিছু মিথ্যা প্রতিভা মিলিয়ে ব্যবহার করা যেতে পারে。

নিম্নলিখিত উদাহরণটিতে, গ্রন্থাকারটির প্রথম অক্ষর লাল রঙে এবং xx-large ফন্ট আকারে দেখাবে।প্রথম লাইনের বাকি অংশ নীল রঙে এবং ছোট বড়লিপিতে দেখাবে।এই গ্রন্থাকারটির বাকি অংশ ডিফল্ট ফন্ট আকার এবং রঙে দেখাবে:

উদাহরণ

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

আপনার নিজেই প্রয়োগ করুন

CSS - ::before 伪元素

::before মিথ্যা প্রতিভা ইলেকট্রনিক কনটেন্ট আগে কিছু কনটেন্ট জোড়ার জন্য ব্যবহার করা যেতে পারে。

নিম্নলিখিত উদাহরণটি প্রত্যেক <h1> ইলেকট্রনিক কনটেন্ট আগে একটি ছবি জোড়ে দেবে:

উদাহরণ

h1::before {
  content: url(smiley.gif);
}

আপনার নিজেই প্রয়োগ করুন

CSS - ::after 伪元素

::after মিথ্যা প্রতিভা ইলেকট্রনিক কনটেন্ট পরে কিছু কনটেন্ট জোড়ার জন্য ব্যবহার করা যেতে পারে。

নিম্নলিখিত উদাহরণটি প্রত্যেক <h1> ইলেকট্রনিক কনটেন্ট পরে একটি ছবি জোড়ে দেবে:

উদাহরণ

h1::after {
  content: url(smiley.gif);
}

আপনার নিজেই প্রয়োগ করুন

CSS - ::selection 伪元素

::selection মিথ্যা প্রতিভা ব্যবহারকারী ব্যবহারকারীর চিহ্নিত ইলেকট্রনিক অংশ

নিম্নলিখিত CSS প্রতিভাগুলির প্রয়োগ করা যেতে পারে ::selection:

  • color
  • background
  • cursor
  • outline

নিম্নলিখিত উদাহরণটি প্রকাশিত টেক্সটকে সোনালী প্রকাশনায় লাল রঙে দেখাবে:

উদাহরণ

::selection {
  color: red; 
  background: yellow;
}

আপনার নিজেই প্রয়োগ করুন

সমস্ত CSS মিথ্যা প্রতিভা

সিলেক্টর উদাহরণ উদাহরণ বর্ণনা
::after p::after প্রত্যেক <p> ইলেকট্রনিক পরে কনটেন্ট জোড়ুন。
::before p::before প্রত্যেক <p> ইলেকট্রনিক আগে কনটেন্ট জোড়ুন。
::first-letter p::first-letter প্রত্যেক <p> ইলেকট্রনিক প্রথম অক্ষর বাছাই করুন。
::first-line p::first-line প্রত্যেক <p> ইলেকট্রনিক প্রতিভা প্রথম লাইন বাছাই করুন。
::selection p::selection ব্যবহারকারীর চিহ্নিত ইলেকট্রনের অংশ নির্বাচিত করুন

সমস্ত CSS প্রকৃতপক্ষে

সিলেক্টর উদাহরণ উদাহরণ বর্ণনা
:active a:active সক্রিয় লিঙ্ক নির্বাচিত করুন
:checked input:checked প্রত্যেক চিহ্নিত <input> ইলেকট্রন নির্বাচিত করুন
:disabled input:disabled প্রত্যেক নিষ্ক্রিয় <input> ইলেকট্রন নির্বাচিত করুন
:empty p:empty কোনো সন্তানকে না থাকা প্রত্যেক <p> ইলেকট্রন নির্বাচিত করুন
:enabled input:enabled প্রত্যেক সক্রিয় <input> ইলেকট্রন নির্বাচিত করুন
:first-child p:first-child পিতার প্রথম সন্তানকে নির্বাচিত প্রত্যেক <p> ইলেকট্রন
:first-of-type p:first-of-type পিতার প্রথম প্রকারের <p> ইলেকট্রন নির্বাচিত করুন
:focus input:focus ফোকাস পাওয়া <input> ইলেকট্রন নির্বাচিত করুন
:hover a:hover কোনো লিঙ্কের উপর মাউস হওয়ার সময়
:in-range input:in-range নির্দিষ্ট মান বিস্তারের মধ্যে মানবিত্ত <input> ইলেকট্রন নির্বাচিত করুন
:invalid input:invalid অবৈধ মানবিত্ত প্রত্যেক <input> ইলেকট্রন নির্বাচিত করুন
:lang(language) p:lang(it) lang এট্রিবিউট মান "it"-এর ভাবে শুরু প্রত্যেক <p> ইলেকট্রন নির্বাচিত করুন
:last-child p:last-child পিতার শেষ সন্তানকে নির্বাচিত প্রত্যেক <p> ইলেকট্রন
:last-of-type p:last-of-type পিতার শেষ প্রকারের <p> ইলেকট্রন নির্বাচিত করুন
:link a:link প্রত্যেক অপরিদর্শিত লিঙ্ক নির্বাচিত করুন
:not(selector) :not(p) প্রত্যেক নন-<p> ইলেকট্রন নির্বাচিত করুন
:nth-child(n) p:nth-child(2) পিতার দ্বিতীয় সন্তান হিসাবে প্রত্যেক <p> ইলেকট্রন নির্বাচিত করুন
:nth-last-child(n) p:nth-last-child(2) প্রথম সন্ত্রাসী সন্তান হিসাবে পিছনের সন্তানকে নির্বাচিত প্রত্যেক <p> ইলেকট্রন
:nth-last-of-type(n) p:nth-last-of-type(2) পিতৃয়ের দ্বিতীয় <p> ইলেকট্রন হিসাবে পরিগণিত প্রতিটি <p> ইলেকট্রনকে বাছাই করুন
:nth-of-type(n) p:nth-of-type(2) প্রতিটি <p> ইলেকট্রনকে বাছাই করুন যা তার পিতৃয়ের দ্বিতীয় <p> ইলেকট্রন
:only-of-type p:only-of-type প্রতিটি <p> ইলেকট্রনকে বাছাই করুন যা তার পিতৃয়ের একমাত্র <p> ইলেকট্রন
:only-child p:only-child প্রতিটি <p> ইলেকট্রনকে বাছাই করুন যা তার পিতৃয়ের একমাত্র সন্তান
:optional input:optional required অ্যাট্রিবিউট না ধারণকারী <input> ইলেকট্রনকে বাছাই করুন
:out-of-range input:out-of-range সংযোগিত মূল্যের বাইরের <input> ইলেকট্রনকে বাছাই করুন
:read-only input:read-only readonly অ্যাট্রিবিউট ধারণকারী <input> ইলেকট্রনকে বাছাই করুন
:read-write input:read-write readonly অ্যাট্রিবিউট না ধারণকারী <input> ইলেকট্রনকে বাছাই করুন
:required input:required প্রয়োজনীয় অ্যাট্রিবিউট ধারণকারী <input> ইলেকট্রনকে বাছাই করুন
:root root ইলেকট্রনের মূল ইলেকট্রনকে বাছাই করুন
:target #news:target বর্তমানে সক্রিয় #news ইলেকট্রনকে বাছাই করুন (যে URL এই অ্যানকর নাম ধারণ করে তা ক্লিক করা হয়)
:valid input:valid সকল সঠিক মূল্যসহ <input> ইলেকট্রন
:visited a:visited সব পরিদর্শিত লিঙ্ককে বাছাই করুন。