زوپیرنت

کلاس های کاذب یا pseudo
برای تغییر رفتار تگ های دیگر به کار می روند. یکی از کاربردهایش استفاده از آن در ساخت منوها است. این کلاس ها را نمی توان به طور مستقیم در خاصیت style نوشت و برای استفاده از آن ها یا باید در یک فایل CSS آن را نوشت یا بین دو تگ <style></style>. قاعده نوشتاری آن ها به صورت زیر است:
رفتار : نام تگ ( selector:pseudo-class)
برای مثال می توانیم کلاس کاذب زیر را برای تگ a بنویسیم

a:hover {color:red;}

و معنی اش این است که هر جا در وب سایت لینک وجود داشته باشد، هنگامی که موس روی آن می رود رنگش به قرمز تغییر پیدا کند.
کلاس های کاذب مختلفی وجود دارند و در CSS3 هم به این کلاس ها اضافه شده است که در جای خود گفته خواهد شد. چهار کلاسی را که بیشتر کاربرد دارند را در مثال پایین بررسی می کنیم.
در html

<a href="http://zoopirnet.com">Zoopirnet</a>

در CSS

a:link{
 color:red;
 }
 a:visited{
 color:orange;
 }
 a:hover{
 color:green;
 text-decoration:none;
 }
 a:active{
 color:black;
 text-decoration:none;
 }

که خروجی آن به شکل زیر است.

Link: لینکی که در وب سایت می بینیم
Visited: لینکی که یک بار روی آن کلیک شده
Hover: موس که روی لینک میرود
Active: زمانی که روی لینک کلیک می کنیم
کلاس های کاذب برای تگ های دیگر هم کاربرد دارد. در ادامه مثال بالا، برای تگ p از آن استفاده می کنیم.
در html

<p>زوپیرنت</p>

در CSS

p{
 font:15px tahoma bold;
 color:red;
 }
 p:hover{
 color:blue;
 }

تگ پاراگراف به رنگ قرمز نمایش داده می شود. ولی اگر موس را روی پاراگراف بیاوریم، رنگش آبی می شود.
List-style
برای طراحی لیست ها توسط CSS، از list-style ها می توانیم استفاده کنیم.
List-style می تواند سه خصوصیت زیر را داشته باشد:
List-style-type: نوع شکل، شماره یا حرفی را که قبل از آیتم های لیست می آید را مشخص می کند. به طور پیش فرض برای تگ ul، disc (bullet) و برای تگ ol، شماره است. مقادیر می تواند: circle, disc, lower-roman, decimal و … باشد.
List-style-position: که اگر مقدارش inside باشد، آیتم لیست را از لبه مرورگر به اندازه یک tab فاصله میگذارد و اگر outside باشد؛ آیتم لیست را از لبه مرورگر شروع می کند که حالت پیش فرض است.
List-style-image: می توان به جای list-style-type، از عکس ها استفاده کرد به این صورت که عکس قبل از هر آیتم لیست بیاید. در این حالت باید با سینتکس url(‘path’) باشد و به جای path، مسیر عکس نوشته شود.
برای تمرین list-style، دو مثال زیر را می توانید ببینید.
در html

<ul>
 <li>اول</li>
 <li>دوم</li>
 </ul>
 <ol>
 <li>ol-1</li>
 <li>ol-2</li>
 </ol>

در CSS

 ul,ol{
 direction:rtl;
 list-style-type:upper-roman;
 }

همانطور که در شکل می بینید، برای لیست ها، حروف یونانی آمده و دلیلش استفاده از upper-roman برای list-style-type است. ضمنا در فایل CSS، دو آیتم ul و ol با یک کاما از هم جدا شده که دلیلش نوشتن کد کمتر در CSS است.
حال در این مثال، با تغییر بخش CSS، قبل از آیتم ها، یک عکس میگذاریم.
در CSS

ul,ol{
 direction:rtl;
 list-style-image:url('tick.png');
 }

دانلود فایل های تمرین

pseudo
list