מדריך למתחילים: CSS
בעקבות דיון קצרצר שהתנהל בפוסט הזה חשבתי שאולי כדאי לעשות איזושהי סקירה קצרה על CSS - מה זה בעצם וכמה דוגמאות, יהיה חנוני - תישארו!
במידה ולא קראתם את רשימת הקיצורים והיעברותים שלי (כי עם כל הכבוד, זה ממש מעיק כל פעם לעבור בין שפות כדי לכתוב css או html או משהו בסגנון הזה) אני מציע לקפוץ לרגע לקרוא את הפוסט הזה, טוב - את ההתחלה שלו לפחות, כדי לא להסתכל על המסך ולהגיד ווטפ?! (שזה WTF בעברית).
נתחיל.
כמה עובדות שתמיד (!) החסירו שינה מעינכם על סיאסאס:
1. CSS אלו ראשי תיבות של Cascading Style Sheets (שזה "גליונות סגנון מדורגים" על פי גוגל טרנסלייט)
2. סגנונות התווספו להטמל 4 כדי לפתור בעיות.
3. הסגנונות השונים מגדירים איך להציג אלמנטים בהטמל.
4. גליונות עיצוב חיצוניים יכולים לחסוך ים עבודה.
5. גליונות עיצוב חיצוניים מאוכסנים בקבצי סיאסאס.
6. כל הדפדפנים תומכים בסיאסאס.
למעשה, תגיות וגליונות עיצוב פתרו הרבה בעיות (או אחת ממש גדולה). הטמל מעולם לא נועד להכיל תגיות עיצוב, הוא נועד להגדיר ולהציג את התוכן של המסמך. ברגע שנכנסו לפעולה תגיות עיצוב כמו <פונט> או הגדרות צבעים (החל מהטמל 3.2) ניתן היה לזהות עליה משמעותית בהתאבדויות בקרב מפתחי אתרי אינטרנט. כאשר היו בונים אתר אינטרנט גדול היה צורך להגדיר בכל עמוד תגיות עיצוב שונות, דבר שהפך את התהליך לסיזיפי, ארוך מאוד, יקר מאוד וארוך (כבר אמרתי שזה לקח מלא זמן?).
ואז, קונסורציום הרשת הכלל עולמית (W3C, ויש כזה אפילו בישראל) יצר את קובץ הסיאסאס (*מוזיקת מלאכים עם הללויה מרגש ברקע*). החל מהטמל 4 כל תגיות ואלמנטים עיצוביים הוסרו מעמוד ההטמל והועברו לקובץ עיצוב חיצוני.
סיאסאס מגדיר איך יוצגו אלמנטים בהטמל. סגנונות עיצוב נשמרים בקובץ סיאסאס חיצוני, כאשר בקובץ ההטמל קיימת הפנייה לקובץ הזה. מה שיוצר אחידות עיצובים בכל האתר ואפשרות לשנות תצוגה של אלמנט בצורה גורפת בכל האתר באמצעות שינוי של קובץ אחד. כמה נפלא!
לסיאסאס יש תחברים מעט שונה מהטמל. סגנון עיצוב מורכב משני חלקים עיקריים: שם תג (או: selector) ולפחות הגדרה אחת. לרוב, שם תג או האלמנט ההטמלי שנרצה לערוך. לכל הגדרה קיים מאפיין וערך כאשר המאפיין מתייחס לתכונה מסויימת שאנו רוצים לשנות.
כדי לנסות ולהסביר בצורה ברורה יותר, אשתמש בדוגמא:
h1 {color:red; text-align:center; font-size:12px;}
אז מה יש לנו כאן?
h1 - שם תג
{color:red; text-align:center; font-size:12px;} - ההגדרות, בתוך סוגריים מסולסלים, כי ככה זה.
אגב, אני בדרך כלל מסדר את קבצי הסיאסאס שלי בצורה שתהיה יותר נוחה וקריאה:
h1 {
color:red;
text-align:center;
font-size:12px;
}
ID ו-Class
בנוסף להגדרות של אלמנטים בהטמל, סיאסאס מאפשר התאמה אישית של תגיות ID ותגיות Class.
ID
תגית ID נועדה להגדיר אלמנט יחיד וספציפי, והסימון שלו הוא סולמית (#). והנה הדוגמא:
#radiogaga1 {
color:pink;
text-align:right;
font-size:24px;
}
אגב, לא מומלץ לתת שמות ID שמתחילים עם מספרים, פיירפוקס לא יודע איך להתמודד עם זה.
Class
תגית Class, להבדיל מתגית ID מגדירה עיצוב לקבוצה של אלמנטים, אפשר להשתמש בתגית הזו למספר רב של אלמנטים שונים הדורשים את אותה הגדרה. גם לתגית זו יש סימן ייחודי - נקודה (.), והנה דוגמא:
.right {text-align:right;}
אפשר להתחכם עוד יותר ולהגדיר תגיות שם שיושפעו מ-Class. בדוגמא הזו ניתן לראות איך כל פסקה עם Class="right" תתיישר לימין:
p.right {text-align:right;}
עכשיו, זוכרים את השטויות שפיירפוקס עושה עם מספרים ב-ID? אז אקספלורר עושה את אותו הדבר, רק עם Class. ז'תומרת - אל תתנו שמות Class שמתחילים בספרות כי זה לא יעבוד באקספלורר.
איך מטמיעים סיאסאס?
קיימות שלוש דרכים להכניס גליון עיצוב:
1. גליון עיצוב חיצוני (כן!)
2. גליון עיצוב פנימי (רק אם חייבים)
3. הגדרה בכל שורה (לא, למען השם, לא!)
אבל ברצינות, לכל צורת הטמעה יש סיבה והיא מתאימה לדברים שונים.
כך למשל בגליון עיצוב חיצוני נשתמש כשיש אתר עם הרבה מאוד עמודים. עם קובץ עיצוב חיצוני ניתן לשנות את כולם בבת אחת על ידי שינוי של קובץ העיצוב החיצוני בלבד. בכל עמוד חייבת להיות הפניה לקובץ הסיאסאס הנדרש. שימו לב:
<head> <link rel="stylesheet" type="text/css" href="radiogaga.css" /> </head>
את קובץ העיצוב עצמו ניתן לכתוב בכתבן פשוט ויש לשמור אותו בסיומת .css, קאםיש?
דוגמא לקובץ כזה אפשר לראות ממש כאן:
hr {color:pink;}
p {margin-right:20px;}
body {background-image:url("images/background.png");}
גם כאן יש לנו חוסר תאימות: אם תשאירו רווחים בערכים שלכם (כלומר תכתבו 20 px במקום 20px) תוכלו לראות את זה נפלא באקספלורר אבל פיירפוקס יתעלם מזה. כרום ואקספלורר מתעלמים לחלוטין אם לא מגדירים את סוג היחידה (כלומר מוותרים על ה-px או ה-em וכו').
במידה ויש לנו עמוד שלו צריך להיות סגנון ייחודי נשתמש בגליון עיצוב פנימי. הנה דוגמא:
<style type="text/css">
hr {color:pink;}
p {margin-left:28px;}
body {background-image:url("images/diffrentbackground.png");}
</style>
כשמשתמשים בהגדרת עיצוב בכל שורה חשוב לזכור שזה עלול ליצור הרבה מאוד עבודה נוספת. אני ממליץ להשתמש בצורה ההטמעה הזו מעט ככל האפשר.
כדי להוסיף הגדרה לכל שורה, אנחנו למעשה מוסיפים הגדרות עיצוב ישירות על האלמנט עצמו:
<p style="color:pink;margin-right:20px">פסקה מגניבה</p>
אוקיי, זה היה הבסיס. אם יש לכם שאלות אתם מוזמנים להגיב כאן, אני משתדל לענות כמה שיותר מהר (באמת!).
כמו תמיד, היה נפלא. נתראה 
18 תגובות
-
-
יוניקית
תגובה לתגובה!אהבתי את ההומור.. והבהירות.
ברשותך אם אפשר שאלה.. איך הכי נכון להגדיר ב- css
את תכונות האתר כאתר הכתוב בעברית?הכוונה שלי - האם אמורים להגדיר את הכיוון עבור כל אלמנט בנפרד?
או שיש צורה מרכזית אחת לעשות זאת לגבי כל דפי האתר?תודה.
(ויישר כוח!
-
אוראל אסיה
תגובה לתגובה!תודה יוניקית!
לשאלתך, בד"כ לאתרים שהשפה שלהם היא מימין לשמאל (כלומר - עברית וערבית
) כדאי להכניס ממש בתחילת ה-CSS את השורה הבאה (מומלץ תחת הגדרת הhtml הראשית):
direction: rtl;שבעצם מגדיר את כל הכיוון של התוכן מימין לשמאל. בד"כ זה משפיע על כל הטקסט באתר שיהיה כתוב מיושר לימין. אפשר, כמובן, לעקוף את זה באמצעות הגדרה ספציפית לכל div.
נתראה!
-
יוניקית
תגובה לתגובה!מכיר את זה, שכשמתחילים ללמוד תחום חדש..
מילים שנאמרות כבדרך אגב שולחות אותך לשעות של חקירה?ובכן.. "ממש בתחילת ה- CSS... מומלץ תחת הגדרת ה- html הראשית"
אני מניחה ששמת לב ששאלתי היכן נכון "לתקוע" את הצהרת ה- rtl
באופן שכ-ל (!) דפי האתר יושפעו ממנו(אפשר גם בכל ראש דף html - אבל אם יש אתר עם הרבה דפים, זה קצת מפספס את הפואנטה של ה- CSSׂ)
ואני גם מניחה שאתה אכן מתכוון שיש הגדרת html ראשית
בת-ו-ך מסמך ה- CSS.ועכשיו אני הולכת לבדוק מה זה בכלל הגדרת html ראשית
בתוך מסמך CSS. כי עד הרגע לא ידעתי בכלל שיש דבר כזה
תודה!
(שוב)-
אוראל אסיה
תגובה לתגובה!אז ככה,
אם אנחנו מפנים את כל העמודים באתר שלנו (נגיד, באמצעות ההאדר) לקובץ CSS אחד, בקובץ הזה נכניס תג HTML ראשי (לא חייבים אותו, אבל לדעתי זה עושה סדר):
html {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}אגב, כדי לראות את זה בצורה טובה אני ממליץ להעתיק לכתבן או משהו וליישר לשמאל
מה שיש לנו כאן בעצם יבטל את הפאדינג והמרג'ין האוטומטים שיש בדפדפנים ויצמיד את העמוד ללמעלה ולצדדים. אפשר להוסיף גם auto למרג'ין, מיד אחרי ה-0 ואז האתר גם יתמרכז.
בתג הזה אפשר להכניס את ה-rtl.
מקווה שעזרתי וחסכתי חיפושים
-
יוניקית
איזה כיפי אתה, שאתה עוזר ככה..
ניסיתי וזה עבד!
המון תודה.
-
-
-
-
-
-
-
דרור וקנין
תגובה לתגובה!היי, אז מתי בעצם אתה מתחיל להסביר כיצד עושים CSS לתבנית וורדפרס?
תודה על הכל דרך אגב... -
-
-
-
-
-
אוראל אסיה
תגובה לתגובה!מה אתה מחמיא לעצמך? זה לא רק בשבילך!
חשבתי שאולי כדאי לכתוב כמה מילים על סיאסאס כדי לתת אפשרות גם למי שלא מכיר ויודע -
-
-
-
