CSS, או גיליונות סגנון מדורגים, הם מה נעשה שימוש בעיצוב אתר מודרני כדי להחיל את המראה החזותי לדף. בעוד HTML יוצר את המבנה של הדף Javascript יכול להתמודד עם התנהגויות, המראה והתחושה של אתר האינטרנט הוא התחום של CSS. כאשר מדובר בסגנונות אלה, הם מיושמים בדרך כלל באמצעות גיליונות סגנונות חיצוניים, אך ניתן גם להחיל סגנונות CSS על אלמנט ספציפי ספציפי באמצעות מה שמכונה "סגנונות מוטבעים".
סגנונות מוטבעים הם סגנונות CSS שמוחלים ישירות ב- HTML של הדף. יש שני יתרונות וחסרונות לגישה זו. ראשית, בואו נסתכל בדיוק איך סגנונות אלה נכתבים.
איך לכתוב סגנון מוטבע
כדי ליצור סגנון CSS מוטבע, אתה מתחיל לכתוב את סגנון הסגנון שלך כמו איך היית בגיליון סגנונות, אבל זה צריך להיות כל שורה אחת. הפרד תכונות מרובות באמצעות נקודה פסיק בדיוק כפי שהיית עושה בגיליון סגנונות.
רקע: #ccc; צבע: #fff; הגבול: מוצק שחור 1px;
הצב את שורת הסגנונות בתוך מאפיין הסגנון של האלמנט שברצונך להגדיר. לדוגמה, אם אתה רוצה להחיל סגנון זה על פיסקה ב- HTML שלך, רכיב זה ייראה כך:
בדוגמה זו, פסקה זו תופיע עם רקע אפור בהיר (כלומר מה ש- #ccc יציג), טקסט שחור (מתוך צבע 000 #), ועם גבול שחור אחיד 1 פיקסלים סביב כל ארבעת הצדדים של הפסקה .
היתרונות של סגנונות מוטבעים
הודות מפל של גיליון סגנונות גיליון סגנונות מוטבעים יש את הקדימות הגבוהה ביותר או הספציפיות במסמך. זה אומר שהם הולכים להיות מיושם לא משנה מה עוד מוכתב גיליון סגנונות חיצוני שלך (עם חריג אחד להיות כל סגנונות אשר מקבלים את ההצהרה החשובה כי גיליון, אבל זה לא משהו שצריך להיעשות באתרי הייצור אם זה ניתן להימנע).
סגנונות רק שיש להם עדיפות גבוהה יותר מאשר סגנונות מוטבעים הם סגנונות משתמש להחיל על ידי הקוראים עצמם. אם אתה נתקל בקשיים בהחלת השינויים שלך, תוכל לנסות להגדיר סגנון מוטבע על האלמנט. אם סגנונות עדיין לא מוצגים באמצעות סגנון מוטבע, אתה יודע שיש עוד משהו קורה.
סגנונות מוטבעים קל ומהיר להוסיף ואתה לא צריך לדאוג לכתוב את בורר CSS הנכון מאז שאתה מוסיף את סגנונות ישירות אלמנט אתה רוצה לשנות (אלמנט זה בעצם מחליף את בורר היית כותב בגיליון סגנונות חיצוני ). אתה לא צריך ליצור מסמך חדש לגמרי (כמו עם גיליונות סגנון חיצוני) או לערוך אלמנט חדש בראש המסמך (כמו עם גיליונות סגנון פנימי). אתה פשוט להוסיף את התכונה סגנון זה תקף על כמעט כל אלמנט HTML. אלה הן כל הסיבות מדוע אתה עלול להתפתות להשתמש סגנונות מוטבעות, אבל אתה חייב להיות מודע גם כמה חסרונות משמעותיים מאוד לגישה זו.
חסרונות של סגנונות מוטבעים
בגלל סגנונות מוטבעים הם הספציפיים ביותר מפל, הם יכולים לרכוב על דברים שאתה לא מתכוון לעשות אותם. הם גם שוללים את אחד ההיבטים החזקים ביותר של CSS - היכולת לסגנון הרבה והרבה דפי אינטרנט מקובץ CSS אחד מרכזי כדי להפוך את העדכונים העתידיים ושינויים בסגנון הרבה יותר קל לנהל.
אם היית צריך להשתמש רק סגנונות מוטבעים, המסמכים שלך במהירות להפוך נפוח וקשה מאוד לשמור. הסיבה לכך היא כי סגנונות מוטבע חייב להיות מיושם על כל רכיב אתה רוצה אותם. אז אם אתה רוצה את כל הפסקאות יש את משפחת הגופן "Arial", אתה צריך להוסיף סגנון מוטבע על כל תג
במסמך. זה מוסיף הן עבודות תחזוקה עבור מעצב זמן ההורדה עבור הקורא שכן היית צריך לשנות את זה על פני כל דף באתר שלך כדי לשנות את משפחת הגופנים. לחלופין, אם אתה משתמש בגיליון סגנונות נפרד, ייתכן שתוכל לשנות אותו במקום אחד יש כל דף לקבל את העדכון.
למען האמת, זה צעד אחורה בעיצוב אתרים - בחזרה את הימים של תג !
חסרון נוסף לסגנונות מוטבעים הוא שאי אפשר לעצב אלמנטים פסאודו-סלים איתם. לדוגמה, עם גיליונות סגנונות חיצוניים , ניתן לסמן את צבע הביקורים, הרחף, הפעיל והקישור של תג עוגן, אך עם סגנון מוטבע, כל מה שאתה יכול לסגנון הוא הקישור עצמו, מכיוון שזו תכונה הסגנון שצורפה ל .
בסופו של דבר, אנו ממליצים לא להשתמש סגנונות מוטבע עבור דפי האינטרנט שלך, כי הם גורמים לבעיות ולהפוך את הדפים הרבה יותר עבודה כדי לשמור. הפעם היחידה שבה אנו משתמשים בהם היא כאשר אנו רוצים לבדוק סגנון במהירות במהלך הפיתוח. ברגע שיש לנו את זה מחפש הנכון עבור אלמנט אחד, אנחנו מעבירים אותו גיליון הסגנון החיצוני שלנו.
מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'יררד.