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

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

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

שיטה ראשונה: CSS מוטבע

כדי לשנות את צבע הגופן ב-CSS, תצטרך ליצור כלל CSS כדי להגדיר את ערך תכונת הצבע.

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

פסקה של טקסט

אתה יכול להשיג את אותו אפקט באמצעות CSS פנימי/מוטבע, או CSS חיצוני.

שיטה שנייה: CSS פנימי/משובץ

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

שיטה שלישית: CSS חיצוני

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

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

p { צבע: כחול }

במסמך ה-HTML שלך, עליך לכלול קישור לגיליון הסגנונות שלך בתוך רכיב ה-HTML head:

פסקה של טקסט

שינוי צבע גופן ב-HTML, ללא שימוש ב-CSS

השיטה הטובה ביותר היא להשתמש ב-CSS, אבל הנה איך לשנות את צבע הגופן באמצעות HTML בלבד:

פסקה של טקסט

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

שינוי צבע גופן ב-CSS הוא פשוט יחסית

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

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

כיצד לשנות את גודל גופן HTML ב-CSS

קרא הבא

על הסופר