יצירת קובץ CSS
cascading style sheets
קובץ המשמש לעיצוב האתר בעת בניית אתרי אינטרנט.
באמצעות קובץ CSS ניתן לשלוט בכל העיצובים באתר במקום אחד מרכזי. לדוגמה עיצוב הכותרות, הדף, התמנות ועוד (<p> <body> <h1>).
יתרונות השימוש ב CSS
יתרונות רבים יש לשימוש בקבצי CSS. בין היתרונות הבולטים:
- קו עיצובי אחד המשותף לכל האתר.
- ניתן להגדיר את העיצוב במקום אחד בלבד ולחסוך הרבה מאד כתיבת קוד שחוזרת על עצמה.
- קבצי הhtml קריאים יותר וברורים יותר
- במידה והוחלט לשנות את העיצוב בכל האתר. כל מה שצריך לעשות זה לשנות את קובץ ה CSS. שינוי זה יכול מיידית על כל האתר ללא צורך לשנות תגית תגית.
הקשר בין קובץ ה CSS לקובץ ה HTML
על מנת להפעיל את הקשר בין הקבצים יש להכניס את השורה הבאה בתוך קובץ ה HTML בין התגית <head> לתגית <head/>
יש לזכור לשנות את שם קובץ ה CSS לשם קובץ ה CSS שלכם. בדוגמא זאת שם הקובץ ה CSS הוא sty.css
<link href="/sty.css" rel=stylesheet type="text/css">
שיטת הכיתוב בקובץ
{הערך של המאפיין : מאפיין}שם התגית שאנו רוצים שתושפע מהקובץ.
לדוגמה:
h2{color:blue}
התגית h2 תקבל את הצבע הכחול בכל הקבצים מסוג html שיקושרו לקובץ ה CSS.
מה ההשפעה של קובץ ה CSS על קובץ HTML
כל התגיות שמופיעות בקובץ ה HTML יקבלו את העיצוב שמופיע בתוך קובץ CSS
קובץ CSS
קובץ CSS ישמר בסיומת css.
דוגמה לקבצי CSS:
sty.css
שם הקובץ במקרה זה הוא sty, רצוי לשמור את הקובץ בשלב הראשון באותה תיקייה כמו קבצי ה html. באתרים גדולים רצוי להחזיק את כל קבצי ה CSS בתיקייה נפרדת משלהם.
דוגמה לשימוש
בדוגמה שני קבצים: קובץ HTML המקושר לקובץ CSS
ההשפעה של קובץ ה CSS על קובץ ה HTML בדוגמה
בדוגמה הנוכחית כל התגיות המופיעות בתוך קובץ ה HTML מהסוג:
<h2> כל התגיות יהיו בצבע כחול
<p> כל התגיות יהיו עם גודל פונט 50
<body> כל המסמך שבתוך התגית יהיה מיושר לימין וכתוב מימין לשמאל.
sty.css קובץ לדוגמה
h2{color:blue}
p{font-size:50px}
body{text-align:right;direction:rtl}
קובץ HTML המקושר לקובץ CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="/sty.css" rel=stylesheet type="text/css">
</head>
<body>
<h2>זה אותו דבר</h2>
<p>זה אמור להיות 50 פיקסל </p>
</body>
</html>