CSS למתחילים
דף הבית  >>  >>  הרשם  |  התחבר
מאמרים

CSS למתחילים 

מאת    [ 10/03/2012 ]
מילים במאמר: 858   [ נצפה 1097 פעמים ]

 
 



פרקים:
הקדמה
ידע מקדים
מטרת המדריך
מהו CSS? 
תחביר
יישום CSS בדפי HTML
צבעים
אורך ואחוזים
בוררים
Margin ו – Padding
מודל הקופסה ב- CSS
גבולות
דוגמאה סופית
סיכום
מקורות





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


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


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


מהו CSS?
css הינה ראשי תיבות של Cascading Style Sheets.
CSS משמשת לעיצוב מסמכי HTML ויצירת תבניות לאתרי אינטרנט.


תחביר
אני ישר מתחיל בדוגמאות והסברים (כך לאורך כול המדריך).
[code]selector{ property : vaule;}[/code]
selector- תג ה HTML לדוגמא שאליו התכונה משתייכת.
property- תכונה, לדוגמא : גובה, רוחב, רקע.
vaule- ערך במספרים או קישור לקובץ או צבע הרקע.


יישום CSS בדפי HTML
ישנם כמה דרכים לישום CSS בדפי HTML:
דרך א'- יישום רציף= ישום חד פעמי לתג HTML.
[code]<p se="color: red">מדריך CSS למתחילים</p>[/code]
דרך ב'- יישום פנימי= יישום CSS על דף ספיציפי (בתוך התגית HEAD).
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS מדריך</title>
<style type="text/css">
    p {
        color: red;
    }
    a {
        color: blue;
    }
</style>[/code]
דרך ג' - יישום חיצוני= יישום זה היעיל מבין כולם, יוצרים דף חדש עם סיומת name.css ומשלבים עם דף HTML.
name.css
[code]   p {
        color: red;
    }
    a {
        color: blue;
    }[/code]
name.html
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>CSS מדריך</title>
    <link rel="stylesheet" type="text/css" href="myfile.css" />[/code]
ישנם עוד כמה דרכים אבל אני לא יפרט עליהם כי זה לא נחוץ כרגע.


צבעים
ב- CSS אפשר לציין צבעים בשמם, הערך ההקסדצימלי שלהם או ערך ה- RGB שלהם.
[code]    red
    rgb(255,0,0)
    rgb(100%,0%,0%)
    #ff0000
    #f00[/code]


אורך ואחוזים


    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 - יישור טקסט


דוגמא מסכמת[code]
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;[/code]


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


  [code]  body {
        font-size: 0.8em;
        color: navy;
    }
[/code]


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


Margin ו – Padding
תכונה לריווח בין אלמנטים.
margin= ריווח מחוץ לאלמנט
padding= ריווח בתוך אלמנט
[code]margin: 5em;
padding: 11em;[/code]


מודל הקופסה ב- CSS
אחד הדברים החשובים ב CSS זהו מודל הקופסה, כאשר יש אלמנט מסויים מעלב שכבת ריפוד, גבול, ושוליים.
בציור הבא (שמצאתי בגוגל  :1smiley:) מתואר מודול קובסה בצורה הטובה ביותר. (זכרו את הציור!)
http://www.devschool.co.il/guides/css/Images/Box-Model.gif


גבולות
ב CSS מגדירים גבולות ע"י border. 
[code] border-style: dashed;
border-width: 3px; [/code]


דוגמאה סופית
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <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> [/code]


סיכום
לסיכום אפשר להגיד שעברנו פה על רוב (60%) השימוש ב CSS.
אם אתם רוצים שאני ארכיב/יסביר יותר על תתבישו להגיב  :1wink:.
אנא ציינו שגיאות כתיב/תוכן.
קרדיט על המדריך הוא לי ולחברה MyComp.


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









סיכום
לסיכום אפשר להגיד שעברנו פה על רוב (60%) השימוש ב CSS.
אם אתם רוצים שאני ארכיב/יסביר יותר על תתבישו להגיב  :1wink:.
אנא ציינו שגיאות כתיב/תוכן.
קרדיט על המדריך הוא לי ולחברה 





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




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

מאמרים נוספים שעשויים לעניין אותך:

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

©2017
כל הזכויות שמורות

מורנו'ס - שיווק באינטרנט

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



מדיה חברתית:
חלון מאמרים לאתרך
תנאי שימוש במאמרים
ערוצי מאמרים ב-RSS Recent articles RSS


מאמרים בפייסבוק מאמרים בטוויטר מאמרים ביוטיוב