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

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

כיצד להשתמש בסגנונות CSS לשינוי צבע הגופן

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

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

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

p {
צבע שחור;
}

השתמש בערכי הקסדצימלי לשינוי צבעי הגופן

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

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

p {
צבע: # 000000;
}

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

p {
צבע: # 2f5687;
}

Hex עובד על ידי קביעת ערכי RGB (אדום, ירוק, כחול) של צבע בנפרד עם ערכים בסיס שש-עשרה. לכן הם מכילים את האותיות א דרך F בנוסף לספרות 0 דרך 9.

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

השתמש בערכי צבע RGBA כדי לשנות צבעי גופן

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

ערך RGBA זהה לצבע כחול הצפחה שצוין לעיל:

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

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

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

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

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

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

a {
צבע: # 16c616;
}

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

h1, h2, h3, h4, h5, h6 {
צבע: # 020833;
}

לא תמיד להגיע לערכי ה- hex או ה- RGBA לצבעים שלך. רוב מעצבי האתרים ישתמשו בתוכנת עריכת תמונות, כמו Photoshop או GIMP, כדי ליצור את הקודים המדויקים. אתה יכול גם למצוא כלים נוחים לבחירת צבעים באופן מקוון, כמו זה מבית w3schools.

דרכים אחרות לעיצוב דף HTML

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

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