cascading style sheets reference

סוג אלמנט

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

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

סוגי התכונות עבור האלמנט הן:

display (תצוגה)
white-space (מרווח-לבן)
list-style-type (סוג סגנון רשימה)
list-style-image (דמות סגנון רשימה)
list-style-position (מיקום סגנון רשימה)
list-style (סגנון רשימה)

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

row-span (אורך שורה)
column-span (אורך טור)
border-collapse (קיפול גבול)
table-layout (מערך טבלה)

תצוגה (display)

מה היא עושה?

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

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

CSS2 גם מציג בפנינו סוגי אלמנטים חדשים: סמן (marker), הרצה (run-in) והידוק (compact).

ערכים אפשריים

בנוסף לשלושת סוגי האלמנטים שלמעלה, CSS מאפשר לכם להגדיר סוג תצוגה של none.

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

none (אף ערך)
block (גוש)
inline (בשורה)
list-item (פריט רשימה)

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

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

'טבלה' - 'table' הוא כלי התכולה החיצוני עבור כל הטבלאות. הוא מגדיר אלמנט גוש מלבני המכיל כל מספר שהוא של קבוצות שורה, שורות, קבוצות טורים, טורים ו/או כיתובים, וכולם מסודרים בתבנית מרושתת לא סימטרית. כל אובייקט ביצוע אחר מאלה אמור להיות מוצג מחוץ לרשת המלבנית (HTML analog:TABLE).
'טבלה-בשורה' - 'inline-table' היא זהה לאלמנט ה'טבלה', חוץ מאשר העובדה שמתייחסים אליה כאלמנט בשורה שמוחלף בהקשר המקיף את אלמנט ה-'inline-table'.
'קבוצת-טור-טבלה' - 'table-column-group' זהו כלי התכולה עבור מספר טורי טבלה. זה מאפשר למעצב לקבוע תכונות תצוגה עבור קבוצת טורים, לדוגמא, ע"י הצבת גבולות סביב קבוצה של טורים
(HTML analog: COLGROUP).
'טור-טבלה' - 'table-column' הוא קיבוץ של כל התאים בטור אנכי מסוים. (HTML analog: COL).
'קבוצת-שורת-טבלה' - 'table-row-group' הוא כלי התכולה עבור מספר שורות של טבלה. הדבר מאפשר למעצב לקבוע תכונות תצוגה עבור קבוצה של שורות, לדוגמא, ע"י הצבת גבולות סביב קבוצה של שורות
(HTML analog: TBODY).
'table-header-group' - זהו סוג מיוחד של 'קבוצת-שורת-טבלה' שתמיד מוצג בחלק העליון של הטבלה, מעל לכל שאר השורות וקבוצות השורות, אך מתחת לכל כתובית שהיא (HTML analog: THEAD).
'table-footer-group' - הוא סוג מיוחד של קבוצת-שורת-טבלה שתמיד מוצג בתחתית הטבלה, מתחת לכל שאר השורות וקבוצות השורות, אך מעל לכל כתובית שהיא (HTML analog: TFOOT).
'שורת-טבלה' - 'table-row' מקבץ את כל התאים בשורה אופקית מסוימת (HTML analog: TR).
'תא-טבלה' - 'table-cell' הוא האובייקט המלבני שיש לסדר ברשת של הטבלה. ניתן להשתמש בתאי הטבלה רק בתוך שורות (HTML analog: TD).
# 'כיתוב-טבלה' - 'table-caption' הוא סוג מיוחד של תא טבלה המופיע כשורה או כטור כשלעצמו בטבלה
(HTML analog : CAPTION ).

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

CSS2 גם הוסיף את סוגי התצוגה marker, compact ו-run-in.

ה-marker מגדיר כי אלמנט הנוצר ע"י בורר :before או :after אמור להיות סמן (כמו אלה המשמשים עם פריטי רשימה).

ערכים של compact ושל run-in מעוררים שיקולים מסובכים יחסית, כפי שתואר בהמלצת CSS2.

המקרים הבאים עלולים להתרחש:

