• صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Search
Close this search box.
۰ تومان 0 Cart
  • ورود
  • ثبت نام
Menu
  • ورود
  • ثبت نام
Search
Close this search box.
۰ تومان 0 Cart
Menu
  • ورود
  • ثبت نام
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما

آموزش رایگان CSS – جلسه 13

مرداد 9, 1400
نویسنده حامد نجفی
HTML-CSS ، برنامه نویسی
357 بازدید
آموزش رایگان CSS - جلسه 13| لینک ها در CSS

در جلسه ی دوازدهم از آموزش CSS با فونت ها آشنا شدیم. در این جلسه تصمیم داریم شما را با لینک ها در CSS آشنا کنیم. امیدواریم که تا پایان این جلسه ما را همراهی کنید.

لینک ها در CSS

از تگ a در CSS برای لینک دادن استفاده می شود. استفاده از CSS کمک می کند تا لینک ایجاد شده زیباتر و به شکل مورد نظر ما طراحی شود. اما سوال اینجاست که چه تغییراتی می توان برای یک لینک ایجاد کرد؟

حالت های مختلف لینک ها

برای لینک ها حالت های مختلفی وجود دارد که برای کار با CSS و استایل دهی آنها لازم است با این حالت ها آشنا شویم؛

 

حالت اول

لینکی که هنوز روی آن کلیک نشده است.یعنی به طور پیش فرض دارای رنگ آبی و یک خط زیر است.

حالت دوم

لینکی که روی آن کلیک شده است. به طور پیش فرض دارای یک خط و به رنگ بنفش است.

حالت سوم

لینک فعال . یعنی لحظه ی کلیک بر روی لینک که به طور پیش فرض دارای خط و به رنگ قرمز است.

حالت چهارم

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

 

برای اینکه بتوان هر یک از حالت های بالا را در CSS استایل دهی کرد, باید از دستورات معادل آنها که برای زبان CSS قابل درک است استفاده کنیم؛

a:link : حالت معمولی که هنوز روی لینک کلیک نشده
a:visited : حالتی که کلیک شده
a:hover : در حالت هاور موس(موس روی آن قرار دارد)
a:active : لحظه کلیک برروی لینک که لینک فعال می شود

به جای a:link از a نیز می توانید استفاده کنید.

مثال؛

<style>
a:link{
color: green;
}
a:visited{
color: white;
background: blue;
}
a:hover{
color: red;
}
a:active{
color: orange;
}
</style>

 

نکته؛ a:hover باید بعد از a:link و a:visited نوشته شود و a:active باید بعد از a:hover پس ترتیب قرارگیری این شبه کلاس ها باید به صورت زیر باشد:

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active

سایر سبک های لینک دهی

آموزش رایگان CSS - جلسه 13| لینک ها در CSS
لینک ها در CSS

Text-Decoration لینک ها در CSS

همان طور که اشاره کردیم لینک ها دارای یک خط مشکی هستند که به طور پیش فرض زیر آنها کشیده شده است. برای تغییر این خط یا اعمال یا حذف آن از ویژگی Text-Decoration استفاده می شود. مقادیری که ویژگی text-decoration-line می تواند اختیار کند در زیر آمده است؛

underline : به صورت پیش فرض این گزینه فعال می باشد
none : خط زیر لینک را حذف می کند
overline : کشیدن خط در بالای لینک
line-through : کشیدن خط روی لینک

همانطور که در جلسه ی متن ها گفته شد علاوه بر مقداری که برای text-decoration-line در ویژگی text-decoration قرار می دهیم میتوانیم نوع استایل این خط ها را با text-decoration-style تعیین کنیم.

مقادیری که text-decoration-style می پذیرد:

dashed : به صورت خط چین نمایش می دهد
dotted : به صورت نقطه چین می باشد
double : استایل text-decoration را به صورت دوخطه نشان می دهد
Wavy : خط را موج دار می کند
Solid : یک خط ممتد قرار می دهد

همچنین از text-decoration-color و text-decoration-thickness به ترتیب برای رنگ و میزان ضخامت خط استفاده می کنیم. تمامی این مقادیر را برای ویژگی text-decoration در یک خط مانند مثال زیر می نویسیم.

مثال؛

<style>
a:link{
color:green;
text-decoration: underline 2px double pink;
}
</style>

<style>
a:link{
color:green;
text-decoration:none;
}
a:visited{
color:blue;
text-decoration:none;
}
a:hover{
color:red;
text-decoration:underline;
}
a:active{
color:pink;
text-decoration:none;
}
</style>

background color

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

a:link {
color: #fff;
background-color: #ff009e;
}
a:visited {
background-color: #ff0000;
}
a:hover {
background-color: #6dcdf7;
}
a:active {
background-color: #8bc34a;
}

ساخت دکمه با CSS

برای ساخت دکمه از تگ a استفاده می شود و با استفاده از CSS استایل دهی آن انجام میی گیرد. در ابتدا باید یک لینک قرار دهیم. بعد با استفاده از a:link , a:visited مشخص می کنیم که تگ a در ابتدا و در حالت بازدید چه حالتی داشته باشد. سپس با ویژگی های a:hover, a:active حالت هاور آن و زمانی که فعال می شود را مشخص می کنیم.

مثال زیر نمونه ای از ساخت دکمه است؛

<a href=”http://google.com”>کلیک کنید</a>
<style>
a:link, a:visited{
color:green;
text-decoration:none;
background-color:#5db616;
color:#fff;
padding: 14px 25px;
text-align: center;
border-radius:10px;
}
a:hover{
text-decoration:underline;
background-color:#00b185;
color:#000;
}
</style>

چند مثال دیگر؛

<a href=”#”>کلیک کنید</a>
<style>
body {
margin: 23px;
}
a:link {
color: white;
background-color: #ffab00;
font-size: 23px;
padding: 6px;
text-decoration: none;
border-radius: 10px 0;
transition: 0.5s;
}
a:visited {
color: #324c58;
background-color: #04d1ff;
}
a:hover {
color: #fffefe;
background-color: #ea8a1b;
border-radius: 0px 10px;
border: 2px solid #ffab00;
}
a:active {
color:#000;
background-color: #fff;
}
</style>

مثال؛

<a href=”https://ofoghweb.com”>کلیک کنید</a>
<style>
body {
margin: 40px;
}
a {
color: #fff;
background-color: #19b2d0;
padding: 8px 39px;
font-size: larger;
border-radius: 40px;
transition: 0.5s;
}

a:hover {
background-color: #c8d019;
padding: 13px 45px;
}
</style>

امیدواریم مطالب این جلسه برای شما مفید بوده باشد. سوال ها و نظرات خود را با ما در بخش نظرات در میان بگذارید تا در سریع ترین زمان ممکن به آنها پاسخ دهیم.

 

دوره ی آموزش html و css

 

😊✌از بقیه ی جلسات آموزش CSS جا نمونید.✌😊

4.5/5 - (2 امتیاز)
اشتراک گذاری:
برچسب: Cssآشنایی با cssآموزش رایگان CSSلینک ها در CSS
About حامد نجفی

بعد از گذشت 9 سال کار با وردپرس و فعالیت اینترنتی هر روز علاقه ام به این کار بیشتر میشه. سختی های زیادی تو این راه کشیدم و دوست دارم به شما کمک کنم این مسیر رو سریعتر طی کنین. با من در شبکه های اجتماعی در تماس باشید :)

More Posts by حامد نجفی
تبلیغات
هاست وردپرس

مطالب زیر را حتما مطالعه کنید

آموزش رایگان CSS- جلسه 16| جدول ها در CSS

آموزش رایگان CSS- جلسه 16

آموزش رایگان CSS- جلسه 15| لیست ها در CSS

آموزش رایگان CSS- جلسه 15

اموزش رایگان CSS- جلسه 14| تصاویر در CSS

آموزش رایگان CSS- جلسه 14

آموزش رایگان CSS- جلسه 12| فونت ها در css

آموزش رایگان CSS- جلسه 12

آموزش رایگان CSS - جلسه 11| متن ها در CSS

آموزش رایگان CSS – جلسه 11

آموزش رایگان CSS- جلسه 10| Height و Width در CSS

آموزش رایگان CSS- جلسه 10

قدیمی تر قالب گردشگری Travel Agency
جدیدتر آموزش رایگان CSS- جلسه 14

دیدگاهتان را بنویسید لغو پاسخ

Search for:
نوشته‌های تازه
  • تقویم محتوا چیست؟ (جلسه 33)
  • استراتژی تولید محتوا (جلسه 32)
  • عادت‌ نویسندگان مشهور و سرشناس (جلسه 31)
  • راهنمای کامل تغذیه محتوا نویس (جلسه 30)
  • چگونه یک محتوای تصویری خوب بسازیم؟ (جلسه 29)
آخرین دیدگاه‌ها
  • سهند در آموزش تغییر رنگ پس زمینه در وردپرس
  • mojtaba در پرینت و ذخیره اطلاعات محصول با افزونه WooCommerce PDF Invoices & Packing Slips
  • مجید بهرامی راد در چگونه یک وب سایت موفق و درآمد زا داشته باشیم؟
  • پریا صادقی در چگونه یک وب سایت موفق و درآمد زا داشته باشیم؟
  • مریم در آموزش ایجاد صفحه تماس با ما در المنتور(جلسه 10)

یاد باد آنکه ز رخسار تو هر صبحدمی

افق دیده پر از شعله خور بود مرا

دسته بندی بلاگ

  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس
  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس

خدمات مشتریان

  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها
  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها

دسترسی سریع

  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام
  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام

تمامی حقوق مادی و معنوی این سایت متعلق به آکادمی افق وب میباشد.

ورود
استفاده از موبایل
استفاده از آدرس ایمیل
آیا هنوز عضو نیستید؟ اکنون عضو شوید

بازنشانی رمز عبور
استفاده از موبایل
استفاده از آدرس ایمیل
عضویت
قبلا عضو شدید؟ اکنون وارد شوید

هفده + 6 =