למד כיצד להגדיר מאפיינים לכללי CSS, כגון גופן טקסט, תמונת רקע וצבע רקע, מאפייני ריווח ופריסה ומראה של פריטי רשימה.
ניתן להגדיר מאפיינים לכללי CSS, כגון גופן טקסט, תמונת רקע וצבע רקע, מאפייני ריווח ופריסה ומראה של פריטי רשימה. צור תחילה כלל חדש, והגדר כל אחד מהמאפיינים הבאים.
הגדרת מאפייני כתב של CSS
להלן תיאור של חלק ממאפייני סוג CSS שניתן להגדיר.
Font-family
קובע את משפחת הגופנים (או סדרת משפחות) לסגנון. דפדפנים מציגים טקסט בגופן הראשון בסדרה המותקן במערכת של המשתמש. לתאימות ל-Internet Explorer, ציין תחילה גופן Windows. תכונת הגופן נתמכת בשני הדפדפנים.
Font-style
מציין סגנון גופן רגיל, נטוי או אלכסוני. ברירת המחדל היא סגנון רגיל (Normal). תכונת הסגנון נתמכת בשני הדפדפנים.
Line-height
מגדיר את גובה השורה שבה ממוקם הטקסט. הגדרה זו נקראת ריווח שורות. בחר Normal כדי שגובה השורה לגודל הגופן יחושב אוטומטית, או הזן ערך ובחר יחידת מידה. תכונת גובה השורה נתמכת בשני הדפדפנים.
Text-decoration
מוסיף קו תחתון, קו עליון או קו חוצה לטקסט, או גורם לטקסט להבהב. הגדרת ברירת המחדל לטקסט רגיל היא None. הגדרת ברירת המחדל לקישורים היא קו תחתון (Underline). כשקובעים את הגדרת הקישור על האפשרות ללא, ניתן להסיר את הקו התחתון מקישורים בעזרת הגדרת מחלקה מיוחדת. תכונת העיטור נתמכת בשני הדפדפנים.
Font-weight
מחיל כמות מסוימת או יחסית של הדגשה על הגופן. ההגדרה Normal שקולה ל-400; ההגדרה Bold שקולה ל-700. תכונת העובי נתמכת בשני הדפדפנים.
Font-variant
קובע את סגנון האותיות הקטנות בטקסט. Dreamweaver אינו מציג תכונה זו בחלון Document. תכונת הווריאציה נתמכת ב-Internet Explorer, אך לא ב-Navigator.
Text-transform
הופך את האות הראשונה בכל מילה לאות גדולה בבחירה, או מגדיר תצוגה של כל הטקסט על אותיות גדולות או אותיות קטנות. תכונת האותיות הגדולות והקטנות נתמכת בשני הדפדפנים.
Color
קובע את צבע הטקסט. תכונת הצבע נתמכת בשני הדפדפנים.
Font-size
מגדיר את גודל הטקסט. ניתן לבחור גודל מסוים בעזרת בחירת המספר ויחידת המידה, או לבחור גודל יחסי. פיקסלים הם אפשרות טובה כדי שדפדפנים לא יעוותו את הטקסט. תכונת הגודל נתמכת בשני הדפדפנים.
הגדרת מאפייני רקע של סגנון CSS
ניתן להחיל מאפייני רקע על כל רכיב בדף אינטרנט. לדוגמה, צור סגנון המוסיף צבע רקע או תמונת רקע לכל רכיב בדף, לדוגמה מאחורי טקסט, טבלה, כל הדף וכולי. ניתן גם להגדיר את המיקום של תמונת הרקע.
להלן תיאור של חלק ממאפייני הרקע של CSS שניתן להגדיר.
Background Image
קובע את תמונת הרקע לרכיב. התכונה של תמונת רקע נתמכת בשני הדפדפנים.
Background Repeat
קובע אם וכיצד תמונת הרקע תחזור על עצמה. התכונה Repeat נתמכת בשני הדפדפנים.
האפשרות No Repeat מציגה את התמונה פעם אחת בתחילת הרכיב.
האפשרות Repeat מציגה את התמונה באריחים מאחורי הרכיב, אופקית או אנכית.
האפשרויות Repeat-x ו-Repeat-y מציגות פס אופקי או אנכי של תמונות, בהתאמה. התמונות נחתכות כדי להתאים לגבולות הרכיב.
הערה: השתמש במאפיין Repeat כדי להגדיר מחדש את התג body ולהגדיר תמונת רקע שאינה מוצגת באריחים או חוזרת על עצמה.
Background Attachment
קובע אם תמונת הרקע תהיה קבועה במיקומה המקורי או תזוז עם התוכן בשעת גלילת התוכן. שים לב שחלק מהדפדפנים עלולים להתייחס לאפשרות Fixed (נייח) כאל Scroll (גלילה). תכונה זו נתמכת ב-Internet Explorer, אך לא ב-Netscape Navigator.
Background Position (X) ו-Background Position (Y)
מציין את המיקום ההתחלתי של תמונת הרקע יחסית לרכיב. ניתן להשתמש באפשרות זו ליישור תמונת רקע למרכז הדף, אנכית (Y) ואופקית (X). אם האפשרות Attachment מוגדרת על Fixed, המיקום הוא יחסית לחלון המסמך, ולא יחסית לרכיב.
Background Color
קובע צבע רקע לרכיב. תכונת צבע הרקע נתמכת בשני הדפדפנים.
הגדרת מאפייני גוש בסגנון CSS
ניתן להגדיר אפשרויות ריווח ויישור עבור תגים ומאפיינים.
Letter Spacing
מגדיל או מקטין את הרווח בין אותיות או תווים. להקטנת הרווח בין תווים, ציין ערך שלילי, לדוגמה -4. הגדרות ריווח האותיות דורסות הגדרות יישור טקסט לשני הצדדים. תכונת ריווח האותיות נתמכת ב-Internet Explorer 4 ומעלה וב-Netscape Navigator 6.
Text Indent
מציין את מרחק ההזחה של השורה הראשונה של הטקסט. ערך שלילי יכול לשמש ליצירת הזחה החוצה, אך התצוגה תלויה בדפדפן. Dreamweaver מציג תכונה זו בחלון Document רק כשהתג מוחל על רכיבים ברמת הגוש. התכונה Text Indent נתמכת בשני הדפדפנים.
Vertical Align
מציין את היישור האנכי של הרכיב שעליו מוחל הסגנון. Dreamweaver מציג תכונה זו בחלון Document רק כשהיא מוחלת על התג <img>.
Text Align
קובע כיצד יתבצע יישור טקסט בתוך הרכיב. התכונה Text Align נתמכת בשני הדפדפנים.
Whitespace
קובע כיצד יטופל רווח לבן בתוך הרכיב. בחר מבין שלוש אפשרויות: Normal מצמצם רווח לבן, Pre מטפל בו כאילו הטקסט מוקף בתגי pre (כלומר, כל הרווחים הלבנים, כולל רווחים בין מילים, טאבים ומעברי שורה, נשמרים), ו-Nowrap מציין שתתבצע גלישת טקסט רק כשמופיע התג br. Dreamweaver אינו מציג תכונה זו בחלון Document. התכונה Whitespace נתמכת ב-Netscape Navigator וב-Internet Explorer 5.5.
Display
מציין אם רכיב יוצג, ואם כן, כיצד הוא יוצג. האפשרות None מבטלת את התצוגה של רכיב.
Word Spacing
קובע את הריווח בין מילים. לקביעת ערך מסוים בחר Value בתפריט הנפתח והזן ערך מספרי. בתפריט הנפתח השני, בחר יחידת מידה (לדוגמה פיקסלים, נקודות וכולי).
הערה: ניתן לציין ערכים שליליים, אך התצוגה תלויה בדפדפן. Dreamweaver אינו מציג תכונה זו בחלון Document.
הגדרת מאפייני תיבה של סגנון CSS
היעזר בקטגוריה Box בתיבת הדו-שיח CSS Rule Definition כדי להגדיר אפשרויות תגים ומאפיינים השולטות במיקום הרכיבים בדף.
ניתן להחיל הגדרות על צדדים של רכיב בשעת החלת הגדרות ריווח ושוליים, או להשתמש בהגדרה Same For All כדי להחיל את אותה הגדרה על כל הצדדים של רכיב.
Float
מציין את הצד שבו רכיבים אחרים זורמים מסביב לרכיב הצף. הרכיב הצף מקובע לצד הציפה ותוכן אחר גולש מסביב לו מהצד הנגדי.
לדוגמה, תמונה הצפה ימינה מקובעת לימין, והתוכן שאתה מוסיף גולש מהצד השמאלי של התמונה.
לקבלת מידע נוסף, ראה http://css-tricks.com/all-about-floats/
Clear
מציין את הצדדים של רכיב כלשהו שאינם מאפשרים רכיבי ציפה אחרים.
Padding
מציין את כמות הרווח שבין תוכן הרכיב והגבול שלו (או השוליים אם אין גבול). בטל את הסימון באפשרות Same For All כדי להגדיר את הריווח לצדדים מסוימים של הרכיב.
Same For All
מגדיר מאפייני ריווח זהים לצד העליון, הימני, התחתון והשמאלי של רכיב שהריווח מוחל עליו.
Margin
מציין את כמות הרווח בין גבול הרכיב (או הריווח אם אין גבול) לבין רכיב אחר. Dreamweaver מציג תכונה זו בחלון Document רק אם היא הוחלה על רכיבים ברמת הגוש (פסקאות, כותרות, רשימות וכולי). בטל את הסימון באפשרות Same For All כדי להגדיר את הריווח לצדדים מסוימים של הרכיב.
Width and Height
קובע את הרוחב והגובה של הרכיב.
הגדרת מאפייני גבול של סגנון CSS
היעזר בקטגוריה Border בתיבת הדו-שיח CSS Rule Definition כדי להגדיר הגדרות, כגון רוחב, צבע וסגנון, של גבולות מסביב לרכיבים.
Width
קובע את עובי הגבול של הרכיב. התכונה Width נתמכת בשני הדפדפנים. בטל את הסימון באפשרות Same For All כדי להגדיר את עובי הגבול לצדדים מסוימים של הרכיב.
Same For All
מגדיר מאפייני סגנון גבול זהים לצד העליון, הימני, התחתון והשמאלי של הרכיב שהגבול מוחל עליו.
Color
מגדיר את צבע הגבול. ניתן לקבוע צבע של כל צד בנפרד, אך התצוגה תלויה בדפדפן. בטל את הסימון באפשרות Same For All כדי להגדיר את צבע הגבול לצדדים מסוימים של הרכיב.
Type
מגדיר את מראה הסגנון של הגבול. אופן התצוגה של הסגנון תלוי בדפדפן. בטל את הסימון באפשרות Same For All כדי להגדיר את סגנון הגבול לצדדים מסוימים של הרכיב.
הגדרת מאפייני רשימה של סגנון CSS
הקטגוריה List בתיבת הדו-שיח CSS Rule Definition מגדירה הגדרות רשימה, כגון גודל וסוג תבליט, לתגי רשימה.
List style type
קובע את מראה התבליטים או המספרים. אפשרות זו נתמכת בשני הדפדפנים.
List style position
קובע אם יתבצעו גלישה והזחה (החוצה) של הטקסט ברשימה, או שתתבצע גלישה של הטקסט לשוליים השמאליים בלבד (פנימה).
List style image
מאפשר להגדיר תמונה מותאמת אישית לתבליטים. לחץ על Browse (Windows) או על Choose (Macintosh) כדי למצוא את התמונה, או הקלד את נתיב התמונה.
הגדרת מאפייני מיקום של סגנון CSS
מאפייני המיקום של הסגנון קובעים כיצד התוכן הקשור לסגנון CSS ימוקם בדף.
השאר את המאפיינים הבאים ריקים אם הם אינם חשובים לסגנון:
Position
קובע כיצד על הדפדפן למקם את הרכיב שנבחר באופן הבא:
Absolute ממקם את התוכן בעזרת הקואורדינטות שהוזנו בתיבות Placement יחסית לרכיב האב הקרוב ביותר באופן מוחלט או יחסי, או אם אין רכיב אב הממוקם באופן מוחלט או יחסי, יחסית לפינה השמאלית העליונה של הדף.
Relative ממקם את גוש הטקסט בעזרת הקואורדינטות שהוזנו בתיבות Placement יחסית למיקום גוש הטקסט בזרימת הטקסט במסמך. לדוגמה, אם מגדירים לרכיב מיקום יחסי וקואורדינטות עליונות ושמאליות של 20 פיקסלים, הן יזיזו את הרכיב 20 פיקסלים ימינה ו-20 פיקסלים למטה מהמיקום הרגיל שלו בזרימת הטקסט. ניתן גם למקם רכיבים באופן יחסי, עם או ללא קואורדינטות לחלק העליון, השמאלי, הימני או התחתון, כדי לקבוע הקשר לרכיבים בנים הממוקמים באופן מוחלט.
Fixed ממקם את התוכן בעזרת הקואורדינטות שהוזנו בתיבות Placement, יחסית לפינה השמאלית העליונה של הדפדפן. התוכן יישאר קבוע במיקום זה כשהמשתמש יגלול בדף.
Static ממקם את התוכן במיקום שלו בזרימת הטקסט. זהו מיקום ברירת המחדל של כל רכיבי HTML הניתנים למיקום.
Z-Index
קובע את סדר הערימה של התוכן. רכיבים עם ערך z-index גבוה יותר מופיעים מעל לרכיבים עם ערך z-index נמוך יותר (או ללא ערך). הערכים יכולים להיות חיוביים או שליליים. (אם התוכן ממוקם באופן מוחלט, קל יותר לשנות את סדר הערימה בחלונית AP Elements).
Overflow
קובע מה יקרה אם התוכן של מכל (לדוגמה DIV או P) חורג מגודלו. מאפיינים אלה שולטים בהרחבה כדלקמן:
Visible מגדיל את המכל כדי שכל התוכן יוצג. המכל מתרחב למטה וימינה.
Hidden שומר על גודל המכל וחותך כל תוכן שאינו מתאים למכל. לא מוצגים פסי גלילה.
Scroll מוסיף פסי גלילה למכל, ללא קשר אם התוכן חורג מגודל המכל. הגדרת פסי גלילה מונעת בלבול הנגרם כתוצאה מתצוגה והיעלמות של פסי גלילה בסביבה דינמית. אפשרות זו אינה מוצגת בחלון המסמך.
Auto גורם לפסי גלילה להופיע רק כשהתוכן חורג מגבולות המכל. אפשרות זו אינה מוצגת בחלון המסמך.
Clip
מגדיר את החלק המוצג של התוכן. אם תציין אזור חיתוך, ניתן לגשת אליו דרך שפת תכנות כגון JavaScript ולטפל במאפיינים כדי ליצור אפקטים מיוחדים, כגון ניגוב. אפקטי ניגוב אלה ניתן להגדיר בעזרת שימוש בהתנהגות Change Property.
Placement
מציין את המיקום והגודל של גוש התוכן. אופן הפענוח של המיקום בדפדפן תלוי בהגדרה של Type. ערכי גודל נדרסים אם התוכן של הגוש הנוכחי חורג מהגודל שצוין.
יחידות ברירת המחדל למיקום וגודל הן פיקסלים. ניתן גם לציין את היחידות הבאות pc (פיקות), pt (נקודות), in (אינצ'ים), mm (מילימטרים), cm (סנטימטרים), (ems), (exs), או % (אחוזים מערך רכיב האב). הקיצורים חייבים לבוא אחרי הערך ללא רווח. לדוגמה, 3mm.
Visibility
קובע את תנאי התצוגה הראשוני של התוכן. אם לא מגדירים מאפיין תצוגה, התוכן יורש כברירת מחדל את ערך התג של רכיב האב. תג של גוף טקסט מוצג כברירת מחדל. בחר אחת מאפשרויות התצוגה הבאות:
Inherit גורם לכך שהתוכן מקבל בירושה את מאפיין התצוגה של רכיב האב.
Visible מציג את התוכן, ללא קשר לערך רכיב האב.
Hidden מסתיר את התוכן, ללא קשר לערך רכיב האב.
הגדרת מאפייני הרחבה של סגנון CSS
מאפייני הרחבות סגנון כוללים מסננים, מעברי דף ואפשרויות מצביע.
Cursor
משנה את סמל המצביע כשהוא נמצא על אובייקט הנשלט על-ידי הסגנון. בחר באפשרות הרצויה בתפריט הנפתח. Internet Explorer 4.0 ומעלה ו-Netscape Navigator 6 תומכים בתכונה זו.
Filter
מחיל אפקטים מיוחדים על האובייקט הנשלט על-ידי הסגנון, כולל טשטוש והיפוך. בחר אפקט מהתפריט הנפתח.
Page break before
כופה מעבר דף במהלך הדפסה לפני או אחרי האובייקט הנשלט על-ידי הסגנון. בחר באפשרות הרצויה בתפריט הנפתח. אפשרות זו אינה נתמכת בדפדפני 4.0, אך ייתכן שתוצע בה תמיכה בעתיד בדפדפנים.