مشاوره رایگان

دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان

جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

جلسه 22 آموزش CSS : استفاده از pseudo classes - شبه کلاس

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

ساختار نوشتاری کد شبه کلاس ها به صورت زیر است:

selector:pseudo-class {property: value}

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

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

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

:link شما با استفاده از این شبه کلاس ، به لینک هایی که تابحال دیده نشده اند ، استایل های مد نظرتان را اضاف می کنید.
:visited شما با استفاده از این شبه کلاس ، می توانید به لینک هایی که دیده شده اند ، استایل های خود را اضافه کنید.
:hover شما با استفاده از این شبه کلاس ، می توانید به لینک ها در حالت هاور یعنی حالتی که موس روی آن ها قرار می گیرد ، استایل های مورد نظر خود را اضاف کنید.
:active شما به کمک این شبه کلاس ، به تگی که در حال حاضر فعال است ، استایل اضافه می کنید.
:focus شما با استفاده از این شبه کلاس برای مواقعی که کابر با استفاده از تب ، روی تگ ها تمرکز می کند ، استایل های خاصی را تعیین می کنید.
:first-child شما با استفاده از این شبه کلاس ، به تگی که اولین فرزند تگ پدرش می باشد ، استایل خاصی را اضافه می کنید .
:lang شما با استفاده از این شبه کلاس ، برای تگ ها ، استایل دهی را بر اساس زبان مورد استفاده انجام دهید .

هنگام استفاده از شبه کلاس ها به نکات زیر توجه کنید :

a:hover برای اینکه موثر باشد ، باید بعد از a:link و a:visited مورد استفاده قرار گیرد.
a:active برای اینکه موثر باشد ، باید بعد از a:hover مورد استفاده قرار گیرد.
شبه کلاس ها به بزرگی و کوچکی حروف حساس نیستند.
شبه کلاس ها با کلاس های css تفاوت دارند اما می توانند با هم ترکیب شوند.

در ادامه به صورت دقیق تر به بررسی شبه کلاس ها می پردازیم.

1. استفاده از شبه کلاس :link

برای اینکه نحوه استفاده از این شبه کلاس را به خوبی بفهمید ، به مثال زیر توجه کنید:

<html>
   <head>
      <style type="text/css">
         a:link {color:#000000}
      </style>
   </head>
   <body>
      <a href="">Black Link</a>
   </body>
</html>

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

2. استفاده از شبه کلاس :visited

مثال زیر نحوه استفاده از این ویژگی را به شما نشان می دهد:

<html>
   <head>
      <style type="text/css">
         a:visited {color: #006600}
      </style>
   </head>
   <body>
      <a href="">Click this link</a>
   </body>
</html>

در صورتی که بر روی لینک موجود در کدهای بالا ، یکبار کلیک کنید ، بعد از آن به شکل زیر نشان داده می شود.

3. نحوه استفاده از شبه کلاس :hover

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

<html>
   <head>
      <style type="text/css">
         a:hover {color: #FFCC00}
      </style>
   </head>
   <body>
      <a href="">Bring Mouse Here</a>
   </body>
</html>

در صورتی که موس خود را روی لینک حاصل از کدهای بالا ببرید ، نتیجه به شکل زیر خواهد بود.

4. نحوه استفاده از شبه کلاس :active

مثال زیر به شما یاد می دهد که چطور یک لینک فعال را استایل دهی کنید.

<html>
   <head>
      <style type="text/css">
         a:active {color: #FF00CC}
      </style>
   </head>
   <body>
      <a href="">Click This Link</a>
   </body>
</html>

هنگامی که بر روی لینک تولید شده از کدهای بالا کلیک کنید ، رنگ لینک ، صورتی خواهد شد.

5. نحوه استفاده از شبه کلاس :focus

مثال بعد به شما نشان می دهد که چطور از این شبه کلاس استفاده کنید .

<html>
   <head>
      <style type="text/css">
         a:focus {color: #0000FF}
      </style>
   </head>
   <body>
      <a href="">Click this Link</a>
   </body>
</html>

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

6. نحوه استفاده از شبه کلاس :first:child

شما با استفاده از این شبه کلاس به اولین فرزند یک تگ پدر ، استایل مورد نظر خود را اضافه می کنید . حالا به مثال زیر توجه کنید:

<html>
   <head>
   
      <style type="text/css">
         div > p:first-child
         {
            text-indent: 25px;
         }
      </style>
      
   </head>
   <body>
   
      <div>
         <p>First paragraph in div. This paragraph will be indented</p>
         <p>Second paragraph in div. This paragraph will not be indented</p>
      </div>
      <p>But it will not match the paragraph in this HTML:</p>
      
      <div>
         <h3>Heading</h3>
         <p>The first paragraph inside the div. This paragraph will not be effected.</p>
      </div>
      
   </body>
</html>

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

7. نحوه استفاده از شبه کلاس :lang

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

<html>
   <head>
      <style type="text/css">
         /* Two levels of quotes for two languages*/
         :lang(en) { quotes: '"' '"'  "'"  "'"; }
         :lang(fr) { quotes: "<<" ">>" "<" ">"; }
      </style>
   </head>
   <body>
      <p>...<q lang="fr">A quote in a paragraph</q>...</p>
   </body>
</html>

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

خب دوستان عزیز ، این جلسه هم به پایان رسید. پیروز باشید .

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

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

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

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

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

…

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

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

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

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

سایر