גבולות משמשים בדפי HTML כדי לתחום ולהבליט תוכן. כשיש שפע מידע בדף ואתה רוצה להפנות את תשומת ליבו של המשתמש לחלקים ספציפיים, אז השתמש בגבולות סביב התוכן. במאמר זה בנושא גבולות ב- CSS אדון בנושאים הבאים:
- מתי להשתמש ב- Borders
- גבולות ב- CSS
- תכונות של גבול CSS
- ערכי ברירת מחדל לתכונות גבול
- הגדר גבולות בקיצור
- נקודות שיש לזכור בעת תכנון גבולות ב- CSS
מתי להשתמש ב- Borders
הנוהג הסטנדרטי הוא להשתמש בתגי גבול CSS כדי להגדיר גבולות בעמודי HTML עבור:
- סביב כותרות חשובות
- כדי להדגיש את התמליל או הערות חשובות
- לצרף תמונות, איורים, ציטוטים מאנשים, סרטונים
- כדי להפנות תשומת לב לתמחור, לוחות זמנים או מידע כה משמעותי
אולי תרצה לקרוא על ה- לפני שתמשיך ללמוד על גבולות CSS.
להדרכה מקיפה של CSS בקרו בכתובת הדרכת CSS של אדוריקה למתחילים . תקבל יתרון מעולה לדרך שבה ניתן להשתמש ב- CSS להגדלת עיצוב אתרי HTML.
גבולות ב- CSS
ניתן להקצות גבולות CSS לחלקים שונים בדף ה- HTML, בין אם זה לצרף כותרות או פסקאות. נתחיל בדוגמא. כאן אנו מגדירים גבול סביב הכותרת וגבול נוסף סביב טקסט הפיסקה.
גוף {רקע-צבע: אור כחול} h1 {text-align: center border-style: solid} p {font-family: verdana-font-size: 20px-style-style: dotted}גבול גם סביב הפסקה!
תכונות של גבול CSS
לגבולות CSS יש 3 תכונות עיקריות לגבולותיהם
- סִגְנוֹן:הסִגְנוֹןתכונה מגדירה את דפוס הגבול.
- צֶבַע: הצבע יכול להיות כל אחד מהסט המוגדר על ידי צבעי CSS.
- רוֹחַב: הרוחב משמש כדי לשנות את עובי הגבול, כדי להפוך אותו לבולט יותר.
בדוגמה שלעיל ראינו שמוגדרת רק מאפיין גבול אחד, זה הסגנון שלה. התכונות האחרות כאשר אינן מוגדרות מקבלות ערכי ברירת מחדל. יש מאפיין נוסף שנקרא רדיוס, בו משתמשים בתדירות נמוכה יותר. הוא משמש להכנת קצוות הגבול.
- בסגנון גבול תְכוּנָה
| סִגְנוֹן | תיאור |
| בסגנון גבול: מוצק | |
| בסגנון גבול: כפול | |
| בסגנון גבול: חריץ | |
| בסגנון גבול: רכס | |
| בסגנון גבול: שיבוץ | |
| בסגנון גבול: התחלה | |
| בסגנון גבול: אין | |
| בסגנון גבול: מוסתר | |
| בסגנון גבול: מנוקד | |
| בסגנון גבול: מקווקו |
היית שם לב שיש אפשרות 'ללא גבול' ו'גבול מוסתר 'גם כן. מפתח יכול פשוט להימנע מהגדרת גבול, מדוע להגדיר אותו במפורש כ'גבול נסתר '? זה נעשה למטרות שימוש ויישור שטח עם אלמנטים אחרים בדף.
ניתן לערבב סגנונות גבול גם בתוך אלמנט. לשם כך, ניתן להגדיר בנפרד את 4 צדדי הגבול בנפרד עם סגנונות שונים. ניתן לעשות זאת בשתי דרכים. או להגדיר את כל 4 הצדדים בתג יחיד. במקרה זה, הספירה מתחילה מהשורה העליונה ואז עוברת בכיוון השעון. לחלופין, ניתן להגדיר כל אחת מארבע הגבולות בתגים בודדים. שני המקרים מוצגים בדוגמה הבאה.
| סִגְנוֹן | תיאור |
| בסגנון הגבול: מנוקד כפול מוצק בסגנון גבול עליון: מנוקד גבול-ימין בסגנון: מקווקו כיצד לסיים את התוכנית גבול תחתון בסגנון: מוצק גבול-שמאל בסגנון: כפול |
- צבע גבול תְכוּנָה
ניתן להגדיר את תכונת הצבע לגבול במספר דרכים. זה דומה להגדרת צבע עבור אלמנטים אחרים. ניתן לקבוע את הצבעים באחת מהשיטות הבאות:
- שֵׁם - ציין שם צבע, כמו 'כחול'. אתה יכול גם לנסות כמה אפשרויות צבע מהודרות כמו 'BlanchedAlmond'!
- הקס - ציין ערך hex, כמו '# ff0000'
- RGB - הגדר את קוד ה- RGB. למשל, rgb (255,255,0) פירושו צהוב.
- הגדרה - כגון 'שקוף' או 'אטום'
- רוחב גבול תְכוּנָה:
מאפיין הרוחב, כפי שהשם מרמז, מגדיר את עובי 4 צלעות הגבול. אם מוגדר ערך אחד, הוא מיועד לכל הצדדים, אחרת ניתן להגדיר גם ערכי רוחב בודדים.
ניתן לציין את הרוחב בכל אחת מהיחידות הסטנדרטיות כגון פיקסלים ('px'), נקודות ('pt') או בסנטימטרים ('cm'). ניתן גם לציין את הרוחב באמצעות ערכים שהוגדרו מראש של 'עבה', 'דק' ו'בינוני '.
| סִגְנוֹן | תיאור |
| רוחב הגבול: 10 פיקסלים | |
| רוחב הגבול: 0.1 ס'מ | |
| רוחב הגבול: בינוני |
- גבול-רדיוס תְכוּנָה
מטרת הגדרת הרדיוס היא לקבל פינות מעוגלות לגבול. גורם הרדיוס מגדיר את מידת המעוגלות. הערך גדול יותר והפינות מעוקלות יותר. כנוהג סטנדרטי, ערכי הרדיוס נשמרים בין פי 1-3 מרוחב הגבול.
הקוד הבא ייצור:
רוחב הגבול: 10 פיקסלים
גבול רדיוס: 30 פיקסלים
ערכי ברירת מחדל לתכונות גבול
מאפיין החובה היחיד הוא סִגְנוֹן . אם הסגנון חסר, הגבול לא יופיע.
אם הצבע לא מוגדר, הצבע מהאלמנט הבסיסי נלקח כערך ברירת המחדל. למשל, אם צבע הטקסט של פיסקה מוגדר כ'כחול ', אז צבע הגבול המוגדר כברירת מחדל יהיה גם כחול. במקרה שאין הגדרת צבע אפילו עבור האלמנט, אז צבע ברירת המחדל הוא 'שחור'.
ערך ברירת המחדל לרוחב הוא 'בינוני'.
הגדר גבולות בקיצור
ישנם מפתחים שמעדיפים להגדיר תכונות גבול בתג תמציתי בשורה אחת. פורמט קצר זה מסייע במזעור שורות הקוד ומפתחים מומחים מעדיפים פורמט זה. מומלץ להשתמש בפורמט הקצר כאשר הגדרת הגבול פשוטה ומתוקננת למדי. עם זאת, אם עליך להדגיש כל צד של הגבול בסגנון שונה, עליך לעמוד בפורמט של הגדרת תגים בודדים.
להמיר מחרוזת למערך PHP
נעשה שימוש בקוד הבא:
בסגנון גבול: מקווקו
גבול-צבע: ירוק
רוחב הגבול: 5 פיקסלים
גבול: ירוק מקווקו 5px
נקודות שיש לזכור בעת תכנון גבולות ב- CSS
אל תשתמש יותר מדי גבולות בעמוד, זה יכול להסיח את הדעת ולהקשות על המשתמש להתמקד.
חשוב לשמור על עקביות בסגנון הגבול ובצבעים. אלמנטים באותה רמה של היררכיה בעמוד חייבים להיות בעלי סגנון ורוחב דומים עבור אחידות. למשל, אם פסקה מוגדר עם גבול אחיד ורוחב 5 פיקסלים, שמור על פורמט זה בכל האחרים פסקה אלמנטים במהלך עיצוב אתרי אינטרנט.
היצמד לסגנון אחד של הגדרות תג. יש מפתחים שנוח עם הגדרות קיצור דרך עם כל הערכים שהוקצו ליחיד גבול תָג. יש אחרים שמעדיפים רישום מפורש של כל התגים לרוחב, צבע וסגנון. הקונבנציה היא שכאשר נדרשים קישוטי גבול משוכללים בעמוד, התגים הבודדים מפורטים בנפרד. זה עוזר במהלך ניפוי באגים בהגדרות גבול מותאמות אישית כאלה. במקרים רגילים, רק הגדרת קיצור דרך תעשה זאת.
מקווה שמצאת את המידע שחיפשת בגבולות CSS, ו- wעם זאת, אנו מגיעים לסוף מאמר הגבולות במאמר CSS.
בדוק את שלנו שמגיע עם הדרכה חיה בהנחיית מדריך וניסיון פרויקט אמיתי. הכשרה זו גורמת לך להיות בקיאים במיומנויות לעבוד עם טכנולוגיות אינטרנט מקדימות וקדמיות. הוא כולל הדרכה בנושא פיתוח אתרים, jQuery, Angular, NodeJS, ExpressJS ו- MongoDB.
יש לך שאלה עבורנו? אנא הזכיר זאת בקטע ההערות בבלוג 'גבול ב- CSS' ונחזור אליך.