קצת על CSS

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

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

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

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

הבורר הפשוט – selector

למעשה, כל תגית html יכולה לקבל הגדרות עיצוב בקובץ ה CSS. כך למשל, אם נרצה להגדיר עבור פיסקה צבע טקסט אדום נשתמש ב:

p {color:red;}

התוצאה – כל מקטע טקסט שיעטף בתגית הפיסקה ייצבע ישירות בצבע אדום.

בורר המחלקה – class selector

בורר המחלקה מסומן בקוד ה CSS בעזרת תו הנקודה (.) והוא מאפשר ליצור מחלקות חדשות ולשרשר אותן למחלקות קיימות.

CODE.text {color:blue;}

יאפשר לנו להעניק לטקסט באובייקט קוד את הצבע הכחול כך:

The Code

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

.stam {color:green}

ניתן להפעיל בצורות הבאות (ועוד רבות אחרות):

hello world
hello world

בורר האובייקטים – ID Selectors

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

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

#menu {  float: right; width: 700px; margin: 0 9px 0 0; overflow: hidden; background: #73a0c5; }

על מנת לקרוא לעיצוב של אובייקט, נשתמש ב ID= במקום ב class= כך:

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

#menu ul { list-style: none;  }
#menu li { float: right; list-style: none;   }
#menu a { float: none;  color: #E5A153;   }

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

בורר תלוי הקשר
לינק בדף html מיוצג בקוד ה css בעזרת הסימון a (הלינק תחום בתגית a למעשה). אבל ללינק, יש מספר מצבים. בעזרת הבורר תלוי ההקשר (מסומן בעזרת נקודותיים) ניתן להגדיר התנהגות שונה לכל אחת מההתנהגויות של האובייקט.

a {color:blue;}
a:hover {color:red;}
a:visited {color:purple;}

בדוגמה לעיל, הגדרתי את הצבע של הלינק ככחול, אבל גם הגדרתי שבמעבר עכבר (hover) צבע הלינק ישתנה לאדום ושאם מדובר בלינק שכבר ביקרתי בו בעבר, הצבע שלו יהיה סגול.

תורשה

אחד היתרונות הגדולים בעיצוב בעזרת css היא היכולת להשתמש בתורשה. אחת הדוגמאות הטובות ביותר לכך היא ערכת העיצוב sandbox שמכילה מספר קבצי css שביחד מרכיבים את העיצוב הכולל. התורשה מצייתת לשני כללים די בסיסיים:
1. האחרון קובע – אם עיצבנו את אותו האובייקט מספר פעמים הפעם האחרונה שנגענו בעיצוב היא הקובעת. כך למשל, אם הגדרנו עיצוב פיסקה בקובץ ה css אבל גם הכנסנו עיצוב ספציפי לפיסקה בתוך ה html, הרי שהעיצוב האחרון שיתפוס הוא העיצוב בתוך ה html.

2. אבות אכלו בוסר – הכלל הזה אומר שכל אובייקט יורש את העיצוב שלו מהרמה שמעליו אלא אם הוגדר לו עיצוב פרטני. כך למשל, אם בדוגמה הקודמת של עיצוב הלינק לא הייתי מגדיר את a:hover ו a:visited הרי שהם היו מתנהגים בדיוק כמו a ומציגים טקסט כחול, טעות שעשיתי בעצמי מספר פעמים ולא ממש הבנתי מדוע הלינק לא מתנהג אחרת.

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