HTML וכל מה שמסביב

מה זה CSS?

מבוא

CSS הם ראשי תיבות של Cascading Style Sheets ובתרגום לעברית: גליונות סגנון מדורגים.

למה CSS משמש? משתמשים ב CSS כדי לתת עיצוב לדפי HTML. אמנם את רוב העיצוב של הדף אפשר לעשות ללא שימוש ב CSS בכלל, אך זה לא מומלץ (כלומר מומלץ להשתמש ב CSS כדי לעצב דפי HTML).

הסיבות שבגללן כדאי להשתמש ב CSS הן:

  1. הפרדה: ב HTML נגדיר את התוכן וב CSS נגדיר את העיצוב של הדף.
  2. ההפרדה יכולה להיות פיזית (כלומר קוד CSS יישב בקובץ נפרד) ואז נוכל לתת לכותב תוכן לכתוב את התוכן ב HTML ולמעצב גראפי לתת את העיצוב הסופי ב CSS.
  3. השימוש בעיצוב בעזרת HTML נחשב למיושן (deprecated) וייתכן שאפילו לא ייתמך בעתיד ע"י HTML.

טיפ: כדי לראות ב firefox איך נראה דף ללא CSS, בחר/י מהתפריט View->Page Style->No Style . כדי לחזור למצב CSS, בחר/י מהתפריט View->Page Style->Basic Page Style.

את פקודות CSS יוצרים באופן הבא:

selector {property:value; property:value; …}

כאשר selector הוא התגית או קבוצת התגיות שרוצים לתת לה או להן עיצוב מסוים; property הוא סוג העיצוב (למשל גודל, צבע או פונט); value הוא הערך (למשל גדול, ירוק או helvetica – שם של פונט).

הכנסת CSS

קיימות 3 דרכים כדי להכניס קוד CSS לתוך HTML

  1. External – ע"י תגית ה HTML שנקראת link:
    התכונה rel אומרת שזה גליון עיצוב.
    התכונה type אומרת שההפנייה היא לקובץ טקסטואלי.
    התכונה href מפנה אותנו לקובץ CSS.
    שימו לב שלתגית link יש עוד שמושים רבים.
  2. Internal – ע"י התגית style:
    את פקודות ה CSS שמים במקום 3 הנקודות (…)
  3. Inline – ע"י התכונה style:
    במקרה זה קובעים את צבע הטקסט ואת המרחק מהדופן השמאלית.

שימו לב שאם משתמשים ב Inline אז מאבדים יתרונות רבים של CSS.

עדיפות: אם הוגדר יותר מ selector אחד עבור אותה תגית, אז ה selector האחרון הו זה שתופס.

הערה: ב WordPress משתמשים ב CSS באופן מאוד מסיבי.

הערות ב CSS

הערות ב CSS הן ע"י */ ו /*:

/* This is a comment */

CSS selector

ה selector ב CSS יכול להיות מהצורה הבאה:

  1. שם של תגית HTML, למשל h1 או p.
  2. שם של תגית HTML בצרוף class למשל h1.title.
  3. class או id ללא שם של תגית HTML:
    אם משתמשים ב id אז צריך לתת את התכונה id לתגיות שאותן רוצים לעצב: "id="para1
    אם משתמשים ב class אז צריך לתת את התכונה class לתגיות שאותן רוצים לעצב: "class="center
    הערה: השימוש ב id איננו נפוץ.

CSS property

ב CSS אפשר להגדיר תכנונות רבות, ביניהן:

  1. צבע רקע (background color).
  2. תמונת רקע (background image).
  3. צבע הטקסט.
  4. יישור הטקסט (text alignment)
  5. דקורציה של הטקסט (כלומר קו מעל הטקסט, קו על גבי הטקסט, קו מתחת לטקסט או טקסט מהבהב).
  6. טרנספורמציה של הטקסט (לשחק עם אותיות גדולות/קטנות – שימושי באנגלית).
  7. הסחה (indentation) של הטקסט.
  8. סוג וגודל הגופן (font) של הטקסט.
  9. היפר קישור, למשל לצבוע היפר קישור שביקרנו בו כבר.
  10. רשימות: אפשר לתת סוג של סמן מסויים לרשימה ואפילו רשימה ממוספרת לפי א"ב עברי.
  11. טבלאות: אפשר לתת עיצוב אחיד לכל הטבלאות בדף או בקבוצת דפים.
  12. מודל התיבה (box model):
    כלומר אפשר לשחק בצורה גמישה מאוד עם התוכן (content), הגבול (border), מה שביניהם (padding) ומה שמחוץ לגבול (margin).
  13. קיבוץ (grouping): אפשר לקבץ מספר תגיות ע"י הפרדה בפסיק:
    במקוםאפשר לכתוב
  14. קינון (nesting): אפשר להגדיר selector בתוך selector.
  15. מידות: אפשר להגדיר גובה, רוחב, גובה מינימלי ומקסימלי, ורוחב מינימלי ומקסימלי של אלמנט.
  16. בעזרת CSS אפשר להסתיר אלמנטים מהדף.
  17. בעזרת CSS אפשר למקם (position) אלמנטים על הדף ואפילו לקבוע איזה אלמנט יופיע מעל איזה אלמנט (z-order).
  18. אלמנטים צפים: אלמנט יכול לצוף לשמאל או לימין הדף.
  19. pseudo-classes: אפשר להגדיר אפקטים מיוחדים למשל כאשר סמן העכבר מעל link (בעזרת a:hover) או עבור האלמנט הראשון מסוג מסוים (בעזרת first-child:).
  20. pseudo-elements: אפשר להגדיר אפקטים מיוחדים למשל לשורה הראשונה בפסקה (בעזרת p:first-line) או לאות הראשונה בפסקה (בעזרת p:first-letter).
  21. שקיפות: אפשר להגדיר אלמנט שקוף (למשל טקסט שיש מתחתיו תמונה).
  22. סוגי מדיה: בעזרת CSS אפשר למשל להציג על המסך טקסט בפונט מסוים אבל להדפיס את הטקסט בפונט אחר.
  23. תכונות: אפשר לתת עיצוב לכל התגיות עם תכונה מסויימת.

רפרנס

אתר מצוין בעברית ל CSS: פה ופה.

אתר מצוין באנגלית: w3schools.

תגובה אחת »

  1. שאלות ותשובות בנושא css באתר tshuva2sheela.com/tag/css

    תגובה של מוטי — 3 באוגוסט 2016 @ 17:41 | הגב


RSS feed for comments on this post. TrackBack URI

כתיבת תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

יצירה של אתר חינמי או בלוג ב־WordPress.com.

%d בלוגרים אהבו את זה: