מדריך CSS – מבוא ל-CSS
- בשיעור זה ראינו מהו CSS וראינו שיש לו הרבה כוח בעיצוב של דפים במיוחד כאשר מדובר בעיצוב של אתרים גדולים
- לא ניסיתי ללמד אתכם את כל CSS כי יש המון מה ללמוד, כל מה שרציתי זה שתדעו את העקרונותו ושיש חייה כזו שקוראים לה CSS
- היום עם הידע שלכם אתם מסוגלים להסתכל על קוד של אתר רגיל ולהבין את רוב המבנה שלו – כולל ה-CSS
- ראינו שקוד של CSS ניתן למקם ב-3 מקומות באתר:
- CSS מקומי – בתוך תגית מסויימת של HTML – השפעתו תהייה על התגית הזאת בלבד
- CSS גלובאלי – בראש הקובץ – השפעתו תהיה על הדף שבו מיקמנו את ה-CSS
- CSS שממוקם בתוך קובץ מיוחד – השפעתו תהיה על כל קובץ שנרצה
- CSS מקומי:
יימוקם בתוך מאפיין style שקיים בכל תגית של HTML לדוגמא:<body style="……CSS.CODE….."> …..
<font style="……CSS.CODE….."> …..</font> - CSS גלובאלי:
את הקוד שמים בין תגית style פותחת לבין סוגרת.
בהצהרה על תגית שרוצים לעצב אנו נציין את שם התגית ולאחריו סוגריים מסולסלות.
את קוד ה-CSS אנו נשים בין הסוגריים המסולסלות:<html>
<head>
<title> …………. </title>
<style>
font{
….CSS.CODE…..
}H1{
….CSS.CODE…..
}H2{
….CSS.CODE…..
}
</style></head>
<body></body>
</html> - CSS בתוך קובץ:
את קוד ה-CSS אנחנו נכתוב בתוך קובץ עם סיומת css למשל בקובץ style.css
סגנונן הכתיבה הוא בדיוק כמו ב-CSS הגלובאלי.
כדי להשליך את העיצוב שהגדרנו עבור התגיות בקובץ הגלובאלי, אנו צריכים לייבא קובץ זה באופן הבא:<html>
<head>
<title> …………. </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body></body>
</html> - כדי להגדיר לינקים אנו מגדירים קוד CSS עבור A ועבור A:Hover
כאשר A זה העיצוב עבור הלינק עצמו ו-A:Hover הוא העיצוב עבור הלינק כאשר אנו עוברים עליו עם העכבר. - ניתן גם להגדיר מחלקות של עיצוב ואז להשליך עיצוב זה עבור כל תגית שנרצה באמצעות המאפיין class שיש לכל תגית.
הגדרת המחלקה ניתן על ידי נקודה ואחריה שם המחלקה, ואז כרגיל – סוגריים מסולסלות וקוד CSS בתוכן לדוגמא:<html>
<head>
<title> …………. </title>
<style>
.yoyo{
….CSS.CODE…..
}.momo{
….CSS.CODE…..
}.kuku{
….CSS.CODE…..
}
</style></head>
<body>
<font>……….</font>
<font>……….</font>
<font>……….</font>
<h1>……….</h1>
<h1>……….</h1>
<h1>……….</h1>
</body>
</html>


