יצירת ספר אינטראקטיבי - חלק 19 - CSS3


יריב 06/02/2013 (נערך לאחרונה ב-10/02/2013)


 

 

CSS3 הוא התקן העדכני ביותר נכון להיום ש- W3C הכריזו עליו באופן רשמי.
למי שלא מכיר מומלץ לקרוא את הערך בויקיפדיה לקבלת מושג כללי.
בגדול מדובר על הפרדת הגדרות העיצוב מדף ה-HTML כך שניתן יהיה להגדיר את העיצוב של כל האתר מקובץ אחד ושקבצי ה-HTML יהיו קריאים יותר, כך גם ניתן להפריד את העבודה לאנשי מקצוע שונים.
הדגמה יפה הממחישה את כוחו של CSS בהצגת אותו התוכן בעיצובים שונים (שאותם בוחרים מהתפריט הימני) ניתן לראות כאן.
כמו במקרה של HTML5 ניתן להתנסות במה ש-CSS3 מציע בצורה מקוונת ב- w3schools.

כתיבה נכונה של דף HTML לא תכלול כלל הגדרות עיצוב ולא תשתמש בטבלאות ככלי עיצובי, כל הגדרות העיצוב ירוכזו בקובץ נפרד. התגית <style> לא צריכה להופיע בדף ה-HTML.
מה שצריך להיות זה אוסף אלמנטים, למשל <div>, שלהם משייכים עיצוב מסויים.


המשימה שלנו היא ליצור את החיבור בין דף ה-HTML שיצרנו בחלק הקודם לקובץ ה-CSS שניצור עכשיו.

כדי ליצור את קובץ ה-CSS ניצור קודם כל תיקייה חדשה (לשם נוחות וקריאות), אח"כ נלחץ על הלחצן הימני בעכבר Add -> Add New Item... -> Style Sheet (תמונה 2), ולבסוף נבחר שם לקובץ ונאשר.

ישנן 4 שיטות לשייך עיצוב CSS לדף HTML, אנו נשתמש בשיטה של שיוך קובץ נפרד:
  • בראש קובץ ה-HTML נוסיף תגית <head> מיד לאחר תגית <html>.
  • VS2012 מודיע לנו שחסר <title>, שזה הכיתוב שנמצא על הטאבים בדפדפנים, על ידי קו גלי ירוק מתחת לתגית <head>. נוסיף משהו.
  • כדי לקשור בין המסמך לקובץ העיצוב נוסיף את התגית <link> עם הפרמטרים המתאימים בין פתיחת וסגירת ה- <head>.

כדי לבחון שהעיצוב בקובץ ה-CSS אכן משפיע על צורת הצגת דף ה-html נשנה כמה הגדרות עיצוב.
בתמונה 4 ניתן לראות את תוצאת השינויים לעומת תמונה 3 בעיצוב הכותרת h1 ובפסקה p, פשוט העתקתי כמה הגדרות מתוך הדוגמאות שב- w3schools.


בחלק הבא ננסה להבין איך להשתמש בקוד JavaScript כדי ליצור אנימציות ולהוסיף הרבה יכולות אחרות.




<-- חלק 18                                                                                                                                                           חלק 20 -->

 

         






תגובות

 



הגב/הגיבי לרשומה:

שם


תוכן התגובה                                               


  Skip Navigation Links







אלא אם צויין אחרת בגוף המאמר התוכן חופשי להפצה תחת רשיון ייחוס 3.0 לא מותאם של Creative Commons.

Created by yarriva.com