استایل لینک در CSS — آموزش CSS (بخش بیست و سوم)

برای تنظیم استایل لینک در CSS می‌بایست با شیوه استفاده از شبه‌کلاس‌ها برای استایل‌بندی مؤثر لینک‌ها آشنا باشیم. همچنین باید با روش استایل‌بندی لینک‌ها برای استفاده در بخش‌های رایج اینترفیس‌های مختلف از قبیل منوها و زبانه‌های ناوبری آشنا باشیم. در ادامه این مقاله به بررسی این موضوع‌ها می‌پردازیم. برای مطالعه بخش قبلی این سری مقالات روی لینک زیر کلیک کنید

• استایل لیست در CSS — آموزش CSS (بخش بیست و دوم)

بررسی برخی لینک‌ها

در بخش «ایجاد هایپرلینک در HTML — راهنمای کاربردی» (+) با شیوه پیاده‌سازی لینک‌ها در HTML آشنا شدیم. در این مقاله می‌خواهیم بر مبنای آن دانش، بهترین روش‌های استایل‌بندی لینک‌ها را مورد بررسی قرار دهیم.

فیلم آموزش سی اس اس – طراحی وب سایت با CSS – مقدماتی در فرادرس

کلیک کنید

حالت‌های لینک

نخستین چیزی که باید درک کنیم، مفهوم حالت لینک است. لینک می‌تواند حالت‌های مختلفی داشته باشد که می‌توان با استفاده از شبه‌کلاس‌های مختلف آن را استایل‌بندی کرد:

• Link (لینک بازدید نشده) – حالت پیش‌فرض لینک است و زمانی که حالت دیگری وجود نداشته باشد از این حالت استفاده می‌شود. این حالت را می‌توان به صورت اختصاصی با استفاده از شبه‌کلاس ‎:link استایل‌بندی کرد.
• Visited (‌بازدید شده) – لینکی است که قبلاً از آن بازدید کرده‌ایم و سوابق آن در تاریخچه مرورگر وجود دارد. این حالت با استفاده از شبه‌کلاس ‎:visited استایل‌بندی می‌شود.
• Hover‌ (قرار گرفتن ماوس روی لینک) – این حالت زمانی استفاده می‌شود که اشاره‌گر ماوس کاربر روی لینک برود و با استفاده از شبه‌کلاس ‎:hover استایل‌بندی می‌شود.
• Focus (فوکوس) – حالتی است که لینک فوکوس صفحه وب را می‌گیرد. برای نمونه ممکن است کاربر با زدن کلید Tab یا هر کلید دیگری روی لینک برسد و یا به صورت برنامه‌نویسی‌شده با استفاده از دستور HTMLElement.focus()‎ فوکوس بگیرد. این حالت با استفاده از شبه‌کلاس ‎:focus استایل‌بندی می‌شود.
• Active (فعال) – لینکی است که فعال شده، یعنی روی آن کلیک شده است و با استفاده از شبه‌کلاس ‎:active استایل‌بندی می‌شود.

استایل‌های پیش‌فرض

در مثال زیر رفتار پیش‌فرض یک لینک را می‌بینید. کد CSS صرفاً به منظور افزایش اندازه متن جهت بهتر دید‌ه شدن استفاده شده است.

1<p><a href="#">A simple link</a></p>

1p {
2  font-size: 2rem;
3  text-align: center;
4}

نکته: در همه لینک‌های این صفحه از کاراکتر # استفاده شده است که به جای URL قرار می‌گیرد. دلیل این امر آن است که قصد ما صرفاً نشان دادن شیوه استایل‌بندی لینک‌ها بوده است و با کارکرد عملی آن‌ها کاری نداریم.

زمانی که استایل‌های پیش‌فرض را بررسی می‌کنیم، ‌چندین نکته را متوجه می‌شویم:

• لینک‌ها دارای زیرخط هستند.
• لینک‌های بازدیدنشده، آبی هستند.
• لینک‌های بازدید شده، بنفش هستند.
• بردن اشاره‌گر ماوس روی یک لینک، موجب تغییر شکل اشاره‌گر به شکل دست می‌شود.
• لینک‌هایی که فوکوس گرفته‌اند دارای یک کادر در پیرامون خود هستند. امکان بردن فوکوس روی لینک‌های صفحه با استفاده از فشردن کلید tab کیبورد وجود دارد. روی سیستم‌های Mac ممکن است لازم باشد ابتدا با زدن کلیدهای Ctrl+F7 دسترسی کامل به صفحه کلید را به دست آورید.
• لینک‌های فعال به رنگ قرمز هستند.

