כיצד להשתמש ב- CSS לעיצוב היפר-קישורים בדפי אינטרנט

מאי 15, 2024

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

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

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

הערה--החץ

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

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

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

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

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

הוראות וידאו: קורס בסיסי ב HTML - תגיות פלט ב HTML - שיעור 03 (מאי 2024).

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

למאמר הקודם

למאמר הבא

מאמרים קשורים

מחשבים

שחור ולבן הוא באמת רק אפור

מאי 2024

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

מחשבים

אלמנטים ותכונות HTML לתמונה, מפת תמונה בצד הלקוח ומפת תמונה בצד השרת

מאי 2024

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