کار با stylesheet [بایگانی]

pedram_ns

جمعه 17 دی 1389, 11:17 صبح

با سلام
کد زیر رو در فایل style sheet برای تغییر رنگ لینک ها با حرکت موس نوشتم.
ولی در مروگر firefox کار نمی کنه چرا؟ و باید چکار کرد؟

a.link1:link {
text-decoration: none;
color: #0000ff;
font-family: Tahoma;
font-size: 8pt;
}
a.link1:visited {
text-decoration: none;
color: #0000ff;
font-family: Tahoma;
font-size: 8pt;
}
a.link1:hover {
text-decoration: none;
color: Red;
font-family: Tahoma;
font-size: 8pt;
}

<a href="link.aspx" class="link1">لینک</a>

parsidev

جمعه 17 دی 1389, 11:22 صبح

من از این شیوه استفاده می کنم:

#link1 a:link {
text-decoration: none;
color: #0000ff;
font-family: Tahoma;
font-size: 8pt;
}
#link1 a:visited {
text-decoration: none;
color: #0000ff;
font-family: Tahoma;
font-size: 8pt;
}
#link1 a:hover {
text-decoration: none;
color: Red;
font-family: Tahoma;
font-size: 8pt;
}

و در html:

<div id="link1">
<a href="link.aspx">لینک</a>
</div>

parsidev

جمعه 17 دی 1389, 11:24 صبح

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

pedram_ns

جمعه 17 دی 1389, 11:40 صبح

یعنی هیچ راه دیگه ایی نداره که بدون div اجرا بشه؟

parsidev

جمعه 17 دی 1389, 11:49 صبح

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

mehrdad201

جمعه 17 دی 1389, 16:10 عصر

a.ClassName { }

a.className:hover {}
تنظیمات لینکت رو در کلاس نیم مربوطه مشخص کن

بعد حالت hover رو ست کن

نمونه مثال

a.MyLink01{ color:#000; Text-Decoration:none; }

a.MyLink01:hover {Text-Decoration: Underline;}

بعد هم اینطوری ازش استفاده کن

<a href="#" class="MyLink01"> Hello World</a>

pedram_ns

جمعه 17 دی 1389, 20:14 عصر

خوب دوست گرامی من هم همین رو نوشتم ولی با همه مرورگرها کار نمی کنه!

mehrdad201

جمعه 17 دی 1389, 20:23 عصر

یک سوال

شما واسه تگ a خالی هم تو css دستوراتی تعریف کردید ؟ واگع اینطوریه دستورات تگ a رو زیر بلاک این کلاس تعریف کردی یا بالا ؟ اگه زیر این بلاک تعریف کردی منتقلش کن به بالای این بلاک کلاس

pedram_ns

جمعه 17 دی 1389, 20:33 عصر

منظورتون از تگ a خالی چیه؟ منظورتون تگ a بدون نامه؟
نه چهار تا تگ a دارم که همه با یک نام مثل link1 نام گذاری شده. البته چندتا لینک دارم که با jquery کار می کنه و حالت تب داره.

pedram_ns

جمعه 17 دی 1389, 20:48 عصر

الان چک کردم اگر فقط یک کلاس a مثل link1 در css داشته باشم همه چیز در همه مرورگرها درست کار می کنه ولی اگر یک کلاس دیگه به نام a.link2 اضافه کنم مشکل ایجاد می شه.

mehrdad201

جمعه 17 دی 1389, 22:10 عصر

اینکه ترتیب این کلاسها چطوریه هم موثره :)

pedram_ns

شنبه 18 دی 1389, 09:16 صبح

خوب من در یک صفحه از سه تا از این کلاس ها استفاده می کنم باید چکار کنم؟؟؟؟؟؟؟؟؟؟؟

mehrdad201

شنبه 18 دی 1389, 10:32 صبح

لطف کن سورس کامل صفحت رو بذار (فایل رو اتچ کن)

pedram_ns

شنبه 18 دی 1389, 11:06 صبح

سایت: http://www.myesfahan.ir (http://www.myesfahan.ir/)
با موزیلا در page source می تونید هم سورس صفحه و هم اطلاعات style sheet رو بخونید.

البته نمی دونم چه اتفاقی افتاده ولی امروز که دوباره صفحات رو آپلود کردم انگار در همه مرورگرها درست کار می کنه لطفا با چند مرورگر چک کنید و ببینید آیا درست شده!

mehrdad201

شنبه 18 دی 1389, 12:57 عصر

من لینکها رو در فایرفاکس دیدم. مشکلی نداشت. همشون وقتی حالت hover داشتند قرمز میشدند. حالت نورمال هم ابی بودند.

درسته ؟

pedram_ns

شنبه 18 دی 1389, 13:44 عصر

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

خیلی ممنون از لطف و کمکتون.

aserfg

شنبه 18 دی 1389, 13:47 عصر

دوست عزیز برای این که درست کار کنه باید selector ها رو به ترتیب درست بنویسی . هیچ ارتباطی به استفاده از div و یا عنصر خاصی نداره

a:link
a:visited
a:hover
a:active

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

<html>
<head>
<style type="text/css">
a:link {background-color:#B2FF99;} /* unvisited link */
a:visited {background-color:#FFFF85;} /* visited link */
a:hover {background-color:#FF704D;} /* mouse over link */
a:active {background-color:#FF704D;} /* selected link */
</style>
</head>

<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>

</body>
</html>

mehrdad201

شنبه 18 دی 1389, 14:15 عصر

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

در ضمن یه حالت دیگه هم هست به اسم focus که اگه اشتباه نکرده باشم اخرین ترتیب هست