Scribd Logo
Upload

Welcome to Scribd!

  • 11 views

    שיעור מספר 2 - Css

    Uploaded by

    Tal Danilof

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    שיעור מספר 2 - Css

    Uploaded by

    Tal Danilof
    11 views38 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    11 views38 pages

    שיעור מספר 2 - Css

    Uploaded by

    Tal Danilof

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    of 38

    ‫תכנות ‪WEB‬‬

    ‫מרצה‪ :‬ד"ר אורלי ברזילי‬


    ‫‪orlyba@mta.ac.il 050-4707039‬‬
    ‫תכנות ‪ – WEB‬נושאי הקורס‬

    ‫‪ CSS‬ומודל‬
    ‫‪ CSS‬ומיקום‬ ‫‪CSS‬‬ ‫תגיות ‪HTML‬‬
    ‫הקופסה‬
    ‫שיעור ‪3‬‬ ‫שיעור ‪2‬‬ ‫שיעור ‪1‬‬
    ‫שיעור ‪4‬‬

    ‫תגיות המבנה‬ ‫רספונסיביות ו‬


    ‫‪JavaScript‬‬ ‫טפסים‬
    ‫החדשות‬ ‫‪Bootstrap‬‬
    ‫‪8-9‬‬ ‫שיעור‬ ‫שיעור ‪7‬‬
    ‫שיעור ‪6‬‬ ‫‪5‬‬ ‫שיעור‬

    ‫אתר‬ ‫‪PHP +‬‬


    ‫שיעור חזרה‬ ‫אינטראקטיבי‬ ‫‪JQuery‬‬
    ‫‪MYSQL‬‬
    ‫‪13‬‬ ‫שיעור‬ ‫‪HTML CSS‬‬ ‫‪10‬‬ ‫שיעור‬
    ‫שיעור ‪12‬‬ ‫‪11‬‬ ‫שיעור‬

    ‫‪2‬‬
    ‫שיעור מספר ‪CSS – 2‬‬
    ‫‪? CSS ‬‬
    ‫‪‬כיצד נקשר ‪ HTML‬ל ‪.CSS‬‬
    ‫‪‬תחביר (בורר‪ ,‬מאפיין‪ ,‬ערך)‬
    ‫‪‬צבעים ‪ ,‬טקסטים‪ ,‬גופנים ורקעים‬

    ‫מטרת השיעור‪ :‬הסטודנט יבין כיצד לעצב את דף ה‬


    ‫‪ HTML‬באמצעות ‪.CSS‬‬
    ‫‪3‬‬
    ‫מה זה ‪?CSS‬‬

    ‫‪5‬‬
    ‫)‪CSS (Cascading Style Sheets‬‬
    ‫‪( CSS‬גליונות סגנון מדורגים) הם פורמט לעיצוב‬
    ‫דפי אינטרנט‪.‬‬
    ‫‪ CSS‬נוצר במטרה להפריד בין תוכן ומבנה דף‬
    ‫האינטרנט לבין העיצוב שלו‪.‬‬
    ‫‪ ‬השם גליונות סגנון מדורגים ניתן בגלל של ‪ CSS‬יש‬
    ‫היררכיה‪.‬‬

    ‫‪http://www.w3schools.com/css/css_intro.asp‬‬

    ‫‪5‬‬
    ‫‪ - CSS‬יתרונות‬
    ‫‪‬עיצוב גלובלי‬
    ‫‪‬קוד נקי יותר‬
    ‫‪‬הפרדה נוחה בין אנשי מקצוע‬
    ‫שונים‬
    ‫‪‬התאמה אישית‬
    ‫‪‬התאמה לפלטפורמות שונות‬
    ‫‪6‬‬
    ‫מה ניתן לשנות?‬
    ‫‪ ‬רקע‬
    ‫‪ ‬טקסט‬
    ‫‪ ‬קישורים‬
    ‫‪ ‬טבלה‬
    ‫‪ ‬כותרות‬
    ‫‪ ‬רשימות‬
    ‫‪ ‬סמן העכבר‬
    ‫‪ ‬מיקום‬

    ‫‪7‬‬
    ‫נוסיף צבע לפסקאות‬

    ‫‪8‬‬
    ‫נוסיף צבע לפסקאות‬
    ‫מה החסרון של שימוש במאפיין‬
    ‫‪ Style‬בצמוד לתגית?‬

    ‫‪9‬‬
    ‫נוסיף צבע לפסקאות – נשנה את הקוד‬

    ‫‪10‬‬
    ‫הגדרת ‪ CSS‬בגליון עיצוב חיצוני‬
    ‫נייצר קובץ חיצוני בשם “‪ ”myStyle.css‬שיכלול את‬
    ‫התוכן הבא‪:‬‬
    ‫}‪p {color: blue‬‬
    ‫נקשר את דף ה ‪ HTML‬לקובץ באופן הבא‪:‬‬
    ‫>‪<head‬‬
    ‫>"‪<link rel="stylesheet" type="text/css" href="mystyle.css‬‬
    ‫>‪</head‬‬

    ‫‪11‬‬
    ‫תחביר‬

    ‫‪selector‬‬
    ‫‪h1‬‬ ‫};‪{color: blue; font-size:12px‬‬

    ‫‪property value property value‬‬

    ‫בורר ‪ :selector -‬מגדיר את האלמנט שאותו אנחנו רוצים לעצב‬


    ‫תכונה ‪ :property -‬התכונה שאותה אנחנו רוצים לעצב‬
    ‫ערך – ‪ :value‬הערך שאנחנו רוצים לתת לתכונה‬

    ‫‪12‬‬
    ‫הבורר (‪)selector‬‬
    ‫הבורר משמש כדי למצוא את האלמנט המתאים‪.‬‬
    ‫יש מספר אפשרויות למציאת האלמנט המתאים‪:‬‬
    ‫‪‬לפי שם התגית‪.‬‬
    ‫‪‬לפי מזהה ‪.id‬‬
    ‫‪‬לפי ‪class‬‬
    ‫‪‬לפי מאפיין‬

    ‫‪13‬‬
    ‫קיבוץ של מספר בוררים לפי תגית‬

    ‫‪14‬‬
    ‫בורר לפי תגית – דוגמא‬
    h1{ <body>
    text-align: center;
    color: red; <h1>Item1</h1>
    } <p>Item2</p>
    <p>Item3</p>
    p{
    font-size: 300%; </body>
    }

    ?‫איך יוצגו הטקסטים שלמעלה‬

    15
    ‫בורר לפי מזהה ‪id‬‬
    ‫המאפיין ‪ id‬משמש להגדיר מזהה יחודי לאלמנט של ‪.HTML‬‬
    ‫בדר"כ משתמשים בו לשני שימושים‪:‬‬
    ‫‪‬להגדרת סגנון עיצוב‬
    ‫‪‬ל ‪ JavaScript‬כדי לבצע שינויים על אלמנט בקוד‪.‬‬
    ‫הגדרה בדף ה‬
    ‫>‪<h1 id="myHeader">Hello World!</h1‬‬ ‫‪HTML‬‬

    ‫‪selector‬‬
    ‫‪# myHeader‬‬ ‫};‪{color: blue; font-size:12px‬‬

    ‫‪16‬‬
    1 ‫בורר לפי מזהה– דוגמא‬
    #myHeader{ <body>
    text-align: center;
    color: red; <h1 id=“myHeader”>Item1</h1>
    } <p>Item2</p>
    <p>Item3</p>
    p{
    font-size: 300%; </body>
    }

    ?‫איך יוצגו הטקסטים שלמעלה‬

    17
    2 ‫בורר לפי מזהה– דוגמא‬
    #myPar{ <body>
    text-align: center;
    color: red; <h1>Item1</h1>
    } <p id=“myPar”>Item2</p>
    <p>Item3</p>
    p{
    font-size: 300%; </body>
    }

    ?‫איך יוצגו הטקסטים שלמעלה‬

    18
    3 ‫בורר לפי מזהה– דוגמא‬
    #myPar{ <body>
    text-align: center;
    color: red; <h1>Item1</h1>
    } <p id=“myPar”>Item2</p>
    <p>Item3</p>
    p{
    font-size: 300%; </body>
    color:green;
    }
    ?‫איך יוצגו הטקסטים שלמעלה‬

    19
    ‫בורר לפי ‪class‬‬
    ‫המאפיין ‪ class‬משמש להגדיר מזהה לאלמנט של ‪.HTML‬‬
    ‫המאפיין ‪ class‬אינו יחודי‪:‬‬
    ‫‪‬ניתן להגדיר אותו ‪ class‬למספר אלמנטים‪.‬‬
    ‫‪‬לאלמנט יכול להיות מספר ‪.classes‬‬

    ‫הגדרה בדף ה‬
    ‫>‪<h1 class=“intro">Hello World!</h1‬‬ ‫‪HTML‬‬

    ‫‪selector‬‬
    ‫‪.intro‬‬
    ‫};‪{color: blue; font-size:12px‬‬
    ‫‪h1.intro‬‬
    ‫‪20‬‬
    1 ‫ – דוגמא‬class ‫בורר לפי‬
    .center { <body>
    text-align: center;
    color: red; <h1 class="center">Item1</h1>
    } <p class="center">Item2</p>
    <p class="center large">Item3</p>
    .large {
    font-size: 300%; </body>
    }

    ?‫איך יוצגו הטקסטים שלמעלה‬

    21
    2 ‫ – דוגמא‬class ‫בורר לפי‬
    p.center { <body>
    text-align: center;
    color: red; <h1 class="center">Item1</h1>
    } <p class="center">Item2</p>
    <p class="center large">Item3</p>
    p.large {
    font-size: 300%; </body>
    }

    ?‫איך יוצגו הטקסטים שלמעלה‬


    http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_class_more2

    22
    ‫התגית <‪ >span‬לעיצוב מספר‬
    ‫מילים‬
    ‫נשתמש בתגית <‪ .>span‬התגית משמשת כדי לקבץ קבוצה‬
    ‫של מילים בתוך קטע (<‪ )>P‬כדי לתת להם עיצוב מסוים‬

    ‫‪23‬‬
    ‫התגית <‪ >div‬לעיצוב מספר קטעים‬

    ‫‪24‬‬
    ‫מה קורה כאשר יש התאמה למספר סגנונות‬
    ‫עיצוב?‬
    ‫קיים סדר היררכי של עדיפות‪:‬‬
    ‫‪‬עיצוב בתוך השורה‬
    ‫‪‬עיצוב על פי ‪id‬‬
    ‫‪‬עיצוב על פי ‪.class‬‬
    ‫‪‬עיצוב על פי התגית‬
    ‫‪‬כאשר יש עיצובים באותה רמה האחרון שנקרא הוא‬
    ‫הקובע‬
    ‫‪25‬‬
    ‫לעבודה בתרגילים‬

    ‫‪26‬‬
    ‫צבעים‬
    :‫ניתן להגדיר צבעים במספר אופנים אופנים‬
    .red ‫באמצעות שם כמו‬
    ‫ אדום‬.‫באמצעות קוד המבוסס מספר הקסדצימלי‬
    .FF0000# ‫יוגדר כ‬
    http://htmlcolorcodes.com/

    http://www.w3schools.com/cssref/css_colors_legal.asp

    http://www.colorzilla.com/chrome/

    27
    ‫גדלים‬
    ‫‪ CSS ‬מציעה יחידות מידה שונות כדי לציין גודל‪.‬‬
    ‫‪ ‬לחלקן יש הסטוריה שקשורה לטופוגרפיה כמו )‪pt (point‬‬
    ‫חלקם משמשות בחיי היום יום כמו )‪.cm (centimeter‬‬
    ‫‪ ‬יש מספר יחידות שהומצאו במיוחד בעבור ‪ CSS‬כמו‬
    ‫)‪.px(pixels‬‬
    ‫‪ ‬לעבודה עם מסך מומלץ לעבוד עם היחידות הבאות‪:‬‬
    ‫‪.% ,px, em‬‬
    ‫‪https://www.w3.org/Style/Examples/007/units.en.html‬‬

    ‫‪28‬‬
    ‫גדלים ‪ -‬פיקסל‬
    ‫‪ ‬פיקסל (‪ - )pixels‬יחידת מידע גרפית אבסטולוטית‪,‬‬
    ‫המתארת נקודה בתמונה דיגיטלית‪ .‬ככל שהתמונה מורכבת‬
    ‫מיותר פיקסלים הרזולוציה (יכולה האבחנה) טובה יותר‪.‬‬
    ‫‪ ‬פיקסל (‪ )pixels‬של ‪:CSS‬‬
    ‫‪ ‬יחידת מידע לוגית של ‪ CSS‬המוגדרת כיחידה אבסטולוטית שהיא‬
    ‫שוות ערך ל‪ 1/96‬אינש‪ .‬אבל‪ ...‬היחידה הזאת היא יחסית‬
    ‫לרזולוציה של המסך‪.‬‬
    ‫‪ ‬גודל ברירת המחדל לפונט הוא ‪.16px‬‬
    ‫‪ ‬מומלץ להשתמש לאלמנטים בעלי גודל קבוע כמו לוגו‪ ,‬באנר‬
    ‫פרסומת וכדומה‪.‬‬

    ‫‪29‬‬
    ‫גדלים ‪em -‬‬
    ‫‪ - em‬יחידת מידע גרפית המוגדרת באופן יחסי‬
    ‫לגודל הפונט הנורמלי (תלוי בדפדפן‪ ,‬בגודל‬
    ‫המסך‪ ,‬במערכת ההפעלה)‬
    ‫‪‬לדוגמא‪ 2.5em :‬המוגדר לכותרת מגדירה את‬
    ‫הגודל ל ‪ 2.5‬פעמים הגודל של הפונט הנורמלי ב‬
    ‫‪ body‬גודל ברירת המחדל לטקסט רגיל הוא‬
    ‫‪.1em=16px‬‬
    ‫‪‬יחידת המידה הזאת מומלצת על ידי ‪.w3c‬‬
    ‫‪30‬‬
    ‫גדלים ‪% -‬‬
    ‫‪ -%‬יחידת מידע גרפית המוגדרת באופן יחסי‬
    ‫לאלמנט האבא‪.‬‬

    ‫‪31‬‬
    ‫טקסטים‬
    ‫ערכים‬ ‫משמעות התכונה‬ ‫שם תכונה‬

    center, left, right, justify ‫ יישור‬text-align


    none, overline, line-throught, ‫ קישוט‬text-decoration
    underline
    uppercase, lowercase, capitalize ‫ טרנספורמציה‬text-transform
    ‫הגדרה ביחידות גודל‬ ‫ הזחה‬text-indent
    ‫הגדרה ביחידות גודל‬ ‫ מרווח בין אותיות‬letter-spacing
    ‫הגדרה ביחידות גודל‬ ‫ מרווח בין מילים‬word-spacing
    ‫הגדרה במספרים המציינים פי כמה‬ ‫ מרווח בין שורות‬line-height
    ‫יותר או פחות מהרווח הרגיל‬

    http://www.w3schools.com/css/css_text.asp
    32
    ‫גופנים‬
    ‫ערכים‬ ‫משמעות‬ ‫שם תכונה‬
    ‫התכונה‬
    For example: Times New ‫ סוג‬font-family
    Roman,serif, david.
    normal,italic,oblique ‫ סגנון‬font-style

    normal, bold ‫ משקל‬font-weight

    ‫הגדרה ביחידות גודל‬ ‫ גודל‬font-size


    ‫הגדרה ביחידות צבע‬ ‫ צבע‬color
    http://www.w3schools.com/css/css_font.asp

    33
    Google Fonts ‫שימוש ב‬

    https://fonts.google.com/

    34
    ‫רקעים‬
    ‫ ניתן‬.‫ להגדרת רקעים‬background ‫נשתמש ב מילה‬
    :‫להגדיר מספר מאפיינים הקשורים לרקע‬
    ‫ משמשת להגדרת צבע‬-background-color
    background-color:red :‫ לדוגמא‬.‫הרקע‬
    ‫ – משמש להגדרת תמונת‬background-image
    background-image:url(“myImage.jpg”) :‫ לדוגמא‬.‫הרקע‬

    http://www.w3schools.com/css/css_background.asp

    35
    ‫ המשך‬- ‫רקעים‬
    .‫ שכפול תמונת הרקע‬-background-repeat
    ;background-repeat:repeat ‫שכפול לרוחב ולגובה‬
    ;background-repeat:repeat-x :‫שכפול לרוחב בלבד‬
    ;background-repeat:repeat-y :‫שכפול לגובה בלבד‬
    ;background-repeat:no-repeat :‫ללא שכפול‬

    http://www.w3schools.com/cssref/tryit.asp?
    filename=trycss_background-position

    36
    ‫ המשך‬- ‫רקעים‬
    .‫ מיקום תמונת הרקע‬-background-position
    .y ‫ ועל פי ציר ה‬X ‫מגדירים את המקום על פי ציר ה‬
    .‫ נקודה שמאלית עליונה של המסך‬:‫הגדרת ברירת מחדל‬
    .left, top, right, center,bottom :‫הערכים האפשריים הם‬

    :‫דוגמאות‬
    Background-position: right center ---‫צמוד לימין ולאמצע‬
    Background-position: top left --‫צמוד לשמאל ולמעלה‬
    http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position

    37
    ‫רקעים ‪ -‬המשך‬
    ‫‪ -background-position‬מיקום תמונת הרקע‪.‬‬
    ‫מגדירים את המקום על פי ציר ה ‪ X‬ועל פי ציר ה ‪.y‬‬
    ‫ניתן להגדיר מרחק התחלה של התמונה מציר ה ‪ X‬וציר ה ‪.Y‬‬
    ‫המספר הראשון שמוגדר הוא על ציר ה ‪ X‬והשני על ציר ה ‪.Y‬‬

    ‫דוגמאות‪:‬‬
    ‫‪Background-position: 100px 20px‬‬
    ‫‪Background-position: 30% 20%‬‬
    ‫‪http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position‬‬

    ‫‪38‬‬

    You might also like