גיליונות סגנון מדורגים – הבדלי גרסאות

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

 

selector { property : value; }

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

הוא יכול להיות שם של אלמנט, למשל - <code>p</code>, <code>div</code>, <code>span</code>, <code>h1</code>, <code>input</code> (קטע טקסט, בלוק טקסט, פסקה, כותרת ושדה-קלט בהתאמה)וכדומה.

ה-<code>value</code> "ערך" היא הערך שאנו רוצים לתת לתכונה של האלמנט הנבחר.

לדוגמה:

p { color : "blue"; }

אנו בוחרים את האלמנט <code>p</code>, ומשנים את התכונה <code>color</code> לערך <code>blue</code>.

 

לעתים יש צורך להגדיר סוגים שונים של אותו פריט. לדוגמה: פסקה שהיא חלק מכתבה תהיה כחולה ופסקה שהיא חלק ממכתב תהיה אדומה. במקרה כזה נכנס השימוש בבוררי <code>class</code> ובוררי <code>id</code>.

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

<style>

p#article { color : "blue"; }

p#letter { color : "red"; }

</style>

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

p id="article"

והטקסט שייכתב יקבל את הגדרות העיצוב כפי שהוגדרו לפסקה מסוג "article".

 

 

כדי להגדיר מסך נשתמש בתכונה media, ונכתוב את השורה הבאה:

<style media="screen" type="text/css">

 

ישנן ארבע צורות בוררים להגדיר עיצוב אלמנטים:

 

דוגמה של הגדרות בקובץ CSS:

p {

font-family: "David", serif;

text-decoration: none;

}

 

כאן יש חמישה כללים: <code> p, h2, .note, p#paragraph1 and a:hover </code>

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

לדוגמה:

<p class="note"> פסקה זו תצוייר באדום מודגש עם רקע צהוב </p>

 

הכלל הרביעי ישפיע על אלמנט p שתכונת ה-ID שלו נקבע ל-paragraph1, והוא יהיה ללא שוליים.