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

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

آنچه در این جلسه میخوانید :

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

فهرست عناوین

هر عنصر در HTML دارای ۲ حالت کلی نمایش می باشد :

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

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

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

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

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

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

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

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

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

<style>

p{
 background-color:blue;
 color:#fff;
}

</style>

<style>

background-color:blue;

color:#fff;

}

</style>

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

<style>

span{
 background-color:red;
 color:#fff;
}

</style>

<style>

span{

background-color:red;

color:#fff;

}

</style>

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

<style>

ul{
 margin:0;
 padding:0;
}

ul li{
 background-color:green;
 color:#fff;
 display:inline-block;
}

</style>

<style>

ul{

margin:0;

padding:0;

}

ul li{

background-color:green;

color:#fff;

display:inline-block;

}

</style>

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

<style>

p{
 display:none;
}

</style>

<style>

display:none;

}

</style>

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

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

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

لیست کامل تگ های بلاکی در HTML را از اینجا مشاهده نمایید.

لیست کامل تگ های اینلاینی در HTML را از اینجا مشاهده نمایید.

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

<style>

p{
 background-color:blue;
 color:#fff;
 display:inline;
}

</style>

<style>

background-color:blue;

color:#fff;

display:inline;

}

</style>

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

<style>

a{
 background-color:blue;
 color:#fff;
 display:block;
}

</style>

<style>

background-color:blue;

color:#fff;

display:block;

}

</style>

مقاله های پیشنهادی:

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

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

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

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

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

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

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

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

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

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

مطالب زیر را حتما مطالعه کنید

آموزش رایگان HTML مقدماتی تا پیشرفته بخش پاراگراف

UI چیست؟

برترین فریم ورک های جاوا اسکریپت در 2021

آموزش رایگان افزونه فید اینستاگرام

آموزش رایگان کار با لایه ها و پالت Color & Swatches در فتوشاپ

آموزش رایگان و کامل کار با توابع یا Functions در CSS3

دیدگاهتان را بنویسید لغو پاسخ