1.1 הקדמה ל CSS וסלקטורים הרצאה

מה זה CSS¶

אחרי שלמדנו HTML ואנחנו יודעים לבנות מבנה של דף אינטרנט, הגיע הזמן להוסיף עיצוב. כאן נכנס CSS - ראשי תיבות של Cascading Style Sheets.

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

שלוש דרכים להוסיף CSS¶

יש שלוש דרכים להוסיף CSS לדף HTML:

סגנון מוטבע - inline style¶

הוספת עיצוב ישירות על אלמנט באמצעות התכונה style:

<p style="color: red; font-size: 20px;">טקסט אדום</p>

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

סגנון פנימי - internal style¶

הוספת תגית <style> בתוך ה-<head> של הדף:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>טקסט אדום</p>
    <p>גם זה אדום</p>
</body>
</html>

יותר טוב מ-inline כי העיצוב מרוכז במקום אחד
אבל עדיין לא אידיאלי - אם יש לנו 10 דפי HTML, נצטרך לשכפל את כל ה-CSS בכל דף

סגנון חיצוני - external style (מה שתמיד נעדיף)¶

יצירת קובץ CSS נפרד וקישור שלו ל-HTML:

קובץ style.css:

p {
    color: red;
    font-size: 20px;
}

קובץ index.html:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>טקסט אדום</p>
    <p>גם זה אדום</p>
</body>
</html>

זו הדרך הנכונה לעבוד
קובץ CSS אחד יכול לשרת המון דפי HTML
שינוי במקום אחד משפיע על כל הדפים
הדפדפן יכול לשמור את קובץ ה-CSS בזכרון (cache) וזה מאיץ את הטעינה
תמיד נעבוד ככה

תחביר CSS - syntax¶

הבנייה הבסיסית של CSS נראית ככה:

/* selector - selects which elements to style */
selector {
    property: value;
    another-property: another-value;
}

ה-selector בוחר על אילו אלמנטים העיצוב יחול
בתוך הסוגריים המסולסלים נכתוב את כללי העיצוב
כל כלל מורכב מ-property (מאפיין) ו-value (ערך), מופרדים בנקודתיים
כל כלל מסתיים בנקודה פסיק

דוגמה פשוטה:

h1 {
    color: blue;
    font-size: 32px;
    text-align: center;
}

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

הערות ב-CSS¶

הערות ב-CSS נכתבות ככה:

/* this is a comment */

/*
   this is a multi-line comment
   that spans several lines
*/

h1 {
    color: blue; /* this changes the title color */
}

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

כלי פיתוח - DevTools¶

כל דפדפן מודרני מגיע עם כלי פיתוח (DevTools) שמאפשרים לנו לראות ולשנות CSS בזמן אמת:

לחיצה על F12 או לחצן ימני ואז Inspect פותחים את ה-DevTools
בלשונית Elements אפשר לראות את ה-HTML ולצד ימין את כל כללי ה-CSS שחלים על כל אלמנט
אפשר לשנות ערכים בזמן אמת ולראות את השינוי מיידית בדף
אפשר להוסיף כללים חדשים, לכבות כללים קיימים (ביטול סימון V)
השינויים הם זמניים - ריענון הדף מחזיר הכל למצב המקורי
זה הכלי הכי חשוב שלכם כמפתחי frontend - תשתמשו בו כל הזמן

איפוס CSS - CSS Reset/Normalize¶

דבר שחשוב לדעת: דפדפנים שונים מציגים דברים בצורה שונה.

ל-Chrome יש ברירות מחדל מסוימות לגודל טקסט, מרווחים ועוד
ל-Firefox יש ברירות מחדל קצת שונות
ל-Safari יש ברירות מחדל אחרות

זה אומר שאותו דף HTML יכול להיראות קצת שונה בכל דפדפן. כדי לפתור את זה, משתמשים ב-CSS Reset או CSS Normalize:

CSS Reset מאפס את כל ברירות המחדל לאפס מוחלט
CSS Normalize (יותר נפוץ) מנרמל את ברירות המחדל כך שיהיו אחידות בכל הדפדפנים

דוגמה פשוטה לאיפוס בסיסי:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

סלקטורים - selectors¶

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

סלקטור אלמנט - element selector¶

הסלקטור הכי פשוט - בוחרים לפי שם התגית:

/* styles all paragraphs */
p {
    color: gray;
    line-height: 1.6;
}

