تنظیم حاشیه و فاصله از لبه در عناصر صفحه موضوع: آموزش CSS

حاشیه ها

margin-left

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

<div style=”margin-left:200px; border:double”>این DIV دویست
پیکسل از سمت چپ صفحه فاصله دارد.</div>

همانطور که می بینید کد بالا یک DIV را با کادر مضاعف و ۲۰۰ پیکسل حاشیه از چپ نشان
می دهد:

این DIV دویست پیکسل از سمت چپ صفحه فاصله دارد.

حاشیه ها

margin-left

<div style=”margin-left:200px; border:double”>این DIV دویست
پیکسل از سمت چپ صفحه فاصله دارد.</div>

همانطور که می بینید کد بالا یک DIV را با کادر مضاعف و ۲۰۰ پیکسل حاشیه از چپ نشان
می دهد:

این DIV دویست پیکسل از سمت چپ صفحه فاصله دارد.

margin-right

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

<div style=”margin-right:200px; border:double”>این DIV دویست
پیکسل از سمت راست صفحه فاصله دارد.</div>

همانطور که می بینید کد بالا یک DIV را با کادر مضاعف و ۲۰۰ پیکسل حاشیه از راست
نشان می دهد:

این DIV دویست پیکسل از سمت راست صفحه فاصله دارد.

margin-top

این گزینه هم مانند گزینه های بالا کار می کند با این تفاوت که میزان حاشیه را از
بالای صفحه تعیین می کند:

<div style=”margin-top:100px; border:double”>این DIV صد پیکسل
از بالای صفحه فاصله دارد.</div>

این DIV صد پیکسل از بالای صفحه فاصله دارد.

margin-bottom

این گزینه هم مانند گزینه های بالا کار می کند با این تفاوت که میزان حاشیه را از
پایین صفحه تعیین می کند:

<div style=”margin-bottom:100px; border:double”>این DIV صد
پیکسل از پایین صفحه فاصله دارد.</div>

این DIV صد پیکسل از پایین صفحه فاصله دارد.

Padding

padding-right

پارامتر padding در CSS مشابه شناسه cellpadding در جدولهاست که با این تفاوت که
می توان آنرا برای بالا، پایین، چپ و راست به صورت جداگانه تعریف کرد به جای اینکه
به صورت یکجا تعیین شود. در اینجا می توانید یک نمونه از padding را که برای راست تعریف
شده است را ببینید:

<div style=”padding-right:100px; border-style:double”>برای
این DIV معادل ۱۰۰ پیکسل padding تعریف شده است.</div>

می توانید نتیجه را در اینجا مشاهده کنید:

برای این DIV معادل ۱۰۰ پیکسل padding تعریف شده است.

padding-top

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

<div style=”padding-top:30px; border-style:double”>برای این
DIV معادل ۳۰ پیکسل padding تعریف شده است.</div>

می توانید نتیجه را در اینجا مشاهده کنید:

برای این DIV معادل ۳۰ پیکسل padding تعریف شده است.

padding-left

مانند padding-right است با این تفاوت که برای چپ تعیین می شود.

padding-bottom

مانند padding-top است با این تفاوت که برای پایین تعیین می شود.

به یاد داشته باشید که در صورتی که پارامتر padding بدون right, left, top یا bottom
به کار رود مقدار وارد شده برای هر چهار جهت مورد استفاده قرار می گیرد، البته در مورد
margin هم به همین صورت است:

<div style=”padding:35px; width:250px; border-style:solid “>در
این DIV پارامتر padding بر روی هر چهار جهت تأثیر میگذارد.</div>

این هم نتیجه:

در این DIV پارامتر padding بر روی هر چهار جهت تأثیر میگذارد.

https://night-skin.com/content/amoozesh/wp-content/themes/NightSkin%20-%20Tabir/images/spilit.png

تغییر شکل نشانگر ماوس با استفاده از استایل موضوع: آموزش CSS

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

cursor: نوع نشانگری که مورد نظر ماست

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

