המבוא המלא ל-CSS3: חלק 1

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

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

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

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

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

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

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

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

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

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

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

selector {
	property: value;
	property: value;
	property: value;
	etc..
}

בואו נפרק את זה לגורמים:
ה-selector (בורר) למעשה קובע לאיזה אובייקט/אוסף-אובייקטים אנו רוצים להתייחס. לצורך העניין – אם אנחנו רוצים להגדיר כפתור "שלח" בטופס באתר שלנו נוכל לקרוא לו "send_btn" או כל מה שנרצה שיזכיר לנו לאיזה אובייקט הוא מתייחס.

{
– גרשיים מסולסלים פותחים לנו את הבלוק(ספייס) לכתוב את ההגדרות לאובייקט. כל מה שמצויין בתוך הגרשיים המסולסלים ישפיע על הסלקטור (כלומר על האובייקט).
ה-property (תכונה) קובע איזה סוג של תכונה אנו רוצים להגדיר לאותו אובייקט. זה יכול להיות צבע, גודל, יישור, פינות מעוגלות ועוד. סתם דוגמה ל-property: אפשר לכתוב ":color". זה יגדיר לנו את הצבע של הטקסט. אנו נקשר אותו לתכונה עצמה עם נקודותיים ":" ונכתוב אותם באותה שורה.
ה-value (תכונה) קובע מה הערך שאנו רוצים להגדיר לאותו סוג של תכונה. כלומר מה התכונה עצמה. לדוגמה: אם קודם ב-property כתבנו "color:" אז פה ב-value נוכל לכתוב "black" או "red" או לתת גם צבעים בצורה של מספר כמו "#29a9df" (זה סוג של כחול).
";"(מפריד) – לסיום נחתום כל תכונה בנקודה פסיק.

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

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

a {
	color: red;
}

מה עשינו פה?

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

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

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

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

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

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

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

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

body div a {}

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

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

#ID .CLASS a {}

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

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

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

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

<a class="designed">My Link</a>

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

a.designed {}

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

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

h1, h2 {
	color: blue;
}

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

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

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

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

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

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

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

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

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

לדוגמא:

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, לדוגמא style.css.

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

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

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

לדוגמא:

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

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

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

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

דף אינטרנט ב-CSS3 ו-HTML5 לדוגמה (997 downloads)

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

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

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

הפוסט נכתב על ידי:

מתוך לוח הדרושים שלנו:
סגירת תפריט

אנא מלאו את הטופס ונחזור אליכם בהקדם!

 

נשמח לתת לך עוד פרטים

יש למלא את הטופס הבא על מנת לשריין מקום באירוע הקרוב.


נא לבדוק ביומן לפני מילוי הטופס: 
30 למאי (יום רביעי)
בשעה 18:30
בתל אביב (מיקום מדוייק יישלח בהמשך)

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

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

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

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

קבלת ה-PDF מותנית ברישום לניוזלטר שלנו (מי שרשום לניוזלטר נחשב חבר בקהילה ולכן אנחנו מפנקים בגישה לכל החינמיים שלנו).


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

×

אשמח לשלוח לך פרטים!

אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה

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

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

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

נשמח לתת לך עוד פרטים!

לצפייה מיידית בסילבוס ובפרטים אודות הקורס אנא מלא/י את הפרטים כאן: