آموزش کار با عناصر Block و Inline در CSS

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

آموزش کار با عناصر Block و Inline در CSS

Free-Learn

کار با عناصر Block و Inline در CSS

اگر سری آموزش های قدم به قدم زبان HTML سایت فری لرن رو مشاهده / مطالعه کرده باشید میدونید که هر عنصر در HTML دارای ۲ حالت کلی نمایش می باشد :

  • نمایش بصورت بلاکی یا Block یا تمام عرضی
  • نمایش بصورت اینلاین یا Inline یا درون خطی

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

خب در CSS یک ویژگی داریم به اسم Display که با استفاده از این ویژگی ما میتونیم نحوه نمایش یک عنصر را بصورت بلاکی یا اینلاینی مشخص نماییم.

این ویژگی تقریبا بیش از ۷ مقدار میتونه بپذیره، که در این جلسه ما کاری به همه ی این مقادیر نداریم فقط چنتا مقداری که خیلی میتونه بدردبخور باشه رو آموزش میدم.

Free-Learn

برخی از مقادیر ویژگی Display

همونطور که گفتم در این جلسه فقط چنتایی از مقادیر این ویژگی رو آموزش خواهم داد، که این مقادیر به شرح زیر می باشند :

  • inline : نمایش بصورت درون خطی
  • block : نمایش بصورت بلاکی
  • inline-block : همان اینلاین می باشد ولی با قابلیت ایجاد اندازه عرض و ارتفاع
  • none : بکل یک عنصر را حذف میکند یا اینجوری بگیم یک عنصر را نمایش نمیدهد

Free-Learn

مثال از حالت های مختلف ویژگی Display

مثال شماره ۱ : حالت بلاکی یا تمام عرضی ( تگ P بصورت پیش فرض حالت نمایشش بلاکی می باشد )

امتحان کنید

مثال شماره ۲ : حالت اینلاین یا درون خطی ( تگ Span بصورت پیش فرض حالت نمایشش اینلاینی می باشد )

امتحان کنید

مثال شماره ۳ : حالت Inline-block (در این مثال نحوه استفاده از این مقدار را مشاهده خواهید نمود)

امتحان کنید

مثال شماره ۴ : عدم نمایش یک عنصر با استفاده از مقدار None

امتحان کنید

Free-Learn

تغییر حالت نمایش یک عنصر در CSS

ما در سی اس اس با استفاده از ویژگی Display و مقادیری که این ویژگی داره ، میتونیم حالت نمایش یک عنصر را به دلخواه خودمون تغییر بدهیم.

مثلا میتونیم عنصر P ( تگ پاراگراف ) که بصورت پیش فرض حالت نمایشش بصورت بلاکی است را به اینلاینی تغییر بدهیم و یا هرعنصر دیگری را..

مثال شماره ۱ : تغییر حالت نمایش تگ P به اینلاینی

امتحان کنید

مثال شماره ۲ : تغییر حالت نمایش تگ a به بلاکی (تگ a بصورت پیش فرض حالت نمایشش اینلاینی است)

امتحان کنید

Free-Learn