0 اسپیناس وب اسپیناس وب

افتخار طراحی سایت بیش از ۱۷۰۰ کسب و کار ایرانی و خارجی

نمونه کارها

آموزش CSS (جلسه دهم) – فضاهای اطراف عنصر

نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

در این جلسه  طراحی سایت شما را با  خصوصیت های زیر آشنا می شویم:

خصوصیت width

خاصیت width عرض محتوای یک عنصر را تعیین می کند. در نھایت عرض کلی یک عنصر برابر با عرض محتوا (تعیین
شده توسط width ) بعلاوه ی عرض padding و عرض border آن عنصر می باشد. این خصوصیت را می توان با یکی از
سه مقدار عددی، درصدی یا auto مقداردھی کرد. و مقدار پیشفرض آن auto می باشد. مقادیر منفی نیز برای این
خصوصیت مجاز نمی باشد.

از خاصیت width می توان برای تخصیص یک مقدار کلی برای برخی عناصر input مثل دکمه ھای reset و submit
استفاده کرد.

مثال :

 

Input. button {
 Width: 10em;
 }

دستور فوق عرض تمامی عناصر input با کلاس button را 10em در نظر می گیرد.

خصوصیت height

در کنار خصوصیت width خاصیت height وجود دارد که ارتفاع محتوای یک عنصر را مشخص می کند. البته استفاده از
خاصیت height برای عناصر چندان متداول نیست و بیشتر ھمان مقدار پیشفرض یعنی auto را برای آن در نظر گرفته
می شود و صفحات وب معمولا با scrool عمودی طراحی می شوند. این خصیوصیت نیز مانند width یکی از سه مقدار
عددی، درصدی و یا auto را به عنوان مقدار می پذیرد.

ھمانند خاصیت width از خاصیت height می توان برای مشخص کردن ابعاد یک تصویر استفاده کرد.

مثال :

 

Img. footer {
 Width: 440px;
 Height: 130px;
 }

ابعاد min و max براي width و height

طراحی با عرض متغییر ھنگامی استفاده می شود که میخواھید محتویات را برای مطابقت با resolution ھای مختلف
صفحه نمایش طراحی کنید. ھمچنین ھنگامی مفید می باشد که میخواھید عرض عنصر منبسط یا منقبض نشود.

ھنگامی که شما صفحه ای را اصولا برای نمایش در رزولوشن 800*600 یا 1024*768 طراحی می کنید، اگر کاربر
سایت شما را با رزولوشن 1600*1200 مشاھده کند، صفحه را به شکلی نه چندان زیبا خواھد دید، یا ھنگام استفاده
از کلمه کلیدی auto یا مقادیر درصدی ممکن است مشاھده با رزولوشن ھای مختلف نتایج متفاوتی داشته باشد. در
این مواقع استفاده از مقادیر min و max برای width و height می تواند مانع از تغییر ظاھر صفحه در رزولوشن ھای
مختلف شود.

خصوصیت min

خاصیت min یکی از دو مقدار عددی یا درصدی را می پذیرد. و مقدار پیش فرض آن 0 است، این خصوصیت در ie6 و قبل
از آن پشتیبانی نمی شود.

خصوصیت width-min و height-mn محدودیت کوچکترین اندازه را برای یک عنصر مشخص می کنند، و از منقبض شدن
عرض یا ارتفاع یک عنصر ھنگام تغییر سایز پنجره مرورگر یا رزولوشن جلوگیری می کند.
مثال :

Body {
 Min-width: 1024px;
 }s

در مثال فوق تعریف 1024px:wdith-min; برای عنصر body مانع از منقبض شدن محتوای صفحه شده و صفحه croll
افقی پیدا می کند.

خصوصیت max

خصوصیت max محدودیت بالاتر و حداکثر اندازه را برای یک عنصر مشخص می کند و ھنگامی تعریف می شوند که
ابعاد یک عنصر ممکن است افزایش یابند که با استفاده از این خصوصیات می توان مانع از منبسط شد و افزایش ابعاد
عناصر شد. این خصوصیت یکی از سه مقدار عددی، درصدی یا auto را می پذیرد.

مثال :

Body {
 Max-width: 1440;
 Max-height: auto;
 }

طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در  طراحی سایت دارد  در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT   در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP  در شرکت اسپیناس مشتری مداری حرف اول را می زند

درگ کنید مشاهده بستن پخش
0%