כיצד לשנות את צבע של Word עם תג Span ו CSS

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

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

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

שלב אחר שלב הדרכה

  1. פתח את דף האינטרנט שאתה רוצה לעדכן את הטקסט האהוב עליך HTML עורך. זה יכול להיות תוכנית כמו Adobe Dreamweaver או פשוט עורך טקסט כמו פנקס רשימות, Notepad + +, TextEdit, וכו '
  2. במסמך, אתר את המילים שברצונך להציג בצבע אחר בדף. למען הדרכה זו, מאפשר להשתמש בכמה מילים כי הם בתוך סעיף גדול של טקסט. טקסט זה יכלול בתוך זוג תגים. מצא אחת משתי המילים שאת צבען ברצונך לערוך.
  3. מקם את הסמן לפני האות הראשונה במילה או בקבוצת המילים שברצונך לשנות צבע. זכור, אם אתה משתמש בעורך WYSIWYG כמו Dreamweaver, אתה עובד "להציג קוד" rigth עכשיו.
  4. תן לעטוף את הטקסט שאת צבעו אנחנו רוצים לשנות באמצעות תג, כולל מאפיין class. הפיסקה כולה עשויה להיראות כך: זהו טקסט המתמקד במשפט.
  5. השתמשנו רק באלמנט מוטבע, כדי לתת לטקסט הספציפי "וו" שניתן להשתמש בו ב- CSS. השלב הבא שלנו הוא לקפוץ לקובץ CSS החיצוני שלנו כדי להוסיף כלל חדש.
  1. בקובץ CSS שלנו, נניח:
    1. .focus-text {
    2. צבע: # F00;
    3. }
  2. כלל זה ייקבע כי אלמנט מוטבע,, כדי להציג בצבע אדום. אם היה לנו סגנון קודם שקבע את הטקסט של המסמך לשחור, הסגנון המוטבע הזה יגרום לטקסט התוחם להתמקד ולהתבלט בצבע שונה. אנחנו יכולים גם להוסיף סגנונות אחרים לכלל זה, אולי עושה את הטקסט נטוי או מודגש כדי להדגיש את זה עוד יותר?
  3. שמור את הדף שלך.
  4. בדוק את הדף בדפדפן האינטרנט המועדף עליך כדי לראות את השינויים בתוקף.
  5. שים לב כי בנוסף, כמה אנשי מקצוע באינטרנט לבחור להשתמש באלמנטים אחרים כמו זוגות או תג. תגים אלה היו בעבר עבור "מודגש" ו "נטוי" במיוחד, אבל הוצאו משימוש והוחלף ו. התגים עדיין עובד בדפדפנים המודרניים, עם זאת, מפתחי אינטרנט רבים כל כך להשתמש בהם כמו ווים מעצב inline. זו אינה הגישה הגרועה ביותר, אבל אם אתה רוצה למנוע כל אלמנטים שהוצאו משימוש, אני מציע להישאר עם התג עבור סוגים אלה של צורכי הצרכים.

טיפים דברים להיזהר

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