هر عنصر HTML فقط یک جعبه است موارد زیر را بیان خواهیم کرد
اندازه گیری نسبی در مقابل مطلق
دستکاری مدل جعبه
ارتفاع و عرض
padding
border
Border-radius
margin
مرورگر شما هر عنصر HTML را به عنوان یک جعبه مستطیلی مطابق با مدل استاندارد جعبه CSS ارائه می دهد. هر عنصر HTML در صفحه وب شما از یکcontent area ، padding ، border و margin تشکیل شده است.
یادگیری نحوه دستکاری خصوصیات CSS در مدل جعبه ای برای قرار دادن مطالب در صفحات وب مفید خواهد بود.
اندازه گیری های نسبی و مطلق
ما می توانیم پارامترهای مربوط به اندازه “جعبه” را که یک عنصر با بسیاری از ویژگی های CSS مختلف را دارا است ، دستکاری کنیم. اغلب اوقات ، می خواهید طول content area ، padding ، margin و غیره را مشخص کنید. اما چگونه این طول ها را مشخص کنیم؟ متداول ترین واحدهای مورد استفاده درصد یعنی همان ٪ و تعداد پیکسل ها یا px است. درصد یک اندازه گیری نسبی از طول است. هنگام تعیین طول با استفاده از واحد٪ ، طول نسبت به طول عنصر اصلی اندازه گیری می شود:
<html>
<head>
<title>Relative Length Measurements</title>
</head>
<body>
<div>
<h1 class=”half”>Half-width of parent element.</h1>
<h1 class=”quarter”>Quarter-width of parent element.</h1>
</div>
<div id=”halfWidthContainer”>
<h1 class=”half”>Half-width of parent element.</h1>
<h1 class=”quarter”>Quarter-width of parent element.</h1>
از آنجا که ما از٪ ، یک واحد اندازه گیری نسبی، استفاده کردیم ، طول عناصر h1 در div دوم نصف عناصر h1 در div اول است حتی اگر این عناصر دارای ویژگی های CSS یکسان باشند. از طرف دیگر ، تعیین تعداد پیکسل ها یک اندازه گیری مطلق از طول را نشان می دهد. اندازه گیری مطلق ثابت است و به اندازه گیری سایر عناصر HTML متکی نیست.
<html>
<head>
<title>Absolute Length Measurements</title>
</head>
<body>
<div>
<h1 class=”half”>Absolute length does not rely on parent element.</h1>
<h1 class=”quarter”>Absolute length does not rely on parent element.</h1>
</div>
<div id=”halfWidthContainer”>
<h1 class=”half”>Absolute length does not rely on parent element.</h1>
<h1 class=”quarter”>Absolute length does not rely on parent element.</h1>
ویژگی حاشیه را می توان به ویژگی های دقیق تر تنظیم شده مانند border-style ،border-color و border-width گسترش داد. این خصوصیات را می توان بیشتر گسترش داد تا یک طرف خاص را هدف قرار دهد ، به عنوان مثالborder-top-width و غیره.
border-radius
اگر می خواهید حاشیه هایی ایجاد کنید که دارای گوشه های گرد باشند ، از ویژگی border-radius استفاده کنید. همچنین می توانید با ارائه دو مقدار به شعاع حاشیه ، جدا شده توسط یک اسلش (/) ، گوشه های بیضوی ایجاد کنید.
خاصیت margin شباهت زیادی به خصوصیت padding دارد ، با این تفاوت که به شما اجازه می دهد فاصله اطراف عنصر HTML از مرز را تعریف کنید. مانند padding ، به شما امکان می دهد مقادیر یک یا چند را تعریف کنید.
<html>
<head>
<title>CSS Margins</title>
</head>
<body>
<div class=”spanBox”>
<span id=”margin1″>One Value</span>
</div>
<div class=”spanBox”>
<span id=”margin2″>Two Values</span>
</div>
<div class=”spanBox”>
<span id=”margin3″>Three Values</span>
</div>
<div class=”spanBox”>
<span id=”margin4″>Four Values</span>
</div>
</body>
</html>
/* ۱ value: margin applied as
same on all sides */
#margin1 {
margin: 10px;
}
/* ۲ values: margin applied as
vertical sides - horizontal sides */
#margin2 {
margin: 10px 20px;
}
/* ۳ values: margin applied as
top - horizontal sides - bottom */
#margin3 {
margin: 10px 20px 30px;
}
/* ۴ values: margin applied as
top - right - bottom - left */
#margin4 {
margin: 10px 20px 30px 40px;
}
.spanBox {
border: 1px dashed black;
margin: 5px;
float: left;
}
span {
background-color: plum;
border: 5px solid green;
padding: 10px 20px;
display: inline-block;
}
در این مثال ، فضای بین مرزهای سبز و سیاه حاشیه بین عناصر <span> و ظروف <div> آنها را نشان می دهد. حاشیه همچنین می تواند به خصوصیات ریزدانه تری برای هدف قرار دادن یک سمت خاص تقسیم شود ، از جمله margin-top ،marginbottom margin-right وmargin-left. اکنون که با مدل جعبه آشنا شدید ، بیایید بیاموزیم که در درس بعدی با استفاده از CSS رنگ به قلم و پس زمینه اضافه کنیم.
توجه کنید که چگونه از اندازه گیری مطلق طول استفاده کردیم ، عرض عناصر h1 در div دوم دقیقاً همان عناصر h1 در div اول است.
دستکاری مدل جعبه
این بخش بسیاری از خصوصیات CSS متداول را که می توانید برای دستکاری مدل جعبه استفاده کنید ، مرور می کند.
width و height
برای تغییر ارتفاع و عرض ناحیه محتوای یک عنصر ، از خصوصیات CSS با height و width استفاده کنید.
Padding
از ویژگی padding برای ایجاد فاصله بین منطقه محتوای یک عنصر و مرز استفاده کنید. ویژگی padding این فاصله را به روشهای مختلف بسته به تعداد مقداری که ارائه می دهید اعمال می کند ، همانطور که در مثال زیر نشان داده شده است: درک خود را بررسی کنید:
<html>
<head>
<title>CSS Padding</title>
</head>
<body>
<div>
<span id=”padding1″>One Value</span>
<span id=”padding2″>Two Values</span>
<span id=”padding3″>Three Values</span>
<span id=”padding4″>Four Values</span>
</div>
</body>
</html>
/* A single value will apply the same
padding on all sides of the box */
#padding1 {
padding: 10px;
}
/* Two values will apply as:
first value - vertical sides
second value - horizontal sides */
#padding2 {
padding: 5px 20px;
}
/* Three values will apply as:
first value: top side
second value: horizontal sides
third value: bottom side */
#padding3 {
padding: 10px 5px 30px;
}
/* Four values will apply as:
first value: top
second value: right
third value: bottom
fourth value: left
*/
#padding4 {
padding: 10px 5px 60px 35px;
}
div {
padding: 20px;
}
span {
background-color: plum;
border: 5px solid green;
}
/* Apply ۱۰ percent (of parent element's width) worth of padding to the bottom side of paragraph elements */p{padding-bottom:۱۰%;}
درک خود را بررسی کنید:
0
border
همانطور که از نام آن مشخص است ، ویژگی CSS حاشیه مرز یک عنصر را تعیین می کند. نحو برای ویژگی border به شرح زیر است
border: width style color;
عرض را می توان در واحدهای مطلق یا نسبی داد. این استایل می تواند شامل مواردی مانند dotted ، dotted ، double و solid باشد. لیست کاملی از سبک های حاشیه ای را می توان در اینجا یافت. رنگ می تواند هر مقدار رنگ معتبری باشد. ما در یک درس بعدی به جزئیات بیشتری در مورد مقادیر رنگ خواهیم پرداخت ، اما در حال حاضر ، از مقادیر مختصر رنگ CSS برای تعیین ویژگی رنگ استفاده خواهیم کرد.
ویژگی حاشیه را می توان به ویژگی های دقیق تر تنظیم شده مانند border-style ،border-color و border-width گسترش داد. این خصوصیات را می توان بیشتر گسترش داد تا یک طرف خاص را هدف قرار دهد ، به عنوان مثالborder-top-width و غیره.
border-radius
اگر می خواهید حاشیه هایی ایجاد کنید که دارای گوشه های گرد باشند ، از ویژگی border-radius استفاده کنید. همچنین می توانید با ارائه دو مقدار به شعاع حاشیه ، جدا شده توسط یک اسلش (/) ، گوشه های بیضوی ایجاد کنید.
خاصیت margin شباهت زیادی به خصوصیت padding دارد ، با این تفاوت که به شما اجازه می دهد فاصله اطراف عنصر HTML از مرز را تعریف کنید. مانند padding ، به شما امکان می دهد مقادیر یک یا چند را تعریف کنید.
<html>
<head>
<title>CSS Margins</title>
</head>
<body>
<div class=”spanBox”>
<span id=”margin1″>One Value</span>
</div>
<div class=”spanBox”>
<span id=”margin2″>Two Values</span>
</div>
<div class=”spanBox”>
<span id=”margin3″>Three Values</span>
</div>
<div class=”spanBox”>
<span id=”margin4″>Four Values</span>
</div>
</body>
</html>
/* ۱ value: margin applied as
same on all sides */
#margin1 {
margin: 10px;
}
/* ۲ values: margin applied as
vertical sides - horizontal sides */
#margin2 {
margin: 10px 20px;
}
/* ۳ values: margin applied as
top - horizontal sides - bottom */
#margin3 {
margin: 10px 20px 30px;
}
/* ۴ values: margin applied as
top - right - bottom - left */
#margin4 {
margin: 10px 20px 30px 40px;
}
.spanBox {
border: 1px dashed black;
margin: 5px;
float: left;
}
span {
background-color: plum;
border: 5px solid green;
padding: 10px 20px;
display: inline-block;
}
در این مثال ، فضای بین مرزهای سبز و سیاه حاشیه بین عناصر <span> و ظروف <div> آنها را نشان می دهد. حاشیه همچنین می تواند به خصوصیات ریزدانه تری برای هدف قرار دادن یک سمت خاص تقسیم شود ، از جمله margin-top ،marginbottom margin-right وmargin-left. اکنون که با مدل جعبه آشنا شدید ، بیایید بیاموزیم که در درس بعدی با استفاده از CSS رنگ به قلم و پس زمینه اضافه کنیم.