جلسه 23 آموزش css : کار با pseudo-elements – شبه عنصر

در این جلسه قصد داریم نحوه استفاده از شبه عناصر را به شما عزیزان ، آموزش دهیم .

شما با استفاده از شبه عناصر می توانید جلوه های خاصی را به برخی انتخابگرها (selectors) ببخشید ، بدون اینکه نیاز داشته باشید از کدهای جاوا اسکریپت استفاده کنید . ساختار نوشتاری برای استفاده از شبه عناصر به شرح زیر می باشد :

selector:pseudo-element {property: value}

شما همچنین می توانید همراه با شبه عناصر از کلاس های css نیز استفاده کنید . به ساختار زیر توجه کنید.

selector.class:pseudo-element {property: value}

رایج ترین شبه عناصری که در css مورد استفاده قرار می گیرند ، به شرح زیر هستند :

first-line شما با استفاده از این شبه عنصر ، می توانید استایل های مد نظر خود را ، به اولین سطر یک انتخابگر اضافه کنید .
first-letter شما با استفاده از این شبه عنصر ، می توانید استایل های مد نظر خود را به اولین حرف یک انتخابگر اضافه کنید.
before شما با استفاده از این شبه عنصر ، می توانید محتوای دلخواه خود را قبل از یک تگ اضافه کنید .
after شما با استفاده از این شبه عنصر ، می توانید محتوای دلخواه خود را بعد از یک تگ اضافه کنید .

با ما همراه باشید تا در ادامه ، هر یک از این موارد را به تشریح بیان کنیم .

نحوه استفاده از شبه عنصر :first-line

مثال زیر به شما نشان می دهد که چطور با استفاده از شبه عنصر :first-line ، جلوه های خاصی را به اولین خط یک تگ html ، اضاف کنید .

<html>
   <head>
      <style type="text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      </style>
   </head>
   <body>
      <p class="noline"> This line would not have any underline because this belongs to  nline class.</p>
      
      <p>The first line of this paragraph will be underlined as defined in the CSS rule above. Rest of the lines in this paragraph will remain normal. This example shows how to use :first-line pseduo element to give effect to the first line of any HTML element.</p>
   </body>
</html>

حالا به نتیجه توجه کنید :

نحوه استفاده از شبه عنصر :first-letter

مثال بعدی به شما نشان می دهد که چطور با استفاده از شبه عنصر :first-letter ، استایل های مد نظر خود را به اولین حرف یک تگ اضافه کنید .

<html>
   <head>
      <style type="text/css">
         p:first-letter { font-size: 5em; }
         p.normal:first-letter { font-size: 10px; }
      </style>
   </head>
   <body>
      <p class="normal"> First character of this paragraph will be normal and will have font size 10 px;</p>
      
      <p>The first character of this paragraph will be 5em big  as  defined in the CSS rule above. Rest of the characters in this paragraph will remain normal. This example shows how to use :first-letter pseduo element to give effect to the first characters  of any HTML element.</p>
   </body>
</html>

نتیجه را ببینید:

نحوه استفاده از شبه عنصر :before

مثال زیر به شما نشان می دهد که چطور با استفاده از شبه عنصر :before ، محتوای مد نظرتان را قبل از یک تگ ، اضافه کنید .

<html>
   <head>
      <style type="text/css">
         p:before
         {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>
   <body>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
      <p> This line will be preceded by a bullet.</p>
   </body>
</html>

حالا به نتیجه توجه کنید :

نحوه استفاده از شبه عنصر :after

مثال زیر به شما نشان می دهد که چطور با استفاده از شبه عنصر :after ، محتوای مد نظر خود را بعد از یک تگ اضافه کنید .

<html>
   <head>
      <style type="text/css">
         p:after
         {
            content: url(/images/bullet.gif)
         }
      </style>
   </head>
   <body>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
      <p> This line will be succeeded by a bullet.</p>
   </body>
</html>

حالا به نتیجه توجه کنید .

خب دوستان عزیز ، این آموزش هم به پایان رسید . شاد و موفق باشید .

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

جلسه 23 آموزش css : کار با pseudo-elements – شبه عنصر

نحوه استفاده از شبه عنصر :first-line

نحوه استفاده از شبه عنصر :first-letter

نحوه استفاده از شبه عنصر :before

نحوه استفاده از شبه عنصر :after

آیا نیاز به مدرک هم دارید؟