سه شنبه ۰۱ تیر ۱۴۰۰

Tuesday, June 22, 2021 GMT +4:30

» نحوه تنظیم استایل لینک (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>
پیش نمایش آنلاین
دسته بندی: آموزش مقدماتی » CSS
related مطالب بیشتر:
» کار با ویژگی margin و padding در CSS
» خاصیت Background و ویژگی های آن در CSS
» نحوه تنظیم لیست با تگ ul li در CSS
» کاربرد ویژگی position و float در CSS
» مقدمه ای بر CSS و استایل دهی صفحات وب
commentنظرات (۲۸ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: مجتبی
۱۹:۳۷ ۱۳۹۴/۱۱/۲۰
سلام. من با ویژگی display یک بلاک تعریف کردم و داخل اون بلاک یک پیوند قرار دادم به نام home حالا می خواهم کلمه ی home وسط بلاک من بن باشه. هر کار می کنم نمیشه. لطف می کنین راهنمایی کنین
پاسخ: 
به بلاک (که متن داخل آن است) کلاسی با خاصیت های CSS زیر اختصاص دهید:
text-align: center;
vertical-align: middle;
line-height: 100px;
نکته: مقدار 100 جهت نمونه است و برابر با ارتفاع بلاک در نظر گرفته شود.
نویسنده: محسن
۰۰:۳۶ ۱۳۹۴/۱۲/۰۴
سلام
استاد اثر تنظیمات سه کلاس لینک مربوط به این نوشته:
حذف شد
رو کجا میتونیم مشاهده کنیم من هرچی تغییرات روش انجام دادم متوجه تغییرش نشدم!
پاسخ: 
هر قسمت استایل CSS جداگانه ای دارد، به طور مثال کلاس header و post به صورت جداگانه استایل دهی شده اند، ضمن اینکه یک حالت کلی برای تگ a تعریف شده که به تمام لینک ها (به جزء آنهایی که مقدار خاصیت مشابه در کلاس اختصاصی خود دارند) اعمال می شود.
نویسنده: کاغذ دیواری
۱۵:۳۶ ۱۳۹۵/۰۸/۰۱
سلام مطلب مفیدی بود ازش استفاده کردم ممنون
نویسنده: Alireza
۱۹:۵۹ ۱۳۹۵/۰۹/۱۸
سلام
دستتون واقعا درد نکنه
مطالب خیلی مفید بودن ♥♥♥♥
نویسنده: milad
۲۲:۳۵ ۱۳۹۶/۰۲/۲۱
وقت بخیر مهندس
لطفا کد این متن آمادشو میدین در 1 صفحه index.html قرار بدم
<h1>لینک دانلود شما</h1>
کد
a:hover { color:red; background-color:#6699CC; border:#006699 2px solid }
این کد نمیدنم کجا این متن
<h1>لینک دانلود شما</h1>
بزارم و آیا باید در css هم تغییری بدم ؟
ممنونم
پاسخ: 
هرچند دقیقا متوجه سوالتان نشدیم، اما به نظر اگر آموزش حاضر را مطالعه کنید به پاسخ سوالتان خواهید رسید، در قسمت اول لینک دانلود را با تگ a مطابق نمونه درج و کد قسمت دوم را در تگ style مشابه آنچه در آموزش گفته شده قرار دهید.
نویسنده: امیرحسین
۱۱:۳۵ ۱۳۹۶/۰۶/۰۵
سلام به جای اینکه نوشته اید حالت یه لینک فعال یا یه لینک بازدید شده چی باید بنویسم
پاسخ: 
این متن توضیحات کد CSS بعد از آن و صرفا جهت راهنمایی است!
نویسنده: elahe
۱۵:۰۰ ۱۳۹۷/۰۱/۱۳
سلام. خسته نباشید. ببخشید میخواستم ببینم چطوری میشه که لینک یه صفحه ی دیگه ای تو همان صفحه اصلی نشان داده بشه؟ مثلا وقتی روی یکی از گزینه های منو کلیک میکنیم اطلاعاتش نره تو صفحه جدا تو همون پنل سمت چپ صفحه اصلی میخوام نشون داده بشه
پاسخ: 
اگر یک نمونه درج می کردید بهتر بود! در هر صورت برای ایجاد حالت مد نظرتان نمی توانیم صرفا به تگ a در HTML اکتفا کنیم چون این تگ کاربر را به آدرس مقصد هدایت می کند، به طور کلی برای منظور شما باید از CSS و JavaScript در کنار کدنویسی HTML استفاده کرد، لطفا یک نمونه یا اسکرین شات قرار دهید تا راهنمایی دقیق تر میسر باشد.
نویسنده: Morteza Rashidi mehr
۱۹:۲۴ ۱۳۹۷/۰۴/۱۴
سلام خسته نباشید خواستم یه تابع درست کنم برای رویداد که یک کلیک Button بنویسیم بعد رو Button کلیک کنم نام کاربر بیاد واسم
پاسخ: 
سوالتان مبهم است! منظور از "نام کاربر بیاد واسم" مشخص نیست؟! اطلاعات از دیتابیس دریافت می شوند یا از پنجره ورود اطلاعات که برای کاربر نمایش داده می شود؟ نام کاربر پس از دریافت ذخیره می شود یا صرفا نمایش داده می شود؟ لطفا سوالتان را دقیقتر و با جزئیات مطرح کنید تا امکان پاسخ دهی وجود داشته باشد.
نویسنده: سوزان دهقانی
۱۱:۲۸ ۱۳۹۷/۱۰/۱۸
خیلی خوب و مفید بود. سپاسگزارم.
نویسنده: Maryam
۱۷:۱۹ ۱۳۹۷/۱۲/۲۳
سلام، خسته نباشی
بابت مطالب مهم و عالی که میزارید تشکر
وقتی که می خواهیم یک وب چند صفحه ای ایجاد کنید و آنها رو به index.html و صفحه اصلی لینک دهی کنیم باید چه کار کنیم
ــــــــــــــــ🌟ــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
مثلا وب ایجاد کنیم که چند صفحه دارد
برای ساخت صفحه باید، چه کار کرد
لطفا بگید
پاسخ: 
سوالتان پاسخ کوتاهی ندارد، باید ابتدا با مفهوم سایت استاتیک و داینامیک آشنا شوید که این مستلزم طی دوره آموزش های مقدماتی وب و HTML است، سپس می توانید با برنامه های موجود مانند Adobe Dreamweaver صفحات وب را کدنویسی و به صورت فایل های جداگانه (پسوند html یا htm) ذخیره کرده و در کنار فایل index.html قرار دهید، در این حالت کافی است با تگ a به صورت نمونه زیر از صفحه ایندکس به فایل مذکور لینک دهیم:
<a href="page.html" title="صفحه جدید" target="_self">لینک به صفحه جدید</a>
نویسنده: ayli
۲۱:۳۰ ۱۳۹۹/۰۹/۲۶
سلام
وقت بخیر، من وقتی به عکس لینک میدم سایز عکس کوچک میشه، میشه کاری کرد که سایز تغییر نکنه؟
پاسخ: 
باید کدهای استایل CSS قالبتان را بررسی و قسمت های مربوط به تگ img را ویرایش کنید، در صورت تمایل آدرس یک نمونه صفحه را درج نمائید تا امکان راهنمایی بیشتر میسر باشد.
نویسنده: masood
۱۷:۵۹ ۱۴۰۰/۰۳/۱۱
سلام
وقتتون بخیر
ببخشید من یک سوالی دارم
اگر بخوایم تنظیماتی که برای id و class در نظر داریم رو تو یه note pad جدا از نوت پد اصلیمون بنویسیم ، باید چه کار کنیم؟ یعنی من میخوام تنظیمات id و class ، توی صفحه ی اصلی کد نویسیم نباشن و حالت لینک وار در حین خوندن کدهای صفحه ام ، تنطیمات اون نت پد مربوط به id و class اجرا بشه
ممنون میشم راهنماییم کنید
باتشکر
پاسخ: 
اگر منظورتان جداسازی قسمت استایل از کدنویسی HTML صفحه است می توانیم قسمت CSS را در یک فایل جداگانه نوشته و به صفحه اصلی لینک کنیم، برای این کار یک فایل خالی با پسوند css آماده کنید و در کنار فایل html داشته باشید، استایل CSS را (بدون تگ های style) در فایلی که با پسوند css ساخته اید درج و در نهایت با نمونه لینک زیر فایل css را در قسمتی بین تگ های head وارد صفحه HTML کنید:
<link rel="stylesheet" type="text/css" href="style.css">
برای آشنایی بیشتر می توانید در همین صفحه کلیک راست کرده و از قسمت View Page Source نحوه کار را مشاهده کنید.
نکته: قسمت href شامل آدرس URL به فایل css است که می تواند به صورت نسبی (مانند مثال بالا) یا مطلق (به صورت کامل و با http) باشد.
نویسنده: محمود
۰۹:۵۶ ۱۴۰۰/۰۳/۳۰
سلام مهندس
وقت بخیر
دوباره به کمک شما نیاز پیدا کردم ، چگونه می توان استایل صوت به یک متن داد. به این صورت که با رفتن موس روی متن مورد نظر همزمان یک صوت پخش شود. البته ترجیحن با سی اس اس.
متشکرم.
پاسخ: 
پخش صوت ارتباط مستقیمی با CSS ندارد، برای این کار باید از تگ هایی مانند audio در HTML و در صورت نیاز جاوا اسکریپت استفاده کنیم، به طور مثال:
<a href="#" onclick="playAudio()">Play</a>
<audio id="audio_1">
<source src="http://example.com/path/to/audio.ogg" type="audio/ogg">
<source src="http://example.com/path/to/audio.mp3" type="audio/mpeg">
</audio>
<script>
var audio_1 = document.getElementById("audio_1");

function playAudio(){
audio_1.play();
}
</script>
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





9 × 6
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form علیرضا
در:
مفید و کاربردی مرسی
۱۴۰۰/۰۳/۳۱

form محمود
در:
سلام مهندس وقت بخیر دوباره به کمک شما نیاز پیدا کردم ، چگونه می توان استایل صوت به یک متن داد. به...
۱۴۰۰/۰۳/۳۰

form پرتو
در:
سلام استاد خسته نباشید قالبم درست شد خیلی ممنون یه خواهش دیگه هم ازتون داشتم اینکه یه بوردر برای تک به تک پست ها جداگانه...
۱۴۰۰/۰۳/۲۴

form بهنیا
در:
سلام خسته نباشید ببخشید چطوری میتونم برای خود وبسایتم یه لینک بسازم؟ کد خاصی داره؟
۱۴۰۰/۰۳/۲۴

form Raha
در:
سلام وقت بخیر چه جوری می تونم از دو تا function باهم استفاده کنم. مثلا میخوام توی مسیج باکس دوتا عدد دلخواه بدم...
۱۴۰۰/۰۳/۲۴

form رها
در:
سلام ممنون میشم اگه راهنماییم کنید من میخوام تو جاوا اسکریپت توی مسیج باکس بصورت اختیاری عدد بدم و جمع و تفریق انجام بشه. ...
۱۴۰۰/۰۳/۲۴

form محمد
در:
با عرض سلام و احترام مجدد پیرو کامنت قبلی که لطف کرده و توجه فرمودید آدرس سایت این هست: از توجه و راهنمایی‌های همیشگی...
۱۴۰۰/۰۳/۲۳

form محمد
در:
سلام وقت بخیر با سپاس از تیم محترم وبگو یک سوال داشتم از خدمتتون در عکسی که در آدرس با...
۱۴۰۰/۰۳/۲۲

form پرتو
در:
با سلام استاد من براتون ایمیل فرستادم لطفا ایمیل خود را چک کنید با تشکر
۱۴۰۰/۰۳/۲۱

form پرتو
در:
سلام خوبید خسته نباشید من یه کد قالبی دارم که میشه براتون بفرستم و شما تغییرش بدین من قالبم رو می خاستم اگه...
۱۴۰۰/۰۳/۲۰

form سید ارمیا حسینی
در:
سلام ببخشید عالی بود اما اگه می خواستم مثلا چیزی رو ایجاد کنم که مثلا کاربر بعد از ورود به صحفه 5 ثانیه بعد وارد...
۱۴۰۰/۰۳/۲۰

form الی
در:
سلام وقت بخیر من میخوام یه سایت طراحی کنم و در قسمت هدر یه گیف بذارم ولی هر کار می کنم گیف نمایش داده...
۱۴۰۰/۰۳/۱۸

form علیرضا حسینی
در:
دمتون گرم خسته نباشید خیلی عالی بود
۱۴۰۰/۰۳/۱۸

form حامدترابی
در:
سلام چند وقته که وبلاگ شهیدحسن ترابی گودرزی باز نمیشه ولی با vpn باز میشه. میشه راهنماییم کنید. ممنون میشم
۱۴۰۰/۰۳/۱۶

form mahdi
در:
سلام استاد این تابع در لوکال هم ایمیل ارسال میکنه هم فایل ضمیمه ، البته زمپ رو یه سری تغییرات باید داد و حساب ایمیل...
۱۴۰۰/۰۳/۱۲

form mahdi
در:
سلام وقت بخیر ، استاد عزیز اگر ما با تابع mail یه تابعی بنویسیم که در لوکال قابلیت ارسال هر نوع ایمیلی رو داشته باشه...
۱۴۰۰/۰۳/۱۲

form masood
در:
سلام وقتتون بخیر ببخشید من یک سوالی دارم اگر بخوایم تنظیماتی که برای id و class در نظر داریم رو تو یه...
۱۴۰۰/۰۳/۱۱

form mahdi
در:
استاد وقتشو دارید امشب ببینیدش مثلا در حد نیم ساعت که وقتتونم گرفته نشه؟
۱۴۰۰/۰۳/۱۰

form mahdi
در:
سلام استاد وقت بخیر،استاد عزیز من یه چارت با جاوااسکریپت نوشتم که سه تا نمودار میلیه ای و خطی و نقطه ای رو در بر...
۱۴۰۰/۰۳/۱۰

form پرتو
در:
وای من نمی تونم توی زمینه طراحی قالب های دیگ فعالیت کنم چون خیلی سختن فک نکنم بتونم اگر جایی می شناسید که قالب های...
۱۴۰۰/۰۳/۰۹

form پرتو
در:
سلام خسته نباشید شرمنده مزاحم شدم دوباره، می خاستم بپرسم می ارزه کسی وبلاگ در مورد قالب سازی بزنه یا اینکه نه نمی ارزه آخه...
۱۴۰۰/۰۳/۰۹

form یاس
در:
سلام میخواستم بدونم چجوری باید فایل متنی HTML دارای هایپرلینک را باز کند و محتوای آنرا بخواند و سپس هایپرلینک های آن را شناسایی کند...
۱۴۰۰/۰۳/۰۸

form sattar
در:
سلام، اون قسمتی که اعتبار سنجی ورود حروف فارسی هست مشکل داره یعنی کاربر رو اجبار به وارد کردن حروف فارسی میکنیم اما اگر مثلا...
۱۴۰۰/۰۳/۰۸

form mahdi
در:
سلام استاد ckeditor بهتره یا TinyMCE؟ من اینو ckeditor دیدم که راست چین چپ چین نداشت بعد استاد عزیز من یه چیزی رو...
۱۴۰۰/۰۳/۰۶

form پرتو
در:
ممنونم از شما که کدش رو دادید فقط یه سوال داشتم و اونم اینکه این کد رو در کدوم قسمت قالب قرار بدم و ایا...
۱۴۰۰/۰۳/۰۴

form mahdi
در:
سلام نه استاد عزیز نیازی نیست چون خودمم فکر میکنم لوگو رو باید از قبل مثلا با فتوشاپ آماده داشت و فقط میخواستم این امکانم...
۱۴۰۰/۰۳/۰۳

form پرتو
در:
سلام خواستم تشکر کنم از کدی که قبلا بهم داده بودید درست شد قالبم واقعا ممنونم ازتون یه چیز دیگه می خاستم بگم اینکه یه...
۱۴۰۰/۰۳/۰۳

form دانیال
در:
باسلام خیلی ممنون بابت مطالب عالیه سایتتون این مطلب هم مثل بقیه مطالب عالی بود
۱۴۰۰/۰۳/۰۳

form mahdi
در:
سلام استاد عزیز ، بله استاد اونطوری قرار میگیره وقتی تصویر از قبل مثلا با فتوشاپ شفاف شده باشه ، ولی اگر بخوایم یک عکس...
۱۴۰۰/۰۳/۰۳
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.