28 בספט׳ 2012

מבוא - CSS - חלק 2

עוד רגע לפני שממשיכים ליצירת עמודי css אמיתיים, חשוב שנבין כיצד css עובד.

CSS - Cascading Style Sheets, למה Cascading?

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

כדי להבין מדוע גליונות css נקראים "מדורגים" אנחנו צריכים קודם כל להבין איפה אפשר לכתוב קוד css.
ישנן שלוש אפשרויות: 

Inline - בתוך השורה

הדרך הכי פשוטה לכתיבת קוד css היא באמצעות המאפיין style. 
כמעט לכל התגיות ב body יש את המאפיין style:

<p style="font-size: 1.2em; font-weight: bolder">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
בדוגמה למעלה אנחנו מדגישים את תוכן התגית p ומשנים את גודל הגופן.
שימו לב שהעיצוב נכתב ברמת התגית, כלומר, ממש בתוך התגית עצמה. כל מה שמופיע כערך של style יהיה עיצוב css.

Internal - בתוך הדף

דרך נוספת, יעילה קצת יותר, תהיה כתיבת הגדרות css ברמת העמוד, כדי לעשות זאת, נוסיף את התגית style ובתוכה נרשום קוד css:
<!DOCTYPE html>
<html>
 <head>
  <title>CSS - Cascading Style Sheets</title>

  <style type="text/css">
  /*
   CSS Styling Goes Here
  */
  </style>
  
 </head>
 <body>
  <!-- HTML BODY CONTENT -->
 </body>
</html>

כפי שאתם רואים, את התגית style נוסיף תחת ה-header והקוד שבתוכה יחול על התגיות באותו הדף. 

ישנה אפשרות נוספת לשימוש ב- Internal css - על ידי ייבוא קוד css מקובץ חיצוני באמצעות הפקודה import@. 
נסתכל על מבנה התיקיות הבא:
 

אם למשל נרצה לייבא את קוד css מ- internal.css ל- index.html: נרשום בקובץ index.html:
<!DOCTYPE html>
<html>
 <head>
  <title>Internal CSS</title>
  <style type="text/css">

   @import url('style/internal.css');

   /* Rest of CSS Styles */
   
  </style>
 </head>
 <body>
 <!-- HTML BODY CONTENT -->
 </body>
</html>

עכשיו, הקוד המופיע ב internal.css יועבר ל index.html - ויתנהג כ- css פנימי לכל דבר. 
import@ מאפשר לנו לייבא פקודות css בהתאם ללקוח, או לתוכנה שקוראת את גיליונות העיצוב. 
למשל: 
<style type="text/css">
    @import url('style/mobiles.css') handheld;
    @import url('style/printers.css') printer;
</style>

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

ובמידה ונשלח את הדף להדפסה, יופיע הדף מעוצב באמצעות הקובץ printers.css .

External - בדף אחר 

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

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

בכל אופן כדי להכניס עיצוב css external לדף, נשתמש בתגית link אותה נוסיף גם כן לתגית ה-header:

<!DOCTYPE html>
<html>
 <head>
  <title>External CSS Example</title>
  <link rel="stylesheet" type="text/css" href="style/external.css"/>
 </head>
 <body>
  <!-- BODY HTML CODE -->
 </body>
</html>
בדוגמה למעלה, קישרנו קובץ חיצוני external.css לדף הנוכחי.

אוקי, אז איך זה קשור ל"מדורג"? 

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

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

ובכן, הגדרתי לאותה תגית שלושה צבעי רקע שונים - אחד inline, אחד internal ואחד external.
מה יהיה צבע הרקע של התגית בסופו של דבר? צהוב.

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

חילקנו את סוגי העיצובים לשלוש רמות מכיוון שלכל אחת מהן יש "חוזק" שונה, כלומר, ככל שההגדרה יותר ספציפית לתגית מסוימת, כך גדלים הסיכויים שלה "לנצח".
מכיוון שאת המאפיין style אנו משייכים לתגית אחת ויחידה, הוא הראשון שיקבע איזה ערך תקבל התגית.
במידה וקיים קונפליקט בין עיצוב internal לבין עיצוב external, כמובן שהעיצוב המוגדר ב-internal "ינצח" מכיוון שזה מוגדר באותו עמוד בו נמצאת התגית בעוד האחר מוגדר בכלל בדף חיצוני אחר (לא כולל import@) ומהווה חוקי עיצוב כלליים יותר לגבי האתר.

נוכל לדרג את שלושת הרמות כך:

  1. Inline - הכי חזק
  2. Internal
  3. External - הכי חלש
 כך ניתן לראות שחוקי העיצוב מדורגים בכמה רמות, כאשר לכל רמה השפעה שונה (בחוזקה) על עיצוב הדף.

אבל רגע...  


עדיין לא פתרנו את כל הבעיות! מה קורה אם יש קונפליקט בין שני עיצובים באותה רמה?
מה אם למשל הגדרנו שני צבעי רקע שונים ברמת ה-internal?

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

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

לחופרים

נגענו בכמה סוגיות חשובות, אחת מהן היא השימוש ב- import@ מול התגית link - לא דנו בכל ההבדלים. תוכלו למצוא חומר נוסף כאן:
http://webdesign.about.com/od/beginningcss/f/css_import_link.htm
וכאן:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/ 

פורסם על ידי ב-
תוויות: , , ,

אין תגובות:

הוסף רשומת תגובה

הירשם ל- תגובות לפרסום (Atom)