מדריך CSS למתחילים

פורסם 2012 במרץ 1013 שנים

פרקים:

ידע מקדים

מטרת המדריך

מהו CSS?

תחביר

יישום CSS בדפי HTML

צבעים

אורך ואחוזים

בוררים

Margin ו – Padding

מודל הקופסה ב- CSS

גבולות

דוגמה סופית

סיכום

מקורות

המלצות

ידע מקדים

אל מנת ללמוד CSS יש צורך ללמוד (רצוי לעומק) HTML.

מטרת המדריך

מטרת המדריך הוא לתת ידע בסיסי ב CSS.

מהו CSS?

css הינה ראשי תיבות של Cascading Style Sheets.

CSS משמשת לעיצוב מסמכי HTML ויצירת תבניות לאתרי אינטרנט.

תחביר

אני ישר מתחיל בדוגמאות והסברים (כך לאורך כל המדריך).

selector{ property : vaule;}

selector- תג ה HTML לדוגמא שאליו התכונה משתייכת.

property- תכונה, לדוגמא : גובה, רוחב, רקע.

vaule- ערך במספרים או קישור לקובץ או צבע הרקע.

יישום CSS בדפי HTML

ישנם כמה דרכים לישום CSS בדפי HTML:

דרך א'- יישום רציף= ישום חד פעמי לתג HTML.

<p style="color: red">מדריך CSS למתחילים</p>

דרך ב'- יישום פנימי= יישום CSS על דף ספיציפי (בתוך התגית HEAD).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/url]
<html>
<head>
<title>CSS מדריך</title>
<style type="text/css">
  p {
    color: red;
  }
  a {
    color: blue;
  }
</style>

דרך ג' - יישום חיצוני= יישום זה היעיל מבין כולם, יוצרים דף חדש עם סיומת name.css ומשלבים עם דף HTML.

name.css

  p {
    color: red;
  }
  a {
    color: blue;
  }

name.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/url]
<html>
<head>
  <title>CSS מדריך</title>
  <link rel="stylesheet" type="text/css" href="myfile.css" />

ישנם עוד כמה דרכים אבל אני לא יפרט עליהם כי זה לא נחוץ כרגע.

צבעים

ב- CSS אפשר לציין צבעים בשמם, הערך ההקסדצימלי שלהם או ערך ה- RGB שלהם.

  red
  rgb(255,0,0)
  rgb(100%,0%,0%)
  #ff0000
  #f00

אורך ואחוזים

em – לציון, גודל מחושב של פונט. כך ש – 2em יגדיל את הטקסט פי 2 מהמצב הקיים.

px – לציון, פיקסלים.

pt – לציון, נקודות.

% - לציון, אחוזים.

טקסט

font-family - סוג פונט

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

font-weight -הדגשה

font-style - נטוי

text-decoration - קו תחתון

text-transform - אותיות גדולות (לא שימושי בעברית)

letter-spacing - רווח בין הטקסט

word-spacing - רווח בין הטקסט

line-height - גובהה שורה

text-align - יישור טקסט

דוגמא מסכמת


font-family: "Times New Roman"
font-weight: bold
font-weight: normal
font-style: italic
font-style: normal
font-size: 2em;
text-decoration: none;
font-style: italic;
text-transform: uppercase;
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;

בוררים

כפי שלשפת HTML ישנן תגיות בשפת CSS ישנם בוררים (selectors).

 body {
    font-size: 0.8em;
    color: navy;
  }

בורר ה – body קיבל ערכים קבועים לגודל וצבע הפונט.

גודל פונט 0.8

צבע navy

Margin ו – Padding

תכונה לריווח בין אלמנטים.

margin= ריווח מחוץ לאלמנט

padding= ריווח בתוך אלמנט

margin: 5em;
padding: 11em;

מודל הקופסה ב- CSS

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

בציור הבא (שמצאתי בגוגל :1smiley:) מתואר מודול קובסה בצורה הטובה ביותר. (זכרו את הציור!)

גבולות

ב CSS מגדירים גבולות ע"י border.

 border-style: dashed;
border-width: 3px;

דוגמאה סופית

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/url]
<html xmlns="[url]http://www.w3.org/1999/xhtml">[/url]
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>יישור באמצע</title>
 <style type="text/css">
  #centerLayer {
  position: absolute; /* יישור אבסלוטי */
  width: 280px; /* אובי בפיקסלים */
  height: 180px; /* אורך בפיקסלים */
  left: 50%; /* מיקום משמאל */
  top: 50%; /* מיקום מלמעלה */
  margin-left: -150px; /* הזחה שמאלית */
  margin-top: -100px;  /* הזחה מלמעלה */
  background: #fc0; /* צבע רקע */
  border: solid 1px black; /* גבול מסביב */
  padding: 10px; /* ריפוד מסביב הטקסט */
  overflow: auto; /* הוספת גלילה */ 
  }
 </style>
 </head>
 <body>
 <div id="centerLayer">
 texttexttexttexttexttexttexttexttexttexttexttextt exttext<br>
texttexttexttexttexttexttexttexttexttexttext<br>
texttexttexttexttexttexttexttexttext<br>
 <>
 </body>
</html>