CSS (Cascading Style Sheets) یا شیوه نامه آبشاری، برای توصیف استفاده می شود ظاهرسند نوشته شده به زبان نشانه گذاری به طور معمول، سبک های CSS برای ایجاد و تغییر سبک عناصر صفحات وب و رابط های کاربری نوشته شده در زبان های HTMLو XHTML، اما همچنین می تواند برای هر نوع سند XML، از جمله XML، SVG و XUL اعمال شود.

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

یک اعلان سبک از دو بخش تشکیل شده است: عنصر صفحه وب - انتخابگرو دستورات قالب بندی - بلوک تبلیغاتی. انتخابگر به مرورگر می گوید که کدام عنصر را قالب بندی کند و در بلوک اعلامیه (کد در آکولاد) دستورات قالب بندی فهرست شده اند - خواص و مقادیر آنها.

انواع استایل شیت آبشاری و مشخصات آنها

1. انواع شیوه نامه

1.1. برگه سبک خارجی

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

شما می توانید با افزودن چندین تگ به صورت متوالی، چندین شیوه نامه را به هر صفحه وب متصل کنید ، که هدف این شیوه نامه را در ویژگی تگ رسانه نشان می دهد. rel="stylesheet" نوع پیوند (پیوند به شیوه نامه) را مشخص می کند.

ویژگی type="text/css" توسط استاندارد HTML5 مورد نیاز نیست، بنابراین می توان آن را حذف کرد. اگر مشخصه وجود نداشته باشد، مقدار پیش فرض type="text/css" است.

1.2. سبک های داخلی

سبک های داخلیدر یک بخش تعبیه شده است سند HTML و در داخل تگ تعریف می شوند. سبک‌های داخلی بر سبک‌های خارجی اولویت دارند، اما نسبت به سبک‌های درون خطی (که از طریق ویژگی style مشخص می‌شوند) پایین‌تر هستند.

...

1.3. سبک های داخلی

وقتی می نویسیم سبک های درون خطی، ما کد CSS را در فایل HTML، مستقیماً در داخل تگ عنصر با استفاده از ویژگی style می نویسیم:

به این متن دقت کنید.

چنین سبک هایی فقط بر عنصری که برای آن تنظیم شده اند تأثیر می گذارد.

1.4. قانون @import

قانون @importبه شما امکان می‌دهد برگه‌های سبک خارجی را بارگیری کنید. برای اینکه دستور @import کار کند، باید قبل از سایر قوانین در شیوه نامه (خارجی یا داخلی) ظاهر شود:

قانون @import همچنین برای گنجاندن فونت های وب استفاده می شود:

آدرس اینترنتی import@(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin،سیریلیک)؛

2. انواع سلکتورها

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

2.1. انتخابگر جهانی

با هر عنصر HTML مطابقت دارد. به عنوان مثال، * (حاشیه: 0؛) حاشیه ها را برای همه عناصر سایت بازنشانی می کند. انتخابگر همچنین می تواند در ترکیب با یک کلاس شبه یا شبه عنصر استفاده شود: *:after (سبک های CSS)، *:checked (سبک های CSS) .

2.2. انتخابگر عنصر

انتخابگرهای عنصر به شما امکان می دهند همه عناصر را قالب بندی کنید از این نوعدر تمام صفحات سایت به عنوان مثال، h1 (Font-family: Lobster، شکسته؛) سبک قالب بندی کلی را برای همه سرفصل های h1 تنظیم می کند.

2.3. انتخابگر کلاس

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

و استایل را برای کلاس مشخص شده تنظیم کنید. استایل‌هایی که با استفاده از یک کلاس ایجاد می‌شوند را می‌توان برای عناصر دیگر، نه لزوماً از آن نوع، اعمال کرد.

دستورالعمل استفاده کامپیوتر شخصی

2.4. انتخابگر شناسه

انتخابگر ID به شما امکان قالب بندی را می دهد یکیعنصر خاص شناسه باید منحصر به فرد باشد و فقط یک بار در یک صفحه نمایش داده شود.

2.5. انتخاب کننده نسل

انتخابگرهای فرعی استایل ها را به عناصر درون یک عنصر ظرف اعمال می کنند. به عنوان مثال، ul li (تبدیل متن: حروف بزرگ؛) - همه عناصر li را که فرزندان همه عناصر ul هستند انتخاب می کند.

اگر می خواهید فرزندان یک عنصر خاص را قالب بندی کنید، باید به آن عنصر یک کلاس سبک بدهید:

p. first a (رنگ: سبز؛) - این سبکبرای همه پیوندهای نوادگان یک پاراگراف با کلاس اول اعمال خواهد شد.

p .first a (رنگ: سبز؛) - اگر یک فاصله اضافه کنید، پیوندهایی که در داخل هر تگ کلاس اول قرار دارند که فرزند عنصر است استایل دهی می شود.

ابتدا a (رنگ: سبز؛) - این سبک برای هر پیوندی که در داخل عنصر دیگری قرار دارد، که توسط class.first تعیین شده است، اعمال خواهد شد.

2.6. انتخاب کننده کودک

عنصر فرزند فرزند مستقیم عنصر حاوی آن است. یک عنصر می تواند چندین عنصر داشته باشد عناصر کودک، و هر عنصر فقط می تواند یک والد داشته باشد. انتخابگر فرزند به شما اجازه می دهد که استایل ها را فقط در صورتی اعمال کنید که عنصر فرزند بلافاصله بعد از عنصر والد بیاید و هیچ عنصر دیگری بین آنها وجود نداشته باشد، یعنی عنصر فرزند در هیچ چیز دیگری تودرتو نباشد.
برای مثال، p > strong همه عناصر قوی را که فرزندان عنصر p هستند انتخاب می کند.

2.7. انتخابگر خواهر

خواهرخواندگی بین عناصری اتفاق می افتد که والدین مشترک دارند. انتخابگرهای خواهر و برادر به شما این امکان را می دهند که عناصر را از گروهی از عناصر هم سطح انتخاب کنید.

h1 + p - تمام پاراگراف های اول را بلافاصله بعد از هر تگ انتخاب می کند

بدون تأثیر بر پاراگراف های باقی مانده؛

h1 ~ p - تمام پاراگراف هایی را که مشابه هر عنوان h1 هستند و بلافاصله بعد از آن انتخاب می کند.

2.8. انتخابگر صفت

انتخابگرهای ویژگی عناصر را بر اساس نام ویژگی یا مقدار ویژگی انتخاب می‌کنند:

[ویژگی] - همه عناصر حاوی ویژگی مشخص شده - همه عناصری که ویژگی alt برای آنها مشخص شده است.

Selector[خصیصه] - عناصری از این نوع حاوی ویژگی مشخص شده، img - فقط تصاویری که ویژگی alt برای آنها مشخص شده است.

selector[attribute="value"] - عناصری از این نوع که حاوی ویژگی مشخص شده با مقدار مشخصی هستند، img - همه تصاویری که عنوان آنها حاوی کلمه گل است.

selector[attribute~="value"] - عناصری که تا حدی حاوی ارزش داده شدهبرای مثال، اگر چندین کلاس برای عنصری که با یک فاصله از هم جدا شده است مشخص شود، p - پاراگراف هایی که نام کلاس آنها حاوی ویژگی است.

selector[خصیصه|="مقدار"] - عناصری که لیست مقادیر مشخصه آنها با کلمه مشخص شده شروع می شود، p - پاراگرافهایی که نام کلاس آنها ویژگی است یا با ویژگی شروع می شود.

selector[attribute^="value"] - عناصری که مقدار مشخصه آنها با مقدار مشخص شده شروع می شود، a - همه پیوندها که با http:// شروع می شوند.

selector[attribute$="value"] - عناصری که مقدار مشخصه آنها به پایان می رسد مقدار مشخص شده, img - همه تصاویر با فرمت png.

selector[attribute*="value"] - عناصری که مقدار مشخصه آنها حاوی کلمه مشخص شده در هر نقطه است، a - همه پیوندهایی که نام آنها حاوی کتاب است.

2.9. انتخابگر شبه کلاس

شبه کلاس ها کلاس هایی هستند که در واقع به تگ های HTML متصل نیستند. آنها به شما این امکان را می دهند که قوانین CSS را در زمانی که رویدادی رخ می دهد یا در معرض آن قرار می گیرد، روی عناصر اعمال کنید یک قانون خاص. شبه کلاس ها عناصری را با ویژگی های زیر مشخص می کنند:

:hover - هر عنصری که نشانگر ماوس روی آن قرار می گیرد.

:focus - یک عنصر تعاملی که با استفاده از صفحه کلید هدایت شده یا با استفاده از ماوس فعال شده است.

