לפעמים יש מצב שבו לאלמנט HTML אחד יש כמה עיצובי CSS שמוגדרים במקומות שונים
לדוגמה: לדף עיצוב חיצוני יש את המאפיינים האלו בשביל h3, הכותרת השלישית בגודלה.
ולדף עיצוב פנימי יש את המאפיינים האלו לכותרת h3:
אם תנסו את זה תגלו שהתכונות שבאמת ישפיעו על הh3 שלנו יהיו:
הצבע לקוח מדף העיצוב החיצוני , ומיקום הטקסט וגודלו לקוחים מדף העיצוב הפנימי! מה? למה? מיד נבין. כשהדפדפן קורא את הדף הוא אוסף את כל שורות העיצוב עיצובים יכולים להיות כמו שלמדנו במדריך הקודם (CSS איך ואיפה משתמשים בו)
- בתוך אלמנט של html
- -בתוך איזור ה<head> של דף html
- -בקובץ css חיצוני
טיפ: אפילו מספר רב של דפים חיצוניים יכולים להיות מקושרים למסמך html יחיד.
אבל אם יש יותר מתכונת עיצוב אחת לאלמנט הhtml שלנו איך נדע מה ישפיע?
האמת זה דיי פשוט ויש סדר עדיפויות פשוט שבו כל הגדרה ממקום גבוהה דורסת הגדרות נמוכות יותר:
- עיצוב אינליין
- עיצוב בדף פנימי בhead
- עיצוב בדף חיצוני
- ברירת המחדל של הדפדפן
הערה: אם הלינק לדף העיצוב החיצוני ממוקם אחרי דף העיצוב הפנימי באיזור ה<head> של הhtml, דף העיצוב החיצוני דורס את דף העיצוב הפנימי. כפי שאפשר להבין בעצם הפקודה האחרונה היא הקובעת.
יש דרך אחרת !important
אפשר לעקוף את זה בדרך שהיא בדרך כלל לא מומלצת והשיטה היא להוסיף !important אחרי השורה ולפני ה;
דוגמה:
color: white !importnat;
אז כמו שאמרתי בדרך כלל לא מומלץ להשתמש בזה אבל לפעמים למשל כשתוסף שהורדתם מייצר איזשהו style שאתם לא רוצים, ואתם לא רוצים לערוך את התוסף כי אז כל פעם שתעדכנו אותו תצטרכו לערוך שוב, אז כדאי ומומלץ להשתמש בתכונה !importnat