headline
Error processing SSI file




עיצוב בעזרת 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 חיצוני, כך ניתן יהיה לשתפן בין דפי אינטרנט שונים של אותו אתר בעל עיצוב אחיד.

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

[לפרק הקודם | לפרק הבא]

[ עמוד ראשי - אינטרנט | עיצוב בעזרת CSS : מבוא | הגדרת מחלקה ושם-זהות | עיצוב מלל | עיצוב רקע ותמונות | עיצוב טבלאות וגבולות | עיצוב רשימות | עיצוב גודל אובייקט | עיצוב מרווחים | עיצוב פריסת אובייקטים | עיצוב להדגשת אובייקט | עיצוב כותרות | עיצוב סמן עכבר | סיכום ]