אלמנט מסוג 'run-in' או 'compact' יש לו :before pseudo-element מסוג 'inline': הנלקח בחשבון כאשר גודל קופסת האלמנט הוא מחושב (עבור 'compact') והוא מבוצע בתוך אותה קופסת גוש (block box) כמו האלמנט עצמו.
אלמנט מסוג 'run-in' או 'compact' יש לו :before pseudo-element מסוג 'block': החוקים מן הנקודה הקודמת מיושמים.
אלמנט מסוג 'run-in' או 'compact' יש לו :before pseudo-element מסוג 'block': מפורמט כגוש מעל האלמנט ואינו משתתף בחישוב של גודל האלמנט (עבור 'compact').
אלמנט מסוג 'run-in' או 'compact' יש לו :after pseudo-element מסוג 'block': after pseudo-element שלו מפורמטים כקופסאות גוש. האלמנט אינו מפורמט כקופסא בשורה כשלעצמו : after pseudo-element.
האלמנט שבא אחרי אלמנט 'run-in' או 'compact' ישלו :before מסוג 'block': ההחלטה של כיצד לפרמט את אלמנט ה-'compact'/'run-in' נעשית בהתחשב בקופסת הגוש כתוצאה מ- :before pseudo-element.
האלמנט שבא אחרי אחרי אלמנט 'run-in' או 'compact' יש לו :before מסוג 'inline': ההחלטה לגבי כיצד לפרמט את אלמנט ה-'compact'/'run-in' תלויה בערך ה'תצוגה' של האלמנט שאליו ה-:before קשור.

ערכים של ברירת מחדל

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

האם זה עובר בירושה?

האלמנט אינו יורש את ערך התצוגה של ההורה שלו.

רמזים והצעות

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

מרווח לבן (white-space)

מה היא עושה?

Tתכונת המרווח-הלבן מיושמת רק עבור אלמנטים גושיים, והיא מגדירה מה יש לעשות ע"י הדפדפן עם מרווח-לבן שאינו שייך (תוויות, חזרות, מרווחים מיותרים וכו'…). המרווח הלבן לא אמור להשפיע על מראה דף האתר; דווקא על הדפדפנים להתעלם מחזרות ומתוויות (returns & tabs) ולקפל אם יש יותר ממרווח אחד למרווח יחיד, עבור מטרות תצוגה. בעזרת תכונת המרווח הלבן אתם יכולים להגדיר כיצד, בפועל, הדפדפן מטפל במרווח לבן.

ערכים אפשריים

תכונת המרווח הלבן יכולה לקבל אחד מתוך ערכיי מילות המפתח הבאות: normal, pre, ן-nowrap.

מרווח לבן נורמלי (normal), פירושו כי המרווח הלבן יטופל בדרך המסורתית; יתעלמו מכל התוויות, החזרות ומהמרווחים שאינם שייכים.

מרווח לבן של pre משאיר את כל המרווחים הלבנים כפי שהם מופיעים באלמנט. זו המקבילה לתווית ה-HTML <PRE>. בעיקרון, מתייחסים לאלמנט כאילו הוא עבר פרה-פרמוט.

מרווח לבן של nowrap, פירושו שהתכנים של האלמנט יעברו לשורה הבאה (wrap) רק כאשר קו שורה מפורש -<BR>- נמצא בתכנים. תוכן האלמנט לא יקפוץ לשורה חדשה רק מפני שהשורה אינה מתאימה בדף בצורה אופקית.

ערכים של ברירת מחדל

אם לא מוגדר כל ערך של מרווח לבן, המרווח הלבן של האלמנט יהיה נורמל.

האם זה עובר בירושה?

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

list-style-type

מה היא עושה?

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

ערכים אפשריים

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

none

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

disc
circle
square

מגדירים שלושה סוגים שונים של ניקוד פריטי רשימה.

decimal
lower-roman
upper-roman
lower-alpha
upper-alpha

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

ערכים של ברירת מחדל

אם לא הוגדר כל ערך עבור סוג-סגנון-רשימה, לפריט הרשימה יהיה סוג-סגנון-רשימה של disc.

האם זה עובר בירושה?

