CSS למתחילים 

פרקים:
הקדמה
ידע מקדים
מטרת המדריך
מהו CSS? 
תחביר
יישום CSS בדפי HTML
צבעים
אורך ואחוזים
בוררים
Margin ו – Padding
מודל הקופסה ב- CSS
גבולות
דוגמאה סופית
סיכום
מקורות





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


ידע מקדים
אל מנת ללמוד CSS יש צורך ללמוד (רצוי לעומק) HTML.


מטרת המדריך
מטרת המדריך הוא לתת ידע בסיסי ב CSS.


מהו CSS?
css הינה ראשי תיבות של Cascading Style Sheets.
CSS משמשת לעיצוב מסמכי HTML ויצירת תבניות לאתרי אינטרנט.


תחביר
אני ישר מתחיל בדוגמאות והסברים (כך לאורך כול המדריך).
[code]selector{ property : vaule;}[/code]
selector- תג ה HTML לדוגמא שאליו התכונה משתייכת.
property- תכונה, לדוגמא : גובה, רוחב, רקע.
vaule- ערך במספרים או קישור לקובץ או צבע הרקע.


יישום CSS בדפי HTML
ישנם כמה דרכים לישום CSS בדפי HTML:
דרך א'- יישום רציף= ישום חד פעמי לתג HTML.
[code]

מדריך CSS למתחילים

[/code]
דרך ב'- יישום פנימי= יישום CSS על דף ספיציפי (בתוך התגית HEAD).
[code]"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



[/code]
דרך ג' - יישום חיצוני= יישום זה היעיל מבין כולם, יוצרים דף חדש עם סיומת name.css ומשלבים עם דף HTML.
name.css
[code]   p {
        color: red;
    }
    a {
        color: blue;
    }[/code]
name.html
[code]"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


   
    [/code]
ישנם עוד כמה דרכים אבל אני לא יפרט עליהם כי זה לא נחוץ כרגע.


צבעים
ב- CSS אפשר לציין צבעים בשמם, הערך ההקסדצימלי שלהם או ערך ה- RGB שלהם.
[code]    red
    rgb(255,0,0)
    rgb(100%,0%,0%)
    #ff0000
    #f00[/code]


אורך ואחוזים


    em – לציון, גודל מחושב של פונט. כך ש – 2em יגדיל את הטקסט פי 2 מהמצב הקיים.
    px – לציון, פיקסלים.
    pt – לציון, נקודות.
    % - לציון, אחוזים.


טקסט


font-family - סוג פונט
 font-size - גודל פונט
font-weight -הדגשה
font-style - נטוי
text-decoration - קו תחתון
text-transform - אותיות גדולות (לא שימושי בעברית)
letter-spacing - רווח בין הטקסט
word-spacing - רווח בין הטקסט
line-height - גובהה שורה
text-align - יישור טקסט


דוגמא מסכמת[code]
font-family: "Times New Roman"
font-weight: bold
font-weight: normal
font-style: italic
font-style: normal
font-size: 2em;
text-decoration: none;
font-style: italic;
text-transform: uppercase;
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;[/code]


בוררים
כפי שלשפת HTML ישנן תגיות בשפת CSS ישנם בוררים (selectors). 


  [code]  body {
        font-size: 0.8em;
        color: navy;
    }
[/code]


בורר ה – body קיבל ערכים קבועים לגודל וצבע הפונט.
 גודל פונט 0.8 
צבע navy


Margin ו – Padding
תכונה לריווח בין אלמנטים.
margin= ריווח מחוץ לאלמנט
padding= ריווח בתוך אלמנט
[code]margin: 5em;
padding: 11em;[/code]


מודל הקופסה ב- CSS
אחד הדברים החשובים ב CSS זהו מודל הקופסה, כאשר יש אלמנט מסויים מעלב שכבת ריפוד, גבול, ושוליים.
בציור הבא (שמצאתי בגוגל  :1smiley:) מתואר מודול קובסה בצורה הטובה ביותר. (זכרו את הציור!)
http://www.devschool.co.il/guides/css/Images/Box-Model.gif


גבולות
ב CSS מגדירים גבולות ע"י border. 
[code] border-style: dashed;
border-width: 3px; [/code]


דוגמאה סופית
[code]  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml">