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

 

מה זה CSS בכלל?

ראשי התיבות אומרות Cascading Style Sheet או בעברית: גיליונות סגנון מדורגים.
כמו בתוכנות האופיס השונות, WORD, POWER POINT  וכו'… אפשר לתת לכל טקסט או אלמנט עיצוב משלו באופן פרטני:

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

דוגמה לטקסט

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

כותרת מספר 1

כותרת מספר 2

אותו דבר באינטרנט אפשר לתת סגנון לאובייקטים כדי לעצב אותם בדיוק כמו שתכננו בעיצוב.

 

למה בעצם למעצב כדאי לדעת CSS?

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

אני חושב שבכלל לכל מעצב מתחום האינטרנט כדאי לדעת HTML + CSS אבל זה לשטיפת מוח אחרת בשבילכם laugh

CSS  נכתב בצורה הבאה:

מאפיין : ערך ;
* שימו לב שכל שורת מאפיין מסתיימת תמיד בנקודה פסיק ;

לדוגמה

font-family: arial;

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

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

 


 

color צבע פונט

color: blue;

או

color: #0000ff;

יצבע לנו את הטקסט בכחול

 


 

background-color צבע רקע

background-color: #00ff99;

יתן לנו רקע בצבע טורקיז ירקרק

 

 


 

border קו או מסגרת
כמו שאתם עושים בפוטושופ מסגרת תוכלו לעשות גם ב CSS
* שימו לב שהוספת מסגרת של 1 פיקסל למשל תגדיל את האובייקט שלכם ב-4 פיקסלים בסה"כ – כלומר 1 מכל צד.

 

border: 1px solid #9900ff;

יתן מסגרת בעובי 1 פיקסל בצבע סגול

 

 

border: 2px dotted black;

יתן קו מנוקד בעובי 2 פיקסלים בצבע שחור

 

 

border: 1px dashed red;

יתן מסגרת מקווקוות בעובי 1 פיקסל בצבע אדום

 

 


 

הגדרות שונות אפשר לתת לפונט, החל בסגנון, גודל, עובי וכו'...

 

font-family משפחת הפונטים

font-family: arial;

דוגמה לפונט אריאל

 

font-size גודל הפונט

font-size: 36px;

דוגמה לפונט בגודל 36 פיקסלים

 

font-weight משקל הפונט

font-weight: bold;

עכשיו הפונט מודגש

 

font-style סגנון הפונט

font-style: italic;

אם נרצה פונט נטוי

 


 

width רוחב האוביקט

width: 85px;

height גובה האוביקט

height: 40px;

נקבל אוביקט בצורה הזו

 

 


 

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

margin: 10px;

נקבל את זה

margin

אפשר לעשות זאת פרטנית לכל צד כך

margin-top: 8px;
margin-right: 13px;
margin-bottom: 24px;
margin-left: 0px;

או בשורה אחת לפי כיוון השעון – למעלה, ימינה, למטה ושמאלה

margin: 8px 13px 24px 0px;

נקבל את זה

margin

 


 

padding ריווח פנימי או ריפוד
גם כאן מדובר בריווח, אבל בריווח פנימי של האובייקט, או בעצם ריפוד היא המילה המתאימה. נניח שהאובייקט שלנו ברוחב 100 פיקסלים ובגובה של 50 פיקסלים ונוסיף לו Padding של 5 פיקסלים מכל כיוון – נקבל ריבוע גדול יותר:

110 פיקסלים רוחב ו-60 פיקסלים גובה לפי חשבון פשוט:
רוחב 100 + 5 פיקסל ריפוד משמאל ו-5 מימין = 110
גובה 50 + 5 פיקסל ריפוד מלמטה ו-5 מלמעלה = 60

כך זה נכתב

padding: 5px;

וזו התוצאה

padding

גם כאן כמובן אפשר באופן פרטני

padding-top: 21px;
padding-right: 15px;
padding-bottom: 0px;
padding-left:58px;

או בשורה אחת

padding: 21px 15px 0px 58px;

וכך זה יראה

padding

 


 

רוב הגדרות ה-CSS ברורות ואפשר לזכור אותן לפי השמות הלועזיים שלהן, עכשיו במקום להסביר למתכנת שיושב לידנו או עובד על האתר שעיצבנו שרצינו ריווח פנימי של 5 פיקסלים ומרווח חיצוני של 20 פיקסלים משמאל בזמן שמימין יש 9 פיקסלים לריבוע בגודל 80 על 40 פיקסלים בצבע טורקיז פחות או יותר עם מסגרת מנוקדת סגולה שבתוכה פונט ARIAL תעשו את זה ברור וקצר יותר ככה:

width: 80px;
height: 40px;
background-color: #e5ff00;
padding: 5px;
margin: 0px 9px 0px 20px;
font-family: arial;
border: 2px dotted #662d91;

זה מה שנקבל

פונט arial

מקווה שזה עזר לכם להבין בהצלחה