עיצוב hr עם css
בזמן האחרון אני שומע הרבה אנשים שלא יודעים איך לעצב את התג <hr /> בעזרת css. אני אישית לא מבין למה זה כל כך קשה. לי זה נראה דבר פשוט בהחלט. במדריך זה אסביר לכם כמה תכונות חשובות על מנת לעצב את הקו המפריד.עובי המסגרת
קביעת העובי של הקו הוא דבר די פשוט, ניתן לעשות זאת בעזרת התכונה border-width. והנה דוגמה קטנה:hr {
border-width:10px;
{
והתוצאה היא: border-width:10px;
{
צבע המסגרת
צבע המסגרת גם הוא דבר מאוד פשוט לדעתי, עושים זאת בעזרת התכונה border-color והנה דוגמה קטנה בשבילכם:hr {
border-color:red;
}
והתוצאה: border-color:red;
}
סוג המסגרת
סוג המסגרת הוא בעצם הסטיל שלה שיכול להיות: מנוקד, רגיל, מקווקו וכו`מחליפים את סוג המסגרת בעזרת התכונה border-style. והנה גם דוגמא:
hr {
border-style:dotted;
}
והתוצאה: border-style:dotted;
}
אורך הקו
קביעת האורך של הקו המפריד הוא דבר שהרבה אנשים מתקשים עליו משום מה. אבל עושים זאת בקלות בעזרת התכונה width. והנה דוגמה כמובן:hr {
width:10px;
}
והתוצאה:width:10px;
}
קיצורים
ניתן לקבוע את עובי המסגרת, צבעה, וסוגה בקלות על ידי תכונה אחת בשם border. והנה התחביר:border: border-width border-style border-color;
אני לא בטוח שהבנתם, לכם אתן גם דוגמא של כל זה: hr {
border: 3px dashed blue;
}
כמובן שניתן גם לכתוב קוד במקום צבע כמו: #000000. והנה התוצאה של הקוד:border: 3px dashed blue;
}
משום מה יש לי תמיד בעיות עם ie כשאני משתמש בקביעת המסגרת בלי הקיצורים האלה (גם כן דפדפן). הפתרון הוא פשוט להשתמש בקיצורים...
אודות האתר
האתר css-guide נוצר בשנת 2008 ונותן לכם מדריכי css לקריאה בחינם. בעזרת מדריכי האתר css-guide תוכלו ללמוד ולשפר את יכולתכם בשפה css שנועדה על מנת לעצב דפי אינטרנט בצורה טובה. גלישה נעימה, ולימוד css נעים.
חברת NSL המתמחה בתחום קידום אתרים
