כיצד לשנות קישורי HTML תחתונים בדף אינטרנט

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

כיצד להסיר קו תחתון בקישורי טקסט

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

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

{קישוט טקסט: אין; }

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

אזהרה בנושא הסרת קו תחתון

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

אל תחתון את הקישורים שאינם

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

כיצד לשנות את קו התחתון לנקודות או מקפים

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

{קישוט טקסט: אין; גבול תחתון: 1px מנוקד; }

מכיוון שהסרת את קו התחתון הסטנדרטי, הנקודה היא היחידה שמופיעה.

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

{קישוט טקסט: אין; גבול תחתון: 1px מקווקו; }

כיצד לשנות את הצבע התחתון

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

{קישוט טקסט: אין; גבול התחתון: 1px אדום מלא; }

קו תחתון כפול

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

{קישוט טקסט: אין; גבול תחתון: 3 פיקסלים כפול; }

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

{גבול התחתון: כפול פיקסלים; }

אל תשכח ממדינות הקישור

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

{קישוט טקסט: אין; }
a: רחף {גבול התחתון: 1px מנוקד; }