לדלג לתוכן

תפריט ניווט

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

מ
החלפת תג source לתג syntaxhighlight*
מ (בוט החלפות: \1שישה)
מ (החלפת תג source לתג syntaxhighlight*)
תחביר ה-CSS הבסיסי כולל שלושה חלקים:
 
<sourcesyntaxhighlight lang="CSS">
selector { property : value; }
</syntaxhighlight>
</source>
הסלקטור הינו ה"בוחר" ומגדיר את האלמנט שאותו אנו רוצים לעצב.
הוא יכול להיות שם של אלמנט, למשל - <code>p</code>, <code>div</code>, <code>span</code>, <code>h1</code>, <code>input</code> (קטע טקסט, בלוק טקסט, פסקה, כותרת ושדה-קלט בהתאמה)וכדומה.
ה-<code>value</code> "ערך" היא הערך שאנו רוצים לתת לתכונה של האלמנט הנבחר.
לדוגמה:
<sourcesyntaxhighlight lang="CSS">
p { color : "blue"; }
</syntaxhighlight>
</source>
אנו בוחרים את האלמנט <code>p</code>, ומשנים את התכונה <code>color</code> לערך <code>blue</code>.
 
לעתים יש צורך להגדיר סוגים שונים של אותו פריט. לדוגמה: פסקה שהיא חלק מכתבה תהיה כחולה ופסקה שהיא חלק ממכתב תהיה אדומה. במקרה כזה נכנס השימוש בבוררי <code>class</code> ובוררי <code>id</code>.
קודם כל יש להגדיר את שם הפסקה, באמצעות כתיבת השם אחרי האלמנט הנבחר:
<sourcesyntaxhighlight lang="CSS">
<style>
p#article { color : "blue"; }
p#letter { color : "red"; }
</style>
</syntaxhighlight>
</source>
לאחר מכן, כדי להצהיר על איזה סוג של פסקה מדובר, נעשה שימוש ב-id כך: בתוך תגית נכתוב את הקוד הבא-
<sourcesyntaxhighlight lang="CSS">
p id="article"
</syntaxhighlight>
</source>
והטקסט שייכתב יקבל את הגדרות העיצוב כפי שהוגדרו לפסקה מסוג "article".
 
 
כדי להגדיר מסך נשתמש בתכונה media, ונכתוב את השורה הבאה:
<sourcesyntaxhighlight lang="CSS">
<style media="screen" type="text/css">
</syntaxhighlight>
</source>
 
ישנן ארבע צורות בוררים להגדיר עיצוב אלמנטים:
 
דוגמה של הגדרות בקובץ CSS:
<sourcesyntaxhighlight lang="CSS">
p {
font-family: "David", serif;
text-decoration: none;
}
</syntaxhighlight>
</source>
 
כאן יש חמישה כללים: <code> p, h2, .note, p#paragraph1 and a:hover </code>
הכלל השלישי מראה הגדרה של מחלקת CSS, שאפשר להקצות אותה לכל אלמנט מסמכי, ולהשתמש בתכונות של המחלקה.
לדוגמה:
<sourcesyntaxhighlight lang="CSS">
<p class="note"> פסקה זו תצוייר באדום מודגש עם רקע צהוב </p>
</syntaxhighlight>
</source>
 
הכלל הרביעי ישפיע על אלמנט p שתכונת ה-ID שלו נקבע ל-paragraph1, והוא יהיה ללא שוליים.