CSS سبک های خلاقانه

خطوط CSS بیش از یک مرز است

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

طرح ها فضایی را بر نمی گرداند

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

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

طرحها ممکن است غیر مستطیلی باشند

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

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

استفاده از املاک عمومی

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

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

شما همچنین می توانید از ویژگی اصلی برای حذف خط نقطه نقطه در اطراف لینک های فعال استفاده کنید. این مقاله از CSS-Tricks نشان می دهد چگونه چهره نقطه چپ را حذف می کند.