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

4 سال پیش

امتیاز دهید post

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

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

شبه کلاس های CSS برای افزودن جلوه های ویژه به برخی از انتخاب کنندگان استفاده می شود. برای استفاده از آن جلوه ها نیازی به استفاده از JavaScript یا اسکریپت دیگری ندارید. یک نحو ساده از شبه کلاسهای به شرح زیر است:

selector:pseudo-class {property: value}

1	selector:pseudo-class {property: value}

کلاسهای CSS را می توان با شبه کلاسهای نیز استفاده کرد –

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

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

شبه کلاسهای متداول به شرح زیر است –

	مقدار و توضیحات
1	:link از این کلاس برای افزودن سبک خاص به پیوند بازدید نشده استفاده کنید.
2	:visited از این کلاس برای افزودن سبک خاص به پیوند بازدید شده استفاده کنید.
3	:hover هنگامی که بر روی عنصری قرار می گیرید از این کلاس برای افزودن سبک خاص استفاده کنید.
4	:active از این کلاس برای افزودن سبک خاص به یک عنصر فعال استفاده کنید.
5	:focus در حالی که عنصر تمرکز دارد از این کلاس برای افزودن سبک خاص به یک عنصر استفاده کنید.
6	:first-child از این کلاس برای افزودن سبک خاص به عنصری استفاده کنید که اولین فرزند عنصر دیگر است.
7	:lang از این کلاس برای تعیین زبانی برای استفاده در یک عنصر مشخص استفاده کنید.

هنگام تعریف کلاسهای شبه در یک بلوک <style> … </style> ، نکات زیر باید ذکر شود –

a: hover برای تأثیرگذاری باید بعد از a: link and a: بازدید شده در تعریف CSS بیاید.

a: فعال برای تأثیرگذاری باید بعد از a: شناور در تعریف CSS بیاید.

نام شبه کلاس به حروف کوچک و بزرگ حساس نیستند.

شبه کلاس با کلاس های CSS متفاوت است اما می توان آنها را ترکیب کرد.

لینک شبه کلاس

مثال زیر نحوه استفاده از کلاس link را برای تنظیم رنگ پیوند نشان می دهد. مقادیر ممکن است هر نام رنگی در هر قالب معتبری باشد.

