כיצד לשנות אתר צבעים גופן עם

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

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

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

הוספת סגנונות לשינוי צבע גופן

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

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

ערכי צבע יכולים לבוא לידי ביטוי כמילות מפתח צבע, מספרי צבע RGB, או מספרי צבע הקסדצימלי.

  1. הוסף את מאפיין הסגנון עבור תג הפיסקה:
    1. p {}
  2. הצב את מאפיין הצבע בסגנון. מקום נקודתיים לאחר נכס זה:
    1. p {color:}
  3. לאחר מכן הוסף את ערך הצבע לאחר המאפיין. הקפד לסיים את הערך באמצעות מחציתה למחצה:
    1. p {color: black;}

הפסקאות בדף שלך יהיו כעת שחורות.

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

p {color: # 000000; }

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

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

p {color: # 2f5687; }

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

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

p {color: rgba (47,86,135,1); }

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

אם ברצונך להגדיר את ערכי הצבע שלך, תוכל לעשות זאת:

p {
צבע: # 2f5687;
צבע: rgba (47,86,135,1);
}

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