אם הגעתם לאתר הזה סימן שהחלטתם ללמוד את השפה css. בעזרת השפהcss תוכלו לעצב את דפי האתר שלכם בקלות. Css היא שפה חדשה יחסית, אך היא נתמכת ברוב הדפדפנים הפופלרים.
בcss קודם קובעים הגדרה. הגדרה היא בעצם מחליטה איזה תג לעצב. כלומר בהגדרה נכתוב תג כלשהו מהשפה html וכעת לכל התגים במסמך html שלנו יהיה את העיצוב שקבענו(נסביר איך עושים את זה) לאחר ההגדרה באה התכונה. התכונה היא בעצם כמו מאפיין בhtml. התכונה תמיד תקבל ערך לכל תכונה יש ערכים משלה שהיא יכולה לקבל. הערכים בעצם מעצבים את ההגדרה שלנו. והנה משהו שיבעיר לכם את זה:
נתחיל עם קובץ חיצוני, קובץ חיצוני הוא קובץ css נפרד שאותו נקבץ אל קובץ הhtml. ניתן להשתמש בקובץ css אחד לכל דפי הhtml שלנו, ואז נוכל לשנות את העיצוב שלנו בכל דפי האתר תוך שינוי אחד.
כדי לכתוב בקובץ חיצוני נשתמש בתג link שאותו נשים בין התג <head> לתג </head>. זה מה שצריך לכתוב:
כעת אסביר לכם על css פנימי, css פנימי זה בעצם שיטה שבה קוד הcss נמצא ישירות בתוך הhtml. את קוד הcss שמים בין התגים <style> ל</style> שיהיו בין התגים <head> ו</head>.
ישנו עוד צורת כתיבה אחת שנקראת inline אבל אני מאוד לא ממליץ לכם עליה, לכן לא אסביר לכם עליה. אני תמיד ממליץ לכם להשתמש בקובץ css חיצוני.
כעת לכו תעברו בדפי האתר, כדי ללמוד את כל התכונות והערכים שקיימים בcss
מה היתרונות?
לאחר קריאת הפסקה הראשונה, הבנתם שבעזרת css אתם מעצבים את הדפים, ואז נוצרת השאלהעם html עושים את זה לא?אז מעכשיו בhtml כבר לא משתמשים לעיצוב! בhtml צריך להשתמש רק בשביל ארגון התוכן ובשביל לקבוע זה כותרת, זה טבלה וכו'... ישנן מספר יתרונות בעיצוב עם css לעומת html:
- הפרדת עיצוב מתוכן
- תחזוקה קלה יותר
- תקינות טובה יותר
- יותר אפשרויות עיצוביים
- ניתן לעצב כל תג(לדוגמא: בhtml לא יכולתם לעצב טפסים, בcss אפשר)
- שליטה טובה יותר בגדלים(בhtml הכתב הכי גדול זה 7 של התג font, בcss אפשר ליצור כתבים ענקיים!)
איך css מורכבת?
בcss קודם קובעים הגדרה. הגדרה היא בעצם מחליטה איזה תג לעצב. כלומר בהגדרה נכתוב תג כלשהו מהשפה html וכעת לכל התגים במסמך html שלנו יהיה את העיצוב שקבענו(נסביר איך עושים את זה) לאחר ההגדרה באה התכונה. התכונה היא בעצם כמו מאפיין בhtml. התכונה תמיד תקבל ערך לכל תכונה יש ערכים משלה שהיא יכולה לקבל. הערכים בעצם מעצבים את ההגדרה שלנו. והנה משהו שיבעיר לכם את זה:
h1 {
font-size:14pt;
color:red;
}
מה שבעצם, זה קבענו שכל הכותרות h1 יהיו בצבע אדום ובגודל 14 נקודות. עכשיו אתם עוד לא מכירים את התכונות ולכן זה קצת מסובך להבין, אבל מה שחשוב שתבינו כיצד css בנויה. הנקודה פסיק ; מסמלת בעצם סוף ערך. לאחר הנקודה פסיק ; תבוא תכונה חדשה.font-size:14pt;
color:red;
}
איך כותבים בcss
לאחר שהבנו כיצד היא בנוייה, נבין איך משלבים אותה בתוך המסמך HTML ישנם שלושה דרכים לעשות את זה: קובץ חיצוני, פנימי, inline.נתחיל עם קובץ חיצוני, קובץ חיצוני הוא קובץ css נפרד שאותו נקבץ אל קובץ הhtml. ניתן להשתמש בקובץ css אחד לכל דפי הhtml שלנו, ואז נוכל לשנות את העיצוב שלנו בכל דפי האתר תוך שינוי אחד.
כדי לכתוב בקובץ חיצוני נשתמש בתג link שאותו נשים בין התג <head> לתג </head>. זה מה שצריך לכתוב:
<link rel="stylesheet" type="text/css" href="style.css" />
במאפיין href בעצם נותנים קישור לקובץ css. אני נוהג לקרוא לו style. וחייבים כמובן לשמור אותו כקובץ css עם סיומת .cssכעת אסביר לכם על css פנימי, css פנימי זה בעצם שיטה שבה קוד הcss נמצא ישירות בתוך הhtml. את קוד הcss שמים בין התגים <style> ל</style> שיהיו בין התגים <head> ו</head>.
ישנו עוד צורת כתיבה אחת שנקראת inline אבל אני מאוד לא ממליץ לכם עליה, לכן לא אסביר לכם עליה. אני תמיד ממליץ לכם להשתמש בקובץ css חיצוני.
כעת לכו תעברו בדפי האתר, כדי ללמוד את כל התכונות והערכים שקיימים בcss
אודות האתר
האתר css-guide נוצר בשנת 2008 ונותן לכם מדריכי css לקריאה בחינם. בעזרת מדריכי האתר css-guide תוכלו ללמוד ולשפר את יכולתכם בשפה css שנועדה על מנת לעצב דפי אינטרנט בצורה טובה. גלישה נעימה, ולימוד css נעים.
חברת NSL המתמחה בתחום קידום אתרים
