שליטה ב-CSS הבסיס לעיצוב אתרי אינטרנט

מה זה CSS?

CSS (Cascading Style Sheets) היא שפת עיצוב אתרי אינטרנט, שבניגוד ל-HTML, אחראית להוספת סגנונות ועיצוב לאתרים. בעוד ש-HTML משתמשים כדי לבנות את המבנה של האתר (כמו כותרות, פסקאות, תמונות וכדומה), CSS היא השפה שמביאה את האתר לחיים ומפיחה בו את העיצוב הרצוי.

דמיינו שאתם בונים אתר אינטרנט כמו שאתם בונים חדר: ב-HTML אתם קובעים את המידות, את המבנה, איפה יהיו הקירות, הדלתות והחלונות. ב-CSS אתם בוחרים את הצבעים, את העיצוב של הרהיטים, את התאורה, איך הקירות ייראו, ובסופו של דבר איך החדר ייראה בפועל.

למה אנחנו צריכים CSS?

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

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

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

איך CSS פועלת?

CSS כוללת חוקים שמקשרים בין רכיבי ה-HTML לבין עיצובים מסוימים. כל חוק ב-CSS כולל "סלקטור" (Selector) שמצביע על אלמנט ב-HTML ו"קובעת" את העיצוב עבור אותו אלמנט.

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

מתחילים עיצוב ב-CSS באמצעות סוגריים מסולסלים {}. הסוגריים משמשים לאגד את כל ההגדרות והסטיילים של אלמנט מסוים.

לדוגמה:

h1 {
  color: blue;
  font-size: 36px;
}

בקטע זה, כל הגדרת העיצוב עבור הכותרת <h1> (כמו הצבע והגודל) נמצאת בתוך סוגריים מסולסלים. כל הגדרה בתוך הסוגריים נפרדת עם נקודה-פסיק (;).

עיצוב כותרות

כמו שלמדנו קודם, יש לנו כותרות ב-HTML שמתחילות ב-<h1> ועד h6>. עכשיו נעצב את הכותרות כך שהן יהיו בולטות ונראות יותר טוב בעיניים.

h1 {
  font-size: 36px;
  color: #2c3e50;
  text-align: center;
}

h2 {
  font-size: 28px;
  color: #34495e;
  margin-top: 15px;
}

h3 {
  font-size: 22px;
  color: #16a085;
}

במקרה הזה, אנחנו עיצבנו את הכותרות כך:

הכותרת הראשית (h1) תהיה בגודל גדול ובצבע כהה. כותרות משניות (h2) יהיו בגודל בינוני, ובצבע כהה יותר. כותרת שלישית (h3) בצבע ירוק למראה רענן.

עיצוב פסקאות

פסקאות ב-HTML מתבצעות עם התגית <p>. כאן אנחנו רוצים שיהיה טקסט ברור וקריא.

p {
  font-size: 18px;
  line-height: 1.6;
  color: #555;
  width: 80%;
  margin: 20px auto;
  text-align: justify;
}

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

עיצוב קישורים

הקישורים, שמבוססים על תגית <a>, צריכים להיות ברורים ועם תגובת צבע כשעוברים עליהם עם העכבר.

a {
  color: #3498db;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #2980b9;
  text-decoration: underline;
}

עיצבנו את הקישורים כך:

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

עיצוב תמונות

אם אנחנו רוצים להוסיף תמונות לאתר, נשתמש בתגית <img>. נוודא שהתמונות יהיו בגודל מתאים ומסודרות.

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

כך עשינו:

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

עיצוב רשימות

רשימות הן כלי מצוין להציג דברים בצורה מסודרת. נשתמש ברשימה עם נקודות (<ul>) ורשימה ממוספרת (<ol>).

ul,
ol {
  margin: 20px auto;
  width: 80%;
  padding-left: 20px;
}

li {
  font-size: 18px;
  margin-bottom: 10px;
}

הכנסנו עיצוב לרשימות:

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

למה חשוב לדעת על CSS?

ב-CSS אנחנו יכולים לשלוט על איך כל חלק בדף ייראה. למשל:

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