/* styles all h1 elements */
h1 {
    color: darkblue;
    font-size: 36px;
}

/* styles all div elements */
div {
    background-color: lightyellow;
    padding: 10px;
}

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

סלקטור מחלקה - class selector¶

בוחרים אלמנטים לפי שם ה-class שלהם, עם נקודה (.) לפני השם:

<p class="highlight">טקסט מודגש</p>
<p>טקסט רגיל</p>
<p class="highlight">עוד טקסט מודגש</p>

.highlight {
    background-color: yellow;
    font-weight: bold;
}

class הוא תכונה שאנחנו מוסיפים לאלמנטים ב-HTML
אלמנטים רבים יכולים לחלוק את אותו class
אלמנט יכול להכיל מספר class-ים, מופרדים ברווח:

<div class="card important large">content here</div>

.card {
    border: 1px solid gray;
    padding: 20px;
    border-radius: 8px;
}

.important {
    border-color: red;
}

.large {
    font-size: 24px;
}

סלקטור class הוא הסלקטור הכי נפוץ והכי מומלץ - נשתמש בו רוב הזמן

סלקטור מזהה - ID selector¶

בוחרים אלמנט לפי ה-id שלו, עם סולמית (#) לפני השם:

<div id="main-header">כותרת ראשית</div>

#main-header {
    background-color: navy;
    color: white;
    padding: 20px;
    text-align: center;
}

id צריך להיות ייחודי - רק אלמנט אחד בדף יכול לקבל id מסוים
למרות שזה עובד, עדיף להשתמש ב-class ברוב המקרים
למה? כי id יוצר ספציפיות גבוהה מאוד (נלמד בהמשך) ומקשה על דריסת סגנונות
id שימושי יותר עבור JavaScript ולא עבור CSS

סלקטור אוניברסלי - universal selector¶

הכוכבית (*) בוחרת את כל האלמנטים בדף:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

בדרך כלל משתמשים בזה רק לאיפוסים גלובליים
לא מומלץ להשתמש בזה לעיצוב ספציפי כי זה חל על הכל

סלקטור תכונות - attribute selectors¶

בוחרים אלמנטים לפי התכונות שלהם ב-HTML. זה מאוד חזק ויש כמה וריאציות:

/* selects elements that have the "title" attribute */
[title] {
    border-bottom: 1px dotted gray;
}

/* selects inputs where type is exactly "text" */
[type="text"] {
    border: 2px solid blue;
    padding: 8px;
}

/* selects links where href starts with "https" */
[href^="https"] {
    color: green;
}

/* selects links where href ends with ".pdf" */
[href$=".pdf"] {
    color: red;
}

/* selects elements where class contains "btn" anywhere */
[class*="btn"] {
    cursor: pointer;
    padding: 10px 20px;
}

סיכום סלקטורי תכונות:

סלקטור	משמעות
`[attr]`	לאלמנט יש את התכונה
`[attr=value]`	הערך שווה בדיוק
`[attr^=value]`	הערך מתחיל ב...
`[attr$=value]`	הערך מסתיים ב...
`[attr*=value]`	הערך מכיל את...

דוגמה מעשית - עיצוב טפסים:

/* style all required fields */
[required] {
    border-left: 3px solid red;
}

/* style disabled inputs differently */
[disabled] {
    background-color: #eee;
    cursor: not-allowed;
}

/* style checkboxes */
[type="checkbox"] {
    width: 20px;
    height: 20px;
}

סלקטור צאצא - descendant selector (רווח)¶

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

<div class="article">
    <p>פסקה בתוך article</p>
    <div>
        <p>פסקה עמוק יותר בתוך article</p>
    </div>
</div>
<p>פסקה מחוץ ל-article</p>

/* selects ALL p elements inside .article, at any depth */
.article p {
    color: #333;
    line-height: 1.8;
}

הפסקה האחרונה (מחוץ ל-article) לא תיבחר
שתי הפסקאות הראשונות כן ייבחרו, גם אם אחת מקוננת עמוק יותר

עוד דוגמאות:

/* all links inside the navigation */
nav a {
    text-decoration: none;
    color: white;
}

/* all list items inside unordered lists inside sidebar */
.sidebar ul li {
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
}

סלקטור ילד ישיר - child selector (>)¶

בוחרים רק אלמנטים שהם ילדים ישירים (לא נכדים או צאצאים עמוקים יותר):

