چگونه می توان یک تصویر را به سمت چپ متن در یک صفحه وب شناخت

با استفاده از CSS برای ترسیم تصویر به سمت چپ صفحه طرح بندی صفحه

امروز تقریبا هر صفحه وب را نگاه کنید و ترکیبی از متن و تصاویر را تشکیل می دهید که بخش عمده ای از این صفحات را تشکیل می دهند. متن و تصاویر به یک صفحه بسیار آسان است. متن با استفاده از برچسب های استاندارد HTML مانند پاراگراف ها، لیست ها و عنوان ها کد گذاری می شود، در حالی که تصاویر با استفاده از عنصر گنجانده شده اند.

توانایی ساختن این متن و آن تصاویر با هم همخوانی دارد، این چیزی است که طراحان وب بزرگ را از هم جدا می کند! شما فقط نمی خواهی متن و تصاویر خود را به یک پس از دیگری ظاهر شود، این است که این عناصر سطح بلوک به طور پیش فرض طرح بندی می شوند. نه، شما میخواهید کنترل کنید که چگونه متن و تصاویر با هم در یک چارچوب بصری طراحی وبسایت شما قرار میگیرند.

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

شروع با HTML

اولین کاری که باید انجام دهید این است که برخی از HTML ها برای کار با آن داشته باشند. برای مثال ما پاراگراف متن را بنویسیم و در ابتدای پاراگراف (قبل از متن، اما بعد از باز کردن تگ

) یک تصویر اضافه کنیم. در اینجا چیزی است که مارک HTML به نظر می رسد:

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

به طور پیش فرض، صفحه وب ما با تصویر بالای متن نمایش داده می شود. این به این دلیل است که تصاویر در عناصر بلوک سطح در HTML هستند. این به این معنی است که مرورگر قبل از و بعد از عنصر تصویر به طور پیش فرض، خطوط را نشان می دهد. ما این تغییر پیش فرض را با تبدیل به CSS تغییر خواهیم داد. اول، با این حال، ما ارزش کلاس را به عنصر تصویر اضافه می کنیم . این کلاس به عنوان "قلاب" عمل می کند که بعدا در CSS ما استفاده می شود.

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

توجه داشته باشید که این کلاس "چپ" هیچ کاری انجام نمی دهد! برای رسیدن به سبک دلخواهمان، ما باید از CSS استفاده کنیم.

سبک های CSS

با استفاده از HTML ما در محل، از جمله خصیصه کلاس ما «چپ»، اکنون می توانیم به CSS تبدیل شویم. ما یک قاعده را به شیوه ی ما اضافه می کنیم که این تصویر را شناور می کند و همچنین در کنار آن یک حاشیه کوچک اضافه می کند، به طوری که متن که در نهایت در اطراف تصویر پیچیده می شود، به اندازه کافی در برابر آن قرار نمی گیرد. در اینجا CSS شما ممکن است نوشتن:

left {float: left؛ padding: 0 20px 20px 0؛ }

این سبک شناور است که تصویر را به سمت چپ و اضافه کردن کمی (با استفاده از برخی از اصطلاحات CSS) به سمت راست و پایین تصویر.

اگر شما صفحه ای را که حاوی این HTML در یک مرورگر است را بررسی کنید، اکنون تصویر به سمت چپ تراز می شود و متن پاراگراف به سمت راست با فاصله ای مناسب بین این دو به نظر می رسد. توجه داشته باشید ارزش کلاس "چپ" که ما استفاده کردیم خودسرانه است. ما می توانیم آن را هر چیزی نامگذاری کردیم چرا که اصطلاح "چپ" هیچ کاری به خودی خود انجام نمی دهد. این نیاز به یک ویژگی کلاس در HTML دارد که با یک شیء واقعی CSS کار می کند که تغییرات بصری را که می خواهید انجام دهید را تعیین می کند.

راه های جایگزین برای دستیابی به این سبک ها

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