i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت متفاوت و کاملتر خواهد بود، این فرآیند زمانبر است و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی نمایش و به تناوب به روزرسانی می شود.
آگهی
article

نحوه تنظیم استایل لینک (Link) در CSS

css-link-style

در ادامه مباحث آموزش مقدماتی استایل نویسی با زبان CSS می خواهیم با خواص کاربردی این زبان در نحوه تنظیم ویژگی های ظاهری لینک (Link) آشنا شویم، در صفحات مختلف فضای وب با لینک (Hyperlink یا ابرپیوند) آشنا هستیم که با بردن نشانه گر (ماوس) روی آنها به فرض رنگ متن تغییر می کند و یا پس از بازدید از صفحه ارجاع داده شده متن لینک به رنگ دیگری نشان داده می شود، جالب است که تمام این ویژگی ها با کمک خواص CSS خلق می شوند که در ادامه آموزش پیش رو به آن خواهیم پرداخت، یادآور می شویم آموزش های CSS و HTML به هم مرتبط هستند لذا اگر نکته ای در خصوص نحوه تعریف لینک ها به نظر مبهم است لطفا جهت جلوگیری از سردرگمی ابتدا به آموزش های مقدماتی HTML مراجعه شود.

تعریف لینک (Link) در HTML


همانطور که قبلا گفتیم CSS به خودی خود کاربردی ندارد و در ترکیب با تگ های HTML نقش و قدرت آن مشخص می شود به همین دلیل وقتی صحبت از تنظیم استایل لینک در CSS است باید ابتدا ببینیم که لینک در HTML چگونه تعریف می شود، در آموزش های مقدماتی دیدیم که لینک (Hyperlink یا ابرپیوند) در HTML با تگ a و صفت href تعریف می شود، مثال:
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
این مثال نمونه یک لینک متنی عادی در وب است که بدون تعریف استایل CSS به صورت پیش فرض در مرورگر پردازش و نمایش داده خواهد شد.

تنظیم استایل لینک در CSS


در آموزش های قبل دیدیم که برای اعمال خاصیت های CSS بر روی تگ های هدف در HTML از مفهومی تحت عنوان سلکتور (Selector) بهره می بریم به فرض استایل زیر بر روی تمام تگ های p در صفحه اعمال خواهد شد:
<style>
p {
    font-size:16px;
    color:#818181;
}
</style>
<p>پاراگراف اول</p>
<p>پاراگراف دوم</p>
<p>پاراگراف سوم</p>
عبارت p در این مثال یک سلکتور در CSS است که تمام تگ های p را در صفحه HTML جهت اعمال جلوه های ظاهری مورد نظر هدف قرار می دهد، با این توضیح سلکتوری که برای لینک در CSS استفاده می شود مشابه با نمونه بالا سلکتور a است که بر روی تمام تگ های a در صفحه اعمال می شود، البته این سلکتور بر حسب نیاز حالت ها و زیرمجموعه هایی دارد که در ادامه بررسی خواهیم کرد.
لینک در وب به طور معمول در چند حالت مختلف می تواند جلوه ظاهری متفاوتی داشته باشد، به طور مثال در حالت عادی که ماوس را روی آن نبرده ایم ممکن است رنگ لینک به فرض آبی باشد اما پس از اینکه ماوس را به منظور کلیک کردن روی لینک می بریم به رنگ دیگری درآید یا پس از دیدن صفحه ارجاع داده شده رنگ لینک به صورت ثابتی تغییر کند، همچنین موقعی که بر روی لینک کلیک می کنیم و پیش از انتقال به آدرس ارجاعی در لحظه ای کوتاه ظاهری متفاوت داشته باشد، به هر صورت تمام این ویژگی ها در CSS با سلکتورهای مربوط به لینک قابل ایجاد هستند، این سلکتورها عبارتند از:
- a یا a:link برای حالت عادی (زمانی که هنوز بر روی لینک کلیک نکرده ایم و صفحه ارجاعی لینک دیده نشده است).
- a:visited برای حالتی که صفحه مربوط به آن لینک دیده شده است.
- a:hover برای حالتی که ماوس را روی لینک می بریم.
- a:active برای لحظه ای که روی لینک کلیک می کنیم.
به کاربرد این سلکتورها در مثال زیر دقت کنیم:
<style>
/* حالت عادی لینک */
a:link {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #06C;
    text-decoration: none;
}
/* حالت لینک دیده شده */
a:visited {
    color: #C30;
}
/* حالت لینک فعال */
a:hover {
    color: #008CC7;
}
/* حالت لینک در لحظه ای که روی آن کلیک می کنیم */
a:active {
    background-color: #999;
}
</style>
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
توضیح:
- سلکتورهای مربوط به لینک باید به صورت ذکر شده در مثال بالا به ترتیب تعریف شوند در غیر اینصورت برخی ویژگی های مورد نظر عمل نخواهند کرد.
- در اغلب موارد به جزء حالت a یا a:link و a:hover استفاده از سایر سلکتورها اختیاری است و بستگی به هدف و سلیقه برنامه نویس دارد.
نکته: در حالت عادی صرفا خاصیت های سلکتور a:visited برای لینکی که محتوای آن قبلا دیده شده باشد اعمال می شود، در صورتی که این سلکتور تعریف نشده یا محتوایی نداشته باشد، خاصیت های سلکتور a یا a:link اعمال خواهند شد.

