שיווק תוכן

מהם גיליונות סגנון מדורגים (CSS)?

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

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

מבנה שפת CSS

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

selector {
  property: value;
}

לדוגמה, ה-CSS הבא יעשה הכל <h1> לרכיבים בדף יש צבע אדום וגודל גופן של 32px:

CSS

h1 {
  color: red;
  font-size: 32px;
}

תְפוּקָה

כותרת

אתה יכול גם לציין CSS עבור מזהה ייחודי ברכיב:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

תְפוּקָה

מבוא

או החל מחלקה על פני מספר אלמנטים:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

תְפוּקָה

אני רוצה להבליט מילה בתג span.

אתה יכול לכלול CSS במסמך ה-HTML שלך בשלוש דרכים:

  1. CSS מוטבע, באמצעות ה- style תכונה ברכיב HTML
  2. CSS פנימי, באמצעות א <style> אלמנט ב <head> של מסמך ה-HTML שלך
  3. CSS חיצוני, באמצעות קובץ .css נפרד המקושר למסמך ה-HTML שלך באמצעות ה- <link> אלמנט ב <head> של מסמך ה-HTML שלך

CSS רספונסיבי

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

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

דחיסת CSS

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

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

מה זה SCSS?

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

יתרונות SCSS

  • תחזוקה משופרת: בעזרת שימוש במשתנים, אתה יכול לאחסן ערכים במקום אחד ולעשות בהם שימוש חוזר בכל גיליון הסגנונות שלך, מה שמקל על תחזוקה ועדכון של הסגנונות שלך.
  • ארגון טוב יותר: בעזרת מיקסים, אתה יכול לקבץ ולעשות שימוש חוזר בקבוצות של סגנונות, מה שהופך את גיליון הסגנונות שלך למאורגן יותר וקל יותר לקריאה.
  • פונקציונליות מוגברת: SCSS כולל תכונות רבות שאינן זמינות ב-CSS סטנדרטי, כגון פונקציות, מבני בקרה (למשל if/else) ופעולות אריתמטיות. זה מאפשר עיצוב דינמי ואקספרסיבי יותר.
  • ביצועים טובים יותר: קבצי SCSS מורכבים לתוך CSS, מה שיכול לשפר את הביצועים על ידי הפחתת כמות הקוד שצריך לנתח על ידי הדפדפן.

חסרונות SCSS

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

בדוגמה זו למטה, קוד ה-SCSS עושה שימוש במשתנים לאחסון ערכים ($primary-color ו $font-size) שניתן לעשות בהם שימוש חוזר בכל גיליון הסגנונות. קוד ה-CSS שנוצר מקוד SCSS זה שווה ערך, אך אינו כולל את המשתנים. במקום זאת, הערכים של המשתנים משמשים ישירות ב-CSS.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

תכונה נוספת של SCSS המודגמת בדוגמה זו היא סגנונות מקוננים. בקוד SCSS, ה h1 סגנונות מקוננים בתוך ה- body סגנונות, דבר שאינו אפשרי ב-CSS רגיל. כאשר קוד ה-SCSS מורכב, הסגנונות המקוננים מורחבים לסגנונות נפרדים בקוד ה-CSS.

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

Douglas Karr

Douglas Karr הוא CMO של פתח INSIGHTS ומייסד ה Martech Zone. דאגלס סייע לעשרות סטארט-אפים מצליחים של MarTech, סייע בבדיקת נאותות של למעלה מ-5 מיליארד דולר ברכישות והשקעות של Martech, וממשיך לסייע לחברות ביישום ואוטומציה של אסטרטגיות המכירות והשיווק שלהן. דאגלס הוא מומחה ודובר בטרנספורמציה דיגיטלית ומוכר בינלאומי ב-MarTech. דאגלס הוא גם מחבר שפורסם של מדריך Dummy וספר מנהיגות עסקית.

מאמרים נוספים

לחצן חזרה למעלה
סְגוֹר

זוהה חסימת מודעות

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