طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش CSS – بخش چهارم

آموزش css

سلام عزیزان؛

در خدمت شما همراهان گرامی هستم با آموزش CSS – بخش چهارم و در این جلسه می خواهم مطالب زیر را که از مباحث مهم در CSS می باشند را شرح دهم:

  • تنظیمات عرض و ارتفاع المان ها.
  • بررسی مدل جعبه ای المان ها.

خب دوستای عزیزم، جهت چینش تمام المان ها در صفحه می توان برای آن ها عرض و ارتفاع دلخواهی را تنظیم کرد و اگر از ابتدای آموزشها همراه من بوده باشید، کمابیش با ویژگی های مربوط به عرض و ارتفاع آشنا هستید. در ادامه جزئیات بیشتری بررسی خواهند شد.

تنظیمات عرض و ارتفاع المان ها در CSS

با استفاده از دو ویژگی width  و height به ترتیب عرض و ارتفاع المان ها را تنظیم می کنیم. با این ویژگی ها تا حدودی آشنا هستیم و می دانیم مقادیری که می توانیم برای این ویژگی ها استفاده کنیم عبارتند از:

  • مقدار auto که پیش فرض مرورگرهاست. یعنی مرورگر با توجه به محتوای یک المان و اندازه صفحه، عرض و ارتفاع المان ها را محاسبه می کند.
  • مقادیر طولی: یعنی یک مقدار عددی بر حسب px ، pt ، cm و یا em را استفاه کنیم.
  • عددی بین 0 تا 100 درصد برای این ویژگی ها به کار ببریم. که در این صورت مرورگر همواره مقدار ثابتی از اندازه پنجره خودش را به المان اختصاص می دهد. به عنوان مثال اگر عرض یک المان را 50 درصد تعیین کنیم، در هر اندازه ای از پنجره مرورگر، همواره 50 درصد از فضای پنجره مرورگر به المان اختصاص میابد.

در مثال زیر این مقادیر را با هم بررسی می کنیم.

آموزش CSS – بخش چهارم

ویژگی های width و height هیچ ربطی به border  ، margin  و padding  ندارند. این سه ویژگی باید به طور جداگانه برای هر المان تنظیم شوند.

ویژگی max-width

زمانی که برای یک المان (فرضا یک دیو) عرض ثابتی تنظیم می کنیم (به عنوان مثال 500px)، اگر اندازه عرض پنجره مرورگر کمتر از 500px باشد، بخش از المان پنهان شده و برای مشاهده آن باید از اسکرول ایجاد شده در پایین مرورگر استفاده کنیم.

برای رفع این مشکل و جلوگیری از پنهان شدن المان، از ویژگی max-width  استفاده می کنیم.

در مثال زیر اثر این ویژگی را می بینیم.

آموزش CSS – بخش چهارم

در مثال بالا، ویژگی width  را به max-width  تغییر دهید و با تغییر اندازه عرض مرورگر، نتیجه را مشاهده نمایید.

در واقع max-width  حداکثر اندازه عرض یک المان را تعیین می کند که اگر اندازه مرورگر کمتر از این مقدار بود، مرورگر متناسب با فضای مورد نیاز المان ها، اندازه آنها را تغییر می دهد.

ویژگی min-width

این ویژگی کمترین اندازه عرض یک المان را تعیین می کند که با بزرگتر کردن عرض پنجره مرورگر، عرض المان نیز بزرگ خواهد شد.

آموزش CSS – بخش چهارم

ویژگی های max-height  و min-height  نیز مقدار حداقلی و حداکثری را برای ارتفاع تنظیم می کنند.

خب دوستان گلم، در اینجا می خواهم مطلب بسیار مهمی را شرح دهم. در ادامه خواهید دید که هر المان را مانند یک جعبه فرض می کنیم که از لایه های مختلفی تشکیل شده است. بدون فوت وقت بریم سر اصل مطلب:

مدل جعبه ای المان ها

در طراحی و طرح بندی صفحات، هر المان را به صورت یک جعبه در نظر می گیریم که از بخش های مختلفی ایجاد شده است. بعد از مشاهده عکس زیر با بخش های مختلف هر المان آشنا می شویم:

آموزش CSS – بخش چهارم

همانطور که مشاهده می فرمایید هر جعبه (هر المان) از 4 لایه تشکیل شده است که عبارتند از:

  • محتوا: محتوا می تواند یک عکس و یا متن باشد.
  • فاصله داخلی: فاصله محتوا تا حاشیه است.
  • حاشیه: که در اطراف محتوا و فاصله داخلی قرار می گیرد.
  • فاصله خارجی: سه بخش بالا را احاطه کرده است و فاصله خالی بین یک المان تا المان دیگر را ایجاد می کند.

مدل جعبه ای به ما این اجازه را می دهد که برای المان ها، حاشیه ای قرار دهیم و بین حاشیه و محتوا فاصله ای ایجاد کنیم تا به هم نچسبند. همچنین اجازه ایجاد فاصله خالی بین المان ها را می دهد و به این ترتیب خواهیم توانست المان ها را مرتب و بانظم در کنار هم بچینیم.

آموزش CSS – بخش چهارم

خب حالا با تمام دقت و تمرکز مطلب مهم زیر را مطالعه کنید:

بررسی عرض و ارتفاع واقعی المان ها

همانطور که در بالا اشاره شد هر المان از 4 بخش تشکیل شده است که ویژگی های width  و height  تنها طول و عرض محتوای هر المان را تعیین می کنند. برای محاسبه دقیق فضای اشغالی توسط یک المان، علاوه بر این دو ویژگی، اندازه حاشیه و فاصله های داخلی و خارجی را نیز باید در نظر گرفت.

پس در واقع فضای اشغال شده توسط یک المان مجموع اندازه های 4 بخش گفته شده در مدل جعبه ای است. بیایید این نکته مهم را با یک مثال بررسی کنیم. فرض کنید می خواهیم یک المان دیو را با اندازه دقیق 500*100px داشته باشیم:

 

 

 

آموزش CSS – بخش چهارم

همانطور که میبینید برای ایجاد یک المان با اندازه دقیق باید محاسباتی را انجام دهیم؛ اما چگونه محاسبات را دقیق انجام دهیم؟

برای محاسبه عرض به صورت زیر عمل می کنیم:

عرض هر المان = عرض (یعنی مقدار ویژگی width ) + فاصله داخلی از چپ + فاصله داخلی از راست + فاصله خارجی از چپ + فاصله خارجی از راست + اندازه حاشیه چپ + اندازه حاشیه حاشیه راست.

ارتفاع نیز از رابطه زیر به دست می  آید:

ارتفاع هر المان = ارتفاع (یعنی مقدار ویژگی height ) + فاصله داخلی بالا + فاصله داخلی پایین + فاصله خارجی بالا + فاصله خارجی پایین + اندازه حاشیه حاشیه بالا +  اندازه حاشیه حاشیه پایین.

اندازه های دیو اول:

آموزش CSS – بخش چهارم

اندازه های دیو دوم:

آموزش CSS – بخش چهارم

توجه کنید که از مقدار اندازه حاشیه 1 واحد کم شده و به اندازه ویژگی های width  و height  اضافه شده است.

آموزش CSS – بخش چهارم را در اینجا به پایان می رسانم (قول میدم بخش های بعدی طولانی تر باشند!!). در جلسه پنجم آموزش CSS می خواهیم یاد بگیریم که با چه دستوراتی می توان با متن ها و فونت ها کار کنیم؟

منتظر پیشنهادات شما دوستان گلم برای تهیه آموزش های بهتر و مفید تر هستم.

موفق باشید.

نوشته های مرتبط