Embed Size (px)
DESCRIPTION
חוג פיתוח אתרי אינטרנט. שיעור 8. פקודות css - תזכורת. מה זה דיב ? מהי מחלקה ומה ניתן לעשות באמצעותה ? כיצד יוצרים דיב ונותנים לו מחלקה ? כיצד מזיזים דיב מסוים ימינה, שמאלה, למעלה או למטה ? כיצד משנים גודל לתמונה ? כיצד מוסיפים גבול ? כיצד משנים צבע קישור בעת מעבר עכבר ?. margin. - PowerPoint PPT Presentation
Citation preview
אתרי פיתוח חוגאינטרנט
8שיעור
תזכורת - cssפקודות
זה • ?div מה
באמצעותו ?classמהו • לעשות ניתן ומה
יוצרים • לו divכיצד ?classונותנים
מזיזים • , ?divכיצד , למטה או למעלה שמאלה ימינה מסוים
לתמונה ?• גודל משנים כיצד
גבול ?• מוסיפים כיצד
עכבר ?• מעבר בעת קישור צבע משנים כיצד
margin
h1.first{
margin-right: 20px;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;}
•. , , למטה או למעלה שמאלה ימינה מסוים אלמנט להזיז נרצה המחלקה אם שם
של מרווח ימין 20יוצר מצד פיקסל
של מרווח מצד 20יוצר פיקסלשמאל
של מרווח מלמעלה 20יוצר פיקסל
של מרווח מלמטה 20יוצר פיקסל
border
h2.first
{ border: 1px solid blue;
}
ל • גבול להגדיר נרצה המחלקה מסוים classאם שם
הגבול גודל הגבול סוג
הגבול צבע
תמונה גודל שינוי
Img.first
{ width: 200px; height: 200px;}
לתמונה • וגובה רוחב להגדיר נרצה המחלקה אם שם
עכבר מעבר
a:{ color: blue;}
a:hover{ color: red; cursor: pointer;}
קישור • על עכבר מעבר בעת המתרחשת פעולה להגדיר נרצה אם
בית עמוד יצירת
נכנסים אליו הראשון העמוד הוא הבית .עמוד
index.html יהיה תמיד הוא
שלנו האתר על קצר מידע נציג הבית בעמוד
באתר העמודים לשאר .וקישורים
container
ב נשתמש כלשהו עמוד יוצרים אנו כאשר containerבשם divמהיוםשלנו containerה שבאתר התוכן כל את יכיל
במרכז, cssב • קבוע ומיקום גודל לו נגדיר
<div class="container"> </div>
.container { width: 960px; margin: 0 auto 0 auto;}
הבית - עמוד יצירת תרגיל
הדרופבוקס 1. תיקיית בתוך שלכם האתר אל היכנסו
ל 2. שלכם הביקור כרטיס של העמוד את card.htmlשנו
האתר 3. שם על ימני קליק באמצעות חדש עמוד Add-Add new itemצרובעמוד .htmlובחירה
השם 4. את הזה לעמוד index.htmlהגדירו
באתר - 5. עמודים שני לכם להיות צריכים index.html, card.htmlכעת
הכנה - א שלב
הבית - עמוד יצירת תרגיל
בתוך 1. כותרת שלכם לעמוד titleתנו
ה 2. קובץ את ה cssגררו תגית תוך אל headשלכם
ב - טיפול ב headשלב
<head>
<title> שלי הבית <title/>עמוד <link href="styles/StyleSheet.css" rel="stylesheet" />
</head>
הבית - עמוד יצירת תרגיל
containerצרו דיב בשם 1.
ומיקום במרכז כפי שלמדתםpx960הגדירו לו גודל 2.
left ו rightצרו בתוכו שני דיבים נוספים - 3.
float: right ו display:inlineהציבו אותם אחד ליד השני באמצעות 4.
הראשונית - התשתית יצירת ג שלב
הבית - עמוד יצירת תרגיל
•. שיצרתם הדיבים לשני תוכן הכניסו כעת
כרטיס ) • עתה עד שעשיתם לעבודות קישורים ובה רשימה הכניסו הימני לדיב.) שלכם הביקור
•. כלשהי ותמונה האתר על מידע מעט הכניסו השמאלי בדיב
•.. , , ועוד טקסט צבע טקסט גודל רקע צבע הדיבים לשני הגדירו
ב • בקישורים a:hoverהשתמשו
למתקדמים...
ב • רקע תמונת cssשילוב
background-image:url(../images/back.jpg); background-size: cover; background-position: 2px 2px; background-repeat:no-repeat;
