در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش گام به گام CSS قسمت هشتم: لینک ها و لیست ها

لینک ها:


در جلسه گذشته به طور کامل درباره خاصیت font در CSS ورژن ۲ آموختیم. امروز می خواهیم در رابطه به لینک ها , حالت های لینک و استایل های لینک مطالبی بیاموزیم. خب به صورت کلی تمام خاصیت هایی که در CSS برای متون قابل استفاده است (مثل رنگ, سایز و..)در اینجا نیز کاربرد دارد. اما مهمترین نکته این تگ حالت های آنست. برای مثال می توانید کنترل کنید که اگر ماوس روی لینک کلیک کرد چه اتفاقی بیفتد یا اگر ماوس hover شد. به طور کلی چهار رویداد وجود دارد که می توانید در زیر هر کدام از آنها را مشاهده کنید:

a:link – حالت نرمال و دست نخورده لینک

a:visited – حالتی که کاربر قبلا از آن لینک دیدن کرده است.

a:hover – حالتی که ماوس روی آن

a:active – لحظه که ماوس روی آن لینک کلیک می کند.

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

Text Decoration: یک خاصیت مهم دیگر در CSS حالت نمایش لینک است به صورت پیشفرض متنی که به عنوان لینک ظاهر می شود زیرخط دار است ( همان حالت underline ).

برای آنکه متن از حالت زیرخط دار خارج شود باید مقدار خاصیت را برابر none قرار دهید.

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

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

    display: inline-block : در صورت استفاده از این خاصیت می توانید می توانید المنت های صفحه را با چینش درست تری در مرورگر نمایش بدهید. برنامه را بدون این خاصیت نیز اجرا کنید تا تفاوت خروجی ها را ببینید.

لیست ها:

لیست ها از جمله مهمترین اجزای یک صفحه وب به منظور لیست بندی چندین آیتم به کار می رود. برای مثال فهرست مربوط به یک وبسایت را لیست ها می سازند.

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

لیست های مرتب: لیست هایی که با علامت های دایره یا مربع و… علامت گذاری می شوند. تگ مورد نظر برای این لیست <ol> است.

لیست های نامرتب: لیست هایی که با اعداد (عادی , رومی و…) علامتگذاری می شوند. تگ مورد نظر برای این لیست <ul> است.

List-Style-type: یکی از استایلهایی که یک لیست می تواند بگیرد نوع نمایش لیست هاست. این مقادیر در لیست های مرتب و نامرتب متفاوت است. مثال زیر مربوط به مقادیر این خاصیت برای لیست مرتب است:

ol
{
	list-style-type:lower-roman;
	list-style-type:upper-roman;
	list-style-type:upper-alpha;
	list-style-type:lower-alpha;
	list-style-type:upper-armenian;
}

مثال زیر مربوط به مقادیر این خاصیت برای لیست نامرتب است:

ul
{
	list-style-type: square;
	list-style-type: circle;
	list-style-type:none;
}

List-style-image: می توانید بجای علامتگذاری های پیشفرض در CSS برای لیست ها از تصاویر شخصی خودتان استفاده کنید. برای این کار کافی است که از این خاصیت بهره ببرید:

ul
{
	list-style-image: url(Music_Flat1.png);
}

List-style-position: موقعیت داخلی یا خارجی بودن یک لیست را می توانید توسط این خاصیت معلوم کنید. برای مثال وقتی خاصیت یک لیست را برابر inside قرار دهید لیست زیر منوی قبل از خود قرار می گیرد. البته یکی دیگر از راههای آن استفاده از لیستهای تودرتو است که در آموزش HTML درباره آنها صحبت کردیم. به مثالهای زیر توجه کنید:

	ul.h
	{
		list-style-type: circle;
		list-style-position: outside;
	}
	ul.hi
	{
		list-style-type: square;
		list-style-position:inside;
	}

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

    list-style: square inside url("sqpurple.gif");

نویسنده : ارسطو عباسی

منبع : انجمن تخصصی فناوری اطلاعات ایران

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#آموزش_گام_به_گام_css #آموزش_css #آموزش_سی_اس_اس #آموزش_مقدماتی_css
عنوان
1 آموزش گام به گام CSS قسمت اول : معرفی و آشنایی با نوشتن دستورات رایگان
2 آموزش گام به گام CSS قسمت دوم: شیوه های استفاده از CSS رایگان
3 آموزش گام به گام CSS قسمت سوم : رنگ ها و پشت زمینه ها رایگان
4 آموزش گام به گام CSS قسمت چهارم: حاشیه ها رایگان
5 آموزش گام به گام CSS قسمت پنجم: Margin , Padding , height , Width رایگان
6 آموزش گام به گام CSS قسمت ششم: متون رایگان
7 آموزش گام به گام CSS قسمت هفتم : فونت‌ و قالب‌های متنی رایگان
8 آموزش گام به گام CSS قسمت هشتم: لینک ها و لیست ها رایگان
9 آموزش گام به گام CSS قسمت نهم: جداول رایگان
10 آموزش گام به گام CSS قسمت دهم: Display و Max-width رایگان
11 آموزش گام به گام CSS قسمت یازدهم: موقعیت ها , Overflow رایگان
12 آموزش گام به گام CSS قسمت دوازدهم: جهت ها, تراز ها و غلظت رایگان
13 آموزش گام به گام CSS قسمت سیزدهم: شفافیت رایگان
14 آموزش گام بە گام CSS: قسمت چهاردهم: واکنشگرایی چیست؟ رایگان
15 آموزش گام بە گام CSS: قسمت پانزدهم: Viewport چیست؟ رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....