فیلتر در CSS

 

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

کد های html

HTML Codes

تگهاتوضیحاتNNIE
<!--...-->وارد کردن نظریه3.03.0
<!DOCTYPE>تعیین DTD  
<a>ساخت لینک3.03.0
<abbr>تعیین کلمات مختصر شده6.2 
<acronym>تعیین کلمات مخفف شده6.24.0
<address>وارد کردن یک آدرس4.04.0
<area>تعیین یک ناحیه از نقشه تصویری3.03.0
<b>نوشتن حروف ضخیم3.03.0
<base>تعیین یک آدرس اصلی برای کلیه لینکها3.03.0
<bdo>تعیین جهت نوشتن6.25.0
<big>نوشتن حروف درشت3.03.0
<blockquote>تعیین یک عبارت طولانی3.03.0
<body>شروع قسمت بدنه کد3.03.0
<br>شروع جمله از ابتدای خط3.03.0
<button>تعیین دکمه قابل کلیک در صفحه6.24.0
<caption>وارد کردن عنوان یک جدول3.03.0
<cite>تعیین نقل قول3.03.0
<code>مشخص کردن کد زبانهای برنامه نویسی3.03.0
<col>تعیین خصوصیات برای ستونهای یک جدول 3.0
<colgroup>معرفی یک گروه از ستونهای جدول 3.0
<dd>مشخص کردن توضیح و توصیف یک چیز در لیست3.03.0
<del>تعیین یک متن حذف شده6.24.0
<div>شروع یک بخش در صفحه3.03.0
<dfn>توضیح برای یک اصطلاح 3.0
<dl>تعیین یک لیست توصیفی3.03.0
<dt>توضیح برای یک لغت در لیست3.03.0
<em>تعیین یک متن تاکیدی3.03.0
<fieldset>تعیین یکسری ردیف6.24.0
<form>شروع یک فرم3.03.0
<frame>تعریف یک فریم و چارچوب دیگری در یک صفحه3.03.0
<frameset>شروع یکسری فریم3.03.0
<h1> to <h6>تعیین متن بصورت عنوان3.03.0
<head>شروع قسمت سر کد html3.03.0
<hr>وارد کردن یک خط افقی3.03.0
<html>تعیین یک فایل html3.03.0
<i>نوشتن متن بصورت ایتالیک و کج3.03.0
<iframe>وارد کردن یک فریم در صفحه معمولی6.04.0
<img>وارد کردن یک عکس3.03.0
<input>تعیین اجزای یک فرم3.03.0
<ins>تعریف متنهای ورودی در یک برنامه6.24.0
<kbd>وارد کردن حروفهای روی کیبورد3.03.0
<label>نامگذاری برای اجزای یک فرم6.24.0
<legend>عنوان بندی و جداسازی اجزا در یک فرم 6.24.0
<li>تعریف متون یک لیست3.03.0
<link>تعیین آدرس یک فایل وابسته به صفحه 4.03.0
<map>تعریف یک نقشه تصویری3.03.0
<meta>تعریف اطلاعات متا تگها3.03.0
<noframes>توضیح برای مرورگرهایی که از فریم پشتیبانی نمیکنند3.03.0
<noscript>توضیح برای مرورگرهایی که از جاوا اسکریپت پشتیبانی نمیکنند3.03.0
<object>تعیین برنامه هایی برای جاسازی در یک صفحه 3.0
<ol>تعریف لیستهای سفارشی3.03.0
<optgroup>تعیین یک مجموعه گزینه های انتخابی6.06.0
<option>تعیین گزینه های انتخابی بصورت لیستهای پایین کشیدنی3.03.0
<p>شروع یک پاراگراف3.03.0
<param>تعریف پارامترهای یک برنامه جاسازی شده3.03.0
<pre>وارد کردن متن بدون مرتب کردن3.03.0
<q>تعیین عبارات کوتاه6.2 
<samp>مثال برای کدهای برنامه نویسی 3.03.0
<script>تعریف کدهای متنی مانند جاوا اسکریپت3.03.0
<select>تعیین لیستهای انتخابی3.03.0
<small>نوشتن متن با حروف ریز3.03.0
<span>تعیین یک بخش کوچک در صفحه4.03.0
<strong>نوشتن متن بصورت درشت3.03.0
<style>تعریف style برای استایل شیت4.03.0
<sub>نوشتن متن در زیر یک خط3.03.0
<sup>نوشتن متن در بالای خط3.03.0
<table>شروع یک جدول3.03.0
<tbody>تعیین بدنه یک جدول 4.0
<td>ساخت یک خانه در جدول3.03.0
<textarea>تعیین ناحیه ورود متن در فرم3.03.0
<tfoot>تعیین خانه های انتهایی در یک جدول 4.0
<th>عنوان بندی در یک جدول3.03.0
<thead>تعیین خانه های ابتدایی جدول 4.0
<title>عنوان گذاری برای یک صفحه3.03.0
<tr>تعیین یک ردیف در جدول3.03.0
<tt>نوشتن متن بصورت تایپی3.03.0
<ul>تعریف لیستهای غیر سفارشی3.03.0
<var>تعیین متغیرهای برنامه نویسی کامپیوتر3.03.0

