آموزش عناصر inline level و block level در HTML
مطالب پیشنهادی برای شما مهمان عزیز
با سلام خدمت تمامی علاقمندان به مباحث طراحی سایت با HTML و css از سری آموزشهای سایت پاسخ وردپرس ،
در جلسه گذشته به معرفی خاصیت position در css پرداختیم
در این جلسه از آموزش HTML و css قصد داریم شما را با عناصر inline level و block level در HTML آشنا نماییم پس بامن همراه باشید.
آموزش عناصر inline level و block level
عناصر در HTML با توجه به نوعشان به صورت پیش فرض به دو صورت نمایش داده میشوند
یا به صورت block level (بلاکی) و یا به صورت inline level (درون خطی).
آموزش عناصر inline block (درون خطی)
این دسته از عناصر تنها به اندازهی محتوای درون خود فضا اشغال میکنند مثل تگهای
span ، img ، em ، a و غیره… از جمله عناصر inline level (درون خطی) به شمار میروند.
عناصر درون خطی را میتوان در یک سطر کنار هم قرار داد برای درک بهتر به مثال زیر توجه نمایید
1 2 3 4 5 6 |
<em> اگر دانشی مرد گوید سخن == تو بشنو که دانش نگردد کهن </em> <span> پاسخ .وردپرس مرجع آموزش های رایگان </span> |
در این مثال از تگ span و تگ em که از جمله عناصر درون خطی هستند استفاده شده است.
اگه این کد ها را داخل مرورگر اجار کنید در کارهم قرار گرفتن .
آموزش عناصر block level (بلاکی)
این دسته از عناصر یک سطر را اشغال میکنند تگ p ، div ، form و li و header و article و غیره… از جمله عناصر block level (بلاکی) به شمار میروند.
برای این که شما بهتر درک کنید عناصر block level به مثال زیر توجه کنید :
1 2 3 4 5 6 7 8 9 |
<p> پاسخ وردپرس مرجع آموزشهای رایگان به صورت کامل </p> <article > پاسخ وردپرس مرجع آموزشهای رایگان به صورت کامل </article > <div> پاسخ وردپرس مرجع آموزشهای رایگان به صورت کامل </div> |
اگه کد های بالا را داخل یک فایل html قرار بدید می بیند که هر کدوم از اینها در یک سطر قرار گرفتن .
با استفاده از ویژگی display شما می توانید رفتار پیشفرض عناصر را تغییر دهید. مثلا رفتار یک عنصر inline را به block و بالعکس تبدیل کنید.
انیشالاه که توی جلسه بعدی به صورت کامل خدمت شما آموزش خواهیم داد منتظر جلسه بعد باشید .
خب به پایان این جلسه آموزش اچ تی ام ال و سی اس اس رسیدیم در جلسه آینده آموزش inline و block میپردازیم. درصورتی که سوالی داشتید حتما در قسمت دیدگاه سوال خود مطرح نمایید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.