Categories: CSS طراحی سایت

آموزش CSS – جلسه دهم – کلاس های کاذب و list-style

کلاس های کاذب یا 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

فرزاد ربیعی

در زمینه CSS، ASP.Net و شبکه (MCITP) فعالیت میکنم

Comments are closed.

Share
Published by
فرزاد ربیعی
Tags: CSSWebdesignسی اس اسطراحی سایتطراحی وب

Recent Posts

  • اخبار سایت

شروعی دوباره برای زوپیرنت

با سلام. با عرض پوزش فراوان بدلیل غیبت طولانی ما که دلیل‌های ریز و درشتی داشت. خیلی خلاصه و سریع…

5 سال ago
  • اندروید

چگونه حافظه ی داخلی اندرویدتان را آزاد کنید

اکثر موبایل هایی که سیستم عامل اندروید بر رویشان نصب هست دارای حافظه داخلی محدودی هستند و بعد از مدتی…

6 سال ago
  • توییتر
  • فایرفاکس
  • فیس بوک

مدیریت تمام اکانت های شبکه های اجتماعیتان در یک برنامه

وقتی که فعالانه به زندگی مجازی بپردازید کم کم تعداد سایت های که عضو میشید زیاد خواهد شد مخصوصا سایت…

6 سال ago
  • PHP برنامه نویسی

آموزش PHP – حلقه ها – جلسه هفتم

در ادامه مبحث آموزش PHP امروز به آموزش حلقه ها می رسیم که با ذکر مثال دستوراتن While , for…

6 سال ago
  • بازی

چرا در هنگام بازی در ویندوز دچار مشکل می شوید؟

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

6 سال ago
  • ویکی پدیا

پربازدیدترین صفحات فارسی در ویکی پدیا ۲۰۱۲

با تمام شدن سال میلاد 2012 آماری از پر بازدید ترین صفحات ویکی پدیا در زبان ها مختلف ارائه شده…

6 سال ago