מדריך CSS מספר 3 - איך להשתמש בCSS בדפי אינטרנט (External CSS, Internal CSS, inline CSS)

שלבים

1. 1

   שלב 1

   הדרך הראשונה נקראת Internal style sheet וכמו שניתן להבין, היא נעשית בתוך דף האינטרנט שלנו. זוהי הדרך הפשוטה והפחות מומלצת - היא נעשית בעזרת תגיות הStyle. בדרך הזו אנו נעצב כל דף בנפרד ונגדיר את העיצוב שלו (תגיות הstyle) בhead. לדוגמא:
2. 2

   שלב 2

   p {margin-left:20px;} h1 {color:blue;} body {background-image:url("Pictures/Smile.jpeg");}
4. 3

   שלב 3

   כך אנחנו מגדירים מראש איך תראה תצורה האתר.
5. 4

   שלב 4

   דרך נוספת ונפוצה היא השימוש בExternal Style Sheet - קובץ חיצוני המגדיר עבורנו את התצורה והעיצוב של כל דפי האינטרנט שיקראו לקובץ הזה. כך תוכלו למשל להגדיר לכל אתר האינטרנט שלכם את גודל הפונטים, תמונות לרקעים וכו' בפעם אחת במקום לשנות כל אחד מהדפים בנפרד. הקובץ החיצוני הזה הוא קובץ שניתן לערוך עם עורך טקסט (TXT) פשוט והוא עם חוקי CSS אך ל-ל-א תגיות HTML. כמו כן, צריך לשנות לו את הסיומת לcss, לדוגמא: SomeCSSFile.css הוא נראה כך:
6. 5

   שלב 5

   p {margin-left:20px;} h1 {color:blue;} body {background-image:url("Pictures/Smile.jpeg");}
7. 6

   שלב 6

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

   שלב 7
9. 8

   שלב 8

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

    שלב 9

    הדרך הכי פחות מומלצת להשתמש בCSS היא בעזרת הInline Style Sheet. בדרך הזו אנחנו פשוט מגדירים את העיצוב של התגית בתגית עצמה (שוב, לא מומלץ). זה נראה כך:
11. 10

    שלב 10

    paragraph.