עבור לתוכן
View in the app

A better way to browse. Learn more.
HWzone

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

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

על-ידי 8us.co.il
ב תכנות

Featured Replies

פורסם

פרקים:

ידע מקדים

מטרת המדריך

מהו 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:) מתואר מודול קובסה בצורה הטובה ביותר. (זכרו את הציור!)

Box-Model.gif

גבולות

ב 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>

המלצות

ממליץ בחום להמשיך ללמוד את השפה CSS

כמה אתרים טובים ללמוד דרכם:

לדוברי עברית: http://www.devschool.co.il

לדוברי רוסית: http://htmlbook.ru/

לדוברי אנגלית: http://www.w3schools.com

סיכום

לסיכום אפשר להגיד שעברנו פה על רוב (60%) השימוש ב CSS.

קרדיט על המדריך הוא ל :

MyComp - תיקון ומכירת מחשבים נייחים וניידים

טכנאי מחשבים

מקורות

השתמשתי בתוכן עניינים של האתר cssguide.

מקור המדריך

  • ציטוט

    • ארכיון

    דיון זה הועבר לארכיון ולא ניתן להוסיף בו תגובות חדשות.

    עבור לרשימת הדיונים

    דיונים חדשים

    Configure browser push notifications
    Chrome (Android)
    1. Tap the lock icon next to the address bar.
    2. Tap Permissions → Notifications.
    3. Adjust your preference.
    Chrome (Desktop)
    1. Click the padlock icon in the address bar.
    2. Select Site settings.
    3. Find Notifications and adjust your preference.