فرمت دهی لینک ها در CSS
لینک ها در CSS
با توجه به اینکه لینک ها در چه حالتی هستند، می توانید هر Styleی را که مورد نظرتان است به آنها اختصاص دهید.
لینکها چهار وضعیت دارند:
- a:link - لینک در حالت معمولی است یعنی مشاهده نشده است.
- a:visited - لینک توسط کاربر مشاهده شده است.
- a:hover - زمانی که موس کاربر روی لینک قرار دارد.
- a:active - لحظه ای که کاربر روی لینک مورد نظر کلیک می کند.
مثال (فرمت دهی لینک ها در CSS)
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
خودتان امتحان کنید »a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
توجه: برای تنظیم Styleهای یک لینک به موارد زیر توجه فرمایید:
- a:hover باید بعد از a:link و a:visited آورده شود.
- a:active باید بعد از a:hover آورده شود.
Styleهای متداول لینک
در مثال بالا رنگ لینک در حالت های مختلف تغییر داد می شود.
اجازه بدهید Styleهای متداول دیگر برای لینک را ذکر کنیم:
Styleهای متداول لینک - آذین بندی متن (Decoration)
خصوصیت text-decoration اکثراً جهت حذف کردن underline از لینک ها استفاده می شود:
مثال (فرمت دهی لینک ها در CSS)
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
خودتان امتحان کنید »a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Styleهای متداول لینک - رنگ پس زمینه (Background)
خصوصیت background-color برای مشخص کردن رنگ پس زمینه لینک ها استفاده می شود:
مثال (فرمت دهی لینک ها در CSS)
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
خودتان امتحان کنید »a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
اضافه کردن Styleهای مختلف به لینک ها
این مثال نشان می دهد که چگونه Styleهای مختلف را به لینک ها اضافه کنیم.
پیشرفته - عمل کردن لینک مانند یک دکمه
این مثال نشان می دهد که چگونه با ترکیب چندین ویژگی در CSS لینک ها را داخل یک جعبه نشان دهیم.
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 37626
دیدگاه‌ها
با سلام ، چطوری لینک ها رو Css خارجی استایل بدم ؟ مثلا برای a باید کلاس بندی کنم ؟ اون پارامترهایی مثل hover ، visited ، active ، link و غیره رو باید به چه صورت بدم ؟ لطفا یه مثال برای css خارجی بزنید
سلام. برای آموزش css خارجی، مقاله ی زیر رو مطالعه کنید:
www.beyamooz.com/css/84-basic/84-css%D9%87%D8%A7%DB%8C-%D8%AF%D8%A7%D8%AE%D9%84%DB%8C-%D9%88-%D8%AE%D8%A7%D8%B1%D8%AC%DB%8C
به نقل از احسان عباسی:
با تشکر
این آموزش رو قبلا مطالعه کردم ، سوال من در خصوص چگونگی استایل دهی برای "پارمتر لینک" در css خارجی بود
برای استایل دهی بسیاری از عمکردها از کلاس بندی استفاده میکنیم و تو css خارجی اسم اون کلاس رو میاریم مثلا :
.mainbox {
height: 1200px;
width: 990px;
background-color: #E0E3E6;
}
اما برای استایل دهی به a چکار باید کرد ؟
مثلا این پارامترها رو می خوام از داخلی به css خارجی منتقل کنم :
a:link,a:visited, a:hover,a:activ e
css خارجی که با css داخلی فرقی نداره ( به جز موارد خاص). مثلا فرض کنید می خواهید هنگام عمل hover برای عنصر a خصوصیاتی تعریف کنید. به صورت زیر عمل می کنیم:
<head>
<link rel="stylesheet " type="text/css" href="/mystyle. css" />
</head>
حالا کدهای خودمون رو در داخل فایل mystyle.css قرار می دهیم:
a:hover{
color:red;
}
به نقل از احسان عباسی:
سلام ، و با عرض پوزش بعلت سوال های متعدد
مشکل اینجاست که این مدلی که شما نوشتی با کلاس بندی فرق داره ، من چطوری بهش کلاس بدم ؟تو استایل دهی ها برای عناصر مختلف از اسم های دلخواه برای کلاس بندی استفاده میکنیم و تو فایل css با یه دات قبلش فراخونیش می کنیم ، اینجا شما یه مدل دیگه نوشتین (a:hover) ...
مشکل بعدی اینه که چند تا عنصر a تو کدهای صفحه ی html خودم دارم ، اگه اینی که شما گفتی انجام بدم برای همه شون استایل دهی اعمال میشه در صورتی که من فقط برای یه a خاص می خوام استایل بدم
سلام. خواهش می کنم.
براتون یه مثال در آدرس زیر ایجاد کردم. به این آدرس بروید فکر کنم مشکلتون برطرف بشه:
codepen.io/sbaloot/pen/qRbYwr
سلام من داخل یک وب سایتی نویسندگی میکنم وقتی مطلبی میذارم به طور خودکار برای برخی از کلمات که در موضوعات سایت آمده لینک همون موضوع ایجاد میشه لطفا راهنمایی کنید با استفاده از چه کدی میشه اینکار کرد.
با سلام.
در بعضی از CMSها و کلا اسکریپت‌ها برنامه‌نویسان کدی رو می‌نویسند و یکسری کلمات رو معین میکنن. زمانی که نویسنده متنی رو می‌نویسه، این متن توسط کدها parse میشه و اگر کلمه‌ای پیدا بشه که در لیست کلمات تعیین شده باشه، برای اون عملیاتی در نظر گرفته میشه. یکی از این عملیات ایجاد لینک مرتبط برای اون کلمه هست.
این موردی که شما مطرح فرمودید، به احتمال قوی برنامه‌نویسی هست.
البته بعضی مواقع هم هست که توسط css کاری میکنن که مثلا بعضی از استایل‌ها به شکل خاصی نمایش داده بشن.
اگه بتونید بیشتر توضیح بدید که به چه شیوه هست، بهتر میشه راهنمایی کرد.
سلام
در قسمت color حتما رنگها باید هگزا دسیمال باشند و از RGB نمیشه استفاده کرد؟
سلام
برای تنظیم خصوصیت color از روش RGB نیز می توانید استفاده کنید:
a:link {color:rgb(125, 125,125);}
سلام خسته نباشید
این روزا من تو بخش های مختلف سوالاتی میپرسم که شما با صبر و حوصله پاسخ میدید ممنون
من این اسلاید رو گذاشتم تو پروژه ام اما میخوام با کلیک موس عکس ها نمایش داده بشه وقتی active رو به جای hoverقرار میدم عمل نمیکنه مشکل از کجاست
اینم کد:.slider {
position: relative;
height: 660px;
width: 960px;
overflow: hidden;
margin: 0 auto;
}
a {
margin: 20px;
}
a:hover .small {
-webkit-box-sha dow: 0px 0px 15px rgba(0,0,0,0.5) ;
-moz-box-shadow : 0px 0px 15px rgba(0,0,0,0.5) ;
box-shadow: 0px 0px 15px rgba(0,0,0,0.5) ;
}
.big {
position: absolute;
top: 900px;
left: 20px;
-webkit-transit ion: top 1s ease;
-moz-transition : top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
a:hover .big {
top: 260px;
}
a:hover {
top: 260px;
left: 20px;
z-index: -3;
}
***********
با سلام و تشکر.
ظاهرا مشکلی تو کد نیست! باید عمل کنه!
اگر می‌تونید اون قسمت html رو هم قرار بدید تا یه تست کنم، ببینم مشکل از کجاست.
این هم قسمت html
با سلام. متأسفانه کدهای html نیومده. شما باید کدهای html رو entities کنید. ابتدا کدهای html خودتون رو در سایت https://www.functions-online.com/htmlentities.html در قسمت str$ وارد کرده و سپس run رو بزنید.
سپس نتیجه رو اینجا کپی کنید.
با این کار، کدهای html قابل نمایش خواهد بود.
ببخشید یه سوال ساده پیش اومده. چرا حالت a:visited با a:link هیچ تفاوتی نداره؟ خودمم چند بار امتحان کردم ولی بعد از کلیک ،لینک مثل حالت اولش میشه
در مثال اول یعنی beyamooz.com/try_it_yourself/tryit.php?filename=trycss_link احتمالاً شما قبلاً روی لینک کلیک کرده اید و حالا که مجدداً به مثال مراجعه می کنید، رنگ حالا a:visited نشان داده می شود.
جهت اطمینان، زحمت بکشید و مقدار a:visited را به ccc# تغییر دهید.
خسته نباشید'
چرا سوالاتی که مطرح می شه ارتباطی به این بحث نداره و برای مباحث دیگه ای است اینجوری ادم حس می کنه چیزی را از قلم انداخته و نخوانده'
با عرض معذرت از شما، بارها این مورد تذکر داده شده است ...!
چرا تو هیچ کدوم از مثال ها رنگ و تنظیماتی که برای a:visited تعریف شده نشون داده نمیشه؟
a:visited یعنی بعد از اینکه لینک فعال شده؟
کاربر محترم
دقیقاً در مثال خودتان امتحان کنید اول a:visited استفاده شده است،
لطفاً رنگ مربوط به a:visited را به ccc# تغییر دهید و نتیجه را ملاحظه بفرمایید.
خسته نباشید
شبه کلاس ها بیشتر بروی چه نوع عناصری به درستی کار میده؟
مثلا من بروی div بدرستی جواب نگرفتم!
کلاس ها برای تمام عناصر کاربرد پذیر هستند و نمی توانیم بگوییم مثلاً برای div درست کار نمی کند ولی برای h1 درست کار می کند.
این همان کلاس های کاذب است،درسته!
آفرین ... در این سایت ما واژه ی "شبه کلاس" را بجای "کاذب" استفاده کرده ایم.
برای اطلاعات بیشتر به لینک زیر مراجعه فرمایید:
beyamooz.com/css/87-advance/295
میدونم تکراریه ولی بازم بخاطر توضیحات دقیق و آموزشای فوق العاتون تشکر
سلام
ببخشید
باز در مورد همین عکس با حاشیه که به صورت لینک و div تعریف کردم زمانی که میخوام در css بهش style hover بدم اعمال نمیشه
اگر عکسی border داشته باشه نمیشه style های لینک رو بهش داد؟؟
سلام، برای استایل Hover به لینک زیر مراجعه کنید: (آموزش CSS - ساخت گالری تصاویر)
www.beyamooz.com/css/87-advance/298
برای حل مشکلتون به گزینشگر یا Selector زیر بیشتر توجه فرمایید:
{ }div.img a:hover img
در واقع، استایل مورد نظرتان را باید در این گزینشگر ذکر نمایید.
سلام
لطفا در مورد عکس با حاشیه راهنمایی بفرمایید چطور میتوان برای یک عکس حاشیه ای با ضخامت و رنگ خاص تعریف کرد؟
سلام، چند راه برای حاشیه دادن به عکس وجود دارد:
1- تنظیم خصوصیت border برای عکس (img): همانطور که می دانید برای خصوصیت border می توان رنگ و ضخامت تعیین نمود. بنابراین border: 2px solid #000 یک حاشیه با ضخامت 2 پیکسل و رنگ سیاه، دور عکس ایجاد می کند.
2- قرار دادن عکس در یک عنصر div: اینبار عکس را داخل یک div قرار می دهیم و استایل مورد نظرمان را روی div اعمال می کنیم، باید بدانید که ابتدا باید div را با استفاده از خصوصیت float:right یا display:inline به یک عنصر inline تبدیل کنیم. سپس استایل زیر را روی div اعمال کنید:
;float:right
;padding:3px
;border: 2px solid #000
سلام
من یک لینک ساختم و به اون عنصر div و style درون تگی text-align دادم الان که میخوام تو css بهش style بدم اعمال نمیشه لطفا راهنمایی کنید مشکل چیه؟
سلام، احتمالاً شما می خواهید که لینک تان را وسط چین کنید، اما وسط چین نمی شه ...!
تگ a یک عنصر inline است به این معنی که به اندازه ی محتوایش طول یک سطر را اشغام می کند، و زمانی که از خصوصیت text-align با مقدار center برای این عنصر، استفاده می کنیم، به همین دلیل وسط چین نمی شود. احتمالاً شما راه حل را می دانید ...! یعنی قرار دادن تگ a در یک عنصر block مثل div و تنظیم خصوصیت text-align با مقدار center، اینبار برای div ...!
سلام ببخشید ایشون خصوصیت text-align رو به صورت درون تگی تنظیم کردن،وقتی این خصوصیت رو به صورت خارجی هم تنظیم می کنن اولویت با استایل درون تگی هست!اگه استایل درون تگی رو تنظیم نمی کردن باز هم برای وسط چین کردن لینک باید تگ a رو داخل تگ div قرار میدادن؟
سلام.
بله باید تگ a رو داخل div قرار داد تا بشه اون رو وسط چین کرد. به مثال زیر توجه کنید:
codepen.io/sbaloot/pen/eBpVGY