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

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

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

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך CSS מספר 8 - אותו עיצוב למספר אלמנטים

מחבר:
בתאריך:

 

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

 

נתחיל בהעתקת הקוד הפשוט הבא שמייצר פיסקה <p> וכותרת <h1> לקובץ ה-html:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>?מה עושים כדי לתת לכמה אלמנטים בדף את אותו עיצוב </h1>                     <p>.כותבים את הסלקטורים מחוץ לסוגריים המסולסלים כשהם מופרדים ביניהם בפסיקים </p>
   .זו רק פסקה להשוואה
  </body>
</html>

 

נשמור את קובץ ה-html.

 

הקבצת אלמנטים כדי לתת להם עיצוב אחיד

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

h1, p {
    background:gray;
    color:blue;
    font-size: 200%;
}

נריץ את קובץ ה-html על הדפדפן, ונראה את התוצאה:

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

 

 

הוסף תגובה חדשה

 

= 4 + 8

תמונת המגיב

שגיא בתאריך: 07.09.2013

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

תמונת המגיב

יוסי בן-הרוש בתאריך: 07.09.2013

לא שידוע לי.