צעדים להסרת קו תחתון מקישורי טקסט ונושאים להיות מודעים
כברירת מחדל, תוכן טקסט המקושר ל- HTML באמצעות האלמנט או "עוגן" מנוסח בקו תחתון. לעתים קרובות, מעצבי אתרים בוחרים להסיר סגנון ברירת מחדל זה על ידי הסרת קו תחתון.
מעצבים רבים לא אכפת לי את המראה של קו תחתון טקסט, במיוחד בלוקים צפופים של תוכן עם הרבה קישורים. כל המילים האלה מודגשות באמת יכול לשבור את זרימת הקריאה של מסמך. רבים טענו כי אלה מדגיש למעשה להפוך מילים קשה יותר להבחין ולקרוא במהירות בגלל האופן שבו underlining שינויים האותיות הטבעיות.
ישנם יתרונות לגיטימיים לשמור על הדגיש אלה על קישורי טקסט, עם זאת. לדוגמה, כאשר אתה עושה דפדוף בלוקים גדולים של טקסט, קישורים בקו תחתון יחד עם ניגודיות צבע הנכון להקל על הקוראים מיד לסרוק את הדף ולראות איפה הקישורים. אם אתה מסתכל על עיצוב אתרים מאמרים על About.com, כמו גם מאמרים אחרים באתר, תראה את זה סגנון של קו תחתון קישורים במקום.
אם אתה מחליט להסיר קישורים מהטקסט (תהליך פשוט שבו נסקור בקרוב), הקפד למצוא דרכים לסגנון את הטקסט כדי להבדיל עדיין מה הוא קישור מה הוא טקסט רגיל. זה נעשה לרוב עם ניגודיות צבע האמור לעיל, אבל צבע לבד יכול להוות בעיה עבור מבקרים עם ליקויי ראייה כמו עיוורון צבעים. בהתאם לצורה מסוימת של עיוורון צבעים, הניגוד עלול להיות אבוד לחלוטין עליהם, ומניעת מהם לראות את ההבדל בין טקסט מקושר לא מקושר. זו הסיבה טקסט מודגש עדיין נחשב הדרך הטובה ביותר להציג קישורים.
אז איך אתה מכבה קו תחתון אם אתה עדיין רוצה לעשות זאת? מכיוון שמדובר במאפיין חזותי שעליו אנו עוסקים, נפנה לחלק של האתר שלנו שמטפל בכל הדברים החזותיים - CSS.
השתמש גיליונות סגנון מדורגים כדי לכבות את קו תחתון על קישורים
ברוב המקרים, אתה לא מחפש להפוך קו תחתון על קישור טקסט אחד בלבד. במקום זאת, סגנון העיצוב שלך כנראה מחייב אותך להסיר קו תחתון מכל הקישורים. אתה תעשה זאת על ידי הוספת סגנונות לגיליון הסגנון החיצוני שלך.
a {text-decoration: none; }זהו זה! זה פשוט שורה אחת של CSS היה לכבות את קו תחתון (אשר למעשה משתמשת CSS נכס עבור "טקסט קישוט") על כל הקישורים.
אתה יכול גם לקבל יותר ספציפי עם סגנון זה. לדוגמה, אם אתה רק רוצה לכבות את קו תחתון או את הקישורים בתוך אלמנט "nav", אתה יכול לכתוב:
ניווט {text-decoration: none; }כעת, קישורי טקסט בדף יקבלו את קו ברירת המחדל של ברירת המחדל, אך אלה שבסרגל הניווט יוסרו.
דבר אחד מעצבי אינטרנט רבים בוחרים לעשות הוא להפוך את הקישור בחזרה "על" כאשר מישהו מרחף מעל הטקסט. זה ייעשה באמצעות: מרחף CSS pseudo בכיתה, ככה:
a {text-decoration: none; } א: רחף {text-decoration: underline; }שימוש ב- Inline CSS
כחלופה לביצוע שינויים בגיליון סגנונות חיצוני, תוכל גם להוסיף את הסגנונות ישירות לאלמנט עצמו ב- HTML, כך:
לקישור זה אין קו תחתוןהבעיה עם שיטה זו היא כי היא מציבה מידע בסגנון בתוך מבנה ה- HTML שלך, אשר אינו נוהג הטוב ביותר. סגנון (CSS) ומבנה (HTML) צריך להישמר בנפרד.
אם רצית שכל קישורי הטקסט של האתר יסומנו בקו תחתון, הוספת פרטי הסגנון לכל קישור בנפרד תביא לסכום ניכר של סימון נוסף שנוסף לקוד האתר שלך. דף זה יכול להאט את זמן הטעינה של האתר ולהפוך את ניהול הדף הכולל הרבה יותר מאתגר. מסיבות אלה, עדיף תמיד לפנות גיליון סגנונות חיצוני עבור כל צורכי עיצוב הדף.
בסגירה
קל כמו להסיר את קו תחתון מקישורים טקסט של דף אינטרנט, אתה צריך גם להיות מודע ההשלכות של עושה זאת. אמנם זה אכן עשוי לנקות את המראה של דף, זה יכול לעשות זאת על חשבון השימושיות הכוללת. קח זאת בחשבון בפעם הבאה שתשקול לשנות את "טקסט קישוט" של הדף.
מאמר מקורי מאת ג'ניפר קרינין. נערך בתאריך 9/19/16 על ידי ג'רמי ג'יררד