Javascript - Debugging with Firebug

מה זאת אומרת Debugging ולמה אני צריך את זה?  

Debugging הוא למעשה תהליך תיקון התקלות בקוד.  

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

לפעמים המצבים האלו נובעים מהשגיאות שלנו כמפתחים ולפעמים ממצבים לא צפויים כמו קלט שגוי מהמשתמש.

אתם יכולים לחשוב על תהליך הפיתוח כבנוי משלבים (מזכיר לכם משהו?) - 

1. כותבים קוד
2. מריצים 
1. הקוד לא עובד: עוברים ל-3
2. הקוד עובד: עוברים ל-1 
3. מנסים לברר למה
4. מקללים (לא חובה)
5. מוצאים את השגיאה
6. מתקנים
7. חוזרים ל-2 

ניקח למשל תוכנית קצרה ב javascript המקבלת מספר מהמשתמש ומעלה את המספר בריבוע:

var input = parseFloat(prompt("Input please (any number):", ""));

alert(input * input);

על המסך תוצג ההודעה המקבלת קלט מהמשתמש, אבל הנה הבעיה, אנחנו יודעים ש prompt מקבלת כל מחרוזת מהמשתמש - למשל:

 קבלת ערך לא צפוי מהמשתמש

במידה והמשתמש יאשר את המחרוזת, הפונקציה parseFloat תחזיר את הערך המיוחד NaN או Not a Number שבסופו של דבר ישמר במשתנה input. 

אחר כך, כשנריץ את הביטוי input * input, נקבל תוצאה לא צפויה. 

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

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

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

ישנם קטעי קוד בהם קשה יותר לאתר באגים - למשל לולאות, או רקורסיות (בלתי אפשרי). 

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

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

אפשרות נוספת היא שימוש בפונקציה ()alert, אחת התכונות החשובות של alert היא עצירת הקוד, לכן נוכל להדפיס ב alert כל ערך משתנה שנרצה ברגע נתון ו"להגיד" לקוד להמתין: 

var i = 1000;
var input = parseFloat(prompt("Enter num",""));

while (i > 0) {
 input = input / 2;

 // Stop the loop at the 567th iteration
 // and check the value of input
 if (i == 433) {
  alert(input); // Wait a second, checking input
 }

 i--;
}

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

כלי נוסף, נחמד יותר הוא ה Firebug. 

Firebug ונהנים

Firebug, למי שעדיין לא מכיר, הוא תוסף לדפדפן Firefox המספק לנו אוסף כלים עשיר (ונפלא) לתיקון תקלות בקוד לקוח.
Firebug הפך לאחד הכלים (אם לא ה..) הכי פופולארים בקרב מפתחי client מאחר והוא הראשון שסיפק את האפשרות ל debugging בתוך הדפדפן והפך פיתוח ב Javascript למזעזע הרבה פחות.

ההצלחה של Firebug לא נעלמה מעיניהן של מפתחות הדפדפנים הגדולות (Microsoft, Apple, Google, Opera) שהוסיפו כלים דומים מובנים (Built-in) בתוך הדפדפן (תוכלו לראות על ידי לחיצה על F12) .

כדי להשתמש ב Firebug המקורי, אתם צריכים להצטייד בדפדפן Firefox  ולהתקין את התוסף מכאן.

ישנם שני כלים חשובים בכל מה שנוגע ל javascript -

ה- Console

כלי מדהים ושימושי מאוד ללמידה.
ה Console מאפשר לכם להריץ פקודות javascript מתוך הדפדפן ובשידור חי! כלומר, כל פקודה שתכניסו תתבצע באותו רגע. ואם זה לא מספיק, ה Console גם ידאג לעזור לכם ולהשלים פקודות חלקיות.

לא מאמינים? לחצו על הלשונית Console ועל הקישור enable כדי לאפשר את השימוש בו:

אפשר את השימוש ב Console

הקישו al בתיבת הקלט ותראו מה קורה:

Firebug - שימוש בהשלמה אוטומטית

לחצו על המקש tab כדי להשלים את המילה והריצו כל פקודה שתרצו:

שימוש ב- Console (לחץ להגדלה)

