יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
22/06/2021 14:16
בניית חנות וירטואלית למכירת כספות
22/06/2021 13:29
בניית אתר מכירות לטפטים תלת מימדיים ולמדבקות קיר בעברית וברוסית
21/06/2021 21:56
הקמת חנות וירטואלית לעיצוב הבית, חנות למכירת שטיחים, תמונות, טפטים ומדבקות קיר
29/04/2021 16:53
חנות למכירת מחשבים וסלולר באינטרנט
22/04/2021 16:45
חובב ספרים, קריאת מגזינים או מילוי תשבצים? מתכנן להקים אתר למכירה של ספרים ומוצרי דפוס שונים? ליקטנו...
תגובות אחרונות תגובות אחרונות
בניית חנות וירטואלית לרהיטים
25/11/2020 16:36
בהחלט יכול להתאים. עם זאת, צרי...
בניית חנות וירטואלית לרהיטים
25/11/2020 11:39
האם זה יכול להתאים לעמותה שמעו...
עיצוב רווחים ושוליים
21/04/2020 12:37
היי, קוד ה-CSS יכול להרשם בכל...

עיצוב קישורים

  1. דף הבית
  2. מדריך HTML5
  3. עיצוב קישורים

פרק זה עוסק בהגדרת תכונות העיצוב של קישורים (links) באמצעות CSS.

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

  • a:link - לינק רגיל שעדיין לא ביקרנו בו (unvisited link)
  • a:visited - לינק שכבר ביקרנו בו (visited link)
  • a:hover - קישור שעומדים עליו עם העכבר
  • a:active - קישור ברגע שבו לוחצים עליו

ישנן כמה דרכים מקובלות לעיצוב קישורים:

  • הקישור משנה את צבעו בכל אחד מן המצבים השונים - למשל:
a:link {
    color:#ff1111;
}
a:visited {
    color:#00gg00;
}
a:hover {
    color:#aabbaa;
}
a:active {
    color:#00ffff;
}
  • הוספה או הסרה של קו תחתון או הדגשה לפי מצב הקישור - בדוגמה הבאה הפונט יהיה מודגש במצב visited ובמצב active. ניתן לשנות גם תכונות אחרות של הפונט, כמו גודל וכדומה:
a:link {
    text-decoration:underline;
}
a:visited {
    text-decoration:underline;
    font-weight:bold;
}
a:hover {
    text-decoration:none;
    font-size:16px;
}
a:active {
    text-decoration:underline;
    font-weight:bold;
}
  • שינוי צבע הרקע של הקישור - בכדי לעשות זאת, משתמשים בתכונה background-color. למשל, אם נרצה שבזמן מעבר על הקישור עם העכבר יופיע רקע צבעוני מאחוריו, נגדיר זאת כך ב-CSS. גם כאן ניתן לשלב כמה תכונות שונות בעיצוב הקישור:
a:link {
    background-color:#a1ff88;
    font-size:14px;
}
a:visited {
    background-color:#a2ff74;
    font-size:14px;
}
a:hover {
    background-color:#gg11gg;
    font-size:16px;
    background-image:url('cloud.jpg');
}
a:active {
    background-color:#aa45ee; font-size:14px;
}
  • ניתן כמובן להגדיר את התכונות של כל מצבי הקישורים בבת-אחת, ללא הבדלים ביניהם, למשל כך:
a {
    color:#ee0000;
}
#menu a {
    font-size:14px;
    font-weight:bold;
}

בדוגמה זו כל הקישורים באתר יהיו בצבע ee0000 (גוון של אדום), ורק הקישורים בתוך התפריט יהיו (בנוסף לאדום) בגודל 14 ומודגשים. ההגדרות הללו נכונות לכל מצבי הקישורים (link,visited,hover,active).

ישנם שני חוקים לסדר הכתיבה של הגדרות העיצוב של לינקים:

  • a:hover יבוא תמיד אחרי a:link ו- a:visited
  • a:active יבוא תמיד אחרי a:hover

 

הוספת תגובה

רוצה שנקפיץ גם את העסק שלך?

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

שילוב מנצח של בניית חנות וירטואלית בחוד החנית של הטכנולוגיה עם שיווק אפקטיבי להגדלת המכירות.

 

לא מהססים! ממלאים את הטופס או מתקשרים עכשיו 077-7644819

 
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: