עיצוב אתרים ב css

מה זה css

לכל שפת תכנות תהיה שימוש מסוים והשפעות שונות על המערכת, לשפת css קיים צורך מרכזי אחד – לאפשר לנו לשנות בכל הנוגע לעיצוב באתר שלנו, לדוגמא ניתן לשנות רקעים, צבעים, פונטים ואפילו ליצור אנימציות מגניבות רק באמצעות css בלי שימוש ב JavaScript כלל!

 

בלי הרבה בלבולי מוח – איך מתחילים?

נתחיל בכך שנכיר את הכלי למפתחים בכרום בלחיצה על כפתור המקלדת f12 ויפתח לנו לשונית כזו –

 

• אם מופיע לכם בצד עקבו אחר ההוראות כאן כדי ליצור את הסרגל לרוחב המסך.

 

אם נביט בקוד כאן נוכל להבחין בכמה סוגי קוד שונים בעלי תפקידים, בצד שמאל נוכל לראות את כל הקוד html ממנו הדף מורכב :

 

בצד ימין נראה את קובץ ה css שמולבש בצורה חיצונית לדף :

 

נכון לעכשיו נתעלם משאר האופציות מסביב ונתרכז רק במה שאנחנו צריכים(צד ימני).

 

עכשיו ננתח את הצד הימני של הדף ברפרוף ונוכל לראות כיצד השפה בנויה פחות או יותר.

לדוגמא ניקח את הקוד ההתחלתי הזה מהדף הנ"ל –

 

בקוד הזה אנחנו רואים את המבנה הבא –

מה שאנחנו רואים כ div הוא פותח "איזור שליטה/השפעה" חדש . בdiv נוכל לשלוט ב- css בכל הקוד שנמצא בין ה div פותח (שם הקבוצת קוד) לבין ה <div/> שהוא הסוגר את חלקת הקוד תחת שליטת הdiv באמצעות השם הזה ובצורה חיצונית בלי לגעת בדף עצמן כלל.

אחרי שהבנו מה התפקיד של ה div נוכל לקחת כל חלק כזה בדף ולשנות אותן כפי רצוננו.

 

איך עושים את זה?

נלחץ על הסמן בצד שמאל בכלי המפתחים :

 

ונלחץ על כל חלק עליו נרצה לשלוט, לדוגמא אני רוצה לשנות את צבע הטקסט בקוד הזה :

תמונה עם סימון האיזור

טקסט מסומן

 

בצד ימין בכלי המפתחים נראה את כל שמות ה div שיש לנו באיזור זה ומה שנוכל לשלוט עליו :

עכשיו אוסיף לאיזור זה את ההוראה בצורה הזו ב css –

color : blue ;

 

ואז אעתיק את הקוד לקובץ ה style css מכאן :

 

*לרוב התבניות יש איזור מיוחד שאפשר לשים את ה css גם בהתאמה אישית או באיזור יעודי לדוגמא :

 

מה הלאה?

מכאן אנחנו נלמד בקצרה מה אפשר לעשות עם זה, פקודות כלליות וכדו ואז נשחק עם הכלי מפתחים ונראה יותר את האפשרויות הקיימות לנו ב css.

פקודות נפוצות ב css

 

צבע

.div-class { color : black; }

מקרא קוד : שם האלמנט המשפיע { צבע : שחור ; } 

 

אפשר גם ליצור צבעים בצורת html לדוגמא לבן יהיה – #ffff

לתצוגה רחבה של כלל הצבעים ב html לחצו כאן

 

צבע רקע

.div-class { background : #000; }

 מקרא קוד : שם האלמנט המשפיע { רקע : שחור ; } 

 

RTL / LTR – הזחת טקסט שמאל/ימין

.div-class { direction : rtl ; }

 

גובה

.div-class { height : 25px; }

ניתן להשתמש במידות פיקסלים או באחוזים, לרוב עדיף להשתמש באחוזים מטעמי רספונסיביות (התאמת האתק למכשירים ניידים)

 

רוחב

.div-class { width: 65% ; }

 

להעלים דברים

.div-class { display: none ; }

 

ליצור גבול מפריד (מסגרת)

.div-class { border : 1px solid; }

 

לסוג זה כמו רבים אחרים יש המון וואריאציות כמו יצירת רדיוס שיוצר כמעין עיגול בקצוות :

.div-class { border-radius : 99px; }

 

וצבע לבורדר :

.div-class { border-color : #ccc; }

הבנתם… 🙂

ריווח פנימי :

.div-class {padding: 15px;}

ריווח חיצוני :

.div-class {margin:15px 20px 15px 20px;}

 

*שימו לב שנוכל להחליט איזה מהצדדים יקבל משמעות כשכל מספר משחק תפקיד של צד ספציפי, זה עובד כך בכל תכונה המשתמשת בקביעת תצורה כמו גם בתכונות שהזכרתי כאן.

 

זהו זה פחות או יותר הכניסה הרכה שלכם לעולם העיצוב בעזרת css, בלי נדר עוד אמשיך לכתוב על הוראות מגניבות ושימושיות ב css אז תדאגו להישאר מעודכנים…

 

אה ואם יש לכם שאלות או וואט אבר תרשמו כאן ואשתדל לענות 😉