הרשם

התחבר

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

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

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

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

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

‹ ›

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

מדריך CSS מספר 16 - איך למקם אובייקטים בדף
מאת: בקלות טכני

מדריך CSS מספר 17 - איך להוסיף אפקטים מיוחדים לסלקטורים בעזרת פסאודו קלאסים (Pseudo-classes)
מאת: בקלות טכני

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

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

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

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

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

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

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

מדריך CSS מספר 18 - איך לעצב אלמנטי HTML עם מאפיינים ספציפיים
מאת: בקלות טכני

דף הבית >> מדריכים >> מחשבים >> אינטרנט >> עיצוב אתרים >> מדריך CSS מספר 18 - איך לעצב אלמנטי HTML עם מאפיינים ספציפיים

מחשבים

מדריך CSS מספר 18 - איך לעצב אלמנטי HTML עם מאפיינים ספציפיים

עקוב

04/09/2011 12:24:28
מאת: בקלות טכני
כתב מתחיל

דירוג:

(0 מדרגים)

ניתן לעצב אלמנטי HTML על פי מאפיינים מסויימים (Attributes) גם אם אין להם CLASS או ID.

רמת קושי: מתחילים

הוראות:

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

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<style type='text/css'>
[href]
{
color:red;
}
</style>
</head>

<body>
<h1> Only elements with href will be red</h1>
<a href='http://www.bekaloot.co.il'>Bekaloot</a>
</body>
</html>

Only elements with href will be red

Bekaloot

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

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

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

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<style type='text/css'>
[href='http://www.bekaloot.co.il']
{
color:red;
}
</style>
</head>

<body>
<a href='http://www.bekaloot.co.il'>Bekaloot</a>
</br>
<a href='http://www.cnn.com'>CNN</a>
</body>
</html>

Bekaloot

CNN

בניגוד לדוגמא הקודמת, שבה רק על פי המאפיין href נצבע הקישור באדום.
בדוגמא הזו, הגדרנו בסלקטור שלנו גם את ערך המאפיין וכעת, לא כל האלמנטים המכילים את המאפיין href יצבעו, אלא רק האלמנטים עם מאפיין הhref עם הערך הספציפי שהגדרנו (במקרה שלנו: "http://www.bekaloot.co.il" ).

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

[title~=blue]
{
color:blue;
}

במקרה הזה, כל מאפיין title המכיל את המילה blue, אפילו כחלק ממשפט, יצבע בכחול, כמו:

blue sea

blue

Just blue

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

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

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

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

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

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

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

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

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