تنظیم ظاهر لینک ها در صفحه

اعمال تغییر بر روی لینکها در صفحه با استفاده از CSS

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

برای اینکه بتوانیم از همه خواصی که برای لینکها در CSS وجود دارد استفاده کنیم بهتر است تا استایل را در بخش HEAD متن خود یا در فایلهای CSS خارجی که به صفحه پیوند می شوند استفاده کنیم. در هر دو صورت مراحل انجام کار شبیه هم است. ما در اینجا به استایل را در بخش HEAD متن تعریف می کنیم.

برای کار با لینکها در CSS می توانیم از مشخصات یک لینک را به چهار بخش تقسیم کنیم که در زیر می توانید آنها را مشاهده کنید:

  • a:link و a
    این مشخصه ها نحوه نمایش لینکهایی را که در صفحه وجود دارند و هنوز روی آنها کلیک نشده است تنظیم می کنند.
  • a:hover
    این مشخصه وضعیت لینک را وقتی که نشانگر ماوس روی آن قرار دارن تنظیم می کند.
  • a:active
    این قسمت مشخص کننده وضعیت لینکی است که بر روی آن کلیک می شود.
  • a:visited
    این مشخصه برای لینکهایی که در بازدیدهای قبلی مورد استفاده قرار گرفته اند استفاده می شود.

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

<style type="text/css">
<!--
a:link { مشخصات مورد نظر }
a:hover { مشخصات مورد نظر }
a:active { مشخصات مورد نظر }
a:visited { مشخصات مورد نظر }
-->
</style>

برای هر ویژگی بالا می توانید مشخصات خاص خود را تعریف کنید برای مثال می تواند رنگ از مشخصه bachkground-color برای تعیین رنگ زمینه لینک وقتی که ماوس روی ان قرار می گیرد استفاده کنید یا از color برای تعیین رنگ متن لینکها. به طور کلی می توانید از بیشتر مشخصه هایی که برای متن ها کارایی دارند در مورد لینکها هم استفاده کنید برای مثال font-family و font-size و border و ...

در اینجا یک مثال مطرح می کنیم که در آن لینکهای صفحه به رنگ سبز نمایش داده می شوند با اندازه فونت 12pt و بدون زیرخط، وقتی که ماوس روی آنها قرار می گیرد رنگ آنها قرمز می شود و رنگ زمینه متفاوتی پیدا می کنند همچنین یک کادر نیز اطراف آنها به وجود می آید. در موقع کلیک کردن رنگ لینک سفید می شود و لینکهایی که در دفعات قبلی کلیک شده اند با زیر خط نمایش داده می شوند. برای ساختن لینکهایی با مشخصاتی که بیان شد می توانیم از کد زیر در قسمت HEAD متن یا استایل خارجی استفاده کنیم:

<style type="text/css">
<!--
a:link { color:green; font-size:12pt; text-decoration:none }
a:hover { color:red; background-color:#6699CC; border:#006699 2px solid }
a:active { color: white }
a:visited { text-decoration: underline }
-->
</style>

همانطور که می بینید کدهایی که در قسمت HEAD این صفحه قرار دارند بر روی لینکهای بالا تأثیر گذاشته اند اما لینکها در سایر نقاط صفحه ویژگیهای متفاوتی دارند. دلیل این تفاوت این است که ما لینکهای بالا را در یک DIV قرار دادیم و برای آن یک ID در بخش HEAD صفحه تعریف کردیم و ویژگیهای مربوط به لینکهای بالا در قالب ID مشخص کردیم. در اینجا می توانید کدی را که ما مورد استفاده قرار داده ایم ببینید:

#pre a:link,#pre a { color:green; font-size:10pt; text-decoration:none }
#pre a:hover { color:red; background-color:#6699CC; border:#006699 2px solid; text-decoration:none }
#pre a:active { color: White }
#pre a:visited { text-decoration: underline; color:#003399 }

کد مربوط به DIV را نیز به صورت زیر نوشتیم:

<div align="center" id="pre">
کدهای مربوط به لینکها
</div>

یکی دیگر از خصوصیاتی که می توان به کمک آن لینک نمود قرار دادن تصویر بر روی لینک ها با background-image می باشد.

#examp3 a:link{font:bold 14pt arial;color:#ff0000;text-decoration:none;background: url(link.gif) no-repeat top center}
#examp3 a:visited{font:bold 14pt arial;color:#fff;text-decoration:none;background: url(link.gif) no-repeat top center}
#examp3 a:hover{font:bold 14pt arial;color:#fff;text-decoration:none;background: url(link.gif) no-repeat center center}
#examp3 a:active{font:bold 14pt arial;color:#000080;text-decoration:none;background: url(link.gif) no-repeat bottom center}

برای مشاهده نمونه مثال ها در مورد لینکها می توانید در این قسمت کلیک نمایید.