מדריך CSS מספר 2 - תחביר CSS

מחבר:
בתאריך:

 

סלקטורים, תכונות וערכים

תחביר ה-CSS מבוסס על שלושה מרכיבים:

  • סלקטורים הם תגיות HTML. לדוגמה:p (פסקה), h1 (כותרת ראשית), img (תמונה) וכיו"ב.
  • תכונות הם מה שאנחנו רוצים לשנות בסלקטורים. לדוגמה: color (צבע טקסט), font-size (גודל הטקסט), width (רוחב), height (גובה) וכיו"ב.
  • ערכים הם ההגדרות שנותנים לתכונות.

כותבים את זה כך: 

ערך :תכונה} סלקטור;}

p {color: red;}

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

נעתיק את הקוד הבא לקובץ ה-html:

<html>
<head>
  <"link rel="stylesheet" type="text/css" href="style.css>
<head/>
<body>
  <h1/> כותרת מוצלחת <h1>
  <p> דוגמה לפסקה </p>
<body/>
</html>

הקוד יוצר כותרת ופסקה.

 

נוסיף לגיליון ה-CSS החיצוני ששמו style.css את הקוד הבא, שמשנה את צבע הכתב בכותרת ובפסקה.

h1 {color: blue;}
p {color: red;}

עכשיו, נריץ את דף ה-HTML שיצרנו מהדפדפן, ונראה את התוצאה:

סלקטורים, תכונות וערכים CSS

 

כיצד ניתן לסלקטור יותר מתכונה אחת?

כדי לתת לסלקטור יותר מתכונה אחת נפריד בין התכונות בנקודה פסיק (;). נסתכל על הדוגמה הבאה:

p {
    color: red;
    text-align:right;
}

נשים לב שלפסקה (p) יש עכשיו שתי תכונות, שמופיעות כל אחת בשורה נפרדת, אבל עדיין בתוך אותם סוגריים מסולסלים. כל תכונה מסתיימת בנקודה פסיק. התכונה הראשונה משנה את צבע הגופנים (color), והתכונה השנייה משנה את כיווניות הטקסט (text-align).

נרענן את דף ה-HTML, ונסתכל על התוצאה:

הוספה של יותר מתכונה אחת לסלקטור CSS

 

הוסף תגובה חדשה

 

= 6 + 9