המדריך הבסיסי ל-CSS ב-HTML – פרק ב' – בוררים

בוררי CSS ב-HTML הם שמות של תגיות ומטרתם היא לשנות את העיצוב של תגית ספציפית\משפחת תגיות בקוד ה-HTML שלנו

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

הבורר id

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

<!DOCTYPE html>
<html>
<head>
    <style>
      #special { 
        color:green;
        font-size: 20px;
      }
    </style>
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1>this is an exemple of our basic HTML Document with links</h1>
</head>
<body>
    <p id="special" >this is an exemple of link, click <a href="https://www.technow.co.il">here</a>
        <br/>
        <br/>
        this is my image:
        <br/>
        <br/>
        <a href="https://www.g4a.co.il/">
            <img src="logo.png" alt="text" style="height: 100px; width: 100px;">
        </a>
    </p>
</body>
</html>

בשורה 15 הוספנו לאלמנט p בורר id בשם special.
באזור ה-head, הגדנו את הסגנון הייחודי שיינתן לכל אלמנט אשר נושא בורר זה.
בין שורות 4-9 תוכלו לראות שקבענו כי כל אלמנט אשר נושא בורר זה ייכתב בצבע וגודל מסוים.
כעת דף האינטרנט שלנו נראה כך:

CSS in HTML - by id
CSS in HTML – by id

הבורר class

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

<!DOCTYPE html>
<html>
<head>
    <style>
      p.p_class { 
        color:red;
        font-size: 18px;
      }
    </style>
    <meta charset="utf-8" />
    <title>Hello, World!</title>
    <h1>this is an exemple of our basic HTML Document with links</h1>
</head>
<body>
    <p class="p_class" >this is an exemple of link, click <a href="https://www.technow.co.il">here</a>
        <br/>
        <br/>
        this is my image:
        <br/>
        <br/>
        <a href="https://www.g4a.co.il/">
            <img src="logo.png" alt="text" style="height: 100px; width: 100px;">
        </a>
    </p>
</body>
</html>

בשורה 15 הוספנו לאלמנט p בורר class בשם p_class.
גם כאן, באזור ה-head, הגדנו את הסגנון הייחודי.
בין שורות 4-9 תוכלו לראות שקבענו כי כל אלמנט אשר נושא בורר זה ייכתב בצבע וגודל מסוים.
כעת דף האינטרנט שלנו נראה כך:

CSS in HTML - by class
CSS in HTML – by class

אם נרצה להחיל סגנון עיצובי זה בכל מקום שבו מופיע המאפיין p_class,
נכתוב את שורות 4-9 כך:

<style>
    .p_class { 
      color:red;
      font-size: 18px;
      }
</style>

סלקטורים נוספים

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

בוררי CSS

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

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה?

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

כתיבת תגובה

הזמינו אותי לכוס קפה
buy me coffee

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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