הרשם

התחבר

התחבר בעזרת פייסבוק:

שם משתמש סיסמא
זכור אותי

אוריגמי - קטגורית האוריגמי הגדולה בישראל

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

אוהבים מתוקים? לחצו בשביל עשרות מדריכי עוגות ועוגיות

‹ ›

יכול לעניין אתכם

מדריך CSS מספר 1 - מה זה CSS ולמה צריך את זה ?
מאת: בקלות טכני

מדריך CSS מספר 3 - איך להשתמש בCSS בדפי אינטרנט (External CSS, Internal CSS, inline CSS)
מאת: בקלות טכני

מדריך CSS מספר 4 - פונטים

מאת: בקלות טכני

מדריך CSS מספר 5 - איך לעצב טקסט

מאת: בקלות טכני

איך לעצב אתר בצורה יעילה.

מאת: בקלות טכני

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

איך לבחור ולקנות שם לאתר שלך (Domain name)
מאת: בקלות טכני

איך לכתוב קובץ CSS נכון (Best practices) - חלק ב'
מאת: בקלות טכני

איך לכתוב קובץ CSS נכון (Best practices) - חלק א'
מאת: בקלות טכני

דף הבית >> מדריכים >> מחשבים >> אינטרנט >> עיצוב אתרים >> מדריך CSS מספר 2 - סלקטורים (Selectors).

מחשבים

מדריך CSS מספר 2 - סלקטורים (Selectors).

עקוב

11/07/2011 12:03:33
מאת: בקלות טכני
כתב מתחיל

דירוג:

(0 מדרגים)

במדריך מספר 1 למדנו שניתן לשנות להגדיר את העיצוב של הסלקטורים הקיימים.
במדריך זה נראה שניתן להשתמש בסלקטורים משלכם בעזרת ID וCLASS.

רמת קושי: מתקדמים

הוראות:

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

בואו נראה דוגמא לClass כזה:

.redright {text-align:right; color:red;}

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

הנה דוגמא לשימוש בClass הזה:

Big header

This is some cool stuff!
Text without using the CSS class

הClass צריך להיות מוגדר כמו כל חוק CSS - בתוך אלמנט style ובין תגיות הhead.

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

ככה זה יראה בדפדפן.

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

ניתן להגדיר גם Class שיעבוד על תגית אחת בלבד ולא על כל התגיות.

לדוגמא:

h1.center {text-align:center;}

כעת כל תגית h1 שמשתמשת בClass עם הערך center תתיישר למרכז המסך.

(כל תגית אחרת שתשתמש בClass הזה לא תושפע).

לדוגמא:

This is a heading

This bold text won't use the class.

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

בדוגמא הזו, רשמנו את מאפיין הClass ל2 תגיות אך הוא ישפיע רק על תגית הh1 מכיוון שכך הגדרנו בClass עצמו.

זה יראה בדפדפן כך.

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

חוק עם סלקטור id נראה כך:

#blueright{text-align:right;color:blue;}

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

בואו נראה דוגמא לשימוש בid הזה.:

Some text that is on the right and blue.
Some sad paragraph without an ID

בדוגמא אנו רואים שגם כאן, שהחוק עם הid צריך להיות בין תגיות הstyle ובין תגיות הhead.

תגית הP הראשונה בה שמנו את מאפיין הid ואת הערך blueright יושפע מהחוק שהגדרנו ואילו תגית הP השניה לא תושפע כיוון שלא מוגדר לה id.

אזהרות

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

הוסף למועדפים שלחו לחבר הדפיסו את המדריך

ראיתם משהו שאהבתם? יש לכם שאלה? כתבו תגובה

אם לא בא לכם להשאיר תגובה דרך הפייסבוק:

מדריכים נוספים בנושא:

איך לעצב אתר בצורה יעילה.

איך לבחור את הצבעים המתאימים לאתר האינטרנט שלך.

איך לבחור לוגו

מדריך HTML מספר 12 - מתוה דף אינטרנט ( layouts and div tags)

עוד מדריכים בנושא זה