פריט הרשימה יורש את הערך של סוג-סגנון-הרשימה של ההורה שלו.

רמזים והצעות

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

list-style-image

מה היא עושה?

CSS מאפשר לכם להגדיר דמות ע"י URL כניקוד עבור פריט רשימה. דמות-סגנון-רשימה (list-style-image) מגדיר דמות זו בעזרת URL.

ערכים אפשריים

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

ערכים של ברירת מחדל

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

האם זה עובר בירושה?

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

רמזים והצעות

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

list-style-position

מה היא עושה?

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

ערכים אפשריים

ניתן להגדיר את מיקום-סגנון-הרשימה כאחת מתוך שתי מילות המפתח inside (פנימה) ו-outside (החוצה).

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

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

ערכים של ברירת מחדל

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

האם זה עובר בירושה?

האלמנט יורש את מיקום-סגנון-הרשימה של ההורה שלו.

רמזים והצעות

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

list-style

מה היא עושה?

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

ערכים אפשריים

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

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

list-style-type: disc
list-style-image: url(../gifs/bullet.gif)
list-style-position: inside

הם שווי ערך ל

list-style: disc url(../gifs/bullet.gif) inside

ערכים של ברירת מחדל

עבור ערכיי ברירת המחדל של כל תכונת סוג-רשימה (list-type), בדקו ועיינו בתכונות האינדיבידואליות שלמעלה.

האם זה עובר בירושה?

כל תכונה של סגנון-רשימה עוברת בירושה מאלמנט ההורה.

רמזים והצעות

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

row-span

מה היא עושה?

אורך-שורה (row-span) מגדיר את מספר השורות המשתרעות לאורך תא. רק לאלמנטים בעלי ערכיי תצוגה, תאי-טבלה (table-cell) וכיתוב-טבלה (table-caption) יכול להיקבע אורך-שורה.

ערכים אפשריים

אורכי-שורות מוגדרים כמספרים שלמים. מספר שלם זה מחליט כמה שורות משתרעות לאורך תא.

ערכים של ברירת מחדל

כברירת מחדל אורך-השורה של האלמנט הוא 1.

האם זה עובר בירושה?

אורך-שורה אינו עובר בירושה.

column-span

מה היא עושה?

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

ערכים אפשריים

אורכי-טורים מוגדרים כמספר שלם. מספר שלם זה מחליט כמה טורים משתרעים לאורך תא או טור.

ערכים של ברירת מחדל

כברירת מחדל אורך-הטור של האלמנט הוא 1.

האם זה עובר בירושה?

אורך-טור אינו עובר בירושה.

table-layout

מה היא עושה?

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

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

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

ערכים אפשריים

מערך-טבלה מקבל אחד מתוך שני ערכים: auto ו-fixed (קבוע).

הערך "קבוע" מגדיר כי יש לשרטט את הטבלה בעזרת המודל הראשון, שתואר למעלה.

הערך auto מגדיר כי יש להשתמש במודל השני.

ערכים של ברירת מחדל

אם לא הוגדר כל מערך-טבלה, מתייחסים אליו כאילו הוא קיבל את הערך auto.

האם זה עובר בירושה?

האלמנט אינו יורש את מערך-הטבלה של ההורה שלו.

border-collapse

מה היא עושה?

קיימים שני מודלים שכיחים של התנהגות גבול-טבלה. קיפול-גבול (border-collapse) מגדיר כמה הגבולות משורטטים בסמוך האחד לשני בטבלה.

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

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

ערכים אפשריים

קיפול-גבול מקבל את אחד משני הערכים הבאים: collapse (קיפול) ו-separate (הפרדה).

הקיפול מגדיר כי יש לשרטט את הטבלה בעזרת המודל הראשון, המתואר למעלה.

ההפרדה מגדירה כי יש להשתמש במודל השני.

ערכים של ברירת מחדל

אם לא הוגדר כל קיפול-גבול, מתייחסים אליו כאילו הוא הפרדה.

האם זה עובר בירושה?

האלמנט אינו יורש את קיפול-הגבול של ההורה שלו.