התחביר של שפת CSS3

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

אותיות מותרות וכללים לכתיבת שמות ב - CSS3

ב - CSS3 מזהים (כולל שמות אלמנטים ב - HTML, מחלקות - Class Names - ומזהים בסלקטורים למיניהם ) יכולים להכיל רק את התווים הבאים:

  • [A-Za-z0-9]
  • תווי ISO 10646 החל מתו 161 והלאה.
  • הקו המפריד (-) והקו התחתי (_)

כמו כן, מזהים ב - CSS3 אינם יכולים להתחיל במספר או בקו מפריד (-) שלאחריו יש מספר.

מבנה משפט ב - CSS3

משפט ב - 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;}

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

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

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

/* זוהי הערה */
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 | מדיניות פרטיות | תנאי שימוש