:active - عنصری که توسط کاربر فعال شده است.

:valid - فیلدهای فرمی که محتویات آنها برای مطابقت با نوع داده مشخص شده در مرورگر بررسی شده است.

:invalid - فیلدهایی را فرم دهید که محتوای آنها با نوع داده مشخص شده مطابقت ندارد.

:enabled - تمام فیلدهای فرم فعال.

:disabled - فیلدهای فرم مسدود شده، به عنوان مثال، در حالت غیر فعال.

:in-range - فیلدهایی را تشکیل می دهد که مقادیر آنها در محدوده مشخص شده است.

:خارج از محدوده - فیلدهایی را تشکیل می دهد که مقادیر آنها در محدوده مشخص شده نیست.

:lang() - عناصر با متن در زبان مشخص شده.

:not(selector) - عناصری که انتخابگر مشخص شده را ندارند - کلاس، شناسه، نام یا نوع فیلد فرم - :not() ;

:target عنصری با علامت # است که در سند به آن ارجاع داده شده است.

:checked - عناصر فرم انتخاب شده (انتخاب کاربر).

2.10. انتخابگر شبه کلاس سازه

شبه کلاس های ساختاری عناصر فرزند را با توجه به پارامتر مشخص شده در پرانتز انتخاب می کنند:

:nth-child(odd) - عناصر فرزند فرد;

:nth-child(حتی) - حتی عناصر فرزند;

:nth-child(3n) - هر سوم عنصر در بین کودکان.

:nth-child(3n+2) - هر عنصر سوم را انتخاب می کند که از فرزند دوم (+2) شروع می شود.

:nth-child(n+2) - همه عناصر را انتخاب می کند که از دوم شروع می شود.

:nth-child(3) - عنصر فرزند سوم را انتخاب می کند.

:nth-last-child() - در لیست عناصر فرزند، عنصر با را انتخاب می کند مکان مشخص شده، مشابه:nth-child() ، اما از آخرین مورد شروع می شود، در جهت مخالف.

:first-child - به شما امکان می دهد فقط اولین عنصر فرزند تگ را استایل کنید.

:last-child - به شما امکان می دهد آخرین عنصر فرزند تگ را قالب بندی کنید.

:only-child - عنصری را انتخاب می کند که تنها عنصر فرزند باشد.

:empty - عناصری را انتخاب می کند که فرزند ندارند.

:root - عنصری را که ریشه در سند است انتخاب می کند - عنصر html.

2.11. انتخابگر شبه کلاس نوع سازه

نوع خاصی از برچسب فرزند را نشان می دهد:

:nth-of-type() - عناصری شبیه به :nth-child() را انتخاب می کند، اما فقط نوع عنصر را در نظر می گیرد.

:first-of-type - اولین فرزند از یک نوع مشخص را انتخاب می کند.

:last-of-type - انتخاب می کند آخرین عنصراز این نوع؛

:nth-last-of-type() - یک عنصر را انتخاب می کند نوع داده شدهدر لیستی از عناصر با توجه به مکان مشخص شده، از انتها شروع می شود.

:only-of-type - تنها عنصر از نوع مشخص شده را از بین عناصر فرزند عنصر والد انتخاب می کند.

2.12. انتخابگر شبه عنصر

عناصر شبه برای افزودن محتوا استفاده می شود که با استفاده از ویژگی content تولید می شود:

:first-letter - حرف اول هر پاراگراف را انتخاب می کند، فقط برای عناصر بلوک اعمال می شود.

:first-line - اولین خط متن عنصر را انتخاب می کند، فقط برای عناصر بلوک اعمال می شود.

:before - محتوای تولید شده را قبل از عنصر درج می کند.

:after - محتوای تولید شده را بعد از عنصر اضافه می کند.

3. ترکیب انتخابگر

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

img:nth-of-type(even) - همه تصاویر زوج را انتخاب می کند، متن جایگزینکه شامل کلمه css.

4. انتخابگرهای گروه بندی

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

H1، h2، p، دهانه (رنگ: گوجه‌فرنگی؛ پس‌زمینه: سفید؛ )

5. ارث و آبشار

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

5.1. وراثت

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

ویژگی های مربوط به قالب بندی بلوک به ارث نمی رسد. اینها پس‌زمینه، حاشیه، نمایش، شناور و شفاف، ارتفاع و عرض، حاشیه، حداقل حداکثر ارتفاع و عرض، طرح کلی، سرریز، لایه‌بندی، موقعیت، تزئین متن، تراز عمودی و z-index هستند.

ارث اجباری

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

نحوه تنظیم و عملکرد سبک های CSS

1) سبک ها را می توان از عنصر والد به ارث برد (ویژگی های به ارث برده شده یا با استفاده از مقدار ارث بری).

2) سبک‌های موجود در شیوه نامه زیر، سبک‌های موجود در جدول بالا را لغو می‌کنند.

3) سبک های یک عنصر را می توان اعمال کرد منابع مختلف. می توانید بررسی کنید که کدام سبک ها در حالت توسعه دهنده مرورگر اعمال می شوند. برای این کار بر روی عنصر کلیک کنید کلیک راستماوس را انتخاب کنید و "View code" (یا چیزی مشابه) را انتخاب کنید. ستون سمت راست تمام ویژگی هایی را که روی این عنصر تنظیم شده یا از یک عنصر والد به ارث برده شده اند، همراه با فایل های سبکی که در آنها مشخص شده اند، فهرست می کند، و شماره سریالخطوط کد

4) هنگام تعریف یک سبک، می توانید از هر ترکیبی از انتخابگرها استفاده کنید - یک انتخابگر عنصر، یک شبه کلاس عنصر، یک کلاس یا یک شناسه عنصر.

5.2. آبشار

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

قانون! مهم است

وزن یک قانون را می توان با استفاده از کلمه کلیدی!important مشخص کرد، که بلافاصله بعد از مقدار ویژگی، به عنوان مثال، span (وزن فونت: bold!important;) اضافه می شود. این قانون باید در انتهای اظهارنامه قبل از براکت بسته، بدون فاصله قرار گیرد. چنین اعلامی بر سایر قوانین ارجحیت دارد. این قانون به شما این امکان را می‌دهد که یک مقدار ویژگی را لغو کنید و یک عنصر جدید را برای یک عنصر از گروهی از عناصر در شرایطی که وجود ندارد تنظیم کنید. دسترسی مستقیمبه فایل سبک

اختصاصی

برای هر قانون، مرورگر محاسبه می کند ویژگی انتخابگرو اگر عنصری دارای اعلان‌های دارایی متناقض باشد، قاعده‌ای که بیشترین ویژگی را دارد در نظر گرفته می‌شود. مقدار ویژگی دارای چهار بخش است: 0، 0، 0، 0. ویژگی انتخابگر به صورت زیر تعریف می شود:

برای شناسه، 0، 1، 0، 0 اضافه می شود.
برای کلاس 0، 0، 1، 0 اضافه می شود.
برای هر عنصر و شبه عنصر، 0، 0، 0، 1 اضافه می شود.
برای یک سبک درون خطی که مستقیماً به یک عنصر اضافه شده است - 1، 0، 0، 0 ;
انتخابگر جهانی هیچ ویژگی خاصی ندارد.

H1 (رنگ: آبی روشن؛) /*ویژگی 0، 0، 0، 1*/ em (رنگ: نقره ای؛) /*خاصیت 0، 0، 0، 1*/ h1 em (رنگ: طلایی؛) /*ویژگی: 0، 0، 0، 1 + 0، 0، 0، 1 = 0، 0، 0، 2*/ div#صفحه اصلی درباره (رنگ: آبی؛) /*ویژگی: 0، 0، 0، 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ نوار کناری (رنگ: خاکستری؛) /*ویژگی 0, 0, 1, 0 */ #نوار کناری (رنگ: نارنجی؛) /*ویژگی 0، 1، 0، 0*/ li#نوار کناری (رنگ: آبی؛) /*ویژگی: 0، 0، 0، 1 + 0، 1، 0، 0 = 0، 1، 0، 1*/

در نتیجه، آن دسته از قوانینی که خاص تر هستند در مورد عنصر اعمال خواهند شد. به عنوان مثال، اگر یک عنصر دارای دو ویژگی با مقادیر 0، 0، 0، 2 و 0، 1، 0، 1 باشد، قانون دوم برنده خواهد شد.

ترتیب جداول متصل

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

حتی قبل از مشخصات CSS سطح 2 در سال 1998، عناصر فرم قبلاً به طور گسترده در همه مرورگرهای اصلی پشتیبانی می شدند. مشخصات CSS 2 هنوز به این سؤال پاسخ نداد که چگونه عناصر فرم باید به کاربران ارائه شوند. از آنجایی که عناصر فرم بخشی هستند رابط کاربریدر هر سند وب، نویسندگان مشخصات انتخاب کردند که آن را ترک کنند بازنمایی بصریعناصر فرم html پیش فرض برای هر مرورگر.

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

تست های راجر جوهانسون برای طراحی عناصر فرم

در سال 2004 و دوباره در سال 2007، راجر جوهانسون مجموعه های آزمایشی ویژه ای را برای عناصر فرم و CSS ایجاد کرد. یک نتیجه از این آزمایش ها وجود داشت که راجر را ناراحت کرد:

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

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

مدل نمایش عنصر فرم پیش فرض

به طور پیش‌فرض، مشخصات CSS 2.1 برای HTML4 عناصر فرمی مانند ناحیه متنی، ورودی، و حالت نمایش بلوک درون خطی را تنظیم می‌کند:

Textarea، ورودی، انتخاب (نمایش: inline-block؛ )

برعکس، عناصر فرم و مجموعه فیلدها حالت نمایش بلوکی دارند:

مجموعه فیلدها، فرم (نمایش: بلوک؛ )

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

• عناصر بلوک درون خطی را می توان با استفاده از زمینه قالب بندی درون خطی استایل داد. این دلالت می کنه که با استفاده از CSSویژگی هایی مانند ارتفاع خط و تراز عمودی برای کنترل ارتفاع عنصر و تراز عمودی. از ویژگی های padding و margin نیز می توان برای کنترل داخلی و استفاده کرد لبهبرای عناصر فرم شایان ذکر است که المان های بلوک درون خطی را می توان با استفاده از عرض و ارتفاع نیز کنترل کرد؛ رفتار آنها در این زمینه با عناصر بلوک معمولی تفاوتی ندارد.
• عناصر بلوک را می توان استایل داد به صورت استاندارد، با استفاده از یک زمینه قالب بندی بلوک معمولی. با این حال، مشکلاتی در مورد مجموعه فیلدها و عناصر فرم افسانه وجود دارد، زیرا آنها کاملاً به استایل خود مرورگر متکی هستند.

این سوال پیش می آید که توسعه دهندگان چگونه می توانند این مشکلات را حل کنند؟

حل مسائل اندازه عنصر فرم

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

ورودی، انتخاب کنید (عرض: 120 پیکسل؛ ارتفاع: 32 پیکسل؛ )

توسعه دهندگان سعی کردند این مشکل را با استفاده از بلوک درون خطی حل کنند:

ورودی، انتخاب کنید (عرض: 120 پیکسل؛ ارتفاع: 32 پیکسل؛ نمایشگر: بلوک؛ )

نتایج به استثنای عنصر textarea هنوز چیزهای زیادی برای دلخواه باقی می‌گذارد. برای حل این مشکل، ابتدا باید فونت و اندازه فونت را برای عناصر فرم عادی کنید:

ورودی، انتخاب کنید (عرض: 120 پیکسل؛ فونت: 1em Arial، sans-serif؛ )

پس از نصب فونت، می توانید padding را اضافه کنید:

ورودی، انتخاب کنید (عرض: 120 پیکسل؛ قلم: 1em Arial، sans-serif؛ بالشتک: 3px 6px؛ )

به عناصر ورودی و ناحیه متنی نیز می توان یک حاشیه داد که بر ابعاد آنها مطابق با مدل جعبه تأثیر می گذارد:

ورودی، ورودی، ناحیه متنی (حاشیه: 1px جامد #cccc؛ )

عناصر ورودیدکمه لایک و ارسال ممکن است دارای بالشتک اضافی توسط مرورگر باشد. یک روش معمول عادی سازی آنها است:

ورودی، ورودی (بالشتک: 2 پیکسل؛ )

مشکل این رویکرد این است که مرورگرها اغلب پیشوندهای فروشنده را برای ویژگی‌های عنصر اعمال می‌کنند، بنابراین عادی‌سازی padding همیشه امکان‌پذیر نیست. به عنوان مثال، برای وب کیت می توانید آن را به این صورت عادی کنید:

ورودی، ورودی، ورودی، ورودی::-webkit-file-upload-button، دکمه ( -webkit-box-align: مرکز؛ تراز متن: مرکز؛ مکان نما: پیش فرض؛ رنگ: متن دکمه؛ بالشتک: 2px 6px 3px؛ حاشیه : 2px صفحه ابتدایی دکمه؛ حاشیه-تصویر: اولیه؛ رنگ پس زمینه: صفحه دکمه؛ اندازه جعبه: جعبه حاشیه؛ ) ورودی، ورودی، ورودی (-webkit-appearance: دکمه فشاری؛ فضای سفید: pre;)

padding همچنین بر عناصر مجموعه فیلد و افسانه تأثیر می گذارد، اما با نتایج متفاوت:

• با تنظیم padding برای fieldset روی 0، padding پیش‌فرض فقط در برخی مرورگرها (نه IE) بازنشانی می‌شود.
• تنظیم padding legend روی 0 باعث کوچک شدن عنصر می شود

انتخاب، چک باکس، عناصر رادیویی را می توان با نتایج خوب فقط برای چند ویژگی عادی کرد:

• فونت-خانواده
• اندازه فونت
• عرض (برای انتخاب)
• لایه گذاری

اعمال سایر خصوصیات به این عناصر فرم نتایج متناقضی ایجاد می کند.

تراز کردن عناصر در فرم ها

عناصر فرم را می توان به صورت عمودی و افقی تراز کرد. آنها می توانند در یک خط یا در یک گروه قرار گیرند. برای تراز کردن آنها در امتداد یک خط، می توانید از float یا زمینه استاندارد درون خطی استفاده کنید.

هنگام استفاده از عناصر شناور، عناصر به طور خودکار به عناصر بلوک تبدیل می شوند. این بدان معنی است که کنترل این عناصر اکنون توسط 9 قانون جعبه مدل دیگر فراهم شده است.

با عناصر شناور، وظیفه اصلیدستیابی به تراز عمودی خوب در خط فعلی. در این مورد، یک روش معمول استفاده از حاشیه عمودی یا بالشتک است:

ورودی، انتخاب کنید (عرض: 120 پیکسل؛ شناور: چپ؛ حاشیه بالا: 0.4 میلی متر؛ )

این رویکرد زمانی کار می کند که نیازی به تراز کردن بلوک های متن، مانند عنصر برچسب ندارید. در این مورد، می‌توانید از موقعیت نسبی، padding یا margin روی عنصری که فقط حاوی متن است استفاده کنید:

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

ورودی ( شناور: چپ؛ عرض: 90 پیکسل؛ موقعیت: نسبی؛ بالا: 0.4em؛ )

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

اگر از عناصر در زمینه قالب بندی درون خطی استفاده می کنید، می توانید از ویژگی vertical-align برای تراز عمودی استفاده کنید:

برچسب، ورودی (تراز عمودی: وسط، حاشیه سمت راست: 1em؛ )

نتایج خوبمی توان با ترکیب این ویژگی با ویژگی line-height به دست آورد. با این حال، این ویژگی باید روی عنصر والد تنظیم شود. اگر آن را مستقیماً روی خود عنصر فرم تنظیم کنید، ارتفاع عنصر تحت تأثیر قرار می گیرد:

ردیف فرم (ارتفاع خط: 1.4؛ )

استفاده از اعلان ارتفاع برای عنصر والد جفت شده با همان مقدار خط-ارتفاع نیز روش خوبی است:

ردیف فرم (ارتفاع خط: 1.8؛ ارتفاع: 1.8em؛ )

در زمینه قالب بندی درون خطی، می توانید استفاده کنید ویژگی text-alignبرای اینکه یک عنصر والد محتویات عنصر فرم را در سمت چپ، مرکز یا راست تراز کند.

رفتار عجیب ورودی های فایل

عنصر نوع ورودیفایل است مناسبت خاص. چنین عنصری به دلایل امنیتی باید همیشه در رابط مرورگر قابل مشاهده و قابل تشخیص باشد. این بدان معنی است که مرورگرها عمداً برخی از قوانین سبک (مانند موارد مربوط به قابلیت مشاهده) را نادیده می گیرند و به عنوان یک قاعده، الگوریتم های خود را که توسط شیوه نامه پیش فرض تعریف شده اند اعمال می کنند.

علاوه بر این، برخی از مرورگرها فقط یک دکمه را نمایش می دهند، در حالی که برخی دیگر نیز یک فیلد برای مسیر فایل اضافه می کنند.

با این حال، توسعه دهندگان وب راه هایی برای رفع این محدودیت پیدا کرده اند. ابتدا عنصر را در ظرفی پیچیدند.