אם עליך להוסיף קווי אופקי, מפרידי-סגנון לאתרי האינטרנט שלך, האפשרויות האופייניות שלך כוללות הוספת קובצי תמונה של שורות אלה לדף שלך, אך פעולה זו תדרוש מהדפדפן שלך לאחזר ולטעון קבצים אלה, דבר שעשוי להשפיע לרעה על האתר ביצועים. ניתן גם להשתמש במאפיין הגבול CSS כדי להוסיף גבולות הפועלים כמו שורות או בחלק העליון או בחלק התחתון של אלמנט, ביעילות יצירת קו ההפרדה שלך.
או - עדיף - להשתמש באלמנט HTML עבור הכלל האופקי.
אלמנט כלל אופקי
הופעת ברירת המחדל של קווי כלל אופקיים אינה אידיאלית. כדי לגרום להם להיראות נחמד יותר, להוסיף CSS כדי להתאים את המראה החזותי של אלמנטים אלה להיות בקנה אחד עם איך אתה רוצה את האתר שלך כדי להיראות.
תג HR בסיסי מוצג באופן שבו הדפדפן רוצה להציג אותו. דפדפנים מודרניים בדרך כלל מציגים תגי HR לא מסודרים עם רוחב של 100%, גובה של 2 פיקסלים וגבול תלת-ממדי בשחור כדי ליצור את השורה.
רוחב וגובה הם עקביים על פני דפדפנים
סגנונות רק כי הם עקביים על פני דפדפני אינטרנט הן רוחב וסגנונות. אלה מגדירים את גודל הקו. אם אינך מגדיר את הרוחב והגובה, רוחב ברירת המחדל הוא 100% וגובה ברירת המחדל הוא 2 פיקסלים.
בדוגמה זו הרוחב הוא 50% מהאלמנט ההורה (שים לב לדוגמאות הבאות, שכולן כוללות סגנונות מוטבעים.בגדרות ייצור, סגנונות אלה למעשה ייכתבו בגיליון סגנונות חיצוני כדי להקל על הניהול בכל הדפים שלך):
style = "width: 50%;">
ובדוגמה זו הגובה הוא 2em: style = "height: 2em;"> בדפדפנים המודרניים, הדפדפן בונה את הקו על-ידי התאמת הגבול. לכן, אם תסיר את הגבול עם מאפיין הסגנון, הקו ייעלם בדף. כפי שאתה יכול לראות (טוב, אתה לא תראה שום דבר, כמו השורות יהיה בלתי נראה) בדוגמה זו: style = "border: none;">
התאמת גודל הגבול, צבע וסגנון יהפכו את הקו נראה שונה ויש לו את אותו אפקט בכל הדפדפנים המודרניים. לדוגמה, בהפגנה זו הגבול הוא אדום, מקווקו ורוחב 1px: סגנון = "border: 1px dashed # 000;">
אבל אם תשנה את הגבול ואת הגובה, הסגנונות ייראו קצת שונים בדפדפנים מיושנים יותר מאשר בדפדפנים המודרניים. כפי שניתן לראות בדוגמה זו, אם אתה מציג את זה ב- IE7 ומטה (דפדפן שהוא מיושן ומאושר ואינו נתמך עוד על ידי מיקרוסופט) יש קו פנימי משופע שאינו מוצג בדפדפנים אחרים (כולל IE8 ומעלה) You סגנון = "גובה: 1.5 מ '; רוחב: 25em; גבול: 1px solid # 000;">
אלה דפדפנים antiqued הם באמת לא הרבה דאגה של עיצוב אתרים היום, שכן הם הוחלפו במידה רבה עם אפשרויות מודרניות יותר. במקום צבע, באפשרותך להגדיר תמונת רקע עבור הכלל האופקי שלך כך שייראה בדיוק כפי שתרצה, אך עדיין מוצג באופן סמלי בסימון שלך. בדוגמה זו השתמשנו בתמונה של שלושה קווים גליים. על ידי הגדרתו כתמונת הרקע ללא חזרה, היא יוצרת הפסקה בתוכן שנראה כמעט כמו שאתה רואה בספרים: style = "height: 20px; background: #fff url (aa010307.gif) no-return scroll center; border: none;"> עם CSS3, אתה יכול גם להפוך את השורות שלך יותר מעניין. אלמנט HR הוא באופן מסורתי אופקי , אבל עם המאפיין CSS המרה, אתה יכול לשנות איך הם נראים. שינוי מועדף על אלמנט HR היא לשנות את הסיבוב. אתה יכול לסובב את אלמנט HR שלך כך שזה רק באלכסון מעט: hr {-Moz-transform: לסובב (10deg);-webkit-transform: לסובב (10deg);-O-transform: לסובב (10deg);-ms-transform: לסובב (10deg);להפוך: לסובב (10deg);}
או שאתה יכול לסובב אותו כך שהוא אנכי לחלוטין: hr {-Moz-transform: לסובב (90deg);-webkit-transform: לסובב (90deg);-O-transform: לסובב (90deg);-ms-transform: לסובב (90deg);להפוך: לסובב (90deg);}
זכור כי טכניקה זו מסתובבת HR מבוסס על המיקום הנוכחי שלה במסמך, ולכן ייתכן שיהיה עליך להתאים את המיקום כדי לקבל את זה איפה שאתה רוצה את זה. זה לא מומלץ להשתמש זה כדי להוסיף קווים אנכיים לעיצוב, אבל זה דרך להשיג אפקט מעניין. דבר אחד שיש אנשים לעשות במקום להשתמש באלמנט HR היא להסתמך על גבולות של גורמים אחרים. אבל לפעמים HR הוא הרבה יותר נוח וקל לשימוש מאשר מנסה להגדיר גבולות. את הבעיות תיבת דגם של דפדפנים מסוימים יכולים להפוך את הגדרת הגבול אפילו מסובך יותר. שינוי הגבולות יכול להיות מאתגר
לעשות קו דקורטיבי עם תמונת רקע
שינוי רכיבי HR
דרך נוספת לקבל שורות על הדפים שלך
