כיצד להסיר קו תחתון מקישורים

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

סיבות ונגד קו תחתון

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

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

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

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

השתמש בגיליונות סגנון מדורגים כדי לכבות את הקו התחתון בקישורים

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

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

זהו זה! שורה אחת פשוטה זו של CSS היה מכבה את קו התחתון (שמשתמש בפועל במאפיין CSS ל"קישוט טקסט ") בכל הקישורים.

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

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

כעת, קישורי טקסט בדף יקבלו את קו ברירת המחדל של הקו, אך אלה שבניווט יוסרו.

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

a {
קישוט טקסט: אין;
}
a: רחף {
קישוט טקסט: קו תחתון;
}

שימוש ב- CSS מוטבע

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

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

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

בסגירה

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