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

خصوصیت width

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

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

مثال :

 

Input. button {
 Width: 10em;
 }

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

خصوصیت height

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

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

مثال :

 

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

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

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

ھنگامی که شما صفحه ای را اصولا برای نمایش در رزولوشن ۸۰۰*۶۰۰ یا ۱۰۲۴*۷۶۸ طراحی می کنید، اگر کاربر
سایت شما را با رزولوشن ۱۶۰۰*۱۲۰۰ مشاھده کند، صفحه را به شکلی نه چندان زیبا خواھد دید، یا ھنگام استفاده
از کلمه کلیدی auto یا مقادیر درصدی ممکن است مشاھده با رزولوشن ھای مختلف نتایج متفاوتی داشته باشد. در
این مواقع استفاده از مقادیر min و max برای width و height می تواند مانع از تغییر ظاھر صفحه در رزولوشن ھای
مختلف شود.

خصوصیت min

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

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

Body {
 Min-width: 1024px;
 }s

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

خصوصیت max

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

مثال :

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

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

بارگذاری نوشته های مرتبط بیشتر
بارگذاری بیشتر در آموزش Css در طراحی سایت

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بررسی کنید

آموزش CSS (فصل بیستم) – آشنایی جلوه های ویژه ی CSS3

در این جلسه  طراحی سایت شما را با جلوه های ویژه ی CSS3 آشنا می کنیم: خاصیت transform شما م…