[מדריך]CSS - הבסיס (מתעדכן)
הקדמה
CSS הוא כלי יוצא מהכלל להוספת תבנית עיצוב לאתר שלך. הוא יכול לחסוך לך זמן רב ומאפשר לך לתכנן ולעצב אתר אינטרנט בצורה שונה לגמרי. CSS הוא חובה לכל מי שעוסק בעיצוב אתרים.
שימוש ב-CSS מצריך ניסיון בסיסי ב-HTML.
איזו תוכנה נחוצה לנו?
אנא, במהלך הלימוד של מדריך זה הימנע משימוש בתוכנות דוגמת DreamWeaver ,FrontPage או Word. תוכנות מתקדמות לא יעזרו לך ללמוד CSS, להיפך, הן יגבילו אותך ויאטו את קצב הלימוד שלך בצורה משמעותית.
כל שאתה זקוק לו הוא עורך טקסט פשוט, כמו פנקס הרשימות שמגיע עם מערכת ההפעלה "חלונות".
מה זה CSS?
יכול להיות שכבר שמעת על CSS מבלי לדעת מה הוא באמת. בשיעור זה תלמד יותר על CSS ומה הוא יכול לעשות עבורך.
CSS הם ראשי התיבות של Cascading Style Sheets ובתרגום לעברית - גיליונות עיצוב מדורגים.
מה אני יכול לעשות עם CSS?
CSS היא שפת עיצוב שמגדירה את תבנית העיצוב של מסמכי HTML. למשל, CSS מטפלת בגופנים, צבעים, גבולות, שורות, גובה, רוחב, תמונות רקע, מיקום מתקדם ודברים רבים נוספים. המתן ותראה.
בשפת HTML יכול להיעשות שימוש לא נכון להוספת תבניות עיצוב לאתרי אינטרנט. לעומת זאת, CSS מציעה יותר אפשרויות והיא מדויקת ומתקדמת יותר. CSS תומכת בכל הדפדפנים הקיימים היום ולאחר מספר שיעורים במדריך זה תוכל ליצור בעצמך גיליונות עיצוב באמצעות CSS כדי להעניק לאתר שלך מראה מדהים.
מה ההבדל בין CSS ו- HTML?
HTML משמשת להגדרת מבנה התוכן. CSS משמשת לעיצוב תוכן מובנה.
טוב... זה אולי נשמע קצת טכני ומבלבל אבל אנא, המשך בקריאה, בקרוב זה ישמע לך ברור והגיוני מאוד.
פעם, בימים הטובים כשמדונה הייתה בתולה ובחור בשם טים ברנס-לי המציא את רשת האינטרנט העולמית, שפת ה-HTML שימשה רק להוספת מבנה לטקסט. מחבר יכול היה לסמן את הטקסט שלו ב-"זוהי כותרת" או "זוהי פסקה" באמצעות תגי HTML דוגמת <h1> ו-<p>.
ככל שרשת האינטרנט הפכה פופולארית יותר, מעצבי אתרים החלו לחפש אפשרויות להוספת תבניות עיצוב למסמכים שלהם. כדי להיענות לביקוש זה, יצרני הדפדפנים (בתקופה ההיא נטסקייפ ומיקרוסופט) המציאו תגי HTML חדשים, לדוגמה, התג <font> שהיה שונה מתגי ה-HTML המקוריים בכך שהגדיר תבנית עיצוב ולא מבנה.
זה הוביל למצב בו נעשה שימוש שגוי ותדיר בתגי מבנה מקוריים כדוגמת <table> לעיצוב מבנה דפים במקום ייעודם המקורי - הוספת מבנה לטקסט. בנוסף, תגי מבנה חדשים ורבים כדוגמת <blink>נתמכו רק על ידי סוג אחד של דפדפן. "אתה צריך את דפדפן X כדי לראות דף זה" הפכה להודעה שכיחה באתרי אינטרנט.
CSS הומצאה לתיקון מצב זה בכך שנתנה בידי מעצבי אתרים תבניות עיצוב מתקדמות הנתמכות על ידי כל הדפדפנים. בו בזמן, ההפרדה של סגנון ההצגה מהתוכן, הפכה את תחזוקת אתרי האינטרנט למשימה הרבה יותר קלה.
אילו תועלות CSS תיתן לי?
CSS הייתה מהפכה בעולם עיצוב האתרים. היתרונות הממשיים של CSS כוללים:איך זה פועל?
- שליטה על תבנית העיצוב של מסמכים רבים מגיליון עיצוב אחד.
- שליטה מדויקת יותר על תבנית העיצוב.
- מימוש תבניות עיצוב שונות לסוגי מדיה שונים (תצוגת מסך, הדפסה וכו').
- מספר רב של טכניקות עיצוב מתקדמות ומתוחכמות.
תכונות רבות שנעשה בהן שימוש בגיליונות עיצוב מדורגים (CSS) זהים לאלו של שפת ה-HTML. לכן, אם אתה משתמש ב-HTML להגדרת תבנית עיצוב, יתכן מאוד שתזהה חלק ניכר מקוד זה.
תחביר CSS בסיסי
נניח שאנחנו רוצים לבחור בצבע אדום כרקע לדף אינטרנט:
בשפת HTML אנחנו יכולים לעשות זאת כך:
עם CSS נקבל תוצאה זהה בצורה כזו:קוד:<body bgcolor="#FF0000">
כפי שבטח הבחנת, הקוד כמעט זהה ל-HTML ול-CSS. הדוגמה שלמעלה גם מציגה לך עקרונות בסיסיים של מודל ה-CSS.קוד:body {background-color: #FF0000;}
תחביר CSS בסיסי נראה כך:
יישום CSS למסמך HTML
ישנן שלוש דרכים להחיל CSS במסמך HTML. שלוש שיטות אלו מודגמות למטה. אנחנו ממליצים שתתמקד בשיטה השלישית, דהיינו External (חיצוני).
שיטה 1: In-Line (בתוך-שורה) ( המאפיין Style)
דרך אחת להחיל CSS במסמך HTML היא על ידי שימוש במאפיין ה-style HTML. בהתבסס על הדוגמה שלמעלה עם הרקע בצבע אדום, ניתן להחיל זאת כך:
שיטה 2: Internal (פנימי) (התג Style)קוד:<html> <head> <title>Example</title> </head> <body style="background-color: #FF0000;"> <p>This is a red page</p> </body> </html>
דרך נוספת היא להחיל קוד CSS באמצעות תגה-style HTML. לדוגמה:
שיטה 3: External (חיצוני) (קישור לגיליון עיצוב)קוד:<html> <head> <title>Example</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>This is a red page</p> </body> </html>
השיטה המומלצת היא קישור למה שמכונה גיליון עיצוב חיצוני. לאורך כל מדריך זה ובכל הדוגמאות שלנו נעשה שימוש בשיטה זו.
גיליון עיצוב חיצוני הוא פשוט קובץ טקסט עם סיומת css.<שם הקובץ>. בדומה לכל קובץ אחר, אתה יכול למקם את גיליון העיצוב שלך בשרת האינטרנט שלך או בכונן קשיח אחר.
למשל, נניח שגיליון העיצוב שלך נקרא style.css והוא ממוקם בספריה בשם style. מצב זה יראה כך:
הרעיון הוא ליצור קישור ממסמך ה-(default.htm) HTML לגיליון העיצוב (style.css). קישור כזה נוצר עם שורת קוד HTML אחת:
שים לב כיצד הנתיב לגיליון העיצוב שלנו מוגדר על ידי המאפיין href.קוד:<link rel="stylesheet" type="text/css" href="style/style.css" />
שורת הקוד חייבת להיכלל בקטע ה-header של קוד ה-HTML, כלומר בין התגים <head> ו-<head/>. כך:
קישור זה אומר לדפדפן שבהצגת קובץ ה-HTML עליו להשתמש בתבנית העיצוב שמוגדרת בקובץ ה-CSS .קוד:<html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> ...
הדבר המחוכם באמת הוא שניתן לקשר מספר מסמכי HTML לאותו גיליון עיצוב. במילים אחרות, קובץ CSS יחיד יכול לשמש לשליטה על תבנית העיצוב של מסמכי HTML רבים.
טכניקה זו יכולה לחסוך לך הרבה מאוד עבודה. אם לדוגמה, אתה תרצה לשנות את צבע הרקע של אתר אינטרנט עם 100 דפים, גיליון עיצוב יכול לחסוך לך את הצורך בשינוי ידני של 100 מסמכי HTML. באמצעות CSS, השינוי יכול להתבצע תוך מספר שניות על ידי שינוי שורת קוד אחת בלבד בגיליון העיצוב המרכזי.
צבעים ורקעים
צבע (color)
התכונה color מתארת את הצבע של אלמנט.
למשל, דמיין שאנחנו רוצים שכל הכותרות במסמך שלנו יהיו בצבע אדום כהה. כל הכותרות מסומנות בתג ה-<h1> HTML. הקוד למטה מגדיר את צבע האלמנט <h1> לאדום.
ניתן להגדיר צבעים בקוד הקסדצימלי כמו בדוגמה שלמעלה (#ff0000), או שאתה יכול להשתמש בשמות הצבעים ("red") או בערכי RGB (255,0,0).קוד:h1 { color: #ff0000; }
צבע רקע (Background-color)
התכונה background-color מתארת את צבע הרקע של אלמנט.
האלמנט <body> מכיל את כל התוכן של מסמך HTML. לכן, כדי לשנות את צבע הרקע של הדף כולו, התכונה background-color צריכה להיות מוחלת על האלמנט <body>.
אתה יכול להחיל צבעי רקע על אלמנטים נוספים כולל כותרות וטקסט.
בדוגמה הבאה, צבעי רקע שונים מוחלים לאלמנטים <body> ו-<h1>.
עדכון הבא בקרוב.קוד:body { background-color: #FFCC66; }h1 { color: #990000; background-color: #FC9804; }
נכתב במקור על ידי אושרי
ציטוט ההודעה
