| ה ש כ ל ה |
| ה ע ש ר ה |
| פ נ א י |
| כ י ף |
עיצוב בעזרת CSS
מבוא
אז לאחר שהשתכנענו שחובה לעצב את האתר בעזרת CSS (ומי שלא השתכנע יכול לחזור ולקרוא את הסיבות בסוף הפרק על HTML) נותר רק ללמוד את הנושא.
הקיצור CSS משמעו Cascading Style Sheets והכוונה היא שניתן בעזרתה לבנות שכבות עיצוב מדורגות. מה הכוונה במדורגות נסביר מיד, אך קודם ניתן דוגמא פשוטה להגדרת עיצוב מסוג CSS.
נעצב את הגופן של הכותרת מדרגה ראשונה כך שיהיה בגודל של 3em ובצבע אדום:
h1 {size:3em; color:red}
קודם מופיעה התגית לה נקבע העיצוב. אחריה בתוך סוגרים מסולסלות תופענה הגדרות העיצוב. כל הגדרת עיצוב כוללת את המאפיין המעוצב ונקודתיים מפרידות בינו לערך החדש שניתן לו. הגדרות העיצוב תופרדנה בעזרת נקודה-פסיק.
נוכל להגדיר כך בנפרד עיצוב לכל ששת תגיות הכותרות. אך אם למשל יש להן עיצוב זהה (אותו צבע גופן, למשל) נוכל להגדיר את העיצוב במשותף בשורה אחת בצורה הבאה:
h1 h2 h3 h4 h5 h6 {color:red}
כעת נסביר מה הכוונה במדורגות.
הגדרות העיצוב יכולות להימצא בשלושה מקומות שונים:
1. בקובץ נפרד בעל סיומת css. כפי שראינו בצורה
h1 {size:3em; color:red}
הקישור לקובץ css יתבצע מתוך אזור head של דף האינטרנט באופן הבא
<head>
<link rel="stylesheet" type="text/css" href="my_style.css" />
</head>
2. באזור ה- HEAD של דף האינטרנט, תחת אזור מוגדר המכיל הגדרות CSS.
<head>
<style type="text/css">
h1 {size:3em; color:red}
</style>
</head>
3. בתוך התגית אותה הם באים לעצב תחת מאפיין בשם style.
<h1 style="size:3em; color:red">
ניתן אם כך להגדיר עיצוב לאותה תגית במקומות שונים. הגדרות העיצוב תוכלנה להופיע בכל שלושת המקומות שלעיל כאשר העדיפות לעיצוב המנצח תינתן בהתאם למיקום הופעת ההגדרות. להלן סדר עדיפות ההגדרות מהעדיפות הנמוכה לגבוהה:
1. הגדרות עיצוב ברירת המחדל
2. הגדרות עיצוב בקובץ css חיצוני
3. הגדרות עיצוב פנימיות באזור head
4. הגדרות עיצוב שבתוך התגית עצמה
מסיבות שמנינו כבר עדיף לרכז את הגדרות העיצוב בקובץ css חיצוני, כך ניתן יהיה לשתפן בין דפי אינטרנט שונים של אותו אתר בעל עיצוב אחיד.
אנחנו נמשיך מכאן והלאה להתייחס להגדרות העיצוב שנתאר בהמשך כאילו הן נמצאות בקובץ זה.
הגדרת מחלקה (class) ושם-זהות (id)
מחלקה
עד כה ראינו כיצד ניתן להגדיר עיצוב שונה לכל תגית HTML. אך לכל תגית יכולנו להגדיר רשימת עיצוב אחת בודדת בלבד. כעת נניח כי ברצוננו להגדיר עיצובים שונים לכותרת מסוג h1 ולהשתמש בהם בדפי האינטרנט השונים שבאתר שלנו במקומות שונים. כדי שנוכל לקבוע עיצובים שונים לאותה תגית HTML הומצאה המחלקה (class).
ניתן לשייך לתגית HTML הגדרות עיצוב CSS שונות כאשר כל קבוצת הגדרות מוגדרת כמחלקה ויש לה שם מיוחד. למשל, להלן שתי מחלקות עיצוב שונות, אחת בשם funky והשנייה בשם formal:
h1.funky {color:red}
h1.formal {color:brown}
שיוך מחלקת העיצוב המתאימה לתגית מתבצע דרך המאפיין class של התגית, למשל:
<h1 class="funky">
ניתן להגדיר מחלקות עיצוב לאותה תגית כאשר כל מחלקת עיצוב מגדירה תכונות עיצוב שונות:
h1.red {color:red}
h1.size3em {size:3em}
והשימוש במחלקות העיצוב השונות לאותה התגית יהיה כך:
<h1 class="red size3em">
באפשרותנו גם לקבוע מחלקת עיצוב ללא הגבלה לתגית HTML מסוימת. אם נשמיט את הגבלת התגית נקבל הגדרה של מחלקה בה ניתן יהיה להשתמש עבור כל תגית בקובץ html.
שם זהות
ניתן לתת הגדרות עיצוב גם בעזרת המאפיין שם-זהות (id). למשל, נגדיר עיצוב גופן בצבע אדום לכל התגיות שהמאפיין שם-זהות שלהן הוא funky כך:
#funky {color:red}
אם נרצה להגביל את העיצוב רק לתגיות מסוג מסוים, למשל h1, נוכל לעשות זאת בצורה הבאה:
h1#funky {color:red}
כך ניתן להגדיר למשל ש- h2 מסוג funky יהיה בעל צבע אחר:
h2#funky {color:orange}
הערה: השימוש הרווח למטרת עיצוב הוא בעזרת מחלקה ולא בעזרת שם-זהות. השימוש בשם-זהות נפוץ כדי לתת לתגית שם ייחודי המבדיל אותה משאר התגיות זאת כדי שניתן יהיה לפנות רק אליה. תכונה זו של שם-זהות הוא שימושי ביותר כפי שנלמד בהמשך בפרק של לימוד שפת JavaScript.
עיצוב מלל
בעזרת מתן ערך למאפיינים שונים לתגית כלשהי ניתן להגדיר את עיצוב המלל המופיע באזור התחום על-ידי אותה תגית. מאפייני עיצוב אלו מוגדרים בטבלה הבאה:
| font: <font-style> <font-variant> <font-weight> <font-size> <font-family> |
כל ההגדרות לגופן בהגדרה אחת לפי הסדר המתואר |
| font-style: normal or italic or oblique or inherit |
סגנון גופן |
| font-variant: normal or small-caps or inherit |
אותיות קטנות/גדולות |
| font-weight: normal or bold or bolder or lighter or 100/200/300/400/…/900 |
הדגשת גופן |
| font-size: xx/x-small or small or medium or large or x/xx-large or smaller or larger or [length] or inherit |
גודל גופן |
| font-family: [font-face] or inherit |
מראה הגופן |
| color: [color-name] or #[hex-num][hex-num][hex-num] or rgb([num], [num], [num]) |
צבע גופן המלל אותן הגדרות כמו ב- background-color |
| direction: ltr or rtl or inherit |
כיוון המלל ltr – משמאל לימין rtl – מימין לשמאל inherit – לפי תגית האב |
| text-align: left or right or center or justify or inherit |
אופן יישור מלל left – יישור לשמאל (ברירת מחדל אם direction הוא ltr) right – יישור לימין (ברירת מחדל אם direction הוא rtl) center – יישור למרכז justify – יישור דו-צידי |
| text-decoration: none or underline or overline or line-through or blink or inherit |
עיצוב מיוחד למלל none – ללא underline – קו תחתון overline – קו עליון line-through – קו חוצה blink - מהבהב |
| text-indent: [length] or inherit |
גודל היסט המלל בשורה הראשונה בבלוק |
| text-transform: none or capitalize or uppercase or lowercase or inherit |
התמרת אותיות המלל capitalize – אות ראשונה גדולה uppercase – המרה לאותיות גדולות lowercase – המרה לאותיות קטנות |
| line-height: normal or [number] or [length] or inherit |
גובה שורה |
| word-spacing: normal or [length] or inherit |
הגדרת המרווח בין מילים |
| letter-spacing: normal or [length] or inherit |
מרווח בין אותיות |
| white-space: normal or nowrap or pre or pre-line or pre-wrap or inherit |
אופן ההתייחסות לרווחים normal – קיבוץ רווחים לתו רווח בודד, ירידת שורה בהתאם לצורך nowrap - קיבוץ רווחים לתו רווח בודד, אך ירידת שורה תהיה רק עם התגית pre – ללא קיבוץ רווחים וירידת שורה רק עם התגית <br> pre-line – קיבוץ רווחים ומעבר שורה כשצריך ועם <br> pre-wrap – ללא קיבוץ רווחים ומעבר שורה כשצריך ועם <br> |
| display: inline or none or … |
אופן תצוגת המלל inline – ללא ירידת שורה |
| quotes: none or [character] [character] or inherit |
הגדרת זוג תווים שישמשו לסימון קטע ציטוט בתוך מלל הערה: ניתן להגדיר מספר רב של זוגות לציטוט בתוך ציטוט |
עיצוב רקע ותמונות
ניתן לקבוע תמונת רקע לחלון כולו המוגדר על-ידי התגית body, לחלקות בתוך החלון הראשי המוגדרות על-ידי התגית div, לתאים בטבלה המוגדרים על-ידי התגיות th ו- td וכו'.
| background: <background-color> <background-image> <background-repeat> <background-attachment> <background-position> |
כל ההגדרות לרקע בהגדרה אחת לפי הסדר המתואר |
| background-attachment: scroll or fixed |
רקע נגלל או מקובע scroll – תמונת הרקע מתגוללת עם המסך fixed – תמונת הרקע קבועה |
| background-color: [color-name] or #[hex-num][hex-num][hex-num] or rgb([num], [num], [num]) |
צבע רקע color-name – שם צבע [hex-num] – ערך הקסאדצימלי ל- אדום, ירוק וכחול (מ- 00 עד ff לכל צבע) [num] – כנ"ל בערכים עשרוניים (מ-0 עד 255) |
| background-image: url('[url]') |
מיקום קובץ המכיל תמונה שתשמש כתמונת רקע |
| background-repeat: repeat or repeat-x or repeat-y or no-repeat |
שכפול תמונת הרקע repeat – שכפול מלא repeat-x – שכפול רק בציר x repeat-y – שכפול רק בציר y no-repeat – ללא שכפול |
| background-position: [top/center/bottom]-[left/center/right] or [percentage]% [percentage]% or [pixels]px [pixels]px |
מיקום תמונת הרקע |
| clip: auto or rect([pixels]px, [pixels]px, [pixels]px, [pixels]px) |
מגדיר מקטע מתמונה שתוצג במקרה שהתיבה בה אמורה התמונה להופיע קטנה ממנה auto – ללא הגדרת מקטע |
עיצוב טבלאות וגבולות
בעזרת המאפיינים הבאים ניתן לעצב את הגבולות של הטבלה, של תמונות, של חלקות ושל אובייקטים נוספים אחרים.
| border: <border-width> <border-style> <border-color> |
כל ההגדרות לגבולות בהגדרה אחת לפי הסדר המתואר |
| border-width: <1 width to all 4 borders> or <2 widths to top/bot. & left/right> or <3 widths to top, left/right & bot.> or <4 widths to all 4 borders> |
הגדרות עובי לכל הגבולות כמו border-bottom*-width |
| border-style: <1 style to all 4 borders> or <2 styles to top/bot. & left/right> or <3 styles to top, left/right & bot.> or <4 styles to all 4 borders> |
הגדרות סגנון לכל הגבולות כמו border-bottom*-style |
| border-color: <1 color to all 4 borders> or <2 colors to top/bot. & left/right> or <3 colors to top, left/right & bot.> or <4 colors to all 4 borders> |
הגדרת צבע לכל הגבולות |
| border-bottom*: [width] [style] [color] |
כל ההגדרות לגבול ספציפי * left, right, top או bottom |
| border-bottom*-width: thin or medium or thick or [length] or inherit |
הגדרת עובי הגבול * left, right, top או bottom |
| border-bottom*-style: none or dotted or dashed or solid or double or groove or ridge or inset or outset or inherit |
הגדרת סגנון לגבול * left, right, top או bottom |
| border-bottom*-color: [color-name] or #[hex-num][hex-num][hex-num] or rgb([num], [num], [num]) |
הגדרת צבע לגבול * left, right, top או bottom |
| table-layout: auto or fixed or inherit |
אופן קביעת רוחב עמודה auto – רוחב עמודה נקבע לפי רוחב התא הכי גדול fixed – רוחב העמודות קבוע |
| border-collapse: separate or collapse or inherit |
איחוד גבולות תאים סמוכים separate – ללא איחוד collapse – איחוד גבולות |
| border-spacing: [length] [length] or inherit |
הגדרת רווח בין גבולות תאים סמוכים הערה: לא נתמך ב- IE ! |
| empty-cells: hide or show or inherit |
אופן תצוגת תאי טבלה ריקים hide – הסתרת הגבולות ותמונת הרקע שבתוכם show – להראות גבולות ורקע |
| caption-side: top or bottom or inherit |
מיקום כותרת טבלה |
עיצוב רשימות
עיצוב סגנון רשימה. בחירת צורת מספור הרשימה: צורה גיאומטרית, אותיות, מספרים או תמונה מתוך קובץ.
| list-style: <list-style-type> <list-style-position> <list-style-image> |
כל ההגדרות לסגנון רשימה בהגדרה אחת לפי הסדר המתואר |
| list-style-type: none or circle or disc or square or armenian or georgian or decimal or decimal-leading-zero or lower-alpha or lower-greek or lower-latin or lower-roman or upper-alpha or upper-latin or upper-roman or inherit |
סוג מספור הרשימה |
| list-style-position: inside or outside or inherit |
מיקום מספור הרשימה |
| list-style-image: [url] or none or inherit |
מיקום תמונה למספור רשימה |
עיצוב גודל אובייקט
הגדרת גודל לחלקה, תמונה, תאים בטבלה, שדות בטפסים וכו'.
| height: auto or [length] or inherit |
גובה האובייקט |
| width: auto or [length] or Inherit |
רוחב האובייקט |
| max-height: none or [length] or inherit |
הגבלת גובה מרבי |
| max-width: none or [length] or inherit |
הגבלת רוחב מרבי |
| min-height: none or [length] or inherit |
הגבלת גובה מינימאלי |
| min-width: none or [length] or inherit |
הגבלת רוחב מינימאלי |
| overflow: visible or hidden or scroll or auto or inherit |
מגדיר במקרה של גלישת תוכן מעבר לתחום המוקצה visible – התוכן יגלוש מעבר לתחום המוקצה hidden – התוכן שיוצא מהתחום המוקצה לא יראה scroll – התוכן לא יגלוש ופס גלילה יאפשר לראותו |
עיצוב מרווחים
קביעת מרווחים בתוך חלון, במחלקות בטבלאות ועוד.
| bottom*: auto or [length] or Inherit |
מרווח מגבול תחתון* * left, right, top או bottom |
| margin: <1 def. to all 4 margins> or <2 def. to top/bot. & left/right> or <3 def. to top, left/right & bot.> or <4 def. to all 4 margins> |
כל ההגדרות למרווחים בהגדרה אחת לפי הסדר המתואר |
| margin-bottom*: auto or [length] or inherit |
גודל מרווח תחתון* * left, right, top או bottom |
| padding: <1 def. to all 4 paddings> or <2 def. to top/bot. & left/right> or <3 def. to top, left/right & bot.> or <4 def. to all 4 paddings> |
כל ההגדרות לריפוד בהגדרה אחת לפי הסדר המתואר |
| padding-bottom*: [length] or inherit |
מרווח ריפוד * left, right, top או bottom |
עיצוב פריסת אובייקטים
מיקום האובייקטים על פני המסך.
| float: left or right or none or inherit |
ריחוף אובייקט בחלון/בחלקה left – ריחוף לצד שמאל right – ריחוף לצד ימין none – ללא ריחוף |
| position: absolute or fixed or relative or static or inherit |
אופן קביעת מיקום האובייקט absolute – המיקום מוגדר יחסית לבלוק בו נמצא האובייקט fixed – המיקום מוגדר יחסית לחלון המסך relative – המיקום מוגדר יחסית למקום בו היה האובייקט אמור להיות static – מתעלם מהגדרות המיקום תזכורת: הגדרות המיקום הן בעזרת המאפיינים left, right, top ו- bottom |
| z-index: auto or [number] or inherit |
מספר השכבה של האובייקט |
| clear: none or left or right or both |
מגדיר ביחס לאובייקט היכן אסורה הימצאות אובייקט מרחף אחר none – משני הצדדים |
| visibility: visible or hidden or collapse or inherit |
אופן הצגת האובייקט visible – האובייקט מוצג hidden – האובייקט שקוף, אך עדיין תופס מקום על המסך collapse – מסתיר שורה או עמודה (בטבלה), אך עדיין הן תופסות מקום |
| vertical-align: baseline or bottom or middle or top or text-top or text-bottom or sub or super or inherit |
אופן יישור אופקי |
עיצוב להדגשת אובייקט
הדגשת אובייקט בעזרת הקפתו במסגרת (מעבר למסגרת שניתן להגדיר בעזרת border).
| outline: <outline-color> <outline-style> <outline-width> |
כל ההגדרות למסגרת מדגישה בהגדרה אחת לפי הסדר המתואר |
| outline-color: invert or [color-name] or #[hex-num][hex-num][hex-num] or rgb([num], [num], [num]) or inherit |
צבע למסגרת מדגישה |
| outline-style: none or dotted or dashed or solid or double or groove or ridge or inset or outset or inherit |
סגנון למסגרת מדגישה |
| outline-width: thin or medium or thick or [length] or inherit |
עובי מסגרת מדגישה |
עיצוב כותרות
מספור אוטומאטי של הכותרות בעזרת מונים.
| content: [string] |
הגדרת מחרוזת תווים להצמדה המחרוזת תוצמד לפני או אחרי מלל התגית בהתאם לשימוש ב- :before או :after |
| counter-reset: [counter-name] |
איפוס מונה |
| counter-increment: [counter-name] |
קידום מונה |
עיצוב סמל סמן עכבר
בחירת סמל לסמן עכבר כשהסמן נמצא באזור המוגדר על-ידי אותה תגית עיצוב.
| cursor: auto or crosshair or default or e/n/s/w/ne/nw/se/sw-resize or help or pointer or progress or text or inherit or [url] |
סמל מצביע העכבר |
סיכום
לאחר שלמדנו כיצד להקים אתר עם תוכן מילולי ומעוצב לטעמנו נרצה ללמוד שפת תכנות שהקוד שלה הוא בר הרצה. קוד שניתן להריץ אותו ברצוננו יאפשר לנו לתכנת את האתר כך שנוכל לבצע פעולות בתגובה לפעולות מצד המשתמש ונוכל לעבד נתונים המגיעים ממנו או מקובץ חיצוני. שפת תכנות פשוטה ללמידה ולכתיבה היא שפת JavaScript.
שפת JavaScript הינה שפת התכנות השלטת ברשת האינטרנט וזהו נושא הלמידה הבא שלנו.
ב ה צ ל ח ה
