کار با فضا ها و فضاهای اطراف اشیا
سلام عرض میکنم خدمت همه اونهایی که آموزش رو دنبال میکنن
حلول ماه رمضان رو به شما تبریک میگم
قبل از آموزش از همگی عذرخواهی میکنم که نمیتونم روزانه مطلب بذارم
قرار بود روزانه این کار بشه اما یکمی سرم شلوغ شده. شرمنده:خجالت:
خب در این جلسه با پنج ویژگی دیگر آشنا خواهیم شد، که به فضا های اطراف عنصر مربوط می شوند و عبارتنداز : margin و padding و border و height و width .
خصوصیت margin
خب این خاصیت فضاهای بیرونی یک عنصر رو تغییر میده
یعنی اگر شما یک باکس دارید و درونش یک متنی دارید با این متغییر میتونید تغییر مکانش بدید و مثلا کل باکس رو 20 پیکسل بدید سمت راست و یا سمت چپ بالا یا پایین
این خاصیت یکی از سه مقدار عددی، درصدی یا auto را می پذیرد:
- Margin-top : فاصله بالای عنصر را مشخص می کند.
- Margin-right : فاصله سمت راست عنصر را مشخص می کند.
- Margin-bottom : فاصله پایینی عنصر را مشخص می کند.
- Margin-left : فاصله سمت چپ عنصر را مشخص می کند.
مقدار پیشفرض auto می باشد در ضمن استفاده از مقادیر منفی نیز مجاز است
مقدار منفی برای مواقعی استفاده میشه که شما میخواید عنصر وبتون رو در خلاق جهت قرار گیری منتقل کنید
مثال میزنیم بهتر متوجه بشید
شما هدر را تعریف کردید در زیر یک کلاسی دارید با نام منو
این منو به هدر میچسبه. اما شما میخواید هدر و منو از هم فاصله داشته باشند
برای این کار دو جور میشه نوشت و هر دو با margin
به کلاس ها کاری نداریم و فقط کد های مربوط به تغییر مکان رو مینویسم
HTML:
#header{
...
margin-bottom:10px;
}
یا
.menu{
...
margin-top:10px;
}
در این مثال ما نوشتیم که هدر زیرش تا 10 پیکسل خالی باشه
و یا منو بالاش 10 پیکسل خالی باشه
اما حالا ما میخوایم مثلا یک کلاسی رو 20 پیکسل از مکانی که قرار داره بالا ببریم
متاسفانه خیلی دیده میشه بعضا تصور میکنن اگه این کارو بخوایم بکنیم باید margin-bottom تعریف بشه که کلاس رو برامون بیاره بالا به اندازه دلخواه
اما این تصور غلط هست و اینی که ما تعریف کردیم میگه کلاس پایینی از عنصر فعلی به اندازه ای که تعریف کردیم فاصله بگیره
برای اینکه بخوایم کلاس رو بالا ببریم باید از همون margin-top که مربوط به فضای بالای عنصر هست استفاده کرد
اما به خاطر اینکه عددی که ما میدیم فاصله میده عنصر رو از عنصر بالایی عدد رو منفی میزنیم 20px-
HTML:
.palang{
...
margin-top:-20px;
}
کلاس پلنگ 20 پیکسل به بالا میره
همین شرایطی که ذکر شد برای هر چهار مقدار margin-bottom --- margin-top --- margin-left --- margin-right قابل اجرا هست
اما اینکه بخوایم برای یک عنصر چهار بار بنویسیم اینها رو هم وقت میبره و هم سرعت رو میگیره
میایم از روش کوتاه نویسی استفاده میکنیم
کوتاه نویسی دو روش داره یکی مقدار دهی چهار طرف و یکی مقدار دهی دو طرفه
مقدار دهی 4 طرفه رو میشه دو جور نوشت
قبلا هم داشتیم این بحثو
اگه همه فضاها مساوی باشن یعنی بالا راست پایین چپ همه مثلا 5 باشن
به این صورت مینویسیم
به صورت پیش فرض برای همه 4 طرف 5 پیکسل در نظر میگیره
اما اگه نه میخواید مقدار های متفاوت بدید باید هر 4 تا رو بنویسید
HTML:
margin: 5px 10px 12px 3px;
مقدار دهی دوطرفه به این صورت هست که شما به جای 4 تا مقدار دو مقدار میذارید
مقدار اول رو برای بالا و پایین و مقدار دوم رو برای چپ و راست در نظر میگیره
بالا و پایین 5 پیکسل و چپ و راست 10 پیکسل
تمرین: با توجه به مقدار هی 4 طرفه و دوطرفه این کد فضایی رو در نظر دارد؟
خصوصیت Border
Border یا حاشیه، در واقع بین margin و padding قرار گرفته و یک خط به دور عنصر مورد نظر می کشد و خود به سه قسمت تقسیم می شود.
- Border-width : پهنای خط دور عنصر را مشخص می کند
- Border-color : رنگ خط دور عنصر را مشخص می کند.
- Border-style : طرح خط دور عنصر را مشخص می کند.
حال به تعریف دقیق این سه قسمت وآشنا شدن با همه ی اجزای آن ها می پردازیم :
Border Width
از خاصیت border-width برای مشخص کردن پهنا یا عرض کادر یک عنصر استفاده می شود که یکی از مقادیر زیر را میگیرد :
- Thin : باریک، برابر با 1px
- Medium : متوسط برابر با 3px
- Thick : پهن، برابر با 5px
- مقدار عددی دلخواه برحسب یکی از واحدهای محاسباتی که معمولا px است.
خب همانطور که میدانید مشخص کردن بردار برای عناصر برای 4 طرف منظور میشه
یعنی
HTML:
border-top
border-right
border-bottom
border-left
HTML:
border-width: 2px 5px 7px 9px;
خاصیت border-color
این خاصیت برای مشخص کردن رنگ border استفاده می شود. و یکی از مقادیر هگزادسیمال rbg , rgba ، کلمات کلیدی رنگ ها یا transparent(شفاف - بدون رنگ) را به عنوان مقدار می پذیرد
مقدار پیشفرص برای این خصوصیت برابر با مقدار تعیین شده در خصوصیت color از عنصر مورد نظر می باشد.
HTML:
border-color: black green red yellow;
خصوصیت border-style
این خاصیت برای یک border باید تخصیص یابد تا border به نمایش در آید، و طرح خط دور عنصر را مشخص می کند که یکی از مقادیر زیر را می گیرد :
کد:
None , dotted , dashed , solid , double , hidden , groove , ridge , inset , outset
مقدار پیش فرض برای بردار بدون حاشیه است
اکثرا از خط صاف (solid) و خط منقطع (dashed) استفاده میشه
HTML:
border-style: solid dashed dotted double;
خب همانند قبلی ها برای این متغییر هم میشه کوتاه نویسی رو ایجاد کرد
HTML:
Border: border-width border-style border-color;
ترتیب نوشتن به این صورت مهم هست و اگه غیر این بشه از کار میفته
اما اگه بخوایم 4 طرف بدار ویژگی های مختلفی داشته باشن باید از روش کوتاه نویسی برای هر 4 تا استفاده کرد
مثلا
HTML:
P {
Border-top: 3px dashed red;
Border-right: 2px solid green;
Border-bottom: 5px dotted black;
Border-left 10px double yellow;
}
این مثال به این صورت میشه
برای بردار خاصیتی با عنوان border-radius تعریف میشه که گوشه های کادر شما رو گرد میکنه
این خصوصیت هم 4 مقدار میگیره برای بالا سمت چپ - بالا سمت راست- پایین سمت راست- پایین سمت چپ ( همیشه در جهت عقربه های ساعت میچرخه)
HTML:
border-radius:10px;
یا
border-radius: 5px 2px 6px 9px;
خصوصیت padding
خصوصیت padding مقدار فضای خالی بین محتوای یک عنصر و border آن عنصر را تعیین می کند. یکی از دو مقدار عددی یا درصدی را می پذیرد. (قواعد مقدار دهی آن همانند قواعد خصوصیت margin است ).
تفاوت های بین margin و padding
- Padding فضای خالی بین محتوا و border یک عنصر می باشد اما margin فضای خالی بین border و عناصر دیگر می باشد.
- کلمه کلیدی auto هیچ تاثیری روی خاصیت padding ندارد.
- خاصیت margin می تواند مقادیر منفی بگیرد اما خاصیت padding نمی تواند.
- در خاصیت padding تداخل و فروپاشی اتفاق نمی افتد، فقط در margin این اتفاق می افتد.
کوتاه نویسی خاصیت padding
همانطور که گفتیم قوعد مقداردهی به خصوصیت padding همانند خصوصیت marginاست است: و قاعده کلی کوتاه نویسی آن ها نیز شبیه به هم است:
HTML:
Padding: top right bottom left;
Padding: 3px 5px 2px 7px;
خصوصیت width
خاصیت width عرض محتوای یک عنصر را تعیین می کند. در نهایت عرض کلی یک عنصر برابر با عرض متحتوا (تعیین شده توسط width ) بعلاوه ی عرض padding و عرض border آن عنصر می باشد. این خصوصیت را می توان با یکی از سه مقدار عددی، درصدی یا auto مقداردهی کرد. و مقدار پیشفرض آن auto می باشد. مقادیر منفی نیز برای این خصوصیت مجاز نمی باشد.
خصوصیت height
در کنار خصوصیت width خاصیت height وجود دارد که ارتفاع محتوای یک عنصر را مشخص می کند. البته استفاده از خاصیت height برای عناصر چندان متداول نیست و بیشتر همان مقدار پیشفرض یعنی auto را برای آن در نظر گرفته می شود و صفحات وب معمولا با scrool عمودی طراحی می شوند. این خصیوصیت نیز مانند width یکی از سه مقدار عددی، درصدی و یا auto را به عنوان مقدار می پذیرد.
HTML:
.palang{
width:500px;
height:500px;
هنگامی که شما صفحه ای را اصولا برای نمایش در رزولوشن 800*600 یا 1024*768 طراحی می کنید، اگر کاربری سایت شما را با رزولوشن 1600*1200 مشاهده کند، صفحه را به شکلی نه چندان زیبا خواهد دید، یا هنگام استفاده از کلمه کلیدی auto یا مقادیر درصدی ممکن است مشاهده با رزولوشن های مختلف نتایج متفاوتی داشته باشد.
برای اینکه این مشکل رو رفع کنیم میایم و دو خاصیت رو تعریف میکنیم که به مرورگر میگه حداقل اندازه طول چقدر و حداکثر چقدر باشه
خصوصیت min
خاصیت min یکی از دو مقدار عددی یا درصدی را می پذیرد. و مقدار پیش فرض آن 0 است
خصیوصیت min-width و mn-height محدودیت کوچکترین اندازه را برای یک عنصر مشخص می کنند، و بیان میکنند که حد اقل اندازه ای که برای این عنصر در نظر گرفتیم چقدر هست
حد اقل طول 1024 باشد و اگر مرورگر کوچک شود صفحه اسکرول افقی پیدا میکنه
خصوصیت max
خصوصیت max محدودیت بالاتر و حداکثر اندازه را برای یک عنصر مشخص می کند و هنگامی تعریف می شوند که ابعاد یک عنصر ممکن است افزایش یابند . این خصوصیت یکی از سه مقدار عددی، درصدی یا auto را می پذیرد.
نهایتا این عنصر 1440 پیکسل طول داشته باشد
خصوصیت overflow
این خصوصیت هنگامی استفاده می شود که محتویات یک عنصر به دلیل محدودیت در ابعاد تعریف شده برای آن، امکان سرریز دارند، خاصیت overflow نحوه ی برخورد با این سرریز را مشخص می کند.
و یکی از 4 مقدار زیر را می پذیرد:
- Visible : مقدار پیشفرض و باعث نمایش محتوای سرریز شده می شود.
- Hidden : محتوای سرریز شده پنهان می شود.
- Scroll : محتوای سرریز شده را پنهان می کند و قابلیت اسکرول شدن برای دیدن محتوای سرریز شده را فعال می کند
- Auto : اگر کم بودن عرض عنصر باعث سر ریز شدن باشد، اسکرول افقی و اگر کم بودن ارتفاع عنصر باعث سرریز شدن باشد اسکرول عمودی را برای عنصر فعال می کند.
خب این درس هم تمام شد
تمرین حتما انجام بدید و یادتون نره
