شبه کلاس ها در CSS - بخش اول آموزش

1 مرداد، ۱۳۹۷

ضمن عرض سلام و احترام خدمت تمامی کاربران فروم محبوب انجمن answercenter
، همانطور که قول دادم بهتون ،قصد دارم یکسری مقالات در زمینه برنامه نویسی های مختلف ، برای شما عزیزان قرار دهم . پیشاپیش از تمامی مدیران فروم قدردانی میکنم بابت این فروم بسیار مفید و کاربردی.

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

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

selector:pseudo-class {property: value}

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

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

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

:link شما با استفاده از این شبه کلاس ، به لینک هایی که تابحال دیده نشده اند ، استایل های مد نظرتان را اضاف می کنید.
:visited شما با استفاده از این شبه کلاس ، می توانید به لینک هایی که دیده شده اند ، استایل های خود را اضافه کنید.
:hover شما با استفاده از این شبه کلاس ، می توانید به لینک ها در حالت هاور یعنی حالتی که موس روی آن ها قرار می گیرد ، استایل های مورد نظر خود را اضاف کنید.
:active شما به کمک این شبه کلاس ، به تگی که در حال حاضر فعال است ، استایل اضافه می کنید.
:focus شما با استفاده از این شبه کلاس برای مواقعی که کابر با استفاده از تب ، روی تگ ها تمرکز می کند ،آموزش CSS و CSS3 جهت ورود به بازار کار ، 100 فیلم رایگان استایل های خاصی را تعیین می کنید.
: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>

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

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

ورود

شبه کلاس ها در CSS - بخش اول آموزش

ارسال‌های توصیه شده

8908190 1

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

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

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

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

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

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

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

لینک ارسال

به اشتراک گذاری در سایت های دیگر

بایگانی شده

کاربران آنلاین در این صفحه 0 کاربر

فهرست بخش ها

فعالیت ها

فروشگاه