מיד לאחר הרצת השורה (הקשה על Enter), יופיע חלון ה prompt - אליו נוכל להכניס קלט.
ה- Console עוזר לנו אפילו להציג ערכי משתנים.

אחרי הקשת ערך בחלון ה prompt, הכניסו ל Console רק את שם המשתנה והקישו Enter:

השורה האדומה מציגה את ערכו של המשתנה userInput.
אם אתם רוצים להריץ כמה שורות קוד ביחד, למשל לולאה, תוכלו להשתמש ב Command Editor, למטה מצד ימין:

הכניסו כמה פקודות שתרצו ולחצו על Run:

Firebug - Command Editor

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

ה - Debugger

אז עכשיו לענייננו, אם אנחנו לא רוצים להתעסק עם ה console אבל כן רוצים להבין מדוע הקוד שלנו לא עובד, נוכל להיעזר ב Debugger. הכלי הזה מאפשר לנו לסמן שורה בקוד, ורגע לפני שהשורה תתבצע, Firebug ידאג לעצור את התוכנית כדי שנוכל לדעת מה קורה באותו רגע. בדיוק מה שרצינו.

 כדי להשתמש ב debugger, פתחו את הדף בו נמצא הקוד ולחצו על לשונית ה- Script:

Firebug - עבודה עם ה Debugger

מצאו את השורה בה תרצו לעצור וסמנו אותה עם Break point (הנקודה שבה אנחנו עוצרים את הריצה השוטפת של הקוד) על ידי לחיצה על מספר השורה (בצד שמאל):

Firebug - הוספת Breakpoint

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

Firebug, לחצו על התמונה להגדלה

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

העבודה עם ה debugger מאוד פשוטה (עם מקשי מקלדת):

• F10 - יריץ את השורה ויעצור לפני השורה הבאה
• F11 - במידה והשורה הנוכחית קוראת לפונקציה, F11 יעביר את הסימון לתוך הפונקציה (להבדיל מ F10)
• F8 - ימשיך להריץ את הסקריפט (ללא עצירה בכל שורה) עד ל Breakpoint הבא
• Shift+F11 - יוצא מהפונקציה הנוכחית (במידה ואנחנו נמצאים באחת)

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

תיבת ה watch - לחצו עליה כדי להוסיף ביטוי למעקב

כאן למשל אני בודק אם ערכו של i גדול מ 2 בכל רגע נתון:

Firebug מציע לנו את כל זה (בחינם!) ועוד יותר. הדרך הכי טובה להכיר את הכלי היא פשוט לשחק איתו. מבטיח שזה ישתלם. 

CSS Sprites

אז יכול להיות ששמעתם את השם פעם או פעמיים, אבל לא הבנתם מה זה אומר ואיך זה קשור לעיצוב css.

sprite זו טכניקה לייעול טעינת תמונות רקע ללחצנים וכפתורים.

לפני שנכיר את הטכניקה אנחנו צריכים להכיר את המאפיין background ב css.

 

CSS - Background

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

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

השימוש במאפייני הרקע פשוט מאוד - הנה כל המאפיינים הקשורים לcss:

• background-color - קביעת צבע רקע
• background-image - קביעת תמונת רקע
• background-repeat - שכפול תמונת הרקע למילוי האלמנט
• background-attachment - התנהגות תמונת רקע
• background-position - מיקום הרקע ביחד לאלמנט

כמה מילים על כל אחד מהמאפיינים -
background-color - מגדיר כמובן את צבע הרקע של האלמנט. נוכל להגדיר צבע רקע ותמונת רקע ביחד - צבע הרקע יופיע במידה ותמונת הרקע אינה זמינה‎ וישלים את האזורים שתמונת הרקע אינה מכסה.

background-image מגדיר את תמונת הרקע של האלמנט, מאפיין זה מקבל כתובת לתמונה (כתובת מקומית או באינטרנט)

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

div {
    width: 200px;
    height: 200px;
    border: solid 1px black;
    margin: 20px auto;
    background-image: url('bg_rep.jpg');
}


#repX {
    background-repeat: repeat-x;
}

#repY {
    background-repeat: repeat-y;
}

#no-repeat {
    background-repeat:no-repeat;
}

background-attachment קובע כיצד יש להציג את תמונת הרקע - ניתן להגדיר את מיקומה של תמונת הרקע במיקום קבוע ביחס לחלון הדפדפן כך כשנגלול את החלון האלמנט המכיל את התמונה ישמש כמעין חלון לתמונה (הדרך הכי טובה להבין היא לנסות ולהשתמש במאפיין זה)

background-position קובע היכן תהיה ממוקמת התמונה ביחס לפינה השמאלית העליונה של האלמנט (מרחק x ומרחק y ביחס לאותה נקודה). - מאפיין זה הוא המפתח להבנת נושא ה sprites בהמשך ננצל את התכונה הזו כדי לייעל את העבודה עם רקעים.

כדי לעבוד עם תמונת רקע, נציין קואורדינטות - כלומר מרחק אופקי ואנכי מהנקודה השמאלית העליונה של האלמנט בעל תמונת הרקע (x ו y), למשל (עם שינוי בקוד הקודם):

#no-repeat {
    background-repeat:no-repeat;
    background-position: 40px 100px;
}

יביא לתוצאה הבאה (המידות להמחשה):

ניתן לשלב את כל מאפייני הרקע על ידי שימוש בתכונה background, בצורה הזו:

div {
    background: #D8DEED url('bg_rep.jpg') no-repeat fixed 10px 20px;
}

Sprite

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

input[type="button"] {
    background: transparent url('glossy_blue_button.png') no-repeat;
    width: 250px;
    height: 250px;
}

input[type="button"]:hover {
    background-image: url('glossy_red_button.png');
}

למדנו כבר לבנות משהו כזה - באמצעות הסלקטור המתאים ובאמצעות background-image - אבל לא למדנו מה הבעיה בשימוש בשיטה הזו.

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

ככל הנראה, בקשות http מאטות את טעינת התמונות - מה קורה כשיש לנו המון תמונות קטנות - בעת מעבר עכבר, בעת לחיצה ולעשרות קישורים ולחצנים שונים באותו הדף?

אם נשתמש בשיטה הקונבנציונאלית לשימוש בתמונות רקע, נשלם ברוחב פס ובזמן טעינה.

דרך אחרת לנצל את התכונה background-position תהיה לחבר את כל התמונות הקטנות, לתמונה אחת גדולה ולשנות את מיקום תמונת הרקע עבור כל אלמנט, הנה כמה דוגמאות:

כן כן, אלה דוגמאות אמיתיות (של Apple, Amazon ו Youtube).

את השימוש ב Sprite עושים בשני שלבים:

1. משנים את הגודל של הלחצנים או האלמנטים עם תמונות הרקע
2. משחקים עם background-position כך שיוצג החלק המתאים בתמונת הרקע

נחזור לדוגמה עם שני הלחצנים - אדום וכחול - עכשיו, במקום להשתמש בשתי תמונות נשתמש בתמונה אחת (הרקע הוא שקוף ולא כהה כמו בתמונה למטה):

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

input[type="button"] {
    background: transparent url('all.png') no-repeat 0 0;
    width: 250px;
    height: 250px;
}

input[type="button"]:hover {
    background-position: 0 -260px;
}

הקוד למעלה יביא לנו את אותה התוצאה שקיבלנו בדוגמה הראשונה ויבצע אותה בצורה הרבה יותר יעילה ומהירה.

על ידי שימוש בטכניקת ה Sprites אנחנו יכולים לחסוך אלפי קריאות http שהיו נשלחות לשרת אלמלא היינו מורידים את כל תמונות הרקע ביחד.

הנה הדוגמה במאמר זה:

http://dl.dropbox.com/u/16278595/webmaster_files/css/sprite_hover.html

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

http://csssprites.com/
http://spritegen.website-performance.org/
http://www.spritebox.net/

CSS -Selectors - 4, Pseudo & Attribute Selectors

כמעט כיסינו את כל הסלקטורים, חוץ מהסלקטורים הכי מעניינים, הראשון שבהם הוא ה

Attribute Selector