&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css"&gt;
         a:link {color:#000000}
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;a href = ""&gt;Black Link&lt;/a&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

a:link {color:#000000}

</style>

</head>

<body>

<a href = "">Black Link</a>

</body>

</html>

خروجی به شکل زیر می باشد:

Black Link

شبه کلاس بازدید شده

مثال زیر مثالی است که نحوه استفاده از شبه کلاس بازدید شده برای تعیین رنگ پیوندهای بازدید شده را نشان می دهد. مقادیر ممکن است هر نام رنگی در هر قالب معتبری باشد.

Live Demo
&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css"&gt;
         a:visited {color: #006600}
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;a href = ""&gt;Click this link&lt;/a&gt;
   &lt;/body&gt;
&lt;/html&gt;

Live Demo

<html>

<head>

a:visited {color: #006600}

</style>

</head>

<body>

<a href = "">Click this link</a>

</body>

</html>

این لینک زیر را ایجاد می کند. اگر روی این پیوند کلیک کنید ، رنگ آن به سبز تغییر می یابد.

Click this link

شبه کلاس hover

مثال زیر نحوه استفاده از کلاس hover برای تغییر رنگ پیوندها را نشان می دهد وقتی ما یک نشانگر ماوس را روی آن پیوند می آوریم. مقادیر ممکن است هر نام رنگی در هر قالب معتبری باشد.

&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css"&gt;
         a:hover {color: #FFCC00}
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;a href = ""&gt;Bring Mouse Here&lt;/a&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

a:hover {color: #FFCC00}

</style>

</head>

<body>

<a href = "">Bring Mouse Here</a>

</body>

</html>

لینک زیر را تولید می کند حالا ماوس خود را روی این پیوند آورده و می بینید که رنگ آن به زرد تغییر می کند.

Bring Mouse Here

شبه کلاس فعال

مثال زیر نحوه استفاده از کلاس active را برای تغییر رنگ پیوندهای فعال نشان می دهد. مقادیر ممکن است هر نام رنگی در هر قالب معتبری باشد.

&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css"&gt;
         a:active {color: #FF00CC}
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;a href = ""&gt;Click This Link&lt;/a&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

a:active {color: #FF00CC}

</style>

</head>

<body>

<a href = "">Click This Link</a>

</body>

</html>

این لینک زیر را تولید می کند. وقتی کاربر روی آن کلیک می کند، رنگ به صورتی تغییر می کند.

Click This Link

شبه کلاس focus

مثال زیر نحوه استفاده از کلاس را برای تغییر رنگ پیوندهای متمرکز نشان می دهد. مقادیر ممکن است هر نام رنگی در هر قالب معتبری باشد.

&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css"&gt;
         a:focus {color: #0000FF}
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;a href = ""&gt;Click this Link&lt;/a&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

a:focus {color: #0000FF}

</style>

</head>

<body>

<a href = "">Click this Link</a>

</body>

</html>

این لینک زیر را تولید می کند. وقتی این پیوند متمرکز شد ، رنگ آن به نارنجی تغییر می کند. با از بین رفتن تمرکز رنگ به عقب تغییر می کند.

Click this Link

شبه کلاس فرزند اول

شبه کلاس فرزند اول با عنصر مشخصی که اولین فرزند عنصر دیگری است مطابقت دارد و سبک خاصی را به آن عنصر اضافه می کند که فرزند اول عنصر دیگری است.

به عنوان مثال، برای تورفتگی پاراگراف اول از تمام عناصر <div> ، می توانید از این تعریف استفاده کنید –

&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css"&gt;
         div &gt; p:first-child {
            text-indent: 25px;
         }
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
   
      &lt;div&gt;
         &lt;p&gt;First paragraph in div. This paragraph will be indented&lt;/p&gt;
         &lt;p&gt;Second paragraph in div. This paragraph will not be indented&lt;/p&gt;
      &lt;/div&gt;
      &lt;p&gt;But it will not match the paragraph in this HTML:&lt;/p&gt;
      
      &lt;div&gt;
         &lt;h3&gt;Heading&lt;/h3&gt;
         &lt;p&gt;The first paragraph inside the div. This paragraph will not be effected.&lt;/p&gt;
      &lt;/div&gt;
      
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

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>

خروجی به صورت زیر می باشد:

First paragraph in div. This paragraph will be indented

Second paragraph in div. This paragraph will not be indented

But it will not match the paragraph in this HTML:

Heading
The first paragraph inside the div. This paragraph will not be effected.

First paragraph in div. This paragraph will be indented

Second paragraph in div. This paragraph will not be indented

But it will not match the paragraph in this HTML:

Heading

The first paragraph inside the div. This paragraph will not be effected.

شبه کلاس زبان

شبه کلاس زبان، امکان ساخت انتخابگرها بر اساس تنظیمات زبان برای برچسب های خاص را فراهم می کند.

این کلاس در اسنادی مفید است که باید به چندین زبان متوسل شوند که قراردادهای مختلفی برای ساختارهای خاص زبان دارند. به عنوان مثال، زبان فرانسوی معمولاً از براکت های (< and >) برای نقل قول استفاده می کند ، در حالی که زبان انگلیسی از علامت های نقل قول (‘ and ‘) استفاده می کند.

در سندی که باید این تفاوت را برطرف کند، می توانید از شبه کلاس زبان برای تغییر مناسب امتیازها استفاده کنید. کد زیر تک <blockquote> را متناسب با زبان مورد استفاده تغییر می دهد –

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

Live Demo

<html>

<head>

/* 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>

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

این نتیجه زیر را ایجاد می کند –

...A quote in a paragraph...

1	...A quote in a paragraph...

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

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

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

لینک شبه کلاس

شبه کلاس بازدید شده

شبه کلاس hover

شبه کلاس فعال

شبه کلاس focus

شبه کلاس فرزند اول

شبه کلاس زبان

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

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

لینک شبه کلاس

شبه کلاس بازدید شده

شبه کلاس hover

شبه کلاس فعال

شبه کلاس focus

شبه کلاس فرزند اول

شبه کلاس زبان

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه