כיצד לשנות את צבע הטקסט של האתר שלך באמצעות CSS

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

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

שינוי צבע הטקסט של האתר באמצעות CSS

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

צבע כחול;

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

h1 {צבע: כחול; }
p {color: אדום; }
כפתור {צבע: אדום; }

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

קָשׁוּר: מודל תיבת CSS מוסבר באמצעות דוגמאות

מציאת מחלקת CSS הנכונה

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

פתיחת המפקח

פתיחת המפקח שונה בכל אחד מהדפדפנים בשוק. כיסינו קומץ מהדפדפנים הפופולריים ביותר להלן כדי לתת לך יתרון:

• גוגל כרום: CTRL + Shift + C. אוֹ נקודות תפריט > כלים נוספים > כלי מפתחים
• מיקרוסופט אדג: CTRL + Shift + C. אוֹ נקודות תפריט > כלים נוספים > כלי מפתחים
• Mozilla Firefox: CTRL + Shift + C. אוֹ נקודות תפריט > כלים נוספים > כלי מפתחי אתרים
• ספארי של אפל: העדפות > מִתקַדֵם > הצג תפריט פיתוח בשורת התפריטים ואז לְפַתֵחַ > הצג מפקח אתרים

מציאת סגנון הטקסט CSS הנכון

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

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

• גוגל כרום: מקש ימני > לִבדוֹק
• מיקרוסופט אדג: מקש ימני > לִבדוֹק
• Mozilla Firefox: מקש ימני > לִבדוֹק אוֹ ש
• ספארי של אפל: מקש ימני > בדוק את האלמנט

פעולה זו תגרום לקונסולת האתר/לחלון המפקח להתמקד באלמנט אותו אתה מנסה לשנות. ב- Chrome, Safari, Edge ו- Firefox, אתה אמור לראות קטע שכותרתו סגנונות המכיל את כל קוד ה- CSS של האלמנט שאתה בודק.

אתה צריך גם לראות את רכיב ה- HTML שלך מודגש בחלונית ליד זה. זה יכול לשמש כדי להבין את המחלקה או המזהה של האלמנט שאתה משנה. במקרה שלנו, אנו בוחנים את הכותרת הראשית של H1 בדף שלנו, וזה שייך למחלקה שנקראת .listing-title.

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

קָשׁוּר: כיצד לבנות סרגל ניווט רספונסיבי באמצעות HTML ו- CSS

הוספת ה- CSS החדש שלך

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

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

.listing-title {
צבע כחול;
}

מה אם צבע הטקסט שלך לא משתנה?

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

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

.listing-title {
צבע: כחול! חשוב;
}

סגנון טקסט אחר CSS כיף

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

• גודל גופן: זה משנה את גודל הטקסט באתר שלך, למשל, גודל הגופן: 12 פיקסלים;
• משקל גופן: משקל מתייחס לעובי גופן, כאשר מודגש הוא משקל גבוה וטקסט דק נמוך, למשל משקל גופן: 400;
• יישור טקסט: זה משנה את יישור הטקסט איתו אתה עובד, למשל, יישור טקסט: ימני;
• צל טקסט: זה מאפשר לך להוסיף צל לטקסט שלך עם מגוון תכונות, למשל טקסט צל: 2px 2px 3px שחור;
• שינוי הטקסט: זה משנה את המקרה של הטקסט שאיתו אתה עובד, למשל, טרנספורמציה של טקסט: רישיות גדולות;
• טקסט-קישוט: זה מאפשר לך להוסיף קווים, קווים ועיטורים אחרים לטקסט, למשל טקסט-קישוט: קו תחתון;

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

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

למידע נוסף מצבע הטקסט של CSS

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

10 דוגמאות קוד CSS פשוטות שתוכל ללמוד תוך 10 דקות

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

קרא הבא

על הסופר