CSS/ריווח
בשביל מה ואיך? עריכה
משתמשים בריווח כדי לסגנן את העיצוב. בעזרת הריווח ניתן יהיה לקבוע רווח בין האלמנט עצמו לאלמנט האב, או בין האלמנטים הילדים לאלמנט. לא מבינים? הנה הסבר:
מילות המפתח הן "margin" ו-"padding".
מה זה אומר? margin זה הרווח שבין האלמנט (כמו DIV לדוגמא), לאלמנט האב. padding זה הרווח שבתוך האלמנט: כמו מעין גבול בלתי נראה שמרחיק את הטקסטים והמדיות השונות מהגבול.
איך עושים זאת?
נסו את שורות הקוד הבאות:
<html>
<head>
<style type="text/css">
p
{
background-color: #ffeecc;
margin: 50px 0px 0px 50px;
}
</style>
</head>
<body>
<p>margin</p>
</body>
</html>
(את background-color הבינו כרגע כרקע כצבע - נלמד בהמשך.).
נריצו את הקוד. מה אתם רואים? יש רווח בין הטקסט לבין גבול-הדף!
הפעם, נסו את השורות האלו:
<html>
<head>
<style type="text/css">
p
{
background-color: #ffeecc;
padding: 50px 0px 0px 50px;
}
</style>
</head>
<body>
<p>padding</p>
</body>
</html>
בפעם הזו, יש ריווח בתוך האלמנט!
תחביר
כדי ליצור ריווח (margin/padding) יש להשתמש במילה זו - נקודתיים - פירוט.
בפירוט אנו רואים ארבעה מספרים - ניתן להשתמש בפחות, אך לא יותר - מכיוון שהמספר הראשון מסמל top, השני right, השלישי - bottom והרביעי- left.
סיכום עריכה
בפרק זה למדנו כיצד ניתן ליצור ריווח - פנימי / חיצוני שמאפשר אלגנטיות בדף ויותר אפשרויות מזדמנות לעיצובים. margin - ריווח חיצוני. padding - ריווח פנימי.
דוגמא עריכה
<style type="text/css">
h1
{
padding: 20pt 20pt 20pt 20pt;
}
</style>
<h1> Hello </h1>
תוצאה והסבר עריכה
בין הכותרת Hello לבין שאר הדברים במסמך HTML יהיה רווח של 20pt.
| הפרק הקודם: מיקום |
ריווח | הפרק הבא: רקעים |