מדריכים לבניית אתרים

הבסיס של CSS

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

כך זה יראה:

<html>
 
    <head>
            <title>שלום עולם! - webmasters.co.il</title>
			
			<style type="text/css">
				//code here
			</style>
			
    </head>
 
    <body>
        <p>תוכן הדף - webmasters.co.il</p>
    </body>
</html>

מעכשיו והלאה כל הקוד שנביא לכם יכנס באזור של תגי ה-style שנמצאים בתוך ה-head. מכאן והלאה לא נציג לכם את כל הקוד של ה-HTML אלא רק CSS ואתם תטמיעו אותו במקום שכתוב "code here//".

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

קובץ עיצוב חיצוני

הרעיון פה הוא למטרות נוחות לשמור קובץ בסיומת CSS ולייבא אותו לדף HTML שלנו בעזרת הקוד הבא:

<html>
 
    <head>
            <title>שלום עולם! - webmasters.co.il</title>
			<link rel="stylesheet" type="text/css" href="/styles.css" />
    </head>
 
    <body>
        <p>תוכן הדף - webmasters.co.il</p>
    </body>
</html>

בשיטה הזו אנחנו יוצרים קובץ (בדומה ליצירת קובץ HTML) אבל שומרים אותו בסיומת שם - נקודה ו-CSS בסוף כך יווצר לנו קובץ STYLE למטרות עיצוב. ובעזרת שורת הקוד למעלה אנחנו מייבאים את הקובץ העיצובי (במקרה הזה style.css) לתוך דף ה-HTML ועורכים אותו במקביל לדף ה-HTML.

שימו לב ששתי הדרכים שהראתי שונות רק במיקום של הקוד CSS, אחד בקובץ חיצוני ואחד בדף עצמו. בשורה התחתונה הקוד CSS זהה גם כאן וגם כאן, רק שלמתחילים מומלץ לכתוב קוד CSS בדף HTML עצמו (שיטה ראשונה שהראנו) כי זה נוח יותר וזה למטרות למידה בלבד.

יש בעיה? קושי או שאתם רוצים לשאול שאלה? הכנסו לפורום שלנו תשאלו ואנחנו נשמח לעזור!