כיצד לעצב קישורים ב- CSS

קישורי סטיילינג

קישורים יכול להיות מעוצב עם כל נכס CSS, כגון color, font-family, font-size, ו padding. הנה דוגמה קלה:

a { color: hotpink; }

בנוסף, ניתן לעצב קישורים באופן שונה בהתאם למצב שהם נמצאים.

לקישורים יש גם 4 מצבים, ומתכנתים רבים מעצבים כל מדינה אחרת. ארבע המדינות הן:

  • a:link: קישור ללא ביקור, שלא נלקח
  • a:visited: קישור שנלחץ עליו
  • a:hover: קישור כאשר העכבר של המשתמש מעליו
  • a:active: קישור כאשר לוחצים עליו

הרכוש אחראי ליצירת כתובות ניתן לשנות באמצעות מספר תכונות CSS סגנון, אם כי יש כמה כברירת מחדל:

  1. לָשִׂים דָגֵשׁ
  2. צבע כחול

ניתן לשנות אותם על ידי הוספת שינוי המאפיינים colorו- text-decoration.

 color: black; text-decoration: none;

ניתן גם לעצב את הקישור על סמך אינטראקציה באמצעות מאפיינים אלה, המכונים גם מצבי קישור:

  • a: קישור - קישור רגיל ללא ביקור
  • a: ביקר - קישור שהמשתמש ביקר בו
  • a: רחף - קישור כאשר המשתמש מעביר אותו
  • a: פעיל - קישור ברגע שלוחצים עליו

להלן מספר CSS לדוגמא המשתמש בארבע המצבים:

a:link { color: red; } a:visited { color: blue; } a:hover { color: green; } a:active { color: blue; }

שים לב שיש כמה כללי הזמנה כאשר אתה מגדיר את הסגנון עבור מצבי קישור.

  • a:hoverחייב לבוא אחרי a:linkוa:visited

a:active חייב לבוא אחרי a:hover

a: קישור - קישור רגיל ולא מבקר a: ביקר - קישור שהמשתמש ביקר בו: מרחף - קישור כאשר המשתמש מעביר אותו a: פעיל - קישור ברגע שלוחצים עליו

/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; } 

עוד על סטיילינג ב- CSS:

  • כיצד לעצב תג HTML ישירות ב- CSS
  • כיצד לעצב רשימות באמצעות CSS
  • כיצד לעצב כפתורים עם CSS