למה להשתמש ב class ו- id כשאנחנו יכולים לבחור על פי מאפיינים קיימים?

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

<!DOCTYPE html>
<html>
<head>
    <title>Selecting Specific Input Types</title>
    <style type="text/css">
        * {
            font-family: Verdana, serif;
            font-size: 12px;
        }
        input.txt {
            background-color: #EEF1E2;
            font-size: 0.9em;
        }

        input.btn {
            background-color: #ADBEDA;
            height: 30px;
        }
    </style>
</head>
<body>
    <form action="" method="post">
        <label>
            First Name: <input type="text" name="fname" class="txt"/>
        </label>
        <br/>
        <label>
            Last Name: <input type="text" name="lname" class="txt"/>
        </label>
        <br/>
        Registration Type: 
        <label><input type="radio" name="regType" value="0"/> Basic Registration</label>
        <label><input type="radio" name="regType" value="1"/> Pro Membership</label>
        <br/><br/>
        <input type="button" id="doSomething" value="Click Me!" class="btn"/>
    </form>
</body>
</html>

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

כדי לזהות תגיות לפי מאפיינים, נוכל להשתמש בסלקטור המתאים, ה- Attribute Selector: השימוש בו קל – נוסיף סוגריים מרובעות ללא רווחים (אחרת זה לא עובד) לסלקטור אחר ובהן נרשום את שם המאפיין = ערך.
הנה פיתרון אחר לאותה בעיה (בנוסף נסיר את המאפיין class מכל תגיות ה-input בקוד html):

input[type="text"] {
    background-color: #EEF1E2;
    font-size: 0.9em;
}

input[type="button"] {
    background-color: #ADBEDA;
    height: 30px;
}

נוכל להשתמש ב attribute selector כדי לבחור יותר ממאפיין אחד, הקוד הבא למשל בוחר את כל האלמנטים (כוכבית - *) המכילים את הערכים lang=he ו dir=rtl:

*[lang="he"][dir="rtl"] {/* ... */}

שני האלמנטים הראשונים (p ו h2) יבחרו על ידי הסלקטור למעלה:

<!-- Works for -->
<p lang="he" dir="rtl"></p>
<h2 dir="rtl" lang="he" class="main"></h2>

<!-- Doesn't work for -->
<p lang="he" dir="rtl"></p>
<div lang="he"></div>

אפשר לבחור אלמנטים רק על פי מאפיינים (בלי ערכים) הסלקטור הבא למשל, בוחר את כל ה spanים שנמצאים תחת p עם class=def ומגדירים את הערך title

p > span[title] {
 text-decoration: underline;
 color: #5C1212;
 font-weight: bolder;
 border-bottom: solid 2px #5C1212;
}

יש עוד כמה דברים נחמדים שתוכלו לעשות עם ה attribute selector, תוכלו לקרוא עליהם כאן.

Pseudo Classes Selectors

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

שאלת המפתח ליצירת סלקטור היא מה אנחנו יודעים על אלמנט מסוים?
אם נסקור לרגע את כל הסלקטורים עליהם דיברנו עד עכשיו נוכל לראות שכל אחד מהם משתמש במידע שאפשר לדלות מקוד הhtml:

• Type Selector - בוחרים אלמנט לפי הסוג שלו, כלומר, סוג התגית.
• Descendant,  First Child & Adjacent Sibling Selectors - בוחרים אלמנט לפי ה document tree, המיקום ההיררכי שלו בדף (בן של, אח של, צאצא של).
• Attributes Selectors - כולל class ו id – בוחרים אלמנט לפי מאפיין html

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

אם נביט בתוצאות החיפוש בגוגל, לעיתים קרובות נראה משהו כזה:

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

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

השימוש ב Pseudo Class Selectors מאוד פשוט, בדומה לסלקטורים אחרים נוסיף : (נקודותיים) לסלקטור אחר כדי להתייחס למצב מיוחד - הנה למשל סלקטורים המתייחסים למצבים שונים של לינק (ושימושיים רק עם לינקים!), link: ו visited:

a:link {/* ... */}
a:visited {/* ... */}

/* Combined with other selectors */
a.reference:link {/* ... */}
div#content .beforeRef + a:visited{/* ... */}

link: מתייחס ללינקים שעדיין לא ביקרנו בהם ו visited: ללינקים שכבר ביקרנו.

כדאי לקרוא גם על ה - hover:, על ה active: וה focus: (לא רק ללינקים):

• focus: - עיצוב האלמנט כאשר הפוקוס עליו
• hover: - עיצוב האלמנט בעת מעבר עכבר
• active: - עיצוב האלמנט בעת לחיצת עכבר

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

תוכלו למצוא עוד pseudo classes בדף הזה.

Pseudo Elements Selectors

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

אם נבחן את ה- pseudo class selector, נראה כי קיימים "מצבים" מסוימים לאלמנט (visited, link) וברגע שהמצבים האלה מתקיימים, מוסיף הדפדפן לאותם אלמנטים class מדומה בהתאם למצב.

כאן נעמוד על ההבדל בין pseudo class ל pseudo elements - פסאודו class מוסיף באופן דינאמי class מדומה לאלמנט ולעומתו  pseudo elements יוצר באופן דינאמי אלמנט חדש בהתאם לתוכן התגית ניקח לדוגמה את הקוד הבא ונשתמש באלמנט first-line: הבוחר רק את השורה הראשונה בתוכן התגית (לא עד לשבירת שורה על ידי br, אם נקטין את החלון ונשבור את השורה - ישתנה האלמנט):

<!DOCTYPE html>
<html>
<head>
    <title>Attribute Selector Example</title>
    <style type="text/css">
        p:first-line {
            font-weight: bold;
            background-color: yellow;
        }
    </style>    
</head>
<body>

<div id="main">
    <p class="def">
        This is a great example to article with special acronyms that require expansion, 
        which we can add by using the &quot;title&quot; property. |<br/>
        With XHTML and advanced CSS selectors, everything just got easier.<br/>
    </p>
</div>      
</body>
</html>

שימו לב לתוצאה כשמשנים את גודל החלון:

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

<!-- First Example -->
<p class="def">
    <firstline>This is a great example to article with</firstline> 
    special acronyms that require expansion, 
    which we can add by using the &quot;title&quot; property. |<br/>
    With XHTML and advanced CSS selectors, everything just got easier.<br/>
</p>

<!-- Second Example -->
<p class="def">
    <firstline>This is a great example to article with special acronyms </firstline> 
    that require expansion, which we can add by using the &quot;title&quot; property. |<br/>
    With XHTML and advanced CSS selectors, everything just got easier.<br/>
</p>

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

תוכלו לקרוא עוד על Pseudo Elements כאן.

רמת ספציפיות של סלקטור

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

תקן css מכיל שיטת חישוב ספציפיות של סלקטור על פי נוסחא פשוטה ( ישנם ארבעה גורמים עיקריים המשפיעים על שיטת החישוב: style, id, attributes, types - לכל אחד מהם משקל שונה - רמת חוזק הסלקטור = שכלול מספר הופעתם של כל אחד מהגורמים ומשקלם ).

תוכלו לקרוא עוד על חוזק הסלקטורים בדף הבא:
http://www.w3.org/TR/CSS2/cascade.html#specificity

CSS -Selectors - 3, ID & Class Selectors

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

לעיתים קרובות נרצה להחיל עיצוב על אוסף "שרירותי" של תגיות, כלומר, על אוסף תגיות שאין ביניהן יחסי היררכייה קבועים.

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

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

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

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

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

כל תגית יכולה לקבל ערך class אחד או יותר (או בכלל לא):

<!-- Both Tags can now be easily selected with the CSS Class Selector -->

<h1 class="blogTitle">This Tag Belongs to the "blogTitle" class</h1>
<div class="blogTitle">This div also belongs to the "blogTitle" class</div>

הנה קוד ה-html בדוגמה למעלה עם שימוש ב class:

<p class="errorNote">
 <strong>Error:</strong><br/>
 We couldn't process your transaction, probably because you have no items in your cart.<br/>
 Please make that there are items in cart before checking out.
</p>


<div class="errorNote">
 <strong>Please check the following:</strong>
 <ul>
  <li>Username must contain at least 4 letters</li>
  <li>Password confirmation is not identical to previous password</li>
  <li>You must insert email address</li>
 </ul>
</div>

<h3 class="errorNote">Please note that you are not logged in</h3>

עכשיו לאחר שסימנו את כל התגיות המכילות הודעת שגיאה, נוכל להשתמש ב class selector כדי להחיל עליהן עיצוב:

.errorNote {
    background-color: #FECBCC;
    border: solid 1px black;
}

/* Is Identical To: */

*.errorNote {
   background-color: #FECBCC;
   border: solid 1px black:
}

נוסיף נקודה ולאחריה את שם המחלקה (הערך אותו הכנסנו למאפיין class) וכך נבחר את התגיות המתאימות.

נוכל אפילו להיות יותר ספציפיים עבור תגיות מסוימות, למשל, כדי לבחור את כל הרשימות שהן גם errorNote, נשתמש ב class selector בצורה הבאה:

ul.errorNote {
    list-style-type: square;
}

וכמובן לא נשכח שגם את ה class selector אפשר לשלב עם כל הסלקטורים שראינו עד עכשיו:

div > div .errorNote, p+.errorNote {
 background-color: #800003;
 color: white;
}

כמו שכבר ציינו, נוכל לתת לתגית אחת יותר מ class אחד:

<div class="main content thick">
 I have 3 classes!
</div>

כל אחד מהסלקטורים הבאים ישפיע על אותו div:

.main { /* ... */ }
.content { /* ... */ }
.thick { /* ... */ }

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

.leftBorder.rightBorder.infoBox { /* ... */ }

הסלקטור הזה למשל יחול אך ורק על התגית p בקוד למטה:

<p class="leftBorder rightBorder infoBox highlight"> ... </p>
<div class="leftBorder highlight"></div>
<table class="rightBorder infoBox"></table>

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

הקוד הבא, למשל, לא חוקי מאחר ויותר מתגית אחת מקבלת את הערך id=main:

<div id="main"></div>
<p id="main"></p>
<div id="main" class="special"></div>

כדי לבחור בתגית בעלת id מסוים נשתמש בסולמית - # ואחריה הערך המזהה,
קוד html:

<div id="mainContent">
 ...
</div>

סלקטור מתאים:

#mainContent { /* ... */ }

/* Identical To: */

div#mainContent { /* ... */ }

קיימים עוד שלושה סוגי סלקטורים - ה- attribute selector, ה- pseudo class selectors וה- pseudo elements selectors, עליהם נדבר בהרחבה בפוסט הבא.

CSS - Selectors - 2, Child & Adjacent Sibling Selectors

בפוסט הקודם דיברנו על סלקטורים ועל סלקטור הצאצאים ( Descendant Selector ), בהמשך נכיר סלקטורים נוספים ונראה בכל שלב איך אפשר לשלב מספר סוגי סלקטורים ליצירת סלקטור מורכב:

Child Selector

סלקטור ילדים דומה מאוד לסלקטור צאצאים מלבד העובדה שהוא מוגבל אך ורק לילדים (מדור ראשון).

הנה תזכורת קצרה למבנה "המשפחתי" של תגיות xhtml:

<ul>
 <li><span>Another</span></li>
 <li><span>Example</span></li>
 <li><span>Of</span></li>
 <li><span>HTML Relations</span></li>
</ul>

התגית span היא הבת של li והנכדה של ul. 

תגיות ה li הן אחיות ובנות ל ul

התגית ul נחשבת לאביהן של li ואב-קדמון ל span.

