כיצד סגנון קישורים עם

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

רוב מעצבי האינטרנט להתחיל על ידי הגדרת סגנון על התג "א":

א {צבע: אדום; }

זה יהיה סגנון כל ההיבטים של הקישור (לרחף, ביקר, פעיל). כדי לסדר כל חלק בנפרד, עליך להשתמש בקישורים פסאודו של קישורים.

קישור פסבדו כיתות

ישנם ארבעה סוגים בסיסיים של קישורים פסאודו- class שאתה יכול להגדיר:

• : link - זהו סגנון ברירת המחדל עבור הקישור
• : Visit - לאחר לחיצה על קישור
• : העבר בריחוף - כאשר העכבר מונח על קישור (לפני קליק)
• : פעיל - כמו לחיצה על הקישור

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

a: Visit {color: אפור; }

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

a: link, a: hover, a: active {color: black; } a: Visit {color: gray; }

שנה את צבעי הקישור

הדרך הנפוצה ביותר לקישורים בסגנון היא לשנות את הצבע כאשר העכבר מרחף מעל זה:

a {color: # 00f; } א: העבר את העכבר {color: # 0f0; }

אבל אל תשכח שאתה יכול להשפיע על איך הקישור נראה כפי שהם לוחצים על זה עם: רכוש פעיל:

a {color: # 00f; } a: פעיל {color: # f00; }

או איך הקישור נראה לאחר ביקרת בו עם: רכוש ביקר:

a {color: # 00f; } a: visit {color: # f0f; }

לשים את הכל ביחד:

a {color: # 00f; } a: visit {color: # f0f; } א: העבר את העכבר {color: # 0f0; } a: פעיל {color: # f00; }

שים רקע על הקישורים כדי להוסיף סמלים או תבליטים

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

a {padding: 0 2px 1px 15px; רקע: #fff url (ball.gif) שמאל למרכז לא לחזור; צבע: # c00; }

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

a {padding: 0 2px 1px 15px; רקע: #fff url (ball.gif) שמאל למרכז לא לחזור; צבע: # c00; } א: העבר את העכבר {רקע: #fff url (ball2.gif) שמאלה ללא מרכז; } a: פעיל {background: #fff url (ball3.gif) שמאלה במרכז לא לחזור; }

הפוך את הקישורים שלך נראה כמו לחצנים

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

{הגבול: התחלה של 4px; ריפוד: 2px; text-decoration: none; } a: פעיל {border: 4px inset; }

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

a {border-style: solid; width-width: 1px 4px 4px 1px; text-decoration: none; ריפוד: 4px; border-color: # 69f # 00f # 00f # 69f; }

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

a: link {border-style: solid; width-width: 1px 4px 4px 1px; text-decoration: none; ריפוד: 4px; border-color: # 69f # 00f # 00f # 69f; } א: רחף {border-color: #ccc; }