یک ظاهر طراحی CSS

ظاهر طراحی CSS

در بسیاری از موارد، اشکال کارگران واقعی وب است، اما این بدان معنا نیست که آنها باید ساده باشند. تا زمانی که استفاده از CSS شایع شد، برای تغییر قالب فرم و ایجاد عناصر به وب مراجعه کنید.

اندازه استاندارد های اندازه متن بین کامپیوتر و مکینتاش یک مشکل بود، زیرا سیستم عامل های مختلف، عرض متن متفاوت را تفسیر کردند؛ علاوه بر این، اندازه زمینه ممکن است از مرورگر به مرورگر متفاوت باشد.

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

به طور مشابه، شما می توانید توجه خود را به شکل خود را با دادن یک پس زمینه متضاد؛ این به شما این امکان را می دهد که لیست های طولانی کشویی برای خواندن آسان را فرمت کنید.

پوشش فرم

تگ فرم یک عنصر حاوی است که، مانند تگ div، به صورت پیش فرض نمایش داده نمی شود. هر دو برچسب، در واقع، می تواند با CSS مدل دهید – شما حتی می توانید یک فرم را در صفحه توسط اعلامیه CSS قرار دهید.

پشتیبانی از مرورگر برای بعضی از ویژگی های CSS تعبیر شده ای که به تگ فرم اعمال می شود، تغییر می کند، اما ویژگی های رایج تر مانند رنگ پس زمینه و مرز در اغلب موارد به درستی ارائه می شوند.

از همه مهمتر، اگر CSS از مشخصه های خاصی پشتیبانی نمی کند، این ویژگی ها فقط نادیده گرفته می شوند و فرم به صراحت ارائه می شود.

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

}form 

;background: #FF9900

;border: thin solid #0000FF

;padding: 10px
{

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

در این وضعیت، انتخابگر پیشرفته در کادر محاوره New CSS Rule را انتخاب کنید و یک شناسه منحصر به فرد مانند فرم # topform یا فرم # bottomform را در فیلد Selector وارد کنید. هنگام استفاده از این روش شناسه تگ فرم را تنظیم کنید.

تغییر زمینه های ورودی

یکی از راه هایی که برچسب های فرم و div در رابطه با CSS متفاوت است، مربوط به ارث است. عناصر در یک فرم خواص CSS فرم را به ارث نمی برند، اما عناصر در یک برچسب div، عناصر CSS div را به ارث می برند.

بنابراین باید مسیر دیگری برای ظاهر شدن همه فیلدهای متنی در یک فرم خاص داشته باشید. بهترین روش برای اثرگذاری بر عناصر چندگانه در یک بار، این است که برچسب ورودی را سبک کنید.

شما ممکن است به یاد بیاورید که برچسب ورودی برای ایجاد زمینه های متنی، دکمه های رادیویی، جعبه ها و دکمه های ارسال استفاده می شود

به عنوان مثال، این قانون CSS تمام عناصر ورودی را یک رنگ پس زمینه یکنواخت و همچنین یک رنگ، فونت و اندازه خاص برای زمینه های متن می دهد

}input 

;background-color: #F5F5F5

;color: #660099

;font: 10px Verdana, Arial, Helvetica, sans-serif

{

CSS سبک زمینه های متن برای متن اولیه و همچنین متن وارد شده توسط کاربر است.

نکته: به یاد داشته باشید که یک فیلد متن چند خط واقعا یک textarea برچسب متفاوت از فیلد تک خطی است. شما باید یک قانون CSS برای هر دو برچسب ورودی و textarea ایجاد کنید.

یکی از بهترین استفاده ها برای سی اس اس و زمینه های متن تنظیم عرض است. این روش نسبت به استفاده از فیلد Char Width در بازرس اموال برای هر فیلد متن، بسیار انعطاف پذیر و پاسخگو تر است.

بهتر است عرض را روی یک کلاس CSS تنظیم کنید تا آن را مستقیما در قانون CSS برای تگ ورودی تغییر دهید. چرا؟ تنظیم عرض نه تنها تمام خطوط متن تک خط را تحت تأثیر قرار می دهد بلکه باعث تغییر کادر ها و دکمه های رادیویی می شود که همچنین برچسب های ورودی هستند.

پس از تعریف قوانین CSS، کلاس فیلد متن انتخاب شده را از Inspector Property تعیین کنید

 

امکان ارسال دیدگاه وجود ندارد!