קיצור תכונות ב- CSS

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

למשל, margin היא אחת מהתכונות אשר מאפשרת לך לאחד את התכונות margin-top-width, margin-right-width, margin-bottom-width לשורת קוד אחת. קיצור תכונות ב – CSS נעשה במבנה של property: top right bottom left;

לדוגמא, ניתן לאחד את הקוד הבא :

  1. p {
  2.     border-top-width: 1px;
  3.     border-right-width: 5px;
  4.     border-bottom-width: 10px;
  5.     border-left-width: 20px;
  6. }

לצורה הזו :

  1. p {
  2.     border-width: 1px 5px 10px 20px;
  3. }

דוגמא נוספת אשר מתייחסת לתכונות border-width, border-color ו – border-style :

  1. p {
  2.     border: 1px red solid;
  3. }

במידה ותציין רק שני ערכים ( לדוגמא, margin: 1em 10em; ). הערך הראשון יתייחס ל – top ול – bottom והחלק השני יתייחס ל – right ו – left. חוץ מהתכונות הנ"ל, ניתן לאחד גם תכונות הקשורות לפונטים, למשל :

  1. p {
  2.     font: italic bold 1em/1.5 courier;
  3. }
  5. /* (כאשר "/1.5" מציין את גודל השורה) */

הקוד המלא לדוגמא הנ"ל הוא :

  1. p {
  2.    font: 1em/1.5 "Times New Roman", times, serif;
  3.    padding: 3em 1em;
  4.    border: 1px black solid;
  5.    border-width: 1px 5px 5px 1px;
  6.    border-color: red green blue yellow;
  7.    margin: 1em 5em;
  8. }

עמודים רלוונטים

רפרנס

  • התכונה margin
  • התכונה padding
  • התכונה border
  • התכונה font
  • התכונה background