نکته جالب این جا است که این استایل‌های پیش‌فرض، قدمتی به اندازه روزهای نخستین ظهور مرورگرها در اواسط دهه 1990 میلادی دارند. دلیل این امر آن است که کاربران عموماً شیوه رفتار با این استایل‌ها را می‌دانند. اگر لینک‌های پیش‌فرض را به صورت متفاوتی استایل‌بندی کنیم، ممکن است موجب سردرگمی افراد زیادی شود. این به آن معنی نیست که امکان استایل‌بندی لینک‌ها به کلی از بین رفته است، ‌اما باید تلاش کنید از رفتار مورد انتظار کاربر فاصله زیادی نگیرید. برای نمونه دست کم باید موارد زیر را رعایت کنید:

• برای لینک‌ها از زیرخط استفاده کنید، ‌اما در مورد بقیه موارد از این حالت استفاده نکنید. اگر نمی‌خواهید به لینک‌ها زیرخط بدهید، دست کم باید آن‌ها را به روش دیگری هایلایت کنید.
• کاری کنید که لینک‌ها در زمان گرفتن فوکوس یا رفتن اشاره‌گر ماوس رویشان به نوعی واکنش نشان دهند. همچنین در زمانی که فعال هستند، استایل نسبتاً متفاوتی داشته باشند.

استایل‌های پیش‌فرض را می‌توان با استفاده از مشخصه‌های CSS زیر غیرفعال کرده یا تغییر داد:

• color – رنگ متن را تعیین می‌کند.
• cursor – استایل اشاره‌گر ماوس را تعیین می‌کند. این مشخصه نباید غیرفعال شود، مگر این که دلیل خوبی برای این کار داشته باشید.
• outline – برای کادر پیرامون متن استفاده می‌شود. این کادر پیرامونی شبیه حاشیه است، ‌با این تفاوت که حاشیه عرضی اشغال می‌کند، اما outline عرضی ندارد و مستقیماً روی پس‌زمینه قرار می‌گیرد. این outline کمک خوبی برای دسترس‌پذیری بیشتر محسوب می‌شود، بنابراین اگر می‌خواهید آن را غیرفعال کنید، باید دلیل خوبی داشته باشید. در این حالت باید دست کم استایل‌های داده شده به حالت hover لینک را در حالت فوکوس دو برابر کنید.

نکته: برای استایل‌بندی لینک‌ها، محدود به مشخصه‌های فوق نیستید و می‌توانید از هر مشخصه دیگری نیز استفاده کنید، فقط این را به خاطر داشته باشید که نباید زیاده‌روی کنید.

استایل‌بندی برخی لینک‌ها

اکنون که حالت‌های پیش‌فرض را به دقت بررسی کردیم، نوبت آن رسیده است که به مجموعه استایل‌های لینک متداول بپردازیم.

برای آغاز کار مجموعه قواعد خالی را می‌نویسیم:

1a {
2
3}
4
5
6a:link {
7
8}
9
10a:visited {
11
12}
13
14a:focus {
15
16}
17
18a:hover {
19
20}
21
22a:active {
23
24}

ترتیب این موارد اهمیت دارد، زیرا استایل‌های لینک بر مبنای همدیگر ساخته می‌شوند. برای نمونه استایل‌ها در قاعده اول روی همه موارد بعدی نیز اعمال می‌شوند. زمانی که یک لینک فعال می‌شود، قطعاً روی آن hover نیز شده است. اگر موارد فوق را با ترتیب نادرستی بنویسید، ‌استایل‌ها به درستی کار نخواهند کرد. برای این که این ترتیب را به خاطر داشته باشید، می‌توانید حروف ابتدای هر کدام را که کلمه LVFHA را تشکیل می‌دهند به خاطر بسپارید.

اکنون مقداری اطلاعات دیگر اضافه می‌کنیم تا استایل‌ها به درستی اعمال شوند:

1body {
2  width: 300px;
3  margin: 0 auto;
4  font-size: 1.2rem;
5  font-family: sans-serif;
6}
7
8p {
9  line-height: 1.4;
10}
11
12a {
13  outline: none;
14  text-decoration: none;
15  padding: 2px 1px 0;
16}
17
18a:link {
19  color: #265301;
20}
21
22a:visited {
23  color: #437A16;
24}
25
26a:focus {
27  border-bottom: 1px solid;
28  background: #BAE498;
29}
30
31a:hover {
32  border-bottom: 1px solid;     
33  background: #CDFEAA;
34}
35
36a:active {
37  background: #265301;
38  color: #CDFEAA;
39}

