این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش کار با عناصر Block و Inline در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با عناصر Block و Inline در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با عناصر Block و Inline در CSS
اگر سری آموزش قدم به قدم زبان HTML سایت فری لرن رو مطالعه کرده باشید میدونید که هر عنصر در HTML دارای ۲ حالت کلی نمایش می باشد :
- نمایش بصورت بلاکی یا Block یا تمام عرضی
- نمایش بصورت اینلاین یا Inline یا درون سطری
حال ما در این جلسه از سری آموزش های زبان CSS میخواهیم با همین حالت های نمایش کار کنیم، مثلا میخوایم ببینیم چجوری میشه حالت نمایش یک عنصر را از حالت بلاک به اینلاین تغییر بدهیم و یا برعکس. پس لطفا در ادامه با من همراه باشید.
در CSS یک ویژگی داریم به اسم Display که با استفاده از این ویژگی ما میتونیم نحوه نمایش یک عنصر را بصورت بلاکی یا اینلاینی مشخص نماییم.
- inline : نمایش بصورت درون سطری
- block : نمایش بصورت تمام سطری
- inline-block : همون اینلاین هست فقط اینو میشه براش اندازه عرض و ارتفاع تعریف کرد
- none : برای مخفی / پنهان کردن تگ
Free-Learn
مثال از حالت های نمایش بلاکی و اینلاینی
مثال شماره ۱ : مثلا تگ های H1 تا H6 و تگ P در دسته تگ های بلاکی هستن
|
1 2 3 4 5 6 |
<body> <h2>سایت آموزشی فری لرن</h2> <p>سایت آموزشی فری لرن</p> </body> |
مثال شماره ۲ : استفاده از تگ بلاکی ( تگ P ) در کنار یک تگ اینلاینی ( Span )
|
1 2 3 4 5 6 7 8 |
<body> <p>سایت آموزشی فری لرن</p> <span>Free-Learn</span> <span>Free-Learn</span> <span>Free-Learn</span> </body> |
Free-Learn
تغییر حالت نمایش تگ ها با استفاده از CSS
ما در سی اس اس با استفاده از ویژگی Display و مقادیری که این ویژگی داره ، میتونیم حالت نمایش یک عنصر را به دلخواه خودمون تغییر بدهیم.
مثلا میتونیم عنصر P ( تگ پاراگراف ) که بصورت پیش فرض حالت نمایشش بصورت بلاکی است را به اینلاینی تغییر بدهیم و یا هرعنصر دیگری را..
لیست کامل تگ های بلاکی در HTML را از اینجا مشاهده نمایید.
لیست کامل تگ های اینلاینی در HTML را از اینجا مشاهده نمایید.
مثال شماره ۱ : تغییر حالت نمایش تگ P از بلاکی به اینلاینی
|
1 2 3 4 5 6 7 |
<style> p{ display:inline; } </style> |
مثال شماره ۲ : تمام عرض کردن یک لینک
|
1 2 3 |
a.MyLink{ display:block; } |
مثال شماره ۳ : مخفی کردن یک تگ در صفحه
|
1 2 3 |
.MyHide{ display:none; } |
