בצע אחת מהפעולות הבאות:
עודכן לאחרונה בתאריך
20 במאי 2021
למד כיצד להשתמש בחלונית CSS Styles ב-Dreamweaver כדי לעקוב אחרי כללים ומאפיינים של CSS.
הערה:
ב-Dreamweaver CC ואילך, החלונית CSS Styles הוחלפה בחלונית CSS Designer. לקבלת מידע נוסף, ראה CSS Designer.
החלונית CSS Styles מאפשרת לעקוב אחר כללי CSS ומאפייני CSS המשפיעים על רכיב דף שנבחר כרגע (מצב Current), או כל הכללים והמאפיינים הזמינים במסמך (מצב All). לחצן מעבר בין אפשרויות בראש החלונית מאפשר לעבור בין שני המצבים. החלונית CSS Styles גם מאפשרת לשנות מאפייני CSS במצב All ובמצב Current.
החלונית CSS Styles במצב Current
במצב Current, החלונית CSS Styles מציגה שלושה אזורים: האזור Summary for Selection המציג את מאפייני CSS לבחירה הנוכחית במסמך, האזור Rules המציג את המיקום של המאפיינים שנבחרו (או תצוגה מדורגת של כללים לתג שנבחר, בהתאם לבחירה), והאזור Properties המאפשר לערוך מאפייני CSS לכלל שהוחל על הבחירה.
ניתן לשנות את גודל האזורים בגרירת הגבולות שביניהם, וניתן לשנות גודל עמודות בגרירת הקווים המפרידים ביניהן.
האזור Summary for Selection מציג סיכום של מאפייני CSS והערכים שלהם לפריט שנבחר כרגע במסמך הפעיל. הסיכום מציג את מאפייני כל הכללים החלים ישירות על הבחירה. רק מאפיינים שהוגדרו מוצגים.
לדוגמה, הכללים הבאים יוצרים סגנון מחלקה וסגנון תג (במקרה זה פסקה):
.foo{
color: green;
font-family: ‘Arial’;
}
p{
font-family: ‘serif’;
font-size: 12px;
}
.foo{
color: green;
font-family: ‘Arial’;
}
p{
font-family: ‘serif’;
font-size: 12px;
}
.foo{
color: green;
font-family: ‘Arial’;
}
p{
font-family: ‘serif’;
font-size: 12px;
}
כשבוחרים טקסט פסקה עם סגנון מחלקה .foo בחלון המסמך, האזור Summary for Selection יציג את המאפיינים המתאימים לשני הכללים, משום ששני הכללים חלים על הבחירה. במקרה זה, האזור Summary for Selection יציג את רשימת המאפיינים הבאים:
font-size: 12px
font-family: ‘Arial’
color: green
font-size: 12px
font-family: ‘Arial’
color: green
font-size: 12px font-family: ‘Arial’ color: green
האזור Summary for Selection מסדר מאפיינים בסדר עולה מבחינת הפירוט. בדוגמה שלעיל, סגנון התג מגדיר את גודל הגופן, וסגנון המחלקה מגדיר את משפחת הגופנים וצבע הגופן. (משפחת גופנים שהוגדרה על-ידי סגנון מחלקה דורסת משפחת גופנים שהוגדרה על-ידי סגנון תג, משום שבוררי מחלקות הם ברמת פירוט גבוהה יותר מבוררי תגים. לקבלת מידע נוסף על CSS באופן ספציפי, ראה www.w3.org/TR/CSS2/cascade.html.)
האזור Rules מציג שתי תצוגות שונות – תצוגת About או תצוגת Rules – בהתאם לבחירה. בתצוגת About (תצוגת ברירת המחדל), האזור מציג את שם הכלל המגדיר את מאפיין CSS שנבחר, ואת שם הקובץ הכולל את הכלל. בתצוגת Rules, האזור מציג תצוגה מדורגת או היררכיה של כל הכללים החלים ישירות או בעקיפין על הבחירה הנוכחית. (התג שעליו חל הכלל ישירות מוצג בעמודה הימנית). ניתן לעבור בין שתי התצוגות בלחיצה על הלחצנים Show Information ו-Show Cascade בפינה הימנית העליונה של האזור Rules.
כשבוחרים מאפיין באזור Summary for Selection, כל המאפיינים לכלל שהוגדר מוצגים בחלונית Properties. (הכלל המגדיר גם נבחר בחלונית Rules אם נבחרה תצוגת Rules). לדוגמה, אם יש כלל הנקרא .maintext המגדיר משפחת גופנים, גודל גופן וצבע גופן, בחירה בכל אחד ממאפיינים אלה באזור Summary for Selection תגרום לתצוגת כל המאפיינים שהוגדרו על-ידי הכלל .maintext באזור Properties, וכן הכלל .maintext שנבחר באזור Rules. (בנוסף, בחירת כל כלל באזור Rules תגרום לתצוגת המאפיינים של כלל זה באזור Properties). לאחר מכן ניתן להשתמש באזור Properties כדי לשנות במהירות גיליונות CSS, בין שהם מוטבעים במסמך הנוכחי או מקושרים דרך גיליון סגנונות. כברירת מחדל, האזור Properties מציג רק את המאפיינים שכבר הוגדרו, ומסדר אותם לפי סדר האלפבית.
ניתן לבחור להציג את האזור Properties בשתי תצוגות נוספות. תצוגת Category המציגה מאפיינים מקובצים לפי קטגוריות, כגון Font, Background, Block, Border וכולי, עם מאפיינים שהוגדרו בראש כל קטגוריה המוצגים בצבע כחול. תצוגת List המציגה רשימה אלפביתית של כל המאפיינים הזמינים, ובדומה לתצוגה השניה מציגה את המאפיינים שהוגדרו בראש הרשימה בצבע כחול. כדי לעבור בין התצוגות, לחץ על הלחצן Show Category View, Show List View או Show Only Set Properties, הממוקם בפינה השמאלית התחתונה של האזור Properties.
בכל התצוגות, מאפיינים שהוגדרו מוצגים בכחול. מאפיינים שאינם רלוונטיים לבחירה מוצגים באדום עם קו חוצה. החזקת העכבר מעל כלל שאינו רלוונטי מציגה הודעה המסבירה מדוע המאפיין אינו רלוונטי. באופן טיפוסי, מאפיין אינו רלוונטי משום שהוא נדרס או שאינו מאפיין שהתקבל בירושה.
שינויים שתבצע באזור Properties יוחלו מיד, ויאפשרו לך להציג תצוגה מקדימה של עבודתך במהלך העבודה.
החלונית CSS Styles במצב All
במצב All, החלונית CSS Styles מציגה שני אזורים: האזור All Rules (למעלה), והאזור Properties (למטה). האזור All Rules מציג רשימה של כללים שהוגדרו במסמך הנוכחי, וכן את כל הכללים שהוגדרו בגיליונות הסגנונות המקושרים למסמך הנוכחי. האזור Properties מאפשר לערוך מאפייני CSS לכל כלל שנבחר באזור All Rules.
ניתן לשנות גודל של כל אזור בגרירת הגבול שבין האזורים, וניתן לשנות גודל של עמודות מאפיינים בגרירת הקו המפריד ביניהם.
כשבוחרים כלל באזור All Rules, כל המאפיינים שהוגדרו בכלל זה מוצגים באזור Properties. לאחר מכן ניתן להשתמש באזור Properties כדי לשנות במהירות גיליונות CSS, בין שהם מוטבעים במסמך הנוכחי או מקושרים דרך גיליון סגנונות. כברירת מחדל, האזור Properties מציג רק את המאפיינים שכבר הוגדרו, ומסדר אותם לפי סדר האלפבית.
ניתן לבחור להציג מאפיינים בשתי תצוגות נוספות. תצוגת Category המציגה מאפיינים מקובצים לפי קטגוריות, כגון Font, Background, Block, Border וכולי, עם מאפיינים שהוגדרו בראש כל קטגוריה. תצוגת List המציגה רשימה אלפביתית של כל המאפיינים הזמינים, ובדומה לתצוגה השניה מציגה את המאפיינים שהוגדרו בראש הרשימה. כדי לעבור בין התצוגות, לחץ על הלחצן Show Category View, Show List View או Show Only Set Properties, הממוקם בפינה השמאלית התחתונה של האזור Properties. בכל התצוגות, מאפיינים שהוגדרו מוצגים בצבע כחול.
שינויים שתבצע באזור Properties יוחלו מיד, ויאפשרו לך להציג בתצוגה מקדימה את עבודתך במהלך העבודה.
לחצנים ותצוגות של החלונית CSS Styles
במצב All ובמצב Current, החלונית CSS Styles כוללת שלושה לחצנים המאפשרים לשנות את התצוגה באזור Properties (האזור התחתון):
A. תצוגת Category B. תצוגת List C. תצוגת Set Properties
תצוגת Category
מחלקת את מאפייני CSS הנתמכים ב-Dreamweaver לשמונה קטגוריות: גופן, רקע, בלוק, גבול, תיבה, רשימה, מיקום והרחבות. מאפייני כל קטגוריה נכללים ברשימה, שניתן להרחיבה או לצמצמה בלחיצה על הלחצן פלוס (+) שליד שם הקטגוריה. מאפיינים שהוגדרו מוצגים (בכחול) בראש הרשימה.
תצוגת List
מציגה את כל מאפייני CSS הנתמכים ב-Dreamweaver לפי סדר האלפבית. מאפיינים שהוגדרו מוצגים (בכחול) בראש הרשימה.
תצוגת Set Properties
מציג רק את המאפיינים שהוגדרו. תצוגת Set Properties היא תצוגת ברירת המחדל.
גם במצב All וגם במצב Current, החלונית CSS Styles כוללת גם את הלחצנים הבאים:
A. Attach Style Sheet B. New CSS Rule C. Edit Style D. ביטול/הפעלה של מאפיין CSS E. Delete CSS rule
Attach Style Sheet
פותח את תיבת הדו-שיח Link External Style Sheet. בחר גיליון סגנונות חיצוני לקישור או לייבוא למסמך הנוכחי.
New CSS Rule
פותח תיבת דו-שיח שבה ניתן לבחור את סוג הסגנון שאתה יוצר – לדוגמה, כדי ליצור סגנון מחלקה, כדי להגדיר מחדש תג HTML, או כדי להגדיר בורר CSS.
Edit Style
פותח תיבת דו-שיח שבה ניתן לערוך את הסגנונות במסמך הנוכחי או בגיליון סגנונות חיצוני.
Delete CSS Rule
מסיר את הכלל או המאפיין שנבחר מהחלונית CSS Styles ומסיר את העיצוב מכל רכיב שהוא הוחל עליו. (עם זאת, הוא אינו מסיר מאפייני מחלקה או מאפייני זיהוי שאליהם מפנה סגנון זה). הלחצן Delete CSS Rule יכול גם לנתק או (להסיר את הקישור) של גיליון סגנונות CSS מקושר.
הערה:
לחץ לחיצה ימנית (Windows) או הקש Control (Macintosh) ולחץ על החלונית CSS Styles כדי לפתוח תפריט תלוי-הקשר של אפשרויות לעבודה עם פקודות בגיליונות סגנונות CSS.
פתיחת החלונית CSS Styles
ניתן להשתמש בחלונית CSS Styles כדי להציג, ליצור, לערוך ולהסיר סגנונות CSS, וכן לקשר גיליונות סגנונות חיצוניים למסמכים.
-
בחר Window > CSS Styles.
הקש Shift+F11.
לחץ על הלחצן CSS ב-Property inspector.