אנחנו משתמשים ב- Child Selector כאשר אנחנו רוצים להבדיל בין רמות שונות של אותה תגית, למה הכוונה?
בדוגמה הבאה אנו מתייחסים לתגית strong בכמה צורות. כאשר התגית מופיעה בתוך פיסקה, נרצה לצבוע אותה בצבע רקע צהוב (להדגשה) וכאשר היא מופיעה בתוך אלמנט אחר, לא נקבע לה עיצוב (strong בתוך רשימה פשוט מדגישה את הטקסט (bold). הנה התוצאה הרצויה:

<p>
    The following paragraph demonstrates the power of CSS selectors.<br/>
    The following text, for example, <strong>should be marked</strong> using <br/>
    the &lt;strong&gt; tag.
    <ul>
     <li>However, when inserted</li>
     <li>into a list</li>
     <li>the &lt;strong&gt; tag</li>
     <li>should use his <strong>default behaviour</strong></li>
    </ul>
</p>

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

p strong {
    background-color: yellow;
}

p ul strong {
    background-color: transparent;
}

נו אז מה רע בפיתרון הזה?

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

אז אולי בכל זאת יש פתרון, הנה:

p strong {
 background-color: yellow;
}

p * strong {
 background-color: transparent;
}

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

זה ממש כמו לצבוע את כל הבית באפור ואז שוב לצבוע את חדר השינה בלבן כשבסך הכל יכלנו להגיע לאותה תוצאה בפחות זמן וביתר קלות.
הנה שימוש ב Child Selector זהה:

p > strong {
 background-color: yellow;
}

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

div > table td > span, p li > a {
 background-color: green;
}

Adjacent Sibling Selector

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

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

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

קוד:

<h3>This Title Has Nothing To Do With The Blog Posts</h2>
<p>
 This paragraph also has nothing to do with the blog posts....
</p>

<h1>This Is A Blog Post Title</h1>
<p>
 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>

<h1>This Is Another Blog Post Title</h1>
<p>
 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>

<strong>And so on.. </strong>

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

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

דרך אחת (עוקפת) לעשות זאת היא "לעטוף" את הפוסטים והכותרות ב div ולהשתמש בסלקטורים שראינו עד כה, סלקטור צאצאים וסלקטור בנים - אך לשם כך ניאלץ לשכתב את קוד ה html. 

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

h1+p {
    background-color: #EDECE4;
}

כדי להשתמש בסלקטור, נוסיף סימן + בין הסלקטורים הסמוכים - העיצוב כמובן יתייחס לתגית מצדו הימני של סימן הפלוס. בדוגמה למעלה: כל תגיות ה-p המופיעות מיד לאחר התגית h1.
העיצוב הנ"ל לא יעבוד על הקוד הבא (התגית p לא מופיעה מיד לאחר התגית h1): 

<h1>This Is A Blog Post Title</h1>
<span> Tags: code, html, blog </span>
<p>
 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>

כן, נכון, ישנם עוד סלקטורים.. בפוסט הבא. 

CSS - Selectors - 1, Universal & Descendant Selectors

אז איך כותבים קוד css?

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

עיצובי css מורכבים משני חלקים:

1. Selector - מעין קוד המייצג קבוצה של תגיות בדף (אחת או יותר) עליהן חל העיצוב. ישנו למשל selector שבוחר את כל הכותרות מסוג h1 בדף, selector שבוחר את כל הקישורים (תגיות a) בדף וכו'.
2. Properties - קבוצה של מאפיינים וערכים, כלומר העיצוב עצמו. שינוי צבע רקע, סוג גופן, גודל, מסגרת ועוד הרבה. 

Selectorים ומאפיינים באים ביחד, כאשר לכל selector אנחנו מגדירים קבוצה של מאפיינים. 

הנה התחביר:

selector { 
    property: value;
    another-property: value;
    /* More Properties.. */ 
} 

במידה ויש מעט מאפיינים אפשר גם לרשום:

selector {property: value; another-property: another-value;}

Selectors

אמרנו שיש לנו מספר דרכים להחיל עיצוב css:

• inline  - בתוך התגית
• internal - בתוך הקובץ
• external - בקובץ חיצוני

כתיבת קוד inline די פשוטה - מוסיפים לתגית אותה רוצים לעצב מאפיין style ובתוכו רושמים את עיצוב ה-css.
כאשר אנחנו רוצים להפריד את העיצוב מקוד 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. 

זוכרים את ה Universal Selector? גם כאן נוכל להשתמש בו, שימו לב לדוגמה הבאה:

div * a {
    color: red;
}

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

בפוסט הבא נראה סלקטורים שימושיים נוספים..

לחסרי הסבלנות:

http://www.w3.org/TR/CSS2/selector.html 

מבוא - 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/