<span style=”cursor: wait; color: red”>ماوس خود را روی این متن قرار دهید.

cursor: نوع نشانگری که مورد نظر ماست

نتیجه را می توانید اینجا مشاهده کنید:

ماوس خود را روی این متن قرار دهید.

اگر بخواهید وقتی ماوس کاربر روی یک قسمت مشخص از صفحه مثلاً جدولها
قرار می گیرد شکل خاصی داشته باشد می توانید در بخش HEAD صفحه این ویژگی را
برای جدول تعریف کنید تا در همه جدولهای صفحه به کار گرفته شود. از class و
id هم می توانید استفاده کنید. روش ساده تر هم استفاده از شناسه style در
تگهای HTML است.

در جدول زیر برخی از مقادیر مختلف این ویژگی که شکل نشانگر ماوس را عوض
می کنند آورده شده است. می توانید ماوس خود را بر روی توضیحات این گزینه ها
نگه دارید تا ببینید به چه شکلی در می آید.

مقدار قابل استفاده	توضیحات
auto	این گزینه نشانگر ماوس را با توجه به تنظیمات مرورگر کاربر تغییر می دهد.
crosshair	نشانگر ماوس به صورت به علاوه در می آید.
default	نشانگر ماوس به صورت همان فلش همیشگی در می آید.
move	نشانگر به شکلی در می آید که در هنگام جا به جا کردن چیزی به خود می گیرد.
pointer	نشانگر به شکل دست در می آید.
help	یک علامت سؤال کنار پیکان نشانگر ماوس قرار می گیرد.
text	به شکلی در می آید که بر روی متنها به خود می گیرد.
wait	به شکل ساعت شنی در می آید.
n-resize	یک فلش به سمت شمال
s-resize	یک فلش به سمت جنوب
e-resize	یک فلش به سمت مشرق
w-resize	یک فلش به سمت مغرب
ne-resize	یک فلش به سمت شمال شرقی
nw-resize	یک فلش به سمت شمال غربی
se-resize	یک فلش به سمت جنوب شرقی
sw-resize	یک فلش به سمت جنوب غربی

کار با تصویر زمینه در طراحی صفحات با استایل موضوع: آموزش CSS

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

توضیحات	مقادیر قابل استفاده	ویژگی
مشخص کننده محل قرار گرفتن تصویر در اینترنت است	آدرس محل قرار گرفتن تصویر	background-image: url(url)
نوع تکرار تصویر را مشخص می کند	repeat, no-repeat, repeat-x, repeat-y	background-repeat: مقدار ویژگی
مشخص می کند که آیا تصویر زمینه با اسکرول کردن صفحه حرکت می کند یا در جای خود ثابت می ماند	scroll, fixed	background-attachment: مقدار ویژگی
موقعیت تصویر زمینه در صفحه را مشخص می کند	مقدار اول: عددی در مقیاس پیکسل، عددی در مقیاس درصد top, center, bottom, مقدار دوم: عددی در مقیاس پیکسل، عددی در مقیاس درصد left, center, right,	background-position: مقدار دوم مقدار اول

توضیحات	مقادیر قابل استفاده	ویژگی
مشخص کننده محل قرار گرفتن تصویر در اینترنت است	آدرس محل قرار گرفتن تصویر	background-image: url(url)
نوع تکرار تصویر را مشخص می کند	repeat, no-repeat, repeat-x, repeat-y	background-repeat: مقدار ویژگی
مشخص می کند که آیا تصویر زمینه با اسکرول کردن صفحه حرکت می کند یا در جای خود ثابت می ماند	scroll, fixed	background-attachment: مقدار ویژگی
موقعیت تصویر زمینه در صفحه را مشخص می کند	مقدار اول: عددی در مقیاس پیکسل، عددی در مقیاس درصد top, center, bottom, مقدار دوم: عددی در مقیاس پیکسل، عددی در مقیاس درصد left, center, right,	background-position: مقدار دوم مقدار اول

