מדריך לתחביר של שפת CSS

מבנה משפט CSS

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

CSS Syntax

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

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

CSS Syntax

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

קיבוץ משפטי CSS בעלי סלקטורים שונים

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

הצורה הארוכה לכתוב את הקוד h1{ font-family: sans-serif;}
h2{ font-family: sans-serif;}
h3{ font-family: sans-serif;}
h4{ font-family: sans-serif;}
h5{ font-family: sans-serif;}
h6{ font-family: sans-serif;}
הקטנת כמות הקוד באמצעות הקבצת האלמנטים
h1,h2,h3,h4,h5,h6{ font-family: sans-serif;}

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

קיבוץ משפטי CSS בעלי סלקטורים זהים

בסעיף הקודם של מדריך זה למדנו כיצד ניתן לקבץ יחדיו משפטי CSS בעלי סלקטורים שונים זה מזה. שפת CSS מאפשרת לנו לקבץ יחדיו גם משפטי CSS בעלי סלקטורים זהים זה לזה, כפי שניתן ללמוד מדוגמת הקוד הבאה:
הצורה הארוכה לכתוב את הקוד
h3 { font-weight: bold }
h3 { font-size: 12px }
h3 { line-height: 14px }
הצורה המקובצת לכתוב את הקוד
h3 {font-weight: bold;font-size: 12px;line-height: 14px;}

שילוב הערות בתוך קוד CSS

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

את ההערה יש לרשום בין לוכסן לכוכבית לבין כוכבית ללוכסן כפי שאפשר ללמוד מן הדוגמה הבאה:

/* זוהי הערה */
h1,h2,h3,h4,h5,h6{ font-family: sans-serif;}
h1,h2,h3,h4,h5,h6{ font-family: sans-serif;}

הורשת תכונות

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

מחרוזות

מחרוזות (Strings) ב - CSS ניתן לכתוב בין מרכאות כפולות: "זו מחרוזת" או בין גרשיים: 'גם זו מחרוזת'. מרכאות כפולות לא יכולות לקנן בתוך מרכאות כפולות אחרות. הדרך לכתוב מחרוזות המקננות זו בתוך זו היא היא באחד מן האופנים הבאים:

"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''

 

 

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש