آموزش کار با عناصر Block و Inline در CSS
سلام خدمت تمامی عزیزان و همراهان گرامی سایت همیارمن ، امیدوارم که حال همگیتون خوب باشه و همیشه سلامت باشید. لطفا در ادامه با آموزش کار با عناصر Block و Inline در CSS با من همراه باشید.
آنچه در این جلسه میخوانید :
کار با عناصر Block و Inline در CSS
فهرست عناوین
هر عنصر در HTML دارای ۲ حالت کلی نمایش می باشد :
- نمایش بصورت بلاکی یا Block یا تمام عرضی
- نمایش بصورت اینلاین یا Inline یا درون خطی
حال ما در این جلسه از سری آموزش های زبان CSS میخواهیم با همین حالت های نمایش کار کنیم، مثلا میخوایم ببینیم چجوری میشه حالت نمایش یک عنصر را از حالت بلاک به اینلاین تغییر بدهیم و یا برعکس. پس لطفا در ادامه با من همراه باشید.
خب در CSS یک ویژگی داریم به اسم Display
که با استفاده از این ویژگی ما میتونیم نحوه نمایش یک عنصر را بصورت بلاکی یا اینلاینی مشخص نماییم.
این ویژگی تقریبا بیش از ۷ مقدار میتونه بپذیره، که در این جلسه ما کاری به همه ی این مقادیر نداریم فقط چنتا مقداری که خیلی میتونه بدردبخور باشه رو آموزش میدم.
برخی از مقادیر ویژگی Display
همونطور که گفتم در این جلسه فقط چنتایی از مقادیر این ویژگی رو آموزش خواهم داد، که این مقادیر به شرح زیر می باشند :
- inline : نمایش بصورت درون خطی
- block : نمایش بصورت بلاکی
- inline-block : همان اینلاین می باشد ولی با قابلیت ایجاد اندازه عرض و ارتفاع
- none : بکل یک عنصر را حذف میکند یا اینجوری بگیم یک عنصر را نمایش نمیدهد
مثال از حالت های مختلف ویژگی Display
مثال شماره ۱ : حالت بلاکی یا تمام عرضی ( تگ P بصورت پیش فرض حالت نمایشش بلاکی می باشد )
1 2 3 4 5 6 7 8 |
<style> p{ background-color:blue; color:#fff; } </style> |
مثال شماره ۲ : حالت اینلاین یا درون خطی ( تگ Span بصورت پیش فرض حالت نمایشش اینلاینی می باشد )
1 2 3 4 5 6 7 8 |
<style> span{ background-color:red; color:#fff; } </style> |
مثال شماره ۳ : حالت Inline-block (در این مثال نحوه استفاده از این مقدار را مشاهده خواهید نمود)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> ul{ margin:0; padding:0; } ul li{ background-color:green; color:#fff; display:inline-block; } </style> |
مثال شماره ۴ : عدم نمایش یک عنصر با استفاده از مقدار None
1 2 3 4 5 6 7 |
<style> p{ display:none; } </style> |
تغییر حالت نمایش یک عنصر در CSS
ما در سی اس اس با استفاده از ویژگی Display
و مقادیری که این ویژگی داره ، میتونیم حالت نمایش یک عنصر را به دلخواه خودمون تغییر بدهیم.
مثلا میتونیم عنصر P ( تگ پاراگراف ) که بصورت پیش فرض حالت نمایشش بصورت بلاکی است را به اینلاینی تغییر بدهیم و یا هرعنصر دیگری را..
لیست کامل تگ های بلاکی در HTML را از اینجا مشاهده نمایید.
لیست کامل تگ های اینلاینی در HTML را از اینجا مشاهده نمایید.
مثال شماره ۱ : تغییر حالت نمایش تگ P به اینلاینی
1 2 3 4 5 6 7 8 9 |
<style> p{ background-color:blue; color:#fff; display:inline; } </style> |
مثال شماره ۲ : تغییر حالت نمایش تگ a به بلاکی (تگ a بصورت پیش فرض حالت نمایشش اینلاینی است)
1 2 3 4 5 6 7 8 9 |
<style> a{ background-color:blue; color:#fff; display:block; } </style> |
مقاله های پیشنهادی:
دیدگاهتان را بنویسید