בוררי 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 example of our basic HTML Document with links</h1>
</head>
<body>
<p id="special" >this is an example 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 תוכלו לראות שקבענו כי כל אלמנט אשר נושא בורר זה ייכתב בצבע וגודל מסוים.
כעת דף האינטרנט שלנו נראה כך:
הבורר 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 example of our basic HTML Document with links</h1>
</head>
<body>
<p class="p_class" >this is an example 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 תוכלו לראות שקבענו כי כל אלמנט אשר נושא בורר זה ייכתב בצבע וגודל מסוים.
כעת דף האינטרנט שלנו נראה כך:
אם נרצה להחיל סגנון עיצובי זה בכל מקום שבו מופיע המאפיין p_class,
נכתוב את שורות 4-9 כך:
<style>
.p_class {
color:red;
font-size: 18px;
}
</style>
סלקטורים נוספים
קיים עוד מגוון גדול של סלקטורים ב-CSS,
תוכלו להיעזר בטבלה הבאה אשר מבארת את חלקם:
בוררי CSS
כעת, לאחר שהבנו את נושא הבוררים נוכל להמשיך לפרק הבא של המדריך – תכונות וערכים.
לקריאה מורחבת על CSS באתר הייעודי של W3C יש ללחוץ כאן
