سبد خرید (0)

تبلیغات

فرمت دهی لینک ها در CSS

لینک ها در CSS

Wiki

با توجه به اینکه لینک ها در چه حالتی هستند، می توانید هر Styleی را که مورد نظرتان است به آنها اختصاص دهید.

لینکها چهار وضعیت دارند:

  1. a:link - لینک در حالت معمولی است یعنی مشاهده نشده است.
  2. a:visited - لینک توسط کاربر مشاهده شده است.
  3. a:hover - زمانی که موس کاربر روی لینک قرار دارد.
  4. 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 */
خودتان امتحان کنید »

توجه: برای تنظیم Styleهای یک لینک به موارد زیر توجه فرمایید:

  1. a:hover باید بعد از a:link و a:visited آورده شود.
  2. a:active باید بعد از a:hover آورده شود.

Styleهای متداول لینک

Wiki

در مثال بالا رنگ لینک در حالت های مختلف تغییر داد می شود.

اجازه بدهید 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;}
خودتان امتحان کنید »

Styleهای متداول لینک - رنگ پس زمینه (Background)

Wiki

خصوصیت background-color برای مشخص کردن رنگ پس زمینه لینک ها استفاده می شود:

مثال (فرمت دهی لینک ها در CSS)

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
خودتان امتحان کنید »

مثال

مثال - خودتان امتحان کنید

Wiki

اضافه کردن Styleهای مختلف به لینک ها
این مثال نشان می دهد که چگونه Styleهای مختلف را به لینک ها اضافه کنیم.

پیشرفته - عمل کردن لینک مانند یک دکمه
این مثال نشان می دهد که چگونه با ترکیب چندین ویژگی در CSS لینک ها را داخل یک جعبه نشان دهیم.

دیدگاه‌ها  

+1 # مهدی ب 1395-10-19 19:34
با سلام ، چطوری لینک ها رو Css خارجی استایل بدم ؟ مثلا برای a باید کلاس بندی کنم ؟ اون پارامترهایی مثل hover ، visited ، active ، link و غیره رو باید به چه صورت بدم ؟ لطفا یه مثال برای css خارجی بزنید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-10-20 16:21
سلام. برای آموزش 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
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهدی بازگرد 1395-10-20 19:43
به نقل از احسان عباسی:
سلام. برای آموزش 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
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-10-21 09:52
css خارجی که با css داخلی فرقی نداره ( به جز موارد خاص). مثلا فرض کنید می خواهید هنگام عمل hover برای عنصر a خصوصیاتی تعریف کنید. به صورت زیر عمل می کنیم:
<head>
<link rel="stylesheet " type="text/css" href="/mystyle. css" />
</head>

حالا کدهای خودمون رو در داخل فایل mystyle.css قرار می دهیم:
a:hover{

color:red;

}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهدی بازگرد 1395-10-21 19:31
به نقل از احسان عباسی:
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 خاص می خوام استایل بدم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1395-10-22 08:57
سلام. خواهش می کنم.
براتون یه مثال در آدرس زیر ایجاد کردم. به این آدرس بروید فکر کنم مشکلتون برطرف بشه:
codepen.io/sbaloot/pen/qRbYwr
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امی حسین 1395-07-24 11:16
سلام من داخل یک وب سایتی نویسندگی میکنم وقتی مطلبی میذارم به طور خودکار برای برخی از کلمات که در موضوعات سایت آمده لینک همون موضوع ایجاد میشه لطفا راهنمایی کنید با استفاده از چه کدی میشه اینکار کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-07-24 11:33
با سلام.
در بعضی از CMSها و کلا اسکریپت‌ها برنامه‌نویسان کدی رو می‌نویسند و یکسری کلمات رو معین میکنن. زمانی که نویسنده متنی رو می‌نویسه، این متن توسط کدها parse میشه و اگر کلمه‌ای پیدا بشه که در لیست کلمات تعیین شده باشه، برای اون عملیاتی در نظر گرفته میشه. یکی از این عملیات ایجاد لینک مرتبط برای اون کلمه هست.
این موردی که شما مطرح فرمودید، به احتمال قوی برنامه‌نویسی هست.

