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

אז..מה זה בכלל CSS3 (או בגדול-CSS) ואיך זה עוזר לנו כמעצבים?
במאמר הבא תוכלו למצוא את כל התשובות בנוסף לקובץ דוגמה להורדה ודוגמה חיה.

CSS3 – זה בשבילי בכלל? למי המאמר מיועד?

סטופ, שימו לב: הפוסט הזה הוא המשך לפוסט הקודם בסדרה "המבוא המלא ל-HTML5". לצורך המאמר נדרשת הבנה בסיסית (ביותר) בנוגע ל-HTML.

קצת חפירה הקדמה: מה זה בכלל CSS?

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

בעבר הרחוק(עד 1995) היו המתכנתים הקדמונים "מזריקים" את כל ההגדרות למראה החיצוני של האתר היישר אל תוך מסמך התוכן (HTML).
למעשה, הגדרת העיצוב היישר אל תוך התוכן הפכה את הקוד כולו למסורבל, מבולגן וכמובן ארוך… וכך התכנסה לה מועצת הזקנים של מעצמת התקנים הגדולה W3C שקבעה תקן:

"מעתה פרוד יופרד העיצוב מן התוכן. ותפרידו את תוכן המסמך מן המעטפת העיצובית."

למעשה כך נולד הCSS! כמסמך המגדיר את מראה האובייקטים (צבעים, גדלי וסוגי פונטים, כותרות, מראה קישורים וכפתורים, יישורים וכו') שבאתר שלנו.
עם השנים יצאו גרסאות שונות לתקן, וכיום התקן העדכני עומד על גרסא 3, או בקיצור- CSS3.

יאללה לתכל'ס: כיצד נראה קוד CSS?

מסמך CSS מורכב למעשה מאוסף של הגדרות לאובייקטים (אובייקט = כל מילה/כפתור/בלוק מלל/כותרת,כו' באתר), כאשר כל הגדרה לאובייקט אנו כותבים כך:

[css]
selector {
property: value;
property: value;
property: value;
etc..
}
[/css]

} – סגירת הבלוק לאובייקט, כל מה שמצויין בתוך הבלוק (גרשיים מסולסלים) יכול על הסלקטור.

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

[css]
a {
color: red;
}
[/css]

מה עשינו פה?

1. הגדרנו selector שקראנו לו a(על שם התגית a שמייצגת קישור).
2. פתחנו סוגריים מסולסלים
3. הגדרנו property (תכונה) שהיא הצבע של הטקסט – "color" (סתם לידע כללי, אם היינו רוצים להגדיר את צבע הכפתור עצמו ולא את צבע הטקסט בתוך הכפתור היינו צריכים לכתוב שם "background" במקום "color").
4. הגדרנו את ה-value (התכונה תכל'ס) שהיא הצבע עצמו – "red".
5. סגרנו סוגריים מסולסלים.

זה הכל. זה CSS בצורה בסיסית.

כיצד מקשרים סלקטור לאובייקט עצמו ב-HTML שלנו?

זה יהיה קצת כבד.. אבל היי! אל תתייאשו!

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

אז בשביל זה יש את ארבעה חוקים הבסייסיים לבניית סלקטור:

חוק מספר 1 – הסלקטור הוא קנוני:

מבנה הסלקטור הוא קנוני:

[css]
body div a {}
[/css]

אנו פונים לכל הקישורים (תגית "a" כמו הפקודה לקישור ב-HTML – שכותבים "a href=…") שנמצאים בתוך תגיות DIV (בלוק תוכן ב-HTML) שנמצאות בתגית ה-BODY (כל גוף המסמך של ה-HTML שלנו).

חוק מספר 2 – מקרא קידומות:

[css]
#ID .CLASS a {}
[/css]

# סולמית היא קידומת לשם זיהוי ייחודי לאובייקט (ID) מסויים. מגיע מה-HTML: <div id="ID"></div>.
. נקודה היא קידומת למחלקה עיצובית (class) – מגיע מה-HTML: <div class="CLASS"></div>.

ללא קידומת – תגית, למשל תגית a.

חוק מספר 3 – חוק האיחוד:

ומה קורה אם אנחנו רוצים לכתוב CSS לקישור (a) ספציפי של קלאס בשם designed?

[html]
<a class="designed">My Link</a>
[/html]

במקרה כזה נחבר בין חלקי הסלקטור ללא רווח:

[css]
a.designed {}
[/css]

חוק מספר 4 – חיבור סלקטורים:

במידה ונרצה להציע בדיוק את אותו אוסף כללים למספר סלקטורים בבת אחת (בעצם ליישם את אותה התכונה לכמה אובייקטים שונים באתר בו-זמנית).
למשל – נרצה לצבוע את הכותרת הראשית (h1) בכחול, וגם את הכותרת המשנית (h2).
נוכל לחבר אותם עם הפרדה של פסיק בין כל סלקטור:

[css]
h1, h2 {
color: blue;
}
[/css]

השלב הבא – הגדרת התכונות לאובייקט

לאחר שקישרנו את הסלקטור הספציפי לאובייקט ב-HTML שלנו, איך מגדירים את התכונות לאובייקט?
נוכל להשתמש בהגדרת רקע, צבע טקסט, גודל טקסט וכו'..
להלן דוגמא בסיסית להגדרת קישור:

[css]
a.myExampleClass {
color: white;
background: red;
padding: 2px;
margin: 5px;
font-size: 12px
font-family: Arial;
}
[/css]

לקישור הספציפי הזה הצבנו רשימת תכונות כזו:

• צבע הטקסט: לבן
• רקע: אדום
• ריפוד: 2 פיקסלים מכל כיוון (ריפוד- מרווח ממולא, כלומר יהיו שוליים צבועים באדום של 2 פיקסלים מכל כיוון)
• שוליים: 5 פיקסלים מכל כיוון (שוליים- מרווח נקי, כלומר בין האובייקט לאובייקטים האחרים יהיה מרווח של 5 פיקסלים מכל כיוון, חסרי צבע)
• גודל פונט: 12 פיקסלים
• פונט מסוג: איראל

קראו כאן על תכונות נוספות של CSS.

כמו כן סמאשינג פרסמו PDF חינמי להורדה של כל ההגדרות (property ו-values) של CSS3 – זה נקרא CSS3 Cheatsheet.

סיימנו לכתוב את הקוד, איך יוצרים מזה מסמך ומקשרים ל-HTML שלנו?

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

לדוגמא:

[css]
a.myExampleClass {
color: white;
background: red;
padding: 2px;
margin: 5px;
font-size: 12px
font-family: Arial;
}
div#myID h1 {
color: #000;
line-height: 40px;
font-size: 32px;
}
[/css]

כעת נשמור את המסמך בשם כלשהוא עם סיומת .css, לדוגמא style.css.

חשוב לציין! את המסמך אנחנו לא כותבים בוורד או במעבד תמלילים (!) אלא בעורך טקסט פשוט כלשהו (NOTEPAD, textedit) או כל עורך קוד מתקדם יותר (dreamweaver, coda, espresso, כו').

ועכשיו לקסם! מוכנים? כעת כל שעלינו לעשות הוא לקשר בין מסמך ה-HTML שלנו, לגיליון העיצוב!
לפיכך, נוסיף שורה בחלק ה-head של עמוד ה-HTML:

[html]
<link rel="stylesheet" type="text/css" href="style.css" />
[/html]

לדוגמא:

[html]
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
התוכן בא כאן
</body>
</html>
[/html]

ו-Voila! יש לכם מסמך CSS שמקושר ל-HTML שלכם.

דף אינטרנט בסיסי לדוגמה והורדה

עכשיו הגיע הזמן לחקור!
הנה דוגמה של דף אינטרנט ב-CSS3 ו-HTML5 שנעשה על ידי שגיא שרייבר.
אתם מוזמנים לצפות בדוגמה החיה (ולהשתמש ב-inspect element או פיירבאג), או להוריד את קבצי המקור, לפתוח אותם בדפדפן שלכם ובעורך המלל/קוד שלכם ולשחק בעצמכם עם הנתונים שם לראות מה קורה למסמך.

אני צמא לעוד! מה הלאה?

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

אם יש לכם שאלות אתם מוזמנים לשאול פה בתגובות ואנו נשתדל להגיב על כולם.