מסגרות המוצבות סביב תמונות או טקסט מקשטות את האתר ומוסיפות מגוון לעיצובו. אם אתה משתמש בטבלאות ליצירת גבולות, הקוד לכל גבול יתפוס מקום רב מדי. כמו כן, במקרה זה, יהיה עליך לכתוב מחדש את קוד ה- HTML עבור כל מסגרת. בעזרת CSS תוכלו ליצור בקלות גבול בכל עובי וצבע שרק תרצו על ידי כתיבת קוד פשוט פעם אחת לכל האלמנטים שיוקפו בגבול זה. טכנולוגיה זו תאפשר, במידת הצורך, לשנות את סוג המסגרות באתר תוך מספר דקות.
זה הכרחי
- - יש אתר אינטרנט משלך;
- - דע מהו CSS ואיפה סגנונות אלה כתובים באתר.
הוראות
שלב 1
כדי ליצור גבול, תחילה כתוב את הקוד הבא ב- CSS:
רמקה {}
שלב 2
כדי להפוך את הגבול לגודל הרצוי, השתמש בפרמטר רוחב הגבול, אשר מגדיר את רוחב הקו בפיקסלים. לדוגמה, אם רוחב קו המסגרת צריך להיות 3 פיקסלים, הערך ייראה כך:
רמקה {רוחב גבול: 3 פיקסלים;}
שלב 3
כעת הגדירו את סגנון הגבול באמצעות הפרמטר בסגנון הגבול. אם אתה רוצה ליצור גבול שצדדיו הם קווים אחידים רגילים, אז הכנס את הקוד הבא לקוד בין הפלטה המתולתלת - בסגנון הגבול: מוצק.
שלב 4
ניתן להשיג גבול מנוקד על ידי כתיבתו כך: גבול-סגנון: מנוקד. בדיקת סגנון גבול: מקווקו ייתן לך גבול מקווקו.
שלב 5
אתה יכול להפוך את הגבול לקו אחיד כפול ככה: בסגנון הגבול: כפול. השתמש בסגנון גבול: חריץ או בסגנון גבול: רכס למסגרת טקסט או תמונות למסגרות עם תופעות לוואי תלת ממדיות. ההבדל בין שתי האפשרויות הללו הוא שבמקרה הראשון המסגרת מורכבת מקווים מוטים, ובשנייה - קמורה.
שלב 6
השתמש בקוד זה: border-style: inset כדי ליצור אפקט של שיבוץ עם הגבול של אלמנט אתר. כדי להפוך את תוכן הגבול, יחד עם הגבול, להיפך, קמור, כתוב בסגנון גבול: התחלה.
שלב 7
ניתן להוסיף את הצבע הרצוי למסגרת באמצעות הפרמטר צבע הגבול, הממוקם גם בין הפלטה המתולתלת. אם אתה רוצה להפוך את הגבול לאדום, אז כתוב צבע גבול: אדום, כחול - צבע גבול: כחול, כתום - צבע גבול: כתום.
שלב 8
קוד הגבול של CSS, כולל כל האפשרויות, נראה כך:
רמקה {רוחב גבול: 3px; בסגנון גבול: מוצק; גבול צבע: כחול;}
שלב 9
כעת, ב- HTML, כתוב זאת:
תוכן מסגרת במקום הביטוי "תוכן מסגרת", הכנס את הטקסט או הקוד של התמונה הרצויה.
שלב 10
כך תוכלו לעצב מספר בלתי מוגבל של אלמנטים באתר. כדי לשנות את מראה המסגרת, עליך לשנות רק את קוד ה- CSS.