همچنین نوعی HTML ساده نیز می‌نویسیم تا این CSS روی آن اعمال شود:

1<p>There are several browsers available, such as <a href="#">Mozilla
2Firefox</a>, <a href="#">Google Chrome</a>, and
3<a href="#">Microsoft Edge</a>.</p>

در کل خروجی زیر به دست می‌آید:

همان طور که می‌بینید استایل‌های فوق متفاوت از استایل پیش‌فرض به نظر می‌رسند، ‌اما کماکان تجربه کاربری آشنایی برای ما دارند و می‌توانیم حدس بزنیم چه چیزی در صفحه در جریان است:

• دو قاعده اول نکته خاصی در خصوص موضوع بحث ما ندارند.
• قاعد سوم از سلکتور a استفاده می‌کند تا از شر زیرخط پیش‌فرض متن لینک و همچنین outline آن رها شود. البته این دو مورد در میان مرورگرهای مختلف، متفاوت هستند. همچنین یک مقدار کمی padding به هر لینک اضافه می‌شود. در مورد همه این موارد در ادامه بیشتر توضیح می‌دهیم.
• سپس از سلکتورهای a:link و a:visited برای تنظیم چند تغییر رنگ روی لینک‌های بازدید شده و بازدید نشده استفاده می‌کنیم تا از هم متمایز شوند.
• دو قاعده بعدی از a:focus و a:hover برای تعیین رنگ‌های متفاوت در زمان فوکوس و hover شدن لینک استفاده می‌کنند. همچنین یک زیرخط اضافه می‌شود تا لینک هر چه بیشتر برجسته شود. در این جا باید به دو نکته اشاره کنیم:
  • زیرخط با استفاده از border-bottom و نه text-decoration ایجاد شده است. برخی افراد این حالت را ترجیح می‌دهند، زیرا مشخصه اول گزینه‌های استایل‌بندی بهتری دارد و کمی پایین‌تر رسم می‌شود و لذا با حروف تداخل پیدا نمی‌کند.
  • مقدار border-bottom روی 1px solid تنظیم شده و هیچ رنگی نیز تعیین نشده است. این کار موجب می‌شود که حاشیه نیز همان رنگ متن عنصر را بگیرد. این حالت در مواردی که متن در هر مورد رنگ متفاوتی دارد بهتر است.
• در نهایت a:active برای این که لینک‌ها در زمان فعال شدن، ‌طرح رنگی معکوسی بگیرند مورد استفاده قرار می‌گیرد. این وضعیت برای جلب توجه کاربر مفید است.

استفاده از آیکون در لینک

یک رویه مناسب برای استایل دادن به لینک‌ها، قرار دادن آیکون در لینک است تا کاربر متوجه شود لینک به چه نوع محتوایی منتهی می‌شود.

فیلم آموزش طراحی وب با سی اس اس CSS3 – تکمیلی در فرادرس

کلیک کنید

در ادامه یک مثال بسیار ساده را می‌بینید که یک آیکون به لینک‌های بیرونی (به سایت‌های دیگر)‌ اضافه می‌کند. چنین آیکونی به طور معمول بیشتر شبیه یک فلش است که به خارج از یک کادر می‌رود. به عنوان مثال این آیکون به این منظور مناسب است:

در ادامه کد HTML و CSS برای به دست آوردن نتیجه مورد نظر را می‌بینید. ابتدا مقداری کد HTML می‌نویسیم:

1<p>For more information on the weather, visit our <a href="http://#">weather page</a>,
2look at <a href="http://#">weather on Wikipedia</a>, or check
3out <a href="http://#">weather on Extreme Science</a>.</p>

سپس CSS را اضافه می‌کنیم:

1body {
2  width: 300px;
3  margin: 0 auto;
4  font-family: sans-serif;
5}
6
7p {
8  line-height: 1.4;
9}
10
11a {
12  outline: none;
13  text-decoration: none;
14  padding: 2px 1px 0;
15}
16
17a:link {
18  color: blue;
19}
20
21a:visited {
22  color: purple;
23}
24
25a:focus, a:hover {
26  border-bottom: 1px solid;
27}
28
29a:active {
30  color: red;
31}
32
33a[href*="http"] {
34  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
35  background-size: 16px 16px;
36  padding-right: 19px;
37}

نتیجه کار به صورت زیر است:

در کد فوق از توضیح بخش عمده‌ای از CSS رد می‌شویم، زیرا در بخش‌های قبلی در خصوص این موارد توضیح ارائه شد. اما آخرین قاعده جالب است. در این جا یک تصویر پس‌زمینه سفارشی روی لینک‌های بیرونی اضافه می‌کنیم. این کار به همان رویه انجام می‌شود که در بخش‌های قبلی این سری مقالات (+) در زمان افزودن بولت‌های سفارشی روی آیتم‌های لیست استفاده می‌کردیم. اما این بار از مشخصه اختصاری background به جای مشخصه‌های منفرد آن استفاده کرده‌ایم. سپس مسیر تصویری که می‌خواهیم درج شود را ارائه کرده‌ایم. با تعیین گزینه no-repeat تنها یک تصویر درج می‌شود و سپس موقعیت آن به صورت 100% تعیین شده است تا در سمت راست محتوا قرار گیرد و هیچ فاصله‌ای از بخش فوقانی نداشته باشد.

همچنین از خصوصیت background-size برای تعیین اندازه نمایش تصویر پس‌زمینه استفاده کرده‌ایم. این خصوصیت برای آیکون‌های بزرگ مفید است و برای تغییر مقیاس در زمان طراحی صفحه‌های واکنش‌گرا به کار می‌آید. با این حال این خصوصیت در مرورگرهای IE9 به بالا استفاده می‌شود، بنابراین اگر می‌خواهید از مرورگرهای قدیمی‌تر نیز پشتیبانی کنید، باید اندازه تصویر را تغییر داده و آن را درج کنید.

در نهایت خصوصیت padding-right را روی لینک‌ها تعیین می‌کنیم تا فضایی برای درج تصاویر فراهم شود و با تن همپوشانی نیابد.

کلام آخر این که برای انتخاب صرفاً لینک‌های بیرونی روش‌های زیادی وجود دارد. اگر لینک‌های ‌HTML را به روش صحیحی نوشته باشید، از URL-های مطلق، صرفاً برای لینک‌های بیرونی استفاده کرده‌اید، چون استفاده از URL-های نسبی برای لینک دادن به بخش‌های مختلف یک وب‌سایت بسیار بهینه‌تر است. از این رو کلمه http باید صرفاً روی لینک‌های بیرونی ظاهر شود و از این رو می‌توانیم آن را با استفاده از یک سلکتور attribute به صورت a[href*="http"] انتخاب کنیم. این سلکتور عناصر <a> را که در خصوصیت href خود کلمه http را داشته باشند انتخاب می‌کند.

استایل‌بندی لینک‌ها به صورت دکمه

ابزارهایی که تا اینجای مقاله معرفی کردیم را می‌توان به روش‌های دیگری نیز مورد استفاده قرار داد. برای نمونه می‌توان از حالت‌هایی شبیه hover برای استایل‌بندی عناصر بسیار مختلف و نه صرفاً لینک‌ها استفاده کرد. برای نمونه ممکن است بخواهیم حالت hover پاراگراف، ‌آیتم‌های لیست یا دیگر موارد را استایل‌بندی کنیم.

به علاوه لینک‌ها در موارد زیادی طوری استایل‌بندی می‌شوند که شبیه دکمه به نظر برسند و مانند دکمه رفتار کنند. یک منوی ناوبری وب‌سایت به طور معمول به صورت لیست‌های شامل لینک سازماندهی می‌شود، ‌اما می‌توان به سادگی کاری کرد که شبیه یک مجموعه دکمه‌های کنترل یا زبانه‌هایی به نظر برسد که امکان دسترسی کاربر به بخش‌های دیگر وب‌سایت را فراهم می‌سازد. در ادامه این موضوع را بررسی می‌کنیم.

ابتدا مقداری کد HTML می‌نویسیم:

1<ul>
2  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
3</ul>

سپس CSS را اضافه می‌کنیم:

1body,html {
2  margin: 0;
3  font-family: sans-serif;
4}
5
6ul {
7  padding: 0;
8  width: 100%;
9}
10
11li {
12  display: inline;
13}
14
15a {
16  outline: none;
17  text-decoration: none;
18  display: inline-block;
19  width: 19.5%;
20  margin-right: 0.625%;
21  text-align: center;
22  line-height: 3;
23  color: black;
24}
25
26li:last-child a {
27  margin-right: 0;
28}
29
30a:link, a:visited, a:focus {
31  background: yellow;
32}
33
34a:hover {     
35  background: orange;
36}
37
38a:active {
39  background: red;
40  color: white;
41}

نتیجه کار به صورت زیر است:

در ادامه به توضیح کد فوق می‌پردازیم و البته صرفاً روی بخش‌های جذاب متمرکز می‌شویم.

قاعده دوم CSS اقدام به حذف padding پیش‌فرض از عنصر <ul>کرده و عرض آن را تا 100% کانتینر بیرونی که در این مورد <body> است، تنظیم می‌کند.

• عناصر <li> به طور معمول و به صورت پیش‌فرض بلوکی هستند، ‌یعنی در خطوط خاص خود قرار می‌گیرند. در این مورد یک لیست افقی از لینک‌ها می‌سازیم، بنابراین در قاعده سوم، مشخصه display را به صورت inline تنظیم می‌کنیم که موجب می‌شود آیتم‌های لیست همگی در همان خط قرار گیرند. بدین ترتیب همانند عناصر «درون‌خطی» (inline) رفتار می‌کنند.
• قاعده چهارم که عنصر <a> را استایل‌بندی می‌کند، پیچیده‌ترین مورد محسوب می‌شود و آن را به صورت گام به گام مورد بررسی قرار می‌دهیم.
  • همانند مثال‌های قبل، کار خود را با غیرفعال کردن مشخصه‌های پیش‌فرض text-decoration و outline آغاز می‌کنیم، چون نمی‌خواهیم ظاهر صفحه ما را خراب کنند.
  • سپس مشخصه display را روی inline-block تنظیم می‌کنیم. عناصر <a> به صورت پیش‌فرض درون‌خطی هستند، ‌اما نمی‌خواهیم آن‌ها هر کدام در یک خط جداگانه قرار گیرند، چون می‌خواهیم امکان تغییر اندازه آن‌ها را داشته باشیم. خصوصیت inline-block این امکان را برای ما فراهم می‌سازد.
  • اکنون نوبت به اندازه‌بندی می‌رسد. ما می‌خواهیم کل عرض <ul> را اشغال کنیم و حاشیه اندکی بین هر دکمه باقی بماند. 4 دکمه داریم که همگی باید اندازه یکسانی داشته باشند. به این منظور width را روی 19.5% تنظیم می‌کنیم و margin-right را نیز روی 0.625% قرار می‌دهیم. متوجه خواهید شد که این عرض در مجموع به 100.625% می‌رسد که در نهایت منجر به سرریز شدن دکمه آخر در <ul> خواهد شد و به خط بعدی می‌رود. با این حال با استفاده از قاعده بعدی دوباره این مجموع را روی 100% تنظیم می‌کنیم، به این ترتیب که تنها <a> آخر را در لیست انتخاب کرده و حاشیه آن را حذف می‌کنیم.
  • سه اعلان آخر کاملاً ساده هستند و به طور عمده برای مقاصد تزیینی استفاده می‌شوند. ما متن درون هر لینک را به صورت مرکزی تنظیم می‌کنیم و با تعیین line-height روی عدد 3 مقداری ارتفاع به دکمه‌ها می‌دهیم که همچنین موجب مرکزگرا شدن عمودی متون نیز می‌شود و رنگ متن را نیز روی سیاه تنظیم می‌کنیم.

نکته: شاید متوجه شده باشید که آیتم‌های لیست در HTML همگی روی خطوط یکسانی قرار می‌گیرند. دلیل این امر آن است که فاصله یا انتهای خط در بین عناصر بلوکی درون‌خطی موجب ایجاد فاصله روی صفحه می‌شود و این رفتار همانند درج فاصله در بین کلمات متن است. چنین فاصله‌ای لی‌آوت منوی ناوبری افقی را می‌شکند. بنابراین این فواصل را حذف می‌کنیم.

سخن پایانی

امیدواریم در این مقاله هر آن چه برای یادگیری استایل‌بندی لینک‌ها لازم است را آموخته باشید. در بخش بعدی این سری مقالات آموزش CSS به بررسی شیوه استفاده از فونت‌های سفارشی روی وب‌سایت‌ها می‌پردازیم که به نام فونت‌های وب شناخته می‌شوند. برای مطالعه بخش بعدی روی لینک زیر کلیک کنید:

• فونت وب در CSS — آموزش CSS (بخش بیست و چهارم)

اگر این مطلب برای شما مفید بوده است، ‌آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های طراحی سایت با HTML و CSS
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش طراحی وب با CSS
• آموزش مقدماتی پیش پردازنده Less و توسعه پذیری CSS
• ۸ ترفند مفید CSS که باید بدانید — راهنمای کاربردی

==