عناصر نوع block و inline
شنبه, ۲۷ خرداد ۱۳۹۶، ۱۰:۱۹ ب.ظ
عناصر را در اچ تی ام ال بر اساس نوع نمایش (display) به دو نوع تقسیم می کنند. عناصر یا از نوع block هستند یا از نوع inline. مقدار پیش فرض نوع نمایش برای یک عنصر اچ تی ام ال مقدار block است. اگر قسمت مربوط به css را مطالعه کرده باشید به این مورد اشاره شده است.
عناصر نوع block
اگر مقدار ویژگی display برای یک عنصر مقدار block باشد (همانطور که گفته شد این مقدار، برای تمام عناصر اچ تی ام ال مقدار پیش فرض است) آن عنصر در یک خط جدید قرار می گیرد و تمام عرض صفحه نمایش را اشغال خواهد کرد. به عبارت دیگر به هیچ عنصر دیگری اجازه نمی دهد در کنار آن قرار گیرد. عناصری مثل div، h1 تا h6، p، form از نوع بلوک هستند.
عناصر نوع Inline
یک عنصر از نوع Inline تمام عرض صفحه را اشغال نمی کند، بلکه این نوع عنصر فقط به اندازه عرض محتوای خود، عرض صفحه را اشغال خواهد کرد و همچنین از یک خط جدید شروع نمی شود. عناصری مثل span, a, img از نوع inline هستند.
عنصر <div>
عنصر <div> عنصری است که در قالب بندی ظاهری محتوای صفحه از آن بسیار استفاده می کنیم. در واقع خیلی وقت ها از عنصر <div> به عنوان نگهدارنده (Container) محتوا استفاده می کنیم (در قسمت صفحه آرایی نیز به این نکته اشاره خواهیم کرد که یکی از روشهای چیش اجزای صفحه، استفاده از تگ <div> به همراه ویژگی float است). عنصر <div> هیچ خصیصه ضروری ندارد، اما معمولا خصیصه های style و class با این عنصر استفاده می شوند. همانطور که در بالا نیز گفتم، عنصر <div> به صورت پیش فرض یک عنصر بلوک است که می توانیم با استفاده از css این خاصیت را تغییر دهیم.
با استفاده از css می توانیم بلوک های مختلف محتوا را سازماندهی کنیم:
عنصر <span>
علاوه بر تگ <div>، تگ دیگری هم وجود دارد که می توانیم به عنوان نگهدارنده محتوا از آن استفاده کنیم. تگ <span> تگی است که می توانیم مقداری از محتوا را داخل آن قرار دهیم. این تگ هم هیچ خصیصه اجباری ندارد اما معمولا خصیصه های style یا class را با آن استفاده می کنیم. با استفاده از css و تگ <span> می توانیم قسمتی از محتوا را قالب بندی کنیم.
عناصر نوع block
اگر مقدار ویژگی display برای یک عنصر مقدار block باشد (همانطور که گفته شد این مقدار، برای تمام عناصر اچ تی ام ال مقدار پیش فرض است) آن عنصر در یک خط جدید قرار می گیرد و تمام عرض صفحه نمایش را اشغال خواهد کرد. به عبارت دیگر به هیچ عنصر دیگری اجازه نمی دهد در کنار آن قرار گیرد. عناصری مثل div، h1 تا h6، p، form از نوع بلوک هستند.
تگ<div> یک تگ از نوع بلوک است.
عناصر نوع Inline
یک عنصر از نوع Inline تمام عرض صفحه را اشغال نمی کند، بلکه این نوع عنصر فقط به اندازه عرض محتوای خود، عرض صفحه را اشغال خواهد کرد و همچنین از یک خط جدید شروع نمی شود. عناصری مثل span, a, img از نوع inline هستند.
عنصر <div>
عنصر <div> عنصری است که در قالب بندی ظاهری محتوای صفحه از آن بسیار استفاده می کنیم. در واقع خیلی وقت ها از عنصر <div> به عنوان نگهدارنده (Container) محتوا استفاده می کنیم (در قسمت صفحه آرایی نیز به این نکته اشاره خواهیم کرد که یکی از روشهای چیش اجزای صفحه، استفاده از تگ <div> به همراه ویژگی float است). عنصر <div> هیچ خصیصه ضروری ندارد، اما معمولا خصیصه های style و class با این عنصر استفاده می شوند. همانطور که در بالا نیز گفتم، عنصر <div> به صورت پیش فرض یک عنصر بلوک است که می توانیم با استفاده از css این خاصیت را تغییر دهیم.
با استفاده از css می توانیم بلوک های مختلف محتوا را سازماندهی کنیم:
طراحی وبسایت کتابخانه
در این وبسایت سعی می کنم مهارت های لازم برای طراحی وب سایت را به شما آموزش دهم.
<div style="background-color:gray; color:white; padding:20px; direction:rtl;"> <h2>طراحی وبسایت کتابخانه</h2> <p>در این وبسایت سعی میکنم مهارتهای لازم برای طراحی وبسایت را به شما آموزش دهم.</p> </div>
عنصر <span>
علاوه بر تگ <div>، تگ دیگری هم وجود دارد که می توانیم به عنوان نگهدارنده محتوا از آن استفاده کنیم. تگ <span> تگی است که می توانیم مقداری از محتوا را داخل آن قرار دهیم. این تگ هم هیچ خصیصه اجباری ندارد اما معمولا خصیصه های style یا class را با آن استفاده می کنیم. با استفاده از css و تگ <span> می توانیم قسمتی از محتوا را قالب بندی کنیم.
یک متن مهم.
<h2> یک متن<span style="color: red;">مهم</span>. </h2>
