יצירת אתר היא דרך נהדרת לבטא את עצמך. למרות שיש הרבה כלים לבניית אתרים, כתיבה בעצמך היא דרך מהנה ללמוד יותר על האופן שבו אתרים עובדים מאחורי הקלעים. פרויקט מתחיל טוב הוא יצירת אתר והוספת תמונת רקע באמצעות CSS. פרויקט זה יביא אותך לעבודה עם HTML ו- CSS.
מה זה CSS?
CSS מייצג גיליון סגנון מדורג. זו שפת תכנות המאפשרת לך לעצב שפות סימון. שפת סימון אחת כזו היא HTML או שפת סימון Hyper-Text. HTML משמש ליצירת אתרים. למרות שאתה יכול לשלוט בחלק מסגנון האתר באמצעות HTML, CSS מציע אפשרויות שליטה ועיצוב הרבה יותר.
יצירת אתר בסיסי עם HTML
מכיוון ש- CSS היא רק שפת סגנון, כדי להשתמש בה, אנו זקוקים תחילה למעצב. אתר בסיסי מאוד יספיק לנו כדי להתחיל לשחק עם CSS. בדף שלנו יוצג "שלום עולם".
שלום עולם
אם אינכם מכירים את HTML, בואו נעבור במהירות על מה שעושים כל האלמנטים. כאמור, HTML היא שפת סימון, כלומר היא משתמשת בתגים כדי לסמן מה הטקסט. בכל פעם שאתה רואה מילה מוקפת <> זה תג. ישנם שני סוגים של תגים, תג שמסמן את התחלה של קטע באמצעות <> ואחד שמסמן את סוף החלק באמצעות
בדוגמה שלנו, יש לנו ארבעה תגים. ה html תג מציין אילו אלמנטים הם חלק מהאתר. ה
רֹאשׁ תג מכיל את מידע הכותרת שאינו מוצג בדף אך דרוש ליצירת הדף. כל האלמנטים המוצגים הם בין ה- גוּף תגים. יש לנו רק אלמנט אחד שמוצג, ה- עמ ' תָג. זה אומר לדפדפן האינטרנט שהטקסט הוא פיסקה.קָשׁוּר: 10 דוגמאות פשוטות לקוד CSS שתוכלו ללמוד תוך 10 דקות
רוצה לדעת יותר על השימוש ב- CSS? נסה את הדוגמאות הבסיסיות של קוד CSS מלכתחילה, ואז החל אותם על דפי האינטרנט שלך.
הוספת CSS ל- HTML
עכשיו שיש לנו דף פשוט, אנחנו יכולים להתאים את הסגנון בעזרת CSS. הדף שלנו די פשוט כרגע, ואין הרבה מה שאנחנו יכולים לעשות, אבל נתחיל בכך שהפסקה שלנו בולטת כדי שנוכל להבדיל אותה מהרקע על ידי הוספת גבול.
שלום עולם
עכשיו, הפסקה שלנו תהיה מוקפת בגבול שחור. הוספת תיאור סגנון ב- CSS לתג הפסקה שלנו אמרה לאתר כיצד לעצב את הפסקה. אנו יכולים להוסיף תיאורים נוספים. בואו להגדיל את החלל הלבן, או הריפוד, סביב הפיסקה שלנו ולרכז את הטקסט שלנו.
שלום עולם
האתר שלנו נראה טוב יותר, אך ה- HTML שלנו מתחיל להיראות מבולגן עם כל התיאורים האלה בתג הפסקה. אנו יכולים להעביר מידע זה לכותרת שלנו. הכותרת שלנו מיועדת למידע שעלינו להציג את האתר בצורה נכונה.
שלום עולם
עכשיו קל יותר לקרוא את ה- HTML שלנו. תוכלו להבחין שעלינו לשנות כמה דברים מסביב. תג הסגנון מגיש מידע על סגנון דפדפן האינטרנט, אך גם מה לעצב. בדוגמה שלנו השתמשנו בשתי דרכים שונות להגיד לו מה לסגנון. ה עמ ' בתג הסגנון אומר לדפדפן האינטרנט להחיל את הסגנון על כל תגי הפסקאות. ה #ourParagraph החלק מגדיר את זה רק לאלמנטים בסגנון עם המזהה הסעיף שלנו. שים לב ש תְעוּדַת זֶהוּת מידע נוסף לתגית p בגופנו.
ייבוא קובץ CSS לאתר שלך
הוספת מידע הסגנון לכותרת מקלה על הקריאה שלנו בקוד. עם זאת, אם אנו רוצים לעצב דפים רבים ושונים באותו אופן, עלינו להוסיף את הטקסט לראש כל עמוד. זה אולי לא נראה כמו הרבה עבודה, אתה יכול להעתיק ולהעביר אותו אחרי הכל, אבל זה יוצר הרבה עבודה אם אתה רוצה לשנות אלמנט מאוחר יותר.
במקום זאת, אנו שומרים את מידע ה- CSS בקובץ נפרד ונייבא את הקובץ בכדי לעצב את הדף. העתק והדבק את המידע בין תגי הסגנון לקובץ CSS חדש CSSfile.css שלנו.
p {
יישור טקסט: מרכז
}
#ourParagraph {
בסגנון גבול: מוצק;
ריפוד: 30 פיקסלים;
}לאחר מכן, ייבא את הקובץ לקובץ ה- HTML.
שלום עולם
הוספת תמונת רקע עם CSS
עכשיו שיש לך בסיס איתן ב- HTML ו- CSS, הוספת תמונת רקע תהיה חתיכת עוגה. ראשית, זהה לאיזה אלמנט ברצונך לתת תמונת רקע. בדוגמה שלנו נוסיף רקע לכל הדף. המשמעות היא שאנחנו רוצים לשנות את הסגנון של ה- גוּף. זכרו, תגי הגוף מכילים את כל האלמנטים הגלויים.
גוּף{
תמונת רקע: url ("sky.jpg");
}
p {
יישור טקסט: מרכז
}
#ourParagraph {
בסגנון גבול: מוצק;
ריפוד: 30 פיקסלים;
}כדי לשנות את סגנון הגוף ב- CSS, ראשית השתמש ב גוּף מילת מפתח. ואז הוסף סוגריים מתולתלים כפי שעשינו קודם {}. כל מידע הסגנון לגוף חייב להיות בין הסוגריים המתולתלים. תכונת הסגנון שאנו רוצים לשנות היא תמונת רקע. ישנן תכונות סגנון רבות. אל תצפו לשנן את כולם. סימניה a מאפייני CSS גיליון רמאות עם תכונות שאתה רוצה לזכור.
קָשׁוּר: 8 אפקטים מגניבים של HTML שכל אחד יכול להוסיף לאתר שלהם
לאחר התכונה, השתמש בנקודתיים כדי לציין כיצד תשנה את התכונה. כדי לייבא תמונה, השתמש url (). זה מציין שאתה משתמש בקישור כדי להצביע על התמונה. מקם את מיקום הקובץ בסוגריים בין מרכאות. לבסוף, סיים את השורה בנקודה-פסיק. למרות שלחלל לבן אין משמעות ב- CSS, השתמש בכניסה כדי להקל על קריאת ה- CSS.
הדוגמה שלנו נראית כך:
אם התמונה שלך לא מוצגת כהלכה בגלל גודל התמונה, אתה יכול לשנות את התמונה ישירות. עם זאת, יש מאפייני סגנון רקע ב- CSS שבהם ניתן להשתמש כדי לשנות את הרקע. תמונות קטנות יותר מהרקע יחזרו על עצמם ברקע באופן אוטומטי. כדי לכבות את זה, הוסף חזור על רקע: לא לחזור; לאלמנט שלך.
ישנן גם שתי דרכים לגרום לתמונה לכסות את כל הרקע. ראשית, אתה יכול להגדיר את גודל הרקע לגודל המסך באמצעות גודל רקע: 100% 100%;, אך זה ימתח את התמונה ועלול לעוות את התמונה יותר מדי. אם אינך רוצה לשנות את הפרופורציות של התמונה, תוכל גם להגדיר את גודל הרקע ל- כיסוי. כיסוי יגרום לתמונת הרקע לכסות את הרקע, אך לא לעוות את התמונה.
שינוי צבע הרקע
בואו נשנה דבר אחרון. כעת, כשיש לנו רקע, קשה לקרוא את הפסקה שלנו. בואו נעשה את הרקע שלו לבן. התהליך דומה. האלמנט אותו אנו רוצים לשנות הוא #ourParagraph. המספר # מציין ש- "ourParagraph" הוא שם מזהה. לאחר מכן, אנו רוצים להגדיר את צבע רקע תכונה ללבן.
גוּף{
תמונת רקע: url ("sky.jpg");
}
p {
יישור טקסט: מרכז
}
#ourParagraph {
צבע רקע: לבן;
בסגנון גבול: מוצק;
ריפוד: 30 פיקסלים;
}הרבה יותר טוב.
ממשיכים לעצב את האתר שלכם באמצעות CSS
עכשיו שאתה יודע לשנות את הסגנון של אלמנטים שונים של HTML, השמיים הם הגבול! השיטה הבסיסית לשינוי מאפייני סגנון זהה. זהה את האלמנט שברצונך לשנות ותיאר כיצד לשנות את התכונה. הדרך הטובה ביותר ללמוד יותר היא לשחק עם תכונות שונות. אתגר את עצמך לשנות את צבע הטקסט הבא.
רוצה ללמוד HTML כדי לקודד אתרים ואפליקציות משלך? השתמש בדוגמאות בדף האינטרנט ובקוד המקור כדי ללמד את עצמך HTML ו- CSS.
- תִכנוּת
- HTML
- עיצוב אתרים
- CSS
י. סיטון הוא סופר מדע המתמחה בפירוק נושאים מורכבים. יש לה דוקטורט מאוניברסיטת ססקצ'ואן; מחקריה התמקדו בשימוש בלמידה מבוססת משחק להגברת מעורבות התלמידים ברשת. כשהיא לא עובדת, תמצאו אותה עם קריאה, משחקי וידאו או גינון.
הירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים טכניים, ביקורות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
צעד אחד נוסף !!!
אנא אשר את כתובת הדוא"ל שלך בדוא"ל ששלחנו לך זה עתה.
