הבנת 3 סוגי CSS סגנונות

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

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

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

  1. סגנונות מוטבעים
  2. סגנונות מוטבעים
  3. סגנונות חיצוניים

לכל אחד מהסוגים האלה של סגנונות CSS יש יתרונות וחסרונות, לכן הבה נבחן כל אחד מהם בנפרד.

סגנונות מוטבעים

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

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

סגנונות מוטבע יש גם סגוליות גבוהה מאוד.

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

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

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

סגנונות משובצים

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

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

גיליונות סגנונות שנוספו

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

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

דפי סגנון חיצוניים

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

זה הופך את ניהול האתר לטווח ארוך הרבה יותר קל.

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

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

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