אז איך כותבים קוד css?
הדבר הראשון שחשוב להבין הוא שקוד css, כמו html, נכתוב באמצעות עורך טקסט (אפשר גם עם Notepad).
במידה ואנחנו כותבים קבצי css חיצוניים, נכתוב את הקוד ללא תגיות html אלא בתחביר css נקי וניתן לקובץ סיומת css.
עיצובי css מורכבים משני חלקים:
- Selector - מעין קוד המייצג קבוצה של תגיות בדף (אחת או יותר) עליהן חל העיצוב. ישנו למשל selector שבוחר את כל הכותרות מסוג h1 בדף, selector שבוחר את כל הקישורים (תגיות a) בדף וכו'.
- Properties - קבוצה של מאפיינים וערכים, כלומר העיצוב עצמו. שינוי צבע רקע, סוג גופן, גודל, מסגרת ועוד הרבה.
Selectorים ומאפיינים באים ביחד, כאשר לכל selector אנחנו מגדירים קבוצה של מאפיינים.
הנה התחביר:
selector {
property: value;
another-property: value;
/* More Properties.. */
}
במידה ויש מעט מאפיינים אפשר גם לרשום:
selector {property: value; another-property: another-value;}
Selectors
אמרנו שיש לנו מספר דרכים להחיל עיצוב css:- inline - בתוך התגית
- internal - בתוך הקובץ
- external - בקובץ חיצוני
כאשר אנחנו רוצים להפריד את העיצוב מקוד html, אנחנו צריכים למצוא שיטה לבחור אלמנטים לעיצוב.
היתרון בבחירת אלמנטים, להבדיל מכתיבת css במאפיין style, הוא היכולת להגדיר עיצוב זהה למספר רב של אלמנטים.
ניקח למשל את הקוד הבא:
table {
background-color: blue;
}
בדוגמה הזו אנחנו משתמשים ב- selector הכי פשוט שיש - type selector - אנחנו בוחרים את כל הטבלאות בדף וצובעים אותן בצבע רקע כחול.שימו לב למבנה - selector ובסוגריים מסולסלים מאפיינים וערכים.
את הקוד בדוגמה נוכל לשלב בקובץ html בצורה כזו:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style type="text/css">
table {
background-color: blue;
}
</style>
</head>
<body>
<!-- This table will have blue background -->
<table>
<tr>
<td>I</td>
<td>have</td>
<td>blue</td>
<td>background</td>
</tr>
</table>
</body>
</html>
נוכל גם לכתוב את הקוד בקובץ css חיצוני (נקרא לו למשל app.css) ולשלבו בעמוד שלנו באמצעות התגית link:<link rel="stylesheet" href="app.css"/>קובץ css יכיל אך ורק קוד css, הנה למשל הקובץ app.css:
/* Main Site Stylesheet */
body {
font-size: 15px;
font-family: Arial, serif;
}
table {
background-color: black;
color: red;
}
a {
font-weight: bold;
}
נוכל תמיד להגדיר למספר סלקטורים את אותו עיצוב על ידי שימוש בפסיקים:
table, p {
background-color: yellow;
}
כאן למשל, הגדרנו לכל הטבלאות (table) ולכל הפסקאות (p) צבע רקע צהובאז איזה סלקטורים יש לנו?
חשוב תמיד לדעת ש-css מספק לנו מספר סלקטורים חזקים מאוד שמאפשרים לנו לבחור כמעט כל אלמנט בדף מבלי לשנות את קוד ה-html.מפתחים רבים מכירים מספר קטן של סלקטורים ומשנים את קוד ה-html כדי שיתאים לגיליונות העיצוב שכתבו.
נסקור כאן את כל סוגי הסלקטורים ב- css2.
Universal Selector
הסלקטור הכללי מאפשר לנו לפנות לכל התגיות בדף, כלומר להחיל עיצוב על כל האלמנטים בדף.* {
background-color: red;
}
כאן צבענו את כל האלמנטים בדף בצבע רקע אדום.ישנם שימושים נוספים לסלקטור הכללי, נראה אותם בהמשך.
Descendant Selector
כדי להבין כיצד עובד ה- Descendant Selector (סלקטור צאצאים) אנו צריכים להבין את היחסים המשפחתיים בין תגיות html.נסתכל על הטבלה הבאה:
<table>
<tr>
<td>
<a href="http://my_site.co.il">Click Me!</a>
</td>
<td>
<a href="http://my_site.co.il">Click Me!</a>
</td>
</tr>
<tr>
<td>
<a href="http://my_site.co.il">Click Me!</a>
</td>
<td>
<a href="http://my_site.co.il">Click Me!</a>
</td>
</tr>
</table>
ב-css ישנם שלושה סוגי יחסים:- אב ובן
- אחים
- אב-קדמון וצאצא
בטבלה למעלה אנחנו רואים יחסי אב - ובן בין התגית table לבין התגית tr, כלומר, tr הוא הבן של table ו table הוא האב של tr.
כל תגיות ה-tr נחשבות אחיות, מכיוון שאף אחת לא מוכלת בתוך השנייה ולכולן אותו אב. באותה מידה כל תגיות ה-td הנמצאות באותה שורה גם כן נחשבות אחיות.
התגית a נחשבת צאצאית של table, אך שימו לב, היא נחשבת גם צאצאית ל-td (גם tr נחשבת לצאצאית של table, כמובן). רמת הבן והלאה נחשבת לצאצא.
מצד שני, התגית table נחשבת לאב-קדמון של התגית a כמו גם התגית td.
עכשיו כשהבנו מהם היחסים בין תגיות html, קל לנו להבין כיצד עובד ה Descendant Selector - הוא פשוט בוחר צאצאים, למשל:
table a {
background-color: green;
}
כאן אנחנו בוחרים את כל הלינקים שנמצאים בתוך טבלה, איפשהו בתוך איזושהי טבלה, או במילים אחרות, את כל הלינקים שהם צאצאים של table.
כל מה שאנחנו צריכים להוסיף כדי להשתמש בסלקטור הוא רווח. נוסיף רווח בין שני סלקטורים אחרים כדי ליצור סלקטור צאצאים.
הנה הקוד המלא:
<!DOCTYPE html>
<html>
<head>
<title>Anscestor Selector</title>
<style type="text/css">
table a {
background-color: green;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<!-- This a tag will have green background -->
<a href="http://my_site.co.il">Click Me!</a>
</td>
<td>
<!-- This one also -->
<a href="http://my_site.co.il">Click Me!</a>
</td>
</tr>
<tr>
<td>
<!-- This one also -->
<a href="http://my_site.co.il">Click Me!</a>
</td>
<td>
<!-- This one also -->
<a href="http://my_site.co.il">Click Me!</a>
</td>
</tr>
</table>
</body>
</html>
שימו לב שבכל שלב נוכל לשלב מספר סלקטורים עם פסיקים:table a, p, div p span {
background-color: green;
}
- table a - כל הלינקים שהם צאצאים של table.
- p - כל הפיסקאות.
- div p span - כל ה- spans שהם צאצאים של p שהם צאצאים של div.
div * a {
color: red;
}
הסלקטור הזה, למשל, יצבע את הטקסט בכל הלינקים שהם לפחות נכדים (צאצאים מדור שני) של התגית div.במילים אחרות אפשר להגיד ש-a חייב להיות צאצא של איזושהי תגית (כוכבית), והיא חייבת להיות צאצאית ל div - כלומר חייבת להיות איזושהי תגית בין a ל div בהיררכיה.
בפוסט הבא נראה סלקטורים שימושיים נוספים..