البته بعضی مواقع هم هست که توسط css کاری میکنن که مثلا بعضی از استایل‌ها به شکل خاصی نمایش داده بشن.
اگه بتونید بیشتر توضیح بدید که به چه شیوه هست، بهتر میشه راهنمایی کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # حشایار 1395-03-17 23:10
سلام
در قسمت color حتما رنگها باید هگزا دسیمال باشند و از RGB نمیشه استفاده کرد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1395-03-24 08:27
سلام
برای تنظیم خصوصیت color از روش RGB نیز می توانید استفاده کنید:
a:link {color:rgb(125, 125,125);}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # لیلا 1394-11-21 00:24
سلام خسته نباشید
این روزا من تو بخش های مختلف سوالاتی میپرسم که شما با صبر و حوصله پاسخ میدید ممنون
من این اسلاید رو گذاشتم تو پروژه ام اما میخوام با کلیک موس عکس ها نمایش داده بشه وقتی 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;
}
***********
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-11-22 18:53
با سلام و تشکر.
ظاهرا مشکلی تو کد نیست! باید عمل کنه!
اگر می‌تونید اون قسمت html رو هم قرار بدید تا یه تست کنم، ببینم مشکل از کجاست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # لیلا 1394-11-25 12:33
این هم قسمت html
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهرداد صلاحی 1394-11-25 12:49
با سلام. متأسفانه کدهای html نیومده. شما باید کدهای html رو entities کنید. ابتدا کدهای html خودتون رو در سایت https://www.functions-online.com/htmlentities.html در قسمت str$ وارد کرده و سپس run رو بزنید.
سپس نتیجه رو اینجا کپی کنید.
با این کار، کدهای html قابل نمایش خواهد بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # Marjan 1394-02-16 18:06
ببخشید یه سوال ساده پیش اومده. چرا حالت a:visited با a:link هیچ تفاوتی نداره؟ خودمم چند بار امتحان کردم ولی بعد از کلیک ،لینک مثل حالت اولش میشه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # امیر پهلوان صادق 1394-02-16 22:53
در مثال اول یعنی http://beyamooz.com/try_it_yourself/tryit.php?filename=trycss_link احتمالاً شما قبلاً روی لینک کلیک کرده اید و حالا که مجدداً به مثال مراجعه می کنید، رنگ حالا a:visited نشان داده می شود.
جهت اطمینان، زحمت بکشید و مقدار a:visited را به ccc# تغییر دهید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # rezax 1393-12-16 22:47
خسته نباشید'
چرا سوالاتی که مطرح می شه ارتباطی به این بحث نداره و برای مباحث دیگه ای است اینجوری ادم حس می کنه چیزی را از قلم انداخته و نخوانده'
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1393-12-17 15:09
با عرض معذرت از شما، بارها این مورد تذکر داده شده است ...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # Marjan 1393-12-16 20:33
چرا تو هیچ کدوم از مثال ها رنگ و تنظیماتی که برای a:visited تعریف شده نشون داده نمیشه؟
a:visited یعنی بعد از اینکه لینک فعال شده؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مظاهر نصوحی 1393-12-17 15:11
کاربر محترم
دقیقاً در مثال خودتان امتحان کنید اول a:visited استفاده شده است،
لطفاً رنگ مربوط به a:visited را به ccc# تغییر دهید و نتیجه را ملاحظه بفرمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # raghb 1393-12-16 01:28
خسته نباشید
شبه کلاس ها بیشتر بروی چه نوع عناصری به درستی کار میده؟
مثلا من بروی div بدرستی جواب نگرفتم!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مظاهر نصوحی 1393-12-16 08:24
کلاس ها برای تمام عناصر کاربرد پذیر هستند و نمی توانیم بگوییم مثلاً برای div درست کار نمی کند ولی برای h1 درست کار می کند.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیرکیان 1393-11-09 17:13
این همان کلاس های کاذب است،درسته!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-11-10 10:56
آفرین ... در این سایت ما واژه ی "شبه کلاس" را بجای "کاذب" استفاده کرده ایم.
برای اطلاعات بیشتر به لینک زیر مراجعه فرمایید:
http://beyamooz.com/css/87-advance/295
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Milad 1393-10-30 16:38
میدونم تکراریه ولی بازم بخاطر توضیحات دقیق و آموزشای فوق العاتون تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # sara 1393-09-24 12:24
سلام
ببخشید
باز در مورد همین عکس با حاشیه که به صورت لینک و div تعریف کردم زمانی که میخوام در css بهش style hover بدم اعمال نمیشه
اگر عکسی border داشته باشه نمیشه style های لینک رو بهش داد؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-09-25 09:04
سلام، برای استایل Hover به لینک زیر مراجعه کنید: (آموزش CSS - ساخت گالری تصاویر)
www.beyamooz.com/css/87-advance/298
برای حل مشکلتون به گزینشگر یا Selector زیر بیشتر توجه فرمایید:
{ }div.img a:hover img
در واقع، استایل مورد نظرتان را باید در این گزینشگر ذکر نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # sara 1393-09-23 13:27
سلام
لطفا در مورد عکس با حاشیه راهنمایی بفرمایید چطور میتوان برای یک عکس حاشیه ای با ضخامت و رنگ خاص تعریف کرد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1393-09-23 14:56
سلام، چند راه برای حاشیه دادن به عکس وجود دارد:
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
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # sara 1393-09-20 20:38
سلام
من یک لینک ساختم و به اون عنصر div و style درون تگی text-align دادم الان که میخوام تو css بهش style بدم اعمال نمیشه لطفا راهنمایی کنید مشکل چیه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1393-09-21 11:17
سلام، احتمالاً شما می خواهید که لینک تان را وسط چین کنید، اما وسط چین نمی شه ...!
تگ a یک عنصر inline است به این معنی که به اندازه ی محتوایش طول یک سطر را اشغام می کند، و زمانی که از خصوصیت text-align با مقدار center برای این عنصر، استفاده می کنیم، به همین دلیل وسط چین نمی شود. احتمالاً شما راه حل را می دانید ...! یعنی قرار دادن تگ a در یک عنصر block مثل div و تنظیم خصوصیت text-align با مقدار center، اینبار برای div ...!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # niloofar mashayekh 1395-08-19 20:11
سلام ببخشید ایشون خصوصیت text-align رو به صورت درون تگی تنظیم کردن،وقتی این خصوصیت رو به صورت خارجی هم تنظیم می کنن اولویت با استایل درون تگی هست!اگه استایل درون تگی رو تنظیم نمی کردن باز هم برای وسط چین کردن لینک باید تگ a رو داخل تگ div قرار میدادن؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1395-08-19 20:38
سلام.
بله باید تگ a رو داخل div قرار داد تا بشه اون رو وسط چین کرد. به مثال زیر توجه کنید:
codepen.io/sbaloot/pen/eBpVGY
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!