מדריך CSS – תחביר CSS: סלקטורים, תכונות, ערכים

בעוד שבשפת HTML ישנן תגיות ותכונות, ושפת CSS משתמשת בהם ע”מ להחיל עליהם סגנונות עיצוב.
נתבונן בקוד פשוט בשפת CSS:

body {
  font-size: 0.8em;
  color: navy;
}

סלקטורים – Selectors

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

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

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

תכונות – Properties

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

כל שורת הגדרת ערך לתכונה תסתיים בנקודה-פסיק. בדוגמא, אנחנו קובעים את הערך 0.8em (ערך מספרי) לתכונה font-size ואת הערך navy (ערך עם שם) לתכונה color.

ערכים – Values

לכל תכונה שנרצה להגדיר ערך שונה מערך ברירת המחדל, נקבע ערך.

ערכים המגדירים אורך או ואחוזים

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

em (לדוגמא: font-size: 0.8em) – יחידה המחושבת לפי גודל הפונט הנוכחי. למשל: קביעת הערך 2em אומרת שהפונט יוגדל פי 2.

px (לדוגמא: font-size: 12px) – פיקסלים.

pt (לדוגמא: font-size: 12pt) – גודל בנקודות.

% (לדוגמא: font-size: 80%) – גודל באחוזים.

קיימות יחידות נוספות טיפה פחות פופולריות כגון: cm (סנטימטרים), mm (מילימטרים) ו- in (אינצ’ים).

בפרקים הבאים נתחיל ללמוד על התכונות שניתן לקבוע לאלמנטים השונים בדף ועל הערכים שאותן ניתן להגדיר.