הסר קישורים קו תחתון או צור קישורים מקווקווים מנוקדים, או קו תחתון כפול
כברירת מחדל, דפדפני אינטרנט שומרים סגנונות CSS מסוימים שהם חלים על רכיבי HTML מסוימים. אם לא תחליף את ברירות המחדל האלה עם גיליונות הסגנון של האתר שלך, הרי שהגדרות ברירת המחדל יחולו. עבור היפר, ברירת המחדל של סגנון התצוגה היא שכל טקסט מקושר יהיה כחול ו underlined.The דפדפן עושה את זה כך המבקרים באתר יכול בקלות לראות איזה טקסט מקושר. מעצבי אתרים רבים לא אכפת סגנונות ברירת המחדל האלה, במיוחד אלה מודגשת. למרבה המזל, CSS עושה את זה קל לשנות את המראה של אלה קו תחתון או להסיר אותם לחלוטין.
הסרת קו תחתון על קישורי טקסט
הטקסט המסומן בקו תחתון יכול להיות מאתגר יותר לקריאת טקסט שאינו מודגש. בנוסף, מעצבים רבים פשוט לא אכפת לי את המראה של קו תחתון טקסט קישורים. במקרים אלה, סביר להניח שתרצה להסיר את הסימנים האלה לגמרי.
כדי להסיר את הקווים המודפסים מקישורי טקסט, תשתמש בקישוט טקסט של CSS. הנה ה- CSS שתכתוב כדי לעשות זאת:
a {text-decoration: none; }
עם שורה אחת של CSS, תסיר את הקו התחתון מכל קישורי הטקסט. למרות שזה סגנון כללי מאוד (הוא משתמש בורר אלמנטים), זה עדיין יש יותר ספציפיות מאשר דפדפני ברירת המחדל סגנונות לעשות. בגלל סגנונות ברירת מחדל אלה מה יוצר את קו תחתון מלכתחילה, זה מה שאתה צריך להחליף.
זהירות על הסרת קו תחתון
חזותית, הסרת קו תחתון עשוי להיות בדיוק מה שאתה רוצה להשיג, אבל אתה צריך להיות זהיר כאשר אתה עושה את זה גם כן. בין אם אתה אוהב את המראה של קו תחתון קישורים או לא, אתה לא יכול לטעון כי הם עושים את זה ברור כמו איזה טקסט מקושר ואיזה לא. אם אתה לוקח את קו תחתון או לשנות את ברירת המחדל של צבע כחול קישור, אתה צריך לוודא שאתה להחליף אותם עם סגנונות שעדיין לאפשר טקסט מקושר להתבלט. זה יגרום לחוויה אינטואיטיבית יותר עבור המבקרים באתר שלך.
אל תדגיש קישורים שאינם קישורים
זהירות נוספת על קישורים ומדגיש, לא להדגיש טקסט זה לא קישור כדרך להדגיש את זה. אנשים הגיעו כדי לצפות בטקסט מסומן בקו תחתון כדי להיות קישור, כך שאם אתה מודגש תוכן כדי להוסיף דגש (במקום לעשות את זה מודגש או italicizing אותו), אתה שולח את ההודעה הלא נכונה יהיה לבלבל משתמשים באתר.
שינוי קו תחתון לנקודות או מקפים
אם אתה רוצה לשמור על קישור הטקסט שלך מדגיש, אבל לשנות את הסגנון של קו תחתון זה מן המראה ברירת המחדל, המהווה "Soldi" שורה, אתה יכול לעשות את זה יותר מדי. במקום קו מוצק זה, אתה יכול להשתמש נקודות כדי להדגיש את הקישורים שלך. לשם כך, עדיין תסיר את הקו התחתון, אך תחליף אותו במאפיין סגנון הגבול התחתון:
a {text-decoration: none; הגבול התחתון: 1px מנוקד; }מכיוון שהסרת את קו ההדגמה הסטנדרטי, הנקודה המנוקדת היא היחידה שמופיעה.
אתה יכול לעשות את אותו הדבר כדי לקבל מקפים. פשוט לשנות את סגנון הגבול התחתונה כדי מקווקו:
a {text-decoration: none; הגבול התחתון: 1px מקווקו; }לשנות את צבע קו תחתון
דרך נוספת למשוך תשומת לב לקישורים שלך היא לשנות את הצבע של קו תחתון. רק לוודא את הצבע מתאים עם ערכת הצבעים שלך.
a {text-decoration: none; הגבול התחתון: 1px מוצק אדום; }קו תחתון כפול
הטריק להשתמש בקו תחתון כפול הוא שאתה צריך לשנות את רוחב הגבול. אם תיצור גבול 1px רחב, תסיים עם קו תחתון כפול שנראה כמו קו תחתון אחד.
a {text-decoration: none; הגבול התחתון: 3px כפול; }ניתן גם להשתמש בקו תחתון קיים כדי לבצע קו תחתון כפול עם תכונות אחרות, כגון אחד השורות להיות מנוקד:
{border-bottom: 1px כפול; }אל תשכח את ארצות הקישור
ניתן להוסיף את סגנון הגבול התחתון לקישורים שלך במצבים שונים כגון: רחף,: פעיל, או: מבקר. זה יכול ליצור נחמד "Rollover" חוויית סגנון עבור המבקרים בעת שימוש זה "לרחף" pseudo בכיתה. כדי להציג קו תחתון שני מופיע כאשר אתה מרחף מעל הקישור:
a {text-decoration: none; } א: רחף {border-bottom: 1px dotted; }מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'יררד