<div class="menu">
    <p>ילד ישיר של menu</p>
    <div>
        <p>נכד של menu (לא ילד ישיר)</p>
    </div>
</div>

/* selects only DIRECT children p of .menu */
.menu > p {
    font-weight: bold;
}

רק הפסקה הראשונה תיבחר (היא ילד ישיר)
הפסקה השניה לא תיבחר (היא נכד, לא ילד ישיר)

דוגמה מעשית - תפריט עם תפריטי משנה:

/* style only the top-level list items, not nested ones */
.nav > li {
    display: inline-block;
    padding: 10px 20px;
}

סלקטור אח סמוך - adjacent sibling selector (+)¶

בוחרים אלמנט שמופיע מיד אחרי אלמנט אחר (באותה רמה):

<h1>כותרת</h1>
<p>פסקה מיד אחרי הכותרת</p>
<p>פסקה שניה</p>

/* selects only the p that comes immediately after h1 */
h1 + p {
    font-size: 20px;
    color: gray;
}

רק הפסקה הראשונה (מיד אחרי h1) תיבחר
הפסקה השניה לא תיבחר

דוגמה מעשית:

/* add space after images that are followed by a caption */
img + .caption {
    margin-top: 5px;
    font-style: italic;
    color: #666;
}

סלקטור אח כללי - general sibling selector (~)¶

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

<h1>כותרת</h1>
<p>פסקה ראשונה</p>
<p>פסקה שניה</p>
<div>div</div>
<p>פסקה שלישית</p>

/* selects ALL p elements that come after h1 (same level) */
h1 ~ p {
    color: blue;
}

כל שלוש הפסקאות ייבחרו (כולן אחיות של h1)
ה-div לא ייבחר (הוא לא p)

קיבוץ סלקטורים - grouping selectors (,)¶

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

/* instead of writing the same styles three times... */
h1, h2, h3 {
    font-family: Arial, sans-serif;
    color: #333;
}

/* you can group any selectors */
.btn, .link, input[type="submit"] {
    cursor: pointer;
    font-size: 16px;
}

זה חוסך שכפול קוד
כל סלקטור מופרד בפסיק
אפשר לקבץ כל סוג של סלקטורים ביחד

שילוב סלקטורים¶

אפשר לשלב סלקטורים כדי להיות יותר ספציפיים:

/* p elements with class "intro" */
p.intro {
    font-size: 18px;
}

/* div elements with id "header" */
div#header {
    background: navy;
}

/* elements with both classes "btn" and "primary" */
.btn.primary {
    background: blue;
    color: white;
}

/* links with class "external" inside nav */
nav a.external {
    color: orange;
}

דוגמה מסכמת¶

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

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav id="main-nav">
        <a href="/" class="logo">MyWebsite</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
        <a href="https://external.com" class="external">External</a>
    </nav>

    <main>
        <article class="post">
            <h1>Welcome</h1>
            <p class="intro">This is the intro paragraph.</p>
            <p>This is a regular paragraph.</p>
            <p>Another regular paragraph.</p>
        </article>
    </main>
</body>
</html>

/* reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* element selectors */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* id selector for navigation */
#main-nav {
    background-color: #333;
    padding: 10px 20px;
}

/* descendant: all links inside nav */
#main-nav a {
    color: white;
    text-decoration: none;
    margin-right: 15px;
}

/* class selector for logo */
.logo {
    font-weight: bold;
    font-size: 20px;
}

/* attribute selector: external links */
[href^="https"] {
    color: orange;
}

/* class + descendant */
.post p {
    color: #555;
    margin-bottom: 10px;
}

/* class selector for intro */
.post p.intro {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

/* adjacent sibling: first p after h1 */
h1 + p {
    margin-top: 20px;
}

/* child selector */
main > article {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
}

/* grouping */
h1, h2, h3, h4 {
    color: #222;
}

סיכום¶

CSS עוזר לנו לעצב את ה-HTML שכתבנו
תמיד נעבוד עם קובץ CSS חיצוני
התחביר הוא: selector { property: value; }
סלקטורים מאפשרים לנו לבחור בדיוק אילו אלמנטים לעצב
סלקטור class (.) הוא הנפוץ ביותר - נשתמש בו רוב הזמן
אפשר לשלב סלקטורים כדי להיות מדויקים
כלי הפיתוח (DevTools) הם החבר הכי טוב שלכם - F12 ולהתחיל לחקור