در مقاله های قبلی در رابطه با طریقه نوشتن css صحبت کرده بودیم. حال در این مقاله سعی شده است به بررسی برخی از خواص عناصر Border و Margin و Padding و باکس ها و نحوه ی کار همه ی آن ها پرداخته شود. برای کسب اطلاعات بیشتر در این زمینه با تیم طراحی سایت اصفهان همراه باشید.
در نگاه اول استفاده از خواص عناصر Border و Margin و Padding و نحوه ی استفاده از آن ها نسبتا ساده هستند. با این حال موتور های جستجوی مرورگر از لیستی طولانی از قوانینی که در توصیه نامه ی CSS ارائه شده اند پیروی می کنند. به همین دلیل جزییات زیادی قبل از استفاده از CSS وجود دارند که باید فرا بگیرید.
این خاصیت از CSS برای مشخص کردن فضای خالی خارج از محیط عناصر مورد استفاده قرار می گیرد. تمام خصوصیات Margin می توانند مقدار منفی بگیرند که با این کار باعث هم پوشانی عناصر HTML می شوید. این عنصر CSS را می توان برای حالت های Top و Right , Bottom ,Left تنظیم نمود. برای دادن Margin به هر کدام از حالت های بالا می توان از دو روش زیر استفاده کرد. در روش اول می توان به صورت جداگانه به هر کدام از حالت ها مقدار داد. به مثال زیر توجه کنید:
margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:2px;
در روش دوم شما می توانید به صورت ساعتگرد به هر کدام از حالت ها مقدار بدهید. به مثال زیر توجه کنید.
;margin:1px 2px 3px 2px
مقدار اول margin را در حالت Top مشخص می کند. مقدار دوم margin را در حالت right مشخص می کند. مقدار سوم margin را در حالت bottom مشخص می کند. مقدار چهارم margin را در حالت left مشخص می کند.
اگر تنها برای تمام حالت ها یک مقدار وجود داشته باشد. می توان آن را به صورت margin: 2px نوشت که برای تمام جهت ها اعمال می شود.
اگر برای حالت بالا و پایین یک مقدار و برای حالت چپ و راست یک مقدار وجود داشته باشد. برای آن که آن ها را خلاصه بنویسیم می توانیم. margin-top و margin-bottom را بر روی مقدار اول و margin-right و margin-left را بر روی مقدار دوم تنظیم کنیم. margin: 1px 2px
حال اگر حالت چپ و راست یک مقدار داشته باشد و پایین و بالا دو مقدار مجزا داشته باشند. به عبارت دیگر سه مقدار وجود داشته باشد. بالا بر روی مقدار اول تنظیم می شود سمت چپ و راست بر روی مقدار دوم و پایین بر روی مقدار سوم تنظیم می شود.margin: 1px 2px 3px
مقادیر margin را می توان به چند صورت مشخص کرد. می توان محاسبه ی مقدار margin را برعهده ی مرورگر قرار داد و برای ان مقدار auto درنظر گرفت. می توان مقادیر آن را برحسب px,em,cm,pt و… در نظر گرفت. یا می توان به margin مقدار درصد داد. که در این صورت اندازه ی margin برحسب اندازه ی صفحه نمایش تغییر خواهد کرد.
این خاصیت از CSS برای مشخص کردن فضای خالی داخل عناصر مورد استفاده قرار می گیرد. به عبارت دیگر با استفاده از این عنصر می توانید فضای خالی بین لبه (border) و محتوای عنصر را تنظیم کنید. بر خلاف خصوصیت padding , margin نمی تواند مقدار منفی بگیرد. از این خصوصیت برای تنظیم هر چهار جهت بالا، پایین، چپ و راست می توان استفاده کرد. این خصوصیت را نیز می توان مانند margin مقدار دهی کرد. به هر کدام از مثال های زیر توجه کنید.
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
در این مثال به هر کدام از جهت های padding به صورت مجزا مقدار داده شده است.
padding: 25px 50px 75px 100px;
در این مثال از روش مختصر نویسی استفاده شده است و هر چهار مقدار padding در یک تعریف تنظیم شده اند.
padding: 25px 50px 75px;
در مثال بالا یک مقدار برای جهت بالا یک مقدار برای جهت های چپ و راست و یک مقدار برای جهت پایین تنظیم شده است.
padding: 25px 50px;
در صورتی که برای جهت های بالا و پایین یک مقدار و برای جهت های راست و چپ یک مقدار وجود داشته باشد. می توان از روش بالا استفاده کرد. مقدار اول برای padding-top و padding-bottom و مقدار دوم برای padding-right و padding-left تنظیم شده است.
padding: 25px;
در صورتی که تمام جهت ها یک مقدار را داشته باشند. می توان از روش بالا برای خلاصه سازی استفاده کرد.
Padding را می توان برحسب pt, px, cm و em مشخص کرد و یا می توان به padding مقدار درصد داد تا اندازه ی آن بر اساس اندازه ی مرورگر تغییر کند.
با استفاده از این خصوصیت می توان خواص لبه ی عناصر و نوع نمایش آن ها را مشخص کرد. این خصوصیت مقادیر زیر را دارا می باشد.
از خاصیت هایی که باید در border تنظیم شود border-width می باشد. این خصوصیت ممکن است یکی از مقادیر زیر را دارا باشد:
همچنین می توان این خصوصیت را بر اساس مقادیر px,pt,cm,em نیز تنظیم کرد.
در صورتی که خاصیت border-style تنظیم نشده باشد نمی توان از خاصیت border-width استفاده کرد.
خاصیت border-color
از این خاصیت برای مشخص کردن رنگ لبه ها استفاده می شود. به سه حالت می توان به ان مقدار داد. در روش اول می توان رنگ لبه را بر اساس نام آن مشخص کرد. در روش دوم می توان رنگ لبه را بر اساس کد رنگ rgb مشخص کرد در روش سوم می توان رنگ لبه را بر اساس کد هگزا مشخص کرد.
به مثال های زیر توجه کنید
border-style: solid;
border-color: red;
border-style: solid;
border-color: #98bf21;
border-style: solid;
border-color: rgb(170, 50, 220);
در این خاصیت می توان برای هر کدام از لبه ها مقادیر جداگانه تعریف کرد :
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
border-style:dotted solid double dashed;
که به ترتیب مقادیر لبه های بالا, راست, پایین و چپ می باشد
border-style:dotted solid double;
لبه های بالا, راست و چپ و پایین می باشد.
border-style:dotted solid;
لبه های بالا , پایین و راست, چپ می باشد.
border-style:dotted;
در این حالت تمام چهار لبه یک مقدار واحد را می گیرند.
این قوانین خلاصه سازی در مورد border-color و border-widht نیز برقرار می باشند.
به این صورت نیز می توان مقادیر خصوصیت border را نیز خلاصه نویسی کرد
border-bottom: thick solid red
که در این حالت مقدار اول border-width, مقدار دوم border-style و مقدار سوم border-color می باشد.
سخن آخر
در این مقاله سعی بر این شد که با برخی از خصوصیت های CSS و نحوه ی استفاده از آن ها آشنا شوید. برای آگاهی از آموزش های بیشتر می توانید با تیم طراحی سایت اصفهان همراه باشید.
روزی که محتوا های این سری از وب یار را برای من ارسال کردند ، با دیدن این عنوان های جذاب ، با خودم گفتم که تمام این سری از محتوا ها را باید خودم بنویسم ؛ چراکه اگر اون رو درست بشناسید و از این روش استفاده کنید ، به تنهایی این توانایی را دارد که سیستم بازاریابی و فروش شما رو متحول کند.در…
برنامه های موبایل در چه ساختار هایی طبقه بندی می شوند؟آیا می توان با هرزبانی برای هر پلتفرمی ، دست به توسعه اپلیکیشن زد؟بهتره از چه زبان برنامه نویسی برای توسعه اپ های موبایل استفاده کنیم؟ اپلیکیشن های native اپلیکیشن های hybrid زبان های محبوب و کارآمد برنامه موبایل 1.Javascript در اپلیکیشن های مولتی پلتفرم 2.جاوا در اپلیکیشن های اندرویدی 3. Swift در اپلیکیشن های…
شما هم این روز ها ، با چالش فروش پایین و کمبود مشتری روبه رو شدید؟تازه کسب و کار خود را راه انداختید و به دنبال بهترین و ارزان ترین روش های تبلیغاتی هستید؟تازه وارد هستید و کم هزینه بودن تبلیغات ، برای شما بسیار مهم است؟بستر های تبلیغاتی را نمی شناسید؟تبلیغات را بی فایده می دانید؟ اصلا ارزان ترین روش های تبلیغاتی برای شما…