برای استفاده از این ویژگیها و کاربرد آنها برای تگ BODY می توانید یک
استایل در قسمت HEAD متن تعریف کنید یا از استایل خارجی استفاده کنید.
مثلاً برای تصویر زمینه صفحات سایت ما می توان در قسمت HEAD متن یک استایل
به صورت زیر تعریف کرد:

<!–

body {

background-image:url(http://www.neopersia.org/images/index.jpg);

background-repeat:repeat-y }

–>

</style>

در این صورت تصویر زمینه ای مشابه سایت ما خواهید داشت. می توانید آنرا امتحان کنید.

background-repeat

همانطور که در درس قبل ملاحظه کردید در مورد background-image توضیحاتی داده شد. در اینجا به سایر ویژگیهای مربوط به تصویر زمینه می پردازیم.

این ویژگی تعیین کننده نوع تکرار شدن تصویر زمینه است. در اینجا مقادیری را که می توان به این ویژگی اختصاص داد بیان می کنیم:

repeat
این مقدار تعیین می کند که تصویر زمینه در صورتی که از اندازه پنجره کوچکتر
بود هم به صورت افقی و هم عمودی تکرار شود تا همه زمینه پنجره را بپوشاند.
no-repeat
این گزینه مشخص می کند که تصویر زمینه نباید تکرار شود حتی اگر از اندازه پنجره کوچکتر بود.
repeat-x
این گزینه مشخص می کند که تصویر باید به صورت افقی تکرار شود نه عمودی.
repeat-y
این گزینه مشخص می کند که تصویر زمینه باید به صورت عمودی تکرار شود.

background-attachment

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

scroll
اگر این گزینه را انتخاب کنید تصویر زمینه به همراه محتویات صفحه به بالا و پایین می رود.
fixed
با انتخاب این گزینه مشخص می کنید که تصویر زمینه در هنگام حرکت کردن محتویات صفحه باید ثابت بماند و حرکت نکند.

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

<!–

body {

background-image:url(http://www.neopersia.org/images/cssBGtest.jpg);

background-attachment:fixed;

background-repeat:no-repeat;

background-position:center center }

–>

</style>

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

تغییر رنگ و تصویر زمینه عناصر HTML با CSS موضوع: آموزش CSS

background-color

این ویژگی به ما اجازه می دهد تا تقریباً برای هر چیزی در صفحه رنگ
زمینه مشخص کنیم. برای این کار باید این ویژگی را به همراه رنگ مورد نظر
وارد تگ مربوط به قسمت مورد نظر کنیم. اگر بخواهیم زمینه قسمتی از یک متن
را مشخص کنیم می توانیم از این ویژگی در یک تگ SPAN در اطراف متن مورد نظر
استفاده کنیم.

در مثال زیر زمینه قسمتی از یک متن را به رنگ زرد در می آوریم:

<p>متن بدون زمینه. <span style=”background-color: yellow”>این قسمت زمینه زرد دارد.</span></p>

این هم متن نهایی:

متن بدون زمینه. این قسمت زمینه زرد دارد.

background-color

در مثال زیر زمینه قسمتی از یک متن را به رنگ زرد در می آوریم:

<p>متن بدون زمینه. <span style=”background-color: yellow”>این قسمت زمینه زرد دارد.</span></p>

این هم متن نهایی:

متن بدون زمینه. این قسمت زمینه زرد دارد.

همینطور می توانیم از این ویژگی برای تغییر زمینه یک جدول یا DIV هم استفاده کنیم:

</table>

این هم جدول به دست آمده:

سلول اول

سلول دوم

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

یک نمونه دیگر از موارد استفاده این ویژگی در طراحی فرمهاست. به مثال زیر توجه کنید:

نام : <input type=”text” size=”30″ style=”background-color: #009900″>

</form>

این هم فرم آزمایشی ما:

نام :

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

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

background-image

این ویژگی برای مشخص کردن تصویر زمینه به کار می رود.کاربرد background-image همانند background-color است با این تفاوت که به جای مشخص کردن رنگ باید یک تصویر را تعیین کنیم. این ویژگی به صورت زیر نوشته می شود.

background-image:url(آدرس تصویر مورد نظر)

بعد از نام ویژگی باید از url برای مشخص کردن آدرس تصویر استفاده کنیم.
آدرس تصویری که می خواهیم به عنوان زمینه استفاده کنیم نیازی نیست بین
علامتهای نقل قول ( ” ) قرار گیرد ولی باید بین دو پرانتز قرار گیرد.

به یک مثال در این رابطه توجه کنید:

<span style=”background-image:
url(http://www.neopersia.org/css/example1.gif)”>برای این span از
تصویر زمینه استفاده شده است.</span>

می توانید نتیجه کد بالا را مشاهده کنید:

برای این span از تصویر زمینه استفاده شده است.

از این ویژگی می توان تقریباً برای همه اجزای صفحه استفاده کرد. در اینجا برای یک جدول از آن استفاده کرده ایم:

<td>محتویات سلول اول</td>

<td>محتویات سلول دوم</td>

</table>

جدول به دست آمده مانند زیر است:

محتویات سلول اول

محتویات سلول دوم

همانطور که برای text box از رنگ زمینه استفاده کردیم برای آن از تصویر
زمینه هم می توانیم استفاده کنیم. در اینجا از این ویژگی برای یک textarea
استفاده می کنیم:

<form>

</textarea>

</form>

نحو تغییر رنگ متن با استفاده از CSS موضوع: آموزش CSS

color

از ویژگی color برای تغییر رنگ متن قسمتهای مختلف صفحه
استفاده می شود. برای مثال می توانید رنگ متن یک جدول را تغییر دهیم و یا
قسمتی از متن صفحه را که با تگ SPAN مشخص کرده ایم با رنگ متفاوتی با بقیه
متن نمایش دهیم. این تگ از آن جهت که کاربرد تگ <FONT> و در نتیجه
شناسه color که در تگ فونت استفاده می شود، در HTML4 در حال محدود شدن است
اهمیت بیشتری پیدا می کند.

البته در قسمتهای قبلی هم از این ویژگی استفاده کرده ایم اما در باره آن توضیحی داده نشده است.

color

البته در قسمتهای قبلی هم از این ویژگی استفاده کرده ایم اما در باره آن توضیحی داده نشده است.

مانند COLOR در تگ FONT رنگها در این ویژگی به دو صورت تعیین می شوند. شکل کلی این ویژگی به صورت زیر است:

color: نام رنگ مورد نظر

color:#معادل هگزادسیمال رنگ

اگر می خواهید از رنگهای معمولی که با نام شناخته می شوند استفاده کنید
کافی است تا نام رنگ مورد نظر خود را در این ویژگی استفاده کنید. این روش
ساده تر است ولی انعطاف پذیری کمتری هم دارد چون تنها می توانید رنگ مورد
نظر خود را از بین تعداد اندکی نام رنگ انتخاب کنید.

در صورتی که می خواهید از رنگهای بیشتری استفاده کنید و بهتر بتوانید
رنگ مو رد نظر خود را انتخاب کنید می توانید از معادل هگزادسیمال رنگها
استفاده کنید. در این صورت می توانید از ۲۱۶ رنگ مورد استفاده در وب رنگ
مورد نظر خود را انتخاب کنید.

در اینجا به ذکر چند مثال برای استفاده از ویژگی color می پردازیم. ما
در اینجا از شناسه style برای تعریف کردن این ویژگی استفاده می کنیم اما به
خاطر داشته باشید که می توانیم این ویژگی را برای یک تگ مشخص یا به صورت
class و id در بخش HEAD متن یا استایل خارجی نیز به کار ببریم.

برای مثال در استفاده از color برای تغییر رنگ متن یک جدول می توانیم کد جدول را به صورت زیر بنویسیم:

<tr>

<td>

این متن به رنگ قرمز نمایش داده می شود.

</td>

</tr>

</table>

نتیجه کد بالا با کدی که در پایین آمده است یکسان است:

<tr>

<td>

این متن به رنگ قرمز نمایش داده می شود.

</td>

</tr>

</table>

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

این متن به رنگ قرمز نمایش داده می شود.

به یاد داشته باشید که می توانید از ویژگی color برای هر کدام از سطرها
یا سلولهای یک جدول به صورت جداگانه استفاده کنید. فقط کافیست تا “style=”color: XXX را در هر قسمت قرار دهید و رنگ مورد نظر خود را به جای XXX قرار دهید.

تنظیم فونت صفحه با استفاده از استایل موضوع: آموزش CSS

در این قسمت به روش تنظیم فونت متن با استفاده از استایل
می پردازیم. بسیاری از اعمالی را که قبلاً با تگ <font> انجام می
دادیم می توانیم با استایل انجام دهیم.

font-family

ویژگی font-family مشخص می کند که متن با چه فونتی باید نشان داده شود.
این ویژگی در حقیقت جانشین شناسه face که در تگ font استفاده می شود است.
گزینه پیش فرض برای فونت ممکن است در مرورگرهای مختلف تفاوت داشته باشد،
اما معمولاً Times New Roman است.

در مثال زیر از ویژگی font-family برای تغییر فونت متن داخل یک div به Arial استفاده می کنیم:

<div style=”font-family: Arial”>این متن با فونت Arial نمایش داده می شود.</div>

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

این متن با فونت Arial نمایش داده می شود.

البته باید به خاطر داشته باشید که اگر بازدید کننده فونت مورد نظر شما
را نداشته باشد، مرورگر به جای آن از فونت پیش فرض خود استفاده می کند.
برای جلوگیری از بروز این مشکل باید از فونتهایی استفاده کنید که معمولاً
به همراه سیستم عامل نصب می شوند و در اکثر سیستمها موجود هستند.

font-family

در مثال زیر از ویژگی font-family برای تغییر فونت متن داخل یک div به Arial استفاده می کنیم:

<div style=”font-family: Arial”>این متن با فونت Arial نمایش داده می شود.</div>

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

این متن با فونت Arial نمایش داده می شود.

font-size

این ویژگی مشخص کننده اندازه فونت در صفحه می باشد. گزینه پیش فرض برای این ویژگی medium است.

فرض کنید می خواهیم متن درون یک DIV با اندازه ۳۰ پیکسل نمایش داده شود:

<div style=”font-size: 30px”>این متن با اندازه ۳۰ پیکسل نمایش داده می شود.</div>

نتیجه را ملاحظه کنید:

این متن با اندازه ۳۰ پیکسل نمایش داده می شود.

font-style

کار این ویژگی تقریباً شبیه تگ <I> در HTML است، اما چون استفاده
از تگهایی نظیر <FONT>, <B>, <U> و <I> در حال
کمرنگ شدن است بهتر است از استایل برای مورب نشان دادن متن استفاده شود.این
ویژگی می تواند مقادیر زیر را داشته باشد:

normal
italic
oblique

به یک مثال در مورد این ویژگی توجه کنید:

<div style=”font-style:oblique”>این متن به صورت مورب مشاهده می شود.</div>

نتیجه به این صورت خواهد بود:

این متن به صورت مورب مشاهده می شود.

font-weight

این ویژگی به ما امکان می دهد تا میزان ضخامت متن را تعیین کنیم. می توانیم از مقادیر زیر برای این ویژگی استفاده کنیم:

normal
bold
bolder
lighter
۱۰۰
۲۰۰
۳۰۰
۴۰۰
۵۰۰
۶۰۰
۷۰۰
۸۰۰
۹۰۰

در اینجا به ذکر یک مثال می پردازیم:

<div style=”font-weight: 700″>این متن تقریباً ضخیم مشاهده می شود.</div>

نتیجه به این صورت خواهد بود:

این متن تقریباً ضخیم مشاهده می شود.

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

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

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

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

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

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

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

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

همانطور که می بینید کدهایی که در قسمت 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>

« قبلی 1 2