התחביר של CSS לעיצוב

סלקטורים והצהרות ב-CSS

CSS מורכב מאוסף כללים שקובעים את עיצוב האלמנטים שהוגדרו ב-HTML. כל כלל מורכב מסלקטור (או כמה סלקטורים) והצהרה (או כמה הצהרות).

סלקטור (Selector) - זהו זיהוי של האלמנט או של קבוצת אלמנטים שאותם אנו רוצים לעצב. לדוגמה: כותרת, קישור, כפתור, פיסקה וכיו"ב.

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

כל הצהרה מורכבת מתכונה וערך.

תכונה (Property) - שמו של המאפיין (attribute) שאותו אנו רוצים לשנות. לדוגמה: צבע הגופן.

ערך (Value) - הערך שקובעים לתכונה. לדוגמה: כחול.

דוגמה:

a {
	color:red;
	font-family:Arial;
	font-size:18px;
}

בדוגמה זו, הגדרנו עבור הסלקטור a (קישור כלשהו) כלל בן 3 הצהרות. ההצהרה הראשונה כוללת את התכונה color והערך red, ההצהרה השניה כוללת את התכונה font-family ואת הערך Arial וההצהרה השלישית כוללת את התכונה font-size ואת הערך 18px. כלל זה קובע שכל קישור בדף האינטרנט שלנו יהיה בצבע אדום ובגופן מסוג Arial בגודל 18 פיקסלים.

נשים לב, כי אין חשיבות לסדר ההצהרות בכללים, אבל מטעמי נוחיות הקריאה, אחידות ההגדרות ומטעמי אופטימיזציות שונות, נמליץ לשמור על סדר א'-ב' (כלומר שההצהרה של color תבוא לפני font-family, כיוון שהאות c מגיעה לפני האות f).

כמו כן, אין חשיבות לריווחים. הכלל לעיל יכול היה להכתב גם באופן הבא:

a{color:red;font-family:Arial;font-size:18px;}

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

כללים עם ריבוי סלקטורים

ניתן לקבוע כללי CSS עם כמה סלקטורים.

דוגמה:

p,a {
	color:green;
	font-size:16px;
}

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