لینک ها در 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 لینک ها را داخل یک جعبه نشان دهیم.
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:active
<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 قابل نمایش خواهد بود.
جهت اطمینان، زحمت بکشید و مقدار a:visited را به ccc# تغییر دهید.
چرا سوالاتی که مطرح می شه ارتباطی به این بحث نداره و برای مباحث دیگه ای است اینجوری ادم حس می کنه چیزی را از قلم انداخته و نخوانده'
a:visited یعنی بعد از اینکه لینک فعال شده؟
دقیقاً در مثال خودتان امتحان کنید اول a:visited استفاده شده است،
لطفاً رنگ مربوط به a:visited را به ccc# تغییر دهید و نتیجه را ملاحظه بفرمایید.
شبه کلاس ها بیشتر بروی چه نوع عناصری به درستی کار میده؟
مثلا من بروی div بدرستی جواب نگرفتم!
برای اطلاعات بیشتر به لینک زیر مراجعه فرمایید:
beyamooz.com/css/87-advance/295
ببخشید
باز در مورد همین عکس با حاشیه که به صورت لینک و div تعریف کردم زمانی که میخوام در css بهش style hover بدم اعمال نمیشه
اگر عکسی border داشته باشه نمیشه style های لینک رو بهش داد؟؟
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 ...!
بله باید تگ a رو داخل div قرار داد تا بشه اون رو وسط چین کرد. به مثال زیر توجه کنید:
codepen.io/sbaloot/pen/eBpVGY