נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך 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

 

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

 

= 9 + 9