استفاده از خاصیت text-decoration در تنظیم استایل CSS لینک


اکثر مرورگرها در حالت پیش فرض عبارات متنی لینک شده را به صورت زیرخط نمایش می دهند که شاید از لحاظ ظاهری جلوه خوبی نداشته باشد، خوشبختانه در CSS خاصیتی تحت عنوان text-decoration وجود دارد که به کمک آن و با افزودن مقادیر می توانیم لینک هایی با ظاهری بهتر و سفارشی شده تعریف کنیم، در خصوص text-decoration در آموزش قبل به صورت مفصل صحبت کردیم، گفتیم مقادیر اصلی که برای خاصیت text-decoration قابل استفاده هستند عبارتند از:
- none: برای حالت عادی (بدون خط).
- overline: برای حالتی که خط در قسمت بالای لینک ترسیم می شود.
- underline: برای حالتی که خط در زیر لینک ترسیم می شود.
- line-through: برای ایجاد لینکی که روی آن خط کشیده شده یا خطی از وسط آن گذشته است.
- blink: برای ایجاد لینک های چشمک زن (این خاصیت در حال حاضر منسوخ شده و در اغلب مرورگرها پشتیبانی نمی شود، در ادامه آموزش حاضر در خصوص شیوه جایگزین ایجاد جلوه لینک چشمک زن و استفاده از انیمیشن در CSS صحبت خواهیم کرد).
برای خاصیت هایی که شامل خط (line) می شوند می توانیم از مقادیر استایل زیر در کنار مقادیر اصلی برای تعیین جلوه ظاهری خط ترسیم شده استفاده کنیم:
- solid: خط عادی (حالت پیش فرض).
- double: خط دوتایی.
- dotted: خط نقطه چین.
- dashed: خط تیره (فاصله).
- wavy: خط موج دار.
علاوه بر این در حالت ترسیم خط می توانیم از مقادیر رنگی مجاز CSS (کدهای Hex، RGB، HSL و رنگ های با نام مانند red، green، blue، lime و...) نیز برای تعیین رنگ خط استفاده کنیم، مثال:
<style>
/* حالت عادی لینک */
a:link {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #06C;
    text-decoration: dotted underline #C110D9;
}
/* حالت لینک دیده شده */
a:visited {
    color: #C30;
}
/* حالت لینک فعال */
a:hover {
    color: #008CC7;
    text-decoration: dashed overline underline #4910D3;
}
/* حالت لینک در لحظه ای که روی آن کلیک می کنیم */
a:active {
    background-color: #999;
}
</style>
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
نکته: همانطور که در نمونه کد مشخص است برخی از خواص لینک ها در سلکتور اول یعنی a یا a:link تعریف می شوند و در سلکتورهای بعدی نیازی به تعریف مجدد آنها نیست و از همان تنظیمات پیروی می کنند یا به اصطلاح ارث می برند، مانند font-family یا font-size در مثال بالا.

ایجاد لینک چمک زن با استفاده از خاصیت animation در CSS


گفتیم که خاصیت blink به دلایلی توسط کنسرسیوم جهانی وب W3C منسوخ شده و در اغلب مرورگرهای امروزی پشتیبانی نمی شود، برای ایجاد این حالت می توانیم از شیوه جایگزین و خاصیت animation در CSS استفاده کنیم، مثال:
<style>
blink, .blink {
    animation: blink 1s step-end infinite;
    -webkit-animation: blink 1s step-end infinite;
    -moz-animation: blink 1s step-end infinite;
    -o-animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink {
    80% {
        opacity: 0;
    }
}
@-moz-keyframes blink {
    80% {
        opacity: 0;
    }
}
@-o-keyframes blink {
    80% {
        opacity: 0;
    }
}
@keyframes blink {
    80% {
        opacity: 0;
    }
}
</style>
<a class="blink" href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
جزئیات خاصیت animation باید در جای خود آموزش داده شود اما در گام فعلی در این حد بدانیم که می توانیم با نمونه استایل بالا در صفحات HTML لینک چمک زن ایجاد نمود.

استفاده از خاصیت color و background

در تنظیم استایل CSS لینک


از جمله خاصیت های CSS دیگری که می توانیم بر روی تگ a اعمال کنیم خاصیت های مرتبط با رنگ و پس زمینه لینک های متنی است، در رابطه با این خاصیت ها در آموزش های گذشته به صورت مفصل صحبت کردیم، در اینجا به ذکر یک مثال بسنده می کنیم:
<style>
/* حالت عادی لینک */
a:link {
    color: #FFFFFF;
    background: #234AB5;
}
/* حالت لینک دیده شده */
a:visited {
    color: #FFFFFF;
}
/* حالت لینک فعال */
a:hover {
    color: #000000;
    background: #DAE3FF;
}
</style>
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
این خاصیت ها صرفا بر روی لینک های متنی (نه تصویر) قابل اعمال هستند.

استفاده از آی دی (ID) و (Class) در تنظیم استایل لینک در CSS


گاهی در طراحی و برنامه نویسی صفحات وب نیاز است که استایل لینک های یک بخش و بلاک را از سایر بخش ها متمایز کنیم یا الگویی را به دفعات در سایت خود استفاده کنیم به طور مثال قسمت لینک باکس یا قسمت لینک دوستان را به رنگ و ظاهری متفاوت نشان دهیم، در این مواقع تعریف لینک ها در حالت عادی و با سلکتور کلی a کاربرد ندارد، این سلکتور فقط حالتی کلی و پیش فرض برای لینک هایی که آی دی و کلاس برایشان تعریف نشده است را نشان می دهد، بر اساس قانون اولویت ها در CSS سلکتور آی دی و کلاس مقدم بر سلکتور عمومی نام تگ است، به این ترتیب برای هر آی دی یا کلاس در CSS باید عناصر مربوط به سلکتور a:link و زیر مجموعه های مورد نیاز آن را اضافه کنیم، مثال زیر گویا است.
ابتدا استایلی برای کلاس تعریف می کنیم:
<style>
/* حالت عادی لینک */
a:link {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #06C;
    background: #CCCCCC;
    text-decoration: none;
}
/* حالت لینک دیده شده */
a:visited {
    color: #C30;
    background: #C0C0C0;
}
/* حالت عادی لینک در بلاک مورد نظر */
.link a:link {
    font-size: 16px;
    color: #06C;
    text-decoration: underline wavy #FF311C;
}
/* حالت لینک دیده شده در بلاک مورد نظر */
.link a:visited {
    text-decoration: underline wavy #8C0011;    
}
</style>
سپس کلاس را به بلاکی نسبت داده و لینک را درون آن درج می کنیم:
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
<div class="link">
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a>
</div>
با این کار لینک های موجود در بلاک div فرضی link از سلکتور ترکیبی کلاس تعیین شده پیروی کرده و ویژگی های آن را به خود می گیرند اما سایر لینک های موجود در صفحه صرفا از خاصیت های سلکتور کلی a و زیرمجموعه های آن پیروی می کنند.

پیش نمایش آنلاین


برای جمع بندی آموزش نحوه تنظیم استایل لینک (Link) در CSS نمونه کد زیر را به همراه پیش نمایش آنلاین آن بررسی می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | استفاده از CSS برای تنظیم استایل لینک</title>
<!-- Webgoo.ir -->
</head>
<body>
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height: 22px;    
}
/* حالت عادی لینک */
a:link {
    color: #06C;
    text-decoration: dotted underline #C110D9;
}
/* حالت لینک دیده شده */
a:visited {
    color: #C30;
}
/* حالت لینک فعال */
a:hover {
    color: #008CC7;
    text-decoration: dashed overline underline #4910D3;
}
/* حالت لینک در لحظه ای که روی آن کلیک می کنیم */
a:active {
    background-color: #999;
}
blink, .blink {
    animation: blink 1s step-end infinite;
    -webkit-animation: blink 1s step-end infinite;
    -moz-animation: blink 1s step-end infinite;
    -o-animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink {
    80% {
        opacity: 0;
    }
}
@-moz-keyframes blink {
    80% {
        opacity: 0;
    }
}
@-o-keyframes blink {
    80% {
        opacity: 0;
    }
}
@keyframes blink {
    80% {
        opacity: 0;
    }
}
/* حالت عادی لینک در بلاک مورد نظر */
.link a:link {
    font-size: 16px;
    color: #06C;
    text-decoration: underline wavy #FF311C;
    padding: 4px;
    background: #E7E7E7;
}
/* حالت لینک دیده شده در بلاک مورد نظر */
.link a:visited {
    text-decoration: underline wavy #8C0011;    
}
</style>
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a><br>
استایل این لینک از خاصیت های سلکتور a پیروی می کند.
<hr>
<a class="blink" href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a><br>
استایل این لینک علاوه بر سلکتور a از خاصیت های کلاس تعریف شده blink پیروی می کند، برای ایجاد حالت لینک چمک زن از خاصیت animation در CSS بهره برده ایم.
<hr>
<div class="link">
<a href="https://webgoo.ir" title="وبگو" target="_self">وبگو | آموزش برنامه نویسی و مهارتهای وب</a><br>
</div>
استایل این لینک در بلاک div با کلاس فرضی link درج شده و از خاصیت های این کلاس در کنار سلکتور a پیروی می کند.
</body>
</html>
پیش نمایش آنلاین
sectionدسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» مقدمه ای بر CSS و استایل دهی صفحات وب
» کار با border و outline در CSS
» سلکتور آی دی (ID) و کلاس (Class) در CSS
» ویژگی های Font و Text در CSS
» خاصیت Background و ویژگی های آن در CSS
commentنظرات (۲۵ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: رضا
زمان: ۰۲:۲۶:۰۴ - تاریخ: ۱۳۹۱/۰۳/۱۸
خیلی مردی دمت گرم
نویسنده: اسدی
زمان: ۰۱:۰۵:۰۳ - تاریخ: ۱۳۹۱/۱۰/۱۴
عالی بود
نویسنده: حسنلو
زمان: ۱۰:۵۴:۰۵ - تاریخ: ۱۳۹۱/۱۲/۱۵
با سلام
میخواستم کناره هایه صفحه سایتم رو مثل سایت شما درست کنم می تونید راهنماییم کنید چطور انجامش بدم
پاسخ: 
سلام
آموزش انجام این کار را در این قسمت نمی توان ارائه کرد، باید از مقدمات با css آشنا شوید و تکنیک های طراحی وب با فتوشاپ را نیز فرابگیرید.
نویسنده: محمود
زمان: ۱۳:۱۹:۵۱ - تاریخ: ۱۳۹۲/۰۴/۱۰
سلام خسته نباشید
برای اینکه در استایل تگ <li> رو به صورت کامل لینک دار کنیم باید چه کاری انجام داد؟
چون زمانی که به تگ a خاصیت padding می دهم به هم می ریزد.
با تشکر
پاسخ: 
سلام
برای ایجاد لینک در تگ li کافی است از تگ a درون آن استفاده کنید، منتها برای تنظیم استایل CSS بنا بر هدف خود می توانید از مواردی مانند display با مقدار block یا سایر خاصیت های CSS استفاده کنید.
در واقع اینکه چگونه نحوه نمایش ظاهری عنصر را تنظیم کنید، به میزان آشنایی شما با CSS و آزمایش و خطای خاصیت های مختلف برمی گردد.
نویسنده: محمود
زمان: ۱۷:۰۲:۵۴ - تاریخ: ۱۳۹۲/۰۴/۱۰
تشکر از پاسخ. اما منظورم کل li لینک دار شود که برعکس گفته ی شما تگ li را درون a قرار دهیم.
صورت کامل سوال بنده:
ببینید در وردپرس با نوشتن این کد:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('left')): ?>
<?php endif; ?>
ابزارک مورد نظر فراخوانی میشه. به صورت مشخص ما استایل ها را می نویسیم، اما دسترسی به کد اصلی نداریم که بتوانیم تگ li را در a قرار دهیم. در اینصورت باید چه کاری انجام داد؟
با تشکر
پاسخ: 
چه تگ a را درون li قرار دهید و چه برعکس، در نهایت نیاز به تنظیم استایل CSS آنها خواد بود، اما مشکل در اینجا این نیست! همان طور که اشاره کردید، مشکل عدم دسترسی به قسمت ایجاد خروجی است، یعنی خروجی توسط یک تابع تولید می شود، لذا ویرایش هم باید درون آن تابع صورت گیرد، به عبارت دیگر سورس اصلی کدها در جای دیگری قرار دارد، متاسفانه CMS وردپرس جهت تست در سیستم ما نصب نیست، باید خودتان فایل های مربوط به این تابع را پیدا و آنها را ویرایش کنید.
نویسنده: reyhaneh
زمان: ۱۴:۳۸:۰۹ - تاریخ: ۱۳۹۲/۰۶/۱۶
سلام واقعا ممنون از سایت خوبتون... فقط چه جوری در حال کلیک کردن روی لینک چجوری رنگ متن تغییر کنه؟؟ این رنگ کادر رو تغییر میده
پاسخ: 
سلام
استایل CSS ذکر شده صرفا یک نمونه است، می توانید از خاصیت background-color استفاده نکنید.
نویسنده: هما
زمان: ۱۷:۵۲:۲۵ - تاریخ: ۱۳۹۳/۰۲/۱۳
سلام
می خواستم ببینم چطوری چند تا لینک را با فاصله در ردیف می تونیم استفاده کنیم . من هر کاری کردم نشد.
مرسی
پاسخ: 
سلام
سعی کنید CSS را یاد بگیرید، اینگونه موارد با استفاده از تعریف استایل قابل انجام است، برای نمونه می توانید عبارت "منو" را در قسمت جستجو وارد کرده و آموزش "ایجاد منوهای زیبا برای سایت یا وبلاگ با استفاده از تکنیک CSS" را مشاهده کنید.
نویسنده: مهسا
زمان: ۱۳:۲۰:۵۶ - تاریخ: ۱۳۹۳/۰۴/۱۵
سلام خسته نباشید تشکر میکنم بابت سایت خیلی خوبتون واقعا عالیه.
یک سوال هم داشتم ممنون میشم خیلی زود جواب بدین
میخواستم بدونم چطور اطلاعات وارد شده در فرم به زبان html رو در پایگاه داده ای مثل excel ذخیره کرد و لینک داد
متشکرم
پاسخ: 
سلام
ساده نیست! ابتدا باید محتوا را از طریق متد POST به یک فایل PHP ارسال و در این فایل یا با استفاده از ODBC و اکستنشن PDO به دیتابیس access متصل شوید (سپس می توانید از دیتابیس access خروجی CSV بگیرید)، روش دیگر استفاده از MySQL و دریافت خروجی CSV است، برای ایجاد فایل یا لینک به فایل اکسل نیز لطفا در وب عبارت "make excel download php mysql" را جستجو کنید، توضیح مختصری وجود ندارد!
نویسنده: سالار
زمان: ۱۳:۰۹:۵۷ - تاریخ: ۱۳۹۴/۰۱/۰۱
ممنون از سایت خوبتون
نویسنده: elshan
زمان: ۰۰:۰۱:۵۷ - تاریخ: ۱۳۹۴/۰۳/۰۶
مرسی به دردم خورد خیلی خوب توضیح دادی
نویسنده: داوود
زمان: ۱۸:۵۲:۱۸ - تاریخ: ۱۳۹۴/۰۵/۲۶
سلام آقای مهندس، میخواستم ببینم آیا در مرورگرهای امروزی خاصیت
text-decoration:blink;
پشتیبانی می شود؟؟ چون من برای نمونه که نوشتم نه در فایرفاکس و نه در کروم هیچکدومش جواب نمیداد. فکر نمی کنید مثل خاصیت marquee دیگه از دستورات رایج css خارج شده؟؟
پاسخ: 
سلام
بله این خاصیت ها جزء مواردی هستند که با قابلیت های CSS3 جایگزین شده اند:
@-webkit-keyframes blink {
from {
opacity: 1.0;
}
to {
opacity: 0.0;
}
}
blink {
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
-webkit-animation-duration: 1s;
}
هر چند پشتیبانی مرورگرها در نسخه های قدیمی تر از CSS3 کامل نیست، اما آینده وب به این سمت در حرکت است!
نویسنده: داوود
زمان: ۱۰:۲۴:۰۴ - تاریخ: ۱۳۹۴/۰۶/۰۲
با سلام؛
ممنون آقای مهندس؛ فقط جهت اطلاع سایر دوستان این رو هم اضافه کنم که؛ دیگه اینجوری ننویسیم:
p{
text-decoration:blink;
}
چون خود blink تبدیل به یه تگ شده و اینجوری باید نوشته بشه:
<blink> this is a title for test</blink>
همچنین اگه بخوایم کد بالا برای Firefox هم جواب بده به جای همه کلمات webkit از moz استفاده میکنیم.
(اگه اشتباه دارم، لطفا شما اصلاح کنید آقای مهندس).
پاسخ: 
سلام
خیر!، حتی این تگ نیز در آینده حذف خواهد شد، لذا تنها راه صحیح استفاده از CSS است!
نویسنده: داوود
زمان: ۰۹:۲۲:۰۶ - تاریخ: ۱۳۹۴/۰۶/۰۹
سلام آقای مهندس، صبحتون بخیر و خوشی
استاد فکر کنم رایج ترین کاری که طراحان برای اینکه منوها در کنار همدیگه و بصورت افقی قرار بگیره انجام میدن استفاده از خاصیت float هستش! درست میگم؟؟ اونوقت بعدش میان و با استفاده از خاصیت display مقادیر inline یا inline-block رو اعمال می کنن. آیا بطور کل برای اینکه یه منو بصورت افقی قرار بگیره استاندارد خاصی وجود داره یا نه سلیقه ای عمل میشه بیشتر؟؟
پاسخ: 
سلام
خیر، برای این موارد استاندار بخصوصی وجود ندارد، اما به تجربه روش هایی بین طراحان متداول شده که خارج از خاصیت های عادی CSS نیست، از جمله استفاده از display با مقادیر inline-block، استفاده از float هم بسته به نیاز و ضرورت است!
نکته: در رابطه با منوهای تعاملی (آبشاری، افقی و...) خاصیت پر کاربرد دیگر position است.
نویسنده: داوود
زمان: ۱۲:۴۹:۴۶ - تاریخ: ۱۳۹۴/۰۶/۰۹
سلام؛ ممنونم آقای مهندس بخاطر پاسخی که بهم دادین. استاد یه سوال دیگه هم داشتم. ببینید یه خاصیت دیگه هم ما برای لینکها داریم که من کمتر دیدم جایی توضیح بده و اونهم focus هستش؛ چرا این مورد رو زیاد نمیارن توی موارد مربوط به توضیحات لینکها؟؟ خودم یه تعریف اینجوری درست کردم براش درسته: این خاصیت تا زمانی فعال هستش که ما روی لینک دیگه ای از همون گروه کلیک نکنیم، یعنی به نوعی تا زمانی Hover هستش که ما گزینه دیگه ای رو از گزینه های همگروهش انتخاب نکنیم.
حالا کاربردش رو تو اینجا میخوام نشون بدم و یه سوال هم داشتم؛ شما این سایت رو ببینید استاد:
http://oxdemo.ow-visuals.com/index?layout=flatty#
حالا بخشی هست در سایدبار چپ صفحه که شامل بخشهایی مثل Slideshow ؛ Users ؛ Video و ... هستش. هر کدومشون آیتمهایی دارن که من اومدم و اونها رو میخواستم پیاده سازی کنم. تقریبا همه چیز Ok هستش و پیش فرض رو هم تو item اول تونستم Hover کنم ولی چیکار کنم که زمانی که کاربر روی گزینه بعدیش کلیک میکنه؛ hover شدن از لینک اول برداشته بشه؟؟ امیدوارم منظورم رو درست فهمونده باشم. مثلا در حالت پیش فرض latest انتخاب شده هستش، حالا اگه یه آیتم دیگه مثل online رو انتخاب کنیم؛ این اولی دیگه از حالت انتخاب در میاد. من همین رو سوال دارم. آیا با jquery این کار رو کرده ؟؟ اگه مثبت هستش من چون این مورد رو بلد نیستم پس باید برم بیشتر کار کنم.
اینهم حاصل کار من:
http://jsfiddle.net/n5w9tdcm/
پاسخ: 
سلام
- سلکتور focus مربوط به تگ هایی است که این قابلیت را دارند، به طور مثال تگ a زمانی در حالت focus قرار می گیرد که کاربر بر روی لینک در حال کلیک کردن است (فاصله بین فشردن تا برداشتن نشانه گر، در واقع زمان بسیار ناچیز!)، اما در مورد تگ هایی مانند textarea امکان focus بارزتر است، به طور مثال یک فیلد textarea بسازید و استایل زیر را به آن نسبت دهید، سپس در داخل و خارج از فیلد کلیک کنید:
textarea:focus{
background:#E9E9E9;
}
- تکنولوژی های وب به هم پیوسته هستند و خیلی از قابلیت ها در تعامل زبان های سمت کاربر و سمت سرور شکل می گیرند، در اینجا نیز اگر به سورس صفحه دقت کنید:
<div class="ow_box_menu">
<a href="javascript://" id="base_users_widget_10353947_users_widget_menu_latest" class="active"><span>Latest</span></a>
<a href="javascript://" id="base_users_widget_10353947_users_widget_menu_online"><span>Online</span></a>
<a href="javascript://" id="base_users_widget_10353947_users_widget_menu_featured"><span>Featured</span></a>
</div>
سایت مذکور در اولین بارگذاری، کلاس آیتم انتخاب شده را به طور پیش فرض چاپ می کند:
class="active"
سایر تغییراتی که با کلیک بر روی سربرگ ها ایجاد می شود، توسط کدهای جاوا اسکریپت مدیریت می شوند (کلاس تگ ها با کدهای جاوا اسکریپت تغییر می کند)!، نمونه آموزش مرتبط با این موضوع در سایت وجود دارد که شاید به درک مطلب کمک کند، می توانید در وب عبارت "ساخت منوی هوشمند" را جستجو کنید!
نکته: نمونه آموزش مبتنی بر PHP است، اما مطالعه آن ضرری نخواهد داشت!
نویسنده: داوود
زمان: ۰۹:۱۵:۰۴ - تاریخ: ۱۳۹۴/۰۸/۲۶
سلام و صبح بخیر خدمت آقای مهندس نازنین؛
استاد یه سوالی برام پیش اومده؛ ببنید تو یه کتاب نوشته بودی برای اینکه بخوایم استایل لینکهای نوشته شده بدرستی اثر خودشون رو بذارن باید دقیقا مثل تعریف شما نوشته بشه؛ یعنی اینجوری "دقت کنید که عناصر مربوط به لینک باید به ترتیب ذکر شده در مثال بالا پشت سر هم و به ترتیب تعریف شوند، در غیر اینصورت ویژگی های مورد نظر عمل نخواهند کرد." و برای اینکه تو ذهنمون بره میگفت 2 تا کلمه LoVe و HAte رو به یاد داشته باشین، عشق و نفرت و حروف بزرگ نشون دهنده ترتیب اونهاست. حالا من میبینم بعضی جاها به این ترتیب هم مینویسن.
link
hover
active
visited
بعدشم فکر کنم focus رو میذارن در انتها.
الان واقعا کدوم درسته و طبق کدوم روش همیشه بریم جلو، چون شما هم دقیقا گفته کتاب رو تایید کردین.
مرسی و ممنونم از لطفت همیشگیتون.
موفق و سرافراز باشین انشاالله.
پاسخ: 
سلام
قبلا به این سوال شما پاسخ داده شده!:
قانون مذکور صرفا یک کلید واژه برای یادآوری ترتیب اعمال سلکتورها بر روی تگ a است که البته برای افراد حرفه ای چندان ضرورتی ندارد و حتی جای حالت focus در آن خالی است!، خیلی از مواقع نیز برخی حالات مانند visited یا active تنظیم نمی شوند و از ویژگی های پیش فرض مرورگر استفاده می شود، به صورت خلاصه سلکتورهایی که می توان به یک تگ a (از مرحله مشاهده تا کلیک و رها کردن ماوس) نسبت داد به صورت زیر است:
a:link
a:visited
a:hover
a:active
a:focus
نکته: سلکتور visited هیچ جایگاه ترتیبی مشخصی ندارد، چون به مواردی تعلق می گیرد که قبلا (کلیک) شده باشند و اهمیتی ندارد که در حین کلیک این اتفاق بیفتد یا بعد از مراجعه مجدد به صفحه! اما برخی سلکتورها به هم مرتبط و ترتیبی هستند، مانند link و hover.
paged صفحه 1 از 2
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




9 × 4
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آگهی
سفارش آگهی
Webgoo.ir

هزینه و بازخورد مناسب