אשכול: מדריך CSS למתחילים

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

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

בוררים, תכונות וערכים בשפת CSS

כפי שלשפת HTML ישנן תגיות בשפת CSS ישנם בוררים(selectors).
בוררים הם שמות שניתנים לסגנונות פנימיים וחיצוניים בגיליונות עיצוב מסוגננים, במדריך ה – CSS למתחילים נתרכז בעיקר בבוררי HTML. בוררי HTML הם שמות של תגיות HTML ומטרתם היא לשנות את העיצוב של תגית ספציפית בקובץ ה – HTML.
לכל בורר ישנן תכונות המוצגות בתוך סוגריים מסולסלים {סגולות} ולכל תכונה יש ערך כלשהו.
התכונות מופרדים על ידי סימון של נקודה פסיק. לדוגמא :

1. body {
2. font-size: 0.8em;
3. color: navy;
4. }

בדוגמא הנ"ל, בורר ה – body קיבל ערכים קבועים לגודל וצבע הפונט.
כלומר, הטקסט שתוך תגיות ה – body ( כל תוכן העמוד ) יהיה בגודל 0.8em ובצבע navy.
יחידות אורך ואחוזים

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

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

ישנן יחידות נוספות כמו pc (picas), cm (centimetres), mm (millimetres) ו - in (inches) אך השימוש בהן נדיר מאוד.
במידה והערך שנתת הוא אפס, אין צורך לציין את סוג היחידה. לדוגמא, אם החלטת שאינן מעוניין ליצור גבול, תוכל להסתפק בצורה הבאה : border: 0.
מומלץ להשתמש ביחידות של em או % על מנת לאפשר לגולשים באתר לבצע הגדלה ו/או הקטנה של הטקסט בדפדפן. שימושביחידות של px לא יאפשר הגדלה ו/או הקטנה של הטקסט בדפדפן ולכן כדאי להשתמש בהן לעיתים נדירות.

צבעים ב- CSS

שפת CSS מאפשרת לך להשתמש ב – 16,777,216 צבעים שונים !
ב- CSS ניתן לציין צבעים באמצעות שמם, הערך ההקסדצימלי שלהם או ערך ה- RGB שלהם.
לדוגמא, ניתן להגדיר צבע אדום ב- 5 הצורות הבאות :

1. red
2. rgb(255,0,0)
3. rgb(100%,0%,0%)
4. #ff0000
5. #f00

ישנם כ – 17 צבעים מוגדרים מראש שבאפשרותך להגדיר : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white ו - yellow.
Transparent ( שקוף) הוא גם ערך תקני שניתן להשתמש בו.
הערך RGB יכול לקבל מספרים בין 0 ל – 255, כאשר 0 מציין את הערך הנמוך ביותר ( לדוגמא, היעדר צבע אדום בצורה מוחלטת ) ו – 255 מציין את הערך הגבוה ביותר ( לדוגמא, צבע אדום מלא בצורה מוחלטת ).
הערך ההקסדצימלי מבוסס על שיטת מספור על בסיס 16, כלומר שיטת מספר המבוססת על מספרים מ – 0 עד ל – F. הערך ההקסדצימלי מוגדר כסולמית # ו – 3 או 6 ספרות. בכל אופן, מומלץ לעבוד עם 6 ספרות מכיוון שהשליטה בצורה זו היא מקסימלית.
התכונות color ו – background-color

ניתן להחיל צבעים באמצעות התכונות color ו – background-color. ניתן להחיל את על רוב האלמנטים ב- HTML. לדוגמא :

1. h1 {
2. color: yellow;
3. background-color: blue;
4. }

בדוגמא הנ"ל, כותרת ה – H1 תקבל צבע צהוב ורקע כחול.
בדרך כלל, צבעים מוגדרים הם חדים מאוד ולכן ניתן לשחק מעט עם הקוד על מנת להקנות לאלמנט הצללה כלשהי, לדוגמא :

1. body {
2. font-size: 0.8em;
3. color: navy;
4. }
5. h1 {
6. color: #ffc;
7. background-color: #009;
8. }

על מנת לצפות בשינויים, שמור את קובץ ה – CSS ורענן את הדפדפן שלך.

טקסט ב – CSS

CSS מאפשרת לך לשנות את הגודל והצורה של טקסטים באמצעות מגוון תכונות המוצגות להלן:
התכונה Font-family

תכונה זו מגדירה את סוג הפונט שישמש את הטקסט בעמוד ( למשל, Times New Roman, Arial, או Verdana).
סוג הפונט שתבחר חייב להימצא על מחשב הגולשים ולכן אין טעם לבחור פונטים לא מוכרים. ישנם מספר סוגי פונטים שהשימוש בהם נחשב בטוח יחסית כמו Times New Roman, Arial, או Verdana. מטרת הההגדרה היא לציין לדפדפן שבמידה והפונט Times New Roman לא נמצא על מחשב הגולשים באתר שיבחר בפונט Arial או Verdana.
הערה : אם שם הפונט הוא יותר ממילה אחת, עליך להכניס אותו בתוך מרכאות. לדוגמא :

1. font-family: "Times New Roman"

התכונה Font-size

תכונה זו מגדירה את גודל הפונט שישמש את הטקסט בעמוד. כפי שציינתי בעבר, מומלץ להקפיד על שימוש נכון בכותרות H1-6 ולא להגדיר טקסט שמופיע בפיסקה בגודל פונט גדול יותר על מנת לא לשנות את המבנה הויזואלי שלה.
התכונה Font-weight

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

1. font-weight: bold
2. font-weight: normal

אך תיאורטית ניתן להזין לתכונה גם את הערכים הבאים : bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 ו- 900.
התכונה Font-style

תכונה זו מציינת אם הטקסט יוצג בצורה נטויה או לא. ניתן ליישם זאת ב – 2 הצורות הבאות :

1. font-style: italic
2. font-style: normal

התכונה text-decoration

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

• text-decoration: overline - יוצג קו מודגש מעל הטקסט.
• text-decoration: line-through - יוצג קו מודגש באמצע הטקסט.
• text-decoration: underline - יוצג קו מודגש מתחת הטקסט – מומלץ להשתמש באופציה זו על קישורי טקסט בלבד.

בדרך כלל משתמשים בתכונה זו על מנת לקשט קישורים טקסט באמצעות הסרה של הקו התחתון של הקישור. הגדרה זו מוחלת בצורה הבאה : text-decoration: none
התכונה text-transform

תכונה זו אחראית על הצגה של אותיות גדולות באנגלית בלבד.

• text-transform: capitalize - כל האותיות הראשונות בכל מילה יוצגו באות גדולה.
• text-transform: uppercase - כל האותיות בכל המילים יוצגו באותיות גדולות.
• text-transform: lowercase - כל האותיות בכל המילים יוצגו באותיות קטנות.
• text-transform: none - מה נראה לך שזה עושה ?

דוגמא לכל התכונות הנ"ל

1. body {
2. font-family: arial, helvetica, sans-serif;
3. font-size: 0.8em;
4. }
5. h1 {
6. font-size: 2em;
7. }
8. h2 {
9. font-size: 1.5em;
10. }
11. a {
12. text-decoration: none;
13. }
14. strong {
15. font-style: italic;
16. text-transform: uppercase;
17. }

ריווח טקסטים באמצעות CSS

התכונות letter-spacing ו – word-spacing אחראיות על פיזור רווחים בין אותיות או מילים. הערכים לתכונות הנ"ל יכולים להיות אורך כלשהו או normal.
התכונה line-height מגדירה את גובה השורה באלמנט HTML. הערכים לתכונה יכולים להיות מספר המציין את הכפלת הפונט, אורך כלשהו, אחוז או normal.
התכונה text-align אחראית על יישור הטקסט באלמנט HTML לימין (right), שמאל (left), מרכז (center) או מוחלט (justify).
התכונה text-indent אחראית על "דחיפה" של השורה הראשונה בכל פיסקה. צורת עיצוב זו באה לידי ביטוי בדפוס אך לא נפוצה כל כך באינטרנט.
דוגמא לכל התכונות הנ"ל :

1. p {
2. letter-spacing: 0.5em;
3. word-spacing: 2em;
4. line-height: 1.5;
5. text-align: center;
6. }

Margin ו – Padding

Margin ו – padding הן 2 התכונות הנפוצות ביותר ב – CSS לריווח בין אלמנטים של HTML. התכונה margin מתייחסת לריווח מחוץ לאלמנט והתכונה padding מתייחסת לריווח בתוך האלמנט.
שנה את עיצוב הכותרת H2 בצורה הבאה :

1. h2 {
2. font-size: 1.5em;
3. background-color: #ccc;
4. margin: 1em;
5. padding: 3em;
6. }

בדוגמא הנ"ל, הכותרת מקבלת רווח של תו אחד מסביבה ורווח של 3 תווים בתוך הכותרת.
באפשרותך לקבוע את הריווח לכל צד של האלמנט באמצעות התכונות הבאות : margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom ו - padding-left.
מודל הקופסה ב- CSS

התכונות margin, padding ו – border (אשר מוצגת בעמוד הבא) מרכיבים ביחד את מודל הקופסה.
מודל הקופסה ב- CSS עובד כך שבאמצע יש את תוכן האלמנט ( למשל, טקסט ותמונה ) את תוכן האלמנט מקיפה התכונה padding לאחר מכן התכונה border ולבסוף התכונה margin. ניתן להציג את המודל ויזואלית בצורה הבאה :
התכונה Marginהתכונה Borderהתכונה Paddingאלמנט ה - HTML



אתה לא חייב להשתמש בכל המודל, אך זה בהחלט מועיל לזכור את המודל ולדעת כי ניתן להחיל אותו על כל אלמנט HTML בעמוד – זהו אחד הכלים המועילים ביותר ב – CSS !

גבולות ב- CSS

ניתן להחיל גבולות CSS על רוב האלמנטים של שפת ה-HTML.
על מנת להחיל גבול מסביב לאלמנט, עליך להשתמש בתכונה border-style כאשר הערכים שבאפשרותך לציין הם : solid, dotted, dashed, double, groove, ridge, inset ו – outset.
בנוסף, באמצעות התכונה border-width ניתן להגדיר את רוחב הגבול. בדרך כלל, רוחב הגבול מוגדר באמצעות יחידות של פיקסלים (px). בדומה ל - margin ו – padding באפשרותך לקבוע את הגבול לכל צד של האלמנט באמצעות התכונות הבאות : border-top-width, border-right-width, border-bottom-width ו - border-left-width.
לבסוף, התכונה border-color מגדירה את צבע האלמנט.
על מנת לצפות בתכונה, שנה את עמוד ה- CSS שלך בצורה הבאה :

1. h2 {
2. border-style: dashed;
3. border-width: 3px;
4. border-left-width: 10px;
5. border-right-width: 10px;
6. border-color: red;
7. }

עמוד CSS לדוגמא

העמוד הבא מכיל את כל הקוד שלמדת עד עכשיו, שמור את הקוד בעמוד ה –CSS שלך.
הדרך הטובה ביותר להבין את הקוד היא דרך ניסיון מעשי, רק בצורה זו תוכל ללמוד את שפת CSS. במידה ואין לך קובץ HTML, שמור את הקובץ המוצג באתר HTMLGuide תחתלבין עמוד ה- CSS שלך.

1. body {
2. font-family: arial, helvetica, sans-serif;
3. font-size: 80%;
4. color: black;
5. background-color: #ffc;
6. margin: 1em;
7. padding: 0;
8. }
9. /* דרך אגב, זוהי הערה שניתן להכניס בצורה חופשית בקוד CSS */
10. p {
11. line-height: 1.5em;
12. }
13. h1 {
14. color: #ffc;
15. background-color: #900;
16. font-size: 2em;
17. margin: 0;
18. margin-bottom: 0.5em;
19. padding: 0.25em;
20. font-style: italic;
21. text-align: center;
22. letter-spacing: 0.5em;
23. border-bottom-style: solid;
24. border-bottom-width: 0.5em;
25. border-bottom-color: #c00;
26. }
27. h2 {
28. color: white;
29. background-color: #090;
30. font-size: 1.5em;
31. margin: 0;
32. padding: 0.1em;
33. padding-left: 1em;
34. }
35. h3 {
36. color: #999;
37. font-size: 1.25em;
38. }
39. img {
40. border-style: dashed;
41. border-width: 2px;
42. border-color: #ccc;
43. }
44. a {
45. text-decoration: none;
46. }
47. strong {
48. font-style: italic;
49. text-transform: uppercase;
50. }
51. li {
52. color: #900;
53. font-style: italic;
54. }
55. table {
56. background-color: #ccc;
57. }