خاصیت های نمایش در css – طرح بندی css

طرح بندی css یا css layout

در قسمت قبلی طراحی جدول های زیبا در css را یاد گرفتیم. در این قسمت  ویژگی های نمایش صفحه را به شما عزیزان آموزش خواهیم داد. این ویژگی های از مهم ترین ویژگی ها جهت کنترل بر روی صفحه نمایش و طرح بندی css ماست که مشخص می کنند چگونه تگ ها یا عناصر ما روی صفحه نمایش نشان داده شوند .در پایین با ذکر مثال به شما توضیح می دهیم.

عنصرهای ساخت بلاک :

این عناصر از یک خط شروع می شوند و به طور پیش فرض تا انتهای عرض صفحه نمایش ادامه دارند و ارتفاع آنها نیز با توجه به عناصر درون آن متغیر است.

نمونه هایی از عناصر بلاک :

  • تگ <div> : ساخت یک بلاک
  • تگ <h1> – <h6> : جهت ساخت تیترها و عنوان ها
  • <p> : جهت ساخت پاراگراف
  • <form> : یک بلاک شامل کنترل های تعاملی جهت ارسال اطلاعات به سرور
  • <header> : جهت تعریف عناصر صفحه مانند اطلاعات متا ، تگ های مربوط به ایندکس صفحه ، عنوان صفحه ، اسکریپ های داخلی و خارجی ، استایل شیت ها و … استفاده می شود
  • <footer> : ساخت بلاک پایین صفحه (عناصری که در پایین صفحه نمایش داده می شوند مانند اطلاعات تماس )
  • <section> : تعیین یک بخش یا قسمت مجزایی از یک صفحه

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

  • <span> : راهی برای اضافه کردن یک استایل یا الگو برای قسمتی از متن یا صفحه
  • <a> : لینک های صفحه
  • <img> : تصاویر صفحه

به مثال زیر توجه نمایید :

در کد بالا ما خاصیت لیست های منو را بصورت خطی یا افقی درنظر گرفتیم . در اینصورت زیرمنوها از حالت عمودی به افقی تغییر می کنند.
متن ها را در بلاکی جداگانه قرار دادیم با تغییر خاصیت display تگ span به مقدار block
در کلاس hidden خاصیت display را برابر با none قرار دادیم که در اینصورت عنوان هایی با این کلاس نمایش داده نخواهند شد .

 

 

 

اشتراک گذاری :
آموزش CSS آموزش برنامه نویسی

درباره حسین رسولی

از سال 89 در زمینه طراحی اپلیکیشن های ویندوز ، موبایل و همچنین طراحی سایت فعالیت دارم و در حال حاضر مدیریت سایت جهان سورس را برعهده دارم و سعی می کنم روزانه آموزش ها و پروژه های برنامه نویسی را با شما به اشتراک بگذارم.

دیدگاه خود را بیان کنید