מדריך CSS + HTML – הבסיס – חלק 2

אחרי שדיברנו על תגיות HTML שחשוב להכיר, כאן נדבר על מאפייני CSS שצריך וחשוב מאוד להכיר.

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

CSS

עבור שיטות בחירה CSS (Selectors) אני ממליץ ליקרוא את הפוסט הזה (יפתח בחלון חדש).

צבעים

ניתן לייצג צבעים בצורות הבאות:

HEX –

פורמט כתיבה

#rrggbb / #rgb / #rrggbbaa

כל צבע מקבל ערך בבסיס 16 שזה אומר מ-00 ועד ff. כמו שאפשר להבין מהכתוב – r = אדום, g = ירוק, b = כחול ו-a = שקיפות (alpha). שימו לב ששקיפות בפורמט HEX לא נתמכת בכל הדפדפנים ולכן עדיף להימנע מלעשות את זה.

RGB –

פורמט כתיבה

rgb(red,green,blue) / rgba(red,green,blue,alpha)

כל צבע מקבל ערך בבסיס 10 ובין הערכים 0-255 , שקיפות (alpha) מקבל בין 0 (שקוף) ל-1 (אטום). שימו לב שבשיטה זו כל הדפדפנים תומכים בשקיפות.

HSL –

זו השיטה הכי פחות פופולרית וכמעט לא משתמשים בה.

פורמט כתיבה

hsl(hue, saturation, lightness) / hsla(hue, saturation, lightness, alpha)

hue – מקבל ערכים 0-360 כאשר 0 אדום, 120 ירוק, 240 כחול.

saturation – קובע את הרוויה של הצבע, הערכים נעים בין 0% ל-100% . ככול שהוא לכיוון האפס כך הוא יותר אפור וככול שהוא לכיוון המאה הצבע יותר חזק/מלא

lightness – קובע את הזוהר של הצבע, הערכים נעים בין 0% ל-100%. 0 שחור ו-100 הצבע במקסימום זוהר.

alpha – שקיפות, מקבל ערכים בין 0 ל-1

בנוסף לשיטות הצבעים שדיברנו למעלה, ניתן גם לקבוע צבע על ידי השם שלו, זאת אומרת, שפשוט אפשר לרשום red, gray, black, lightblue…. והדפדפון יתרגם את זה לצבע המתאים על פי פלטת הצבעים שלו.

נעבור על רשימה חלקית של מאפיינים (העקריים, החשובים והבסיסים) שהכי צריך להכיר:

TEXT –

Text Alignment :

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

.myCss{
  text-align: center;
}

יכול לקבל ערכים של "left", "center", "right" ו-"justify"

Text Decoration:

מוסיף או מוריד קו לטקסט (מעל, מתחת, באמצע, ללא)

.myCss{
	text-decoration: overline;
}
.myCss{
	text-decoration: line-through;
}
.myCss{
	text-decoration: underline;
}
.myCss{
	text-decoration: none;
}

Text Indentation:

דוחף את השורה הראשונה במקטע טקסט פנימה, על פי הערך שקבענו

.myCss{
  text-indent: 50px;
}

White Space:

מגדיר את התנהגות הטקסט כשמגיעים לסוף השורה.

1. nowrap – הטקסט לא ירד שורה אלא ימשיך בקו אחד גם אם נגמר המקום.
2. normal – התנהגות רגילה, משמע, כאשר אין מקום בשורה הטקסט ירד שורה
3. pre – הטקסט ישמור על הנראות שבה הוא נרשם, זאת אומרת, אם יש מספר רווחים רצופים או ירידה של שורה על ידי אנטר כך הוא יוצג גם בדף

DISPLAY –

משנה את הפריסה של התגית על הדף.

1. inline: מכניס את התגית לתוך השורה, זה אומר שהיא לא תתפוס שורה שלמה וערכים כמו padding ו-margin ישפיעו רק לצדדים ולא למעלה ולמטה בגלל הגבלה של השורה בה האלמנט נמצא.
2. block: התגית תתפוס שורה מלאה וערכים כמו padding ו-margin ישפיעו באופן מלא ולכל כיוון.
3. inline-block: שילוב של 2 האופציות למעלה, מצד אחד התגית תתפוס את המינימום שהיא צריכה על פי התוכן שלה, כמו ב-inline ולכן ניתן לשים כמה תגיות בשורה אחת. מצד שני, padding ו-margin משפיעים באופן מלא על האלמנט ובכך משנים את מיקום השורה וביחד איתה את כל האלמנטים בשורה. יש לזכור שמדובר בבלוק שנימצא בתוך שורה כך שאם אין מקום בשורה, הוא ישבר כולו לשורה הבאה ולא רק המילים שאין להם מקום כמו ב-inline.
4. flex: לא ארחיב עליו (למרות שיש הרבה מה לכתוב עליו), בקצרה, עובד בשיטה של השפעה עקיפה ולא ישירה כמו בסעיפים הקודמים. המעטפת מקבלת את ההגדרה ומשפיעה על כל התגיות הישירות שבתוכה, במידה שמשתמשים בה יש לזכור שגם הילדים מקבלים ערכים – flex-grow, flex-shrink, flex-basis או בקיצור flex

.parent{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}
.myCss{
	flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 0;
}
.myCss{
	flex: 0 0 0;
}

על flex אפשר לדבר הרבה וצריך להבין אותו ממש טוב כדי להשתמש בו נכון ולכן אני ממליץ לכם לקרוא עליו ולהתנסות בו ובכל הערכים שלו כדי לראות מה קורה.

יש כמובן גם grid ועוד, אבל מבחינתי הם כבר לא בסיס ולכן לא נרחיב עליהם.

POSITION –

משנה את המיקום על הדף של התגית

static: ברירת מחדל של כל אלמנט על הדף.

relative: כמו סטאטיק אבל עם מעטפת נוספת של position אשר מושפעת מערכים כמו top, bottom, left, right. העריכים יוזיזו את המיקום של התגית יחסית למקום המקורי שלה.

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

absolute: יוצא משכבת הדף, לא תופס מקום בדף. וממקם את עצמו יחסית למעטפת שיש לה גם הגדרה של position שהוא לא static , במידה שלא קיים מעטפת כזו אז הוא יעצר ב-body בדומה ל-fixed אבל במידה שיש גלילה, הוא יזוז יחד איתה ולא ישאר על המסך.

sticky: ערך כלאים שמשנה מצב בין relative ו-fixed. כאשר המיקום המקורי שלו נמצא באיזור של הדף שרואים (viewport) הוא ינוע עם הדף (הגלילה), ברגע שהוא יוצא מהחלק העליון של הדף הוא משנה את הערך שלו ל-fixed ונשאר צמוד לראש הדף.

BOX-SIZING –

קובע איך יחושב גודל התגית

כאשר אנחנו קובעים רוחב של 200 פיקסלים ברירת המחדל היא לתת תוכן של הרכיב 200 פיקסלים ואז להוסיף את ה-pedding וה-border , במילים אחרות:

.myCss{
  width: 200px;
  border: 2px solid;
  padding: 10px;
}

נקבל רוחב של 200 + 2 + 2 + 10 + 10 = 224 פיקסלים.

מה אם אנחנו רוצים שכל התגית תתפוס 200 פיקסלים על הדף?

.myCss{
  width: 200px;
  border: 2px solid;
  padding: 10px;
  box-sizing: border-box;
}

עכשיו החישוב יהיה קצת אחר, 200 – 2 – 2 – 10 – 10 = 176 פיקסלים לתוכן.

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

זיכרו ש-margin לא נכלל בכול מיקרה בתוך החישוב אלא כתוספת לגודל שקבענו.

MEDIA QUERY –

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

@media only screen and (max-width: 920px) {
  body {
    background-color: red;
  }
}

במקרה הזה, אנחנו בודקים את רוחב המסך ובמידה שהוא עד 920 פיקסלים, הרקע יצבע באדום. זה נחמד אבל רק ההתחלה 😉, אנחנו יכולים לשרשר אותם ולהוסיף תנאים ללא הגבלה, המילה AND מחברת את התנאים ופסיק (",") הוא סוג של "או"

@media only screen and (max-width: 920px) and (min-width: 600px), (min-width: 1500px) {
  body {
    background-color: red;
  }
}

חוץ מלבדוק גודל מסך אפשר לבצע בדיקות נוספות:

• (orientation: landscape)
• (orientation: portrait )

אפשר גם לעשות שינויים בדף עבור הדפסה

@media print{
  .myDiv{
  display: none;
  }
}

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

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

פוסטים קשורים:

מדריך CSS + HTML – הבסיס – חלק 1 מדריך CSS + HTML – הבסיס – חלק 3 מיצוב תוכן בתגיות HTML , שמעתם על תגית pre? מדריך אנגולר | סיכום מיני קורס אנגולר reactive forms