فهرست سرفصل‌های CSS
خانه (HOME) معرفی (Introduction) نحو نگارش (Syntax) انتخاب گرها (Selectors) نحوه استفاده (How To) توضیحات (Comments) خطاها (Errors) رنگ ها (Colors) رنگ های RGB (RGB Colors) رنگ های HEX (HEX Colors) رنگ های HSL (HSL Colors) پس زمینه (Backgrounds) تصویر پس زمینه (Background Image) تکرار پس زمینه (Background Repeat) پیوست پس زمینه (Background Attachment) کوتاه نویسی پس زمینه (Background Shorthand) حاشیه ها (Borders) عرض حاشیه (Border Width) رنگ حاشیه (Border Color) طرف های حاشیه (Border Sides) کوتاه نویسی حاشیه (Border Shorthand) حاشیه های گرد (Rounded Borders) حاشیه بیرونی (Outline) عرض حاشیه بیرونی (Outline Width) رنگ حاشیه بیرونی (Outline Color) کوتاه نویسی حاشیه بیرونی (Outline Shorthand) فاصله حاشیه بیرونی (Outline Offset) حاشیه داخلی (Padding) ارتفاع و عرض (Height/Width) مدل جعبه ای (Box Model) متن (Text) تراز متن (Text Alignment) تزئین متن (Text Decoration) تبدیل متن (Text Transformation) فاصله متن (Text Spacing) سایه متن (Text Shadow) فونت ها (Fonts) فونت های وب سیف (Web Safe Fonts) جایگزین های فونت (Font Fallbacks) سبک فونت (Font Style) اندازه فونت (Font Size) فونت گوگل (Google Fonts) ترکیب فونت ها (Font Pairings) کوتاه نویسی فونت (Font Shorthand) آیکون ها (Icons) لینک ها (Links) فهرست ها (Lists) جداول (Tables) اندازه جدول (Table Size) تراز جدول (Table Alignment) استایل جدول (Table Styling) جدول واکنش گرا (Responsive Table) نمایش (Display) حداکثر عرض (Max-width) موقعیت دهی (Position) شاخص Z (Z-index) سرریز (Overflow) شناور (Float) پاک سازی (Clear) نمونه های شناور (Float Examples) نمایش خطی-بلوک (Inline-block) تراز کردن (Align) ترکیب کننده ها (Combinators) شبه کلاس ها (Pseudo-classes) شفافیت (Opacity) نوار ناوبری (Navigation Bars) ناوبری عمودی (Vertical Navbar) ناوبری افقی (Horizontal Navbar) منوهای کشویی (Dropdowns) گالری تصاویر (Image Gallery) تصاویر اسپریت (Image Sprites) انتخاب گرهای ویژگی (Attribute Selectors) فرم ها (Forms) شمارنده ها (Counters) واحدها (Units) ویژگی اختصاصی سازی (Specificity) ویژگی !important توابع ریاضی (Math Functions) بهینه سازی (Optimization) دسترس پذیری (Accessibility) چیدمان وب سایت (Website Layout) گوشه های گرد (Rounded Corners) تصاویر حاشیه (Border Images) پس زمینه های چندگانه (Multiple Backgrounds) اندازه پس زمینه (Background Size) مبدأ پس زمینه (Background Origin) برش پس زمینه (Background Clip) رنگ ها (Colors) کلیدواژه های رنگ (Color Keywords) گرادیان ها (Gradients) گرادیان شعاعی (Radial Gradients) گرادیان مخروطی (Conic Gradients) سایه ها (Shadows) سایه جعبه (Box Shadow) افکت های متن (Text Effects) فونت های سفارشی (Custom Fonts) تبدیل های دو بعدی (2D Transforms) تبدیل های سه بعدی (3D Transforms) انتقال ها (Transitions) انیمیشن ها (Animations) توضیحات راهنما (Tooltips) استایل دهی تصاویر (Image Styling) مودال تصویر (Image Modal) تراز مرکز تصویر (Image Centering) فیلترهای تصویر (Image Filters) اشکال تصویر (Image Shapes) ویژگی object-fit ویژگی object-position ماسک گذاری (Masking) ماسک گرادیان (Masking-Gradients) ماسک SVG (Masking-SVG) دکمه ها (Buttons) صفحه بندی (Pagination) چند ستونه (Multiple Columns) رابط کاربری (User Interface) متغیرها (Variables) بازنویسی متغیرها (Overriding Variables) متغیرها و جاوااسکریپت (Variables and JavaScript) متغیرها در Media Query (Variables in MQ) ویژگی @property اندازه جعبه (Box Sizing) پرس وجوهای رسانه ای (Media Queries) نمونه های MQ (MQ Examples) فلکس باکس (Flexbox Intro) ظرف فلکس (Flex Container) آیتم های فلکس (Flex Items) فلکس واکنش گرا (Flex Responsive) شبکه (Grid Intro) ظرف شبکه (Grid Container) ردیف و ستون شبکه (Grid Tracks) فاصله شبکه (Grid Gaps) تراز شبکه (Grid Align) آیتم شبکه (Grid Items) نام گذاری آیتم (Grid Item Named) تراز آیتم شبکه (Grid Item Align) ترتیب آیتم شبکه (Grid Item Order) چیدمان 12 ستونه (Grid 12-column Layout) قانون @supports واکنش گرا (RWD Intro) نما (Viewport) چیدمان شبکه واکنش گرا (RWD Grid View) پرس وجوهای رسانه ای (RWD Media Queries) تصاویر واکنش گرا (RWD Images) ویدیوهای واکنش گرا (RWD Videos) چارچوب های واکنش گرا (RWD Frameworks) قالب های واکنش گرا (RWD Templates)

فرم ها (Forms)

«فرم CSS» یعنی شکل و استایل فرم های HTML با CSS. فرم همان جعبه های ورود داده است. با استایل خوب، فرم خواناتر می شود. همچنین کاربر راحت تر تایپ می کند؛ مثل دفتر مشق با خط کشی بهتر.

نمونه سریع استایل فرم

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

form.test {
  background-color: #f2f2f2;
  padding: 40px;
  border-radius: 5px;
}

label {
  display: block;
  margin-bottom: 6px;
}

input[type="text"], select {
  width: 100%;
  padding: 8px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

مشاهده در ادیتور

عرض ورودی ها با width

ویژگی «عرض (width)» پهنای ورودی را تعیین می کند. معمولاً روی 100٪ می گذاریم تا تمام سطر را بگیرد.

input {
  width: 100%;
}

مشاهده در ادیتور

فاصله داخلی و بیرونی: padding و margin

«پدینگ (Padding)» فضای داخل کادر است. «مارجین (Margin)» فضای بیرون کادر است. با «box-sizing» اندازه دقیق می ماند.

input[type="text"] {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  box-sizing: border-box;
}

مشاهده در ادیتور

حاشیه و گوشه های گرد: border و border-radius

«حاشیه (Border)» کادر را پررنگ می کند. «border-radius» گوشه ها را گرد می کند.

input[type="text"] {
  border: 2px solid red;
  border-radius: 8px;
}

مشاهده در ادیتور

input[type="text"] {
  border: none;
  border-bottom: 1px solid red;
}

مشاهده در ادیتور

رنگ پس زمینه و متن

با «background-color» پس زمینه را رنگ کنید. با «color» رنگ متن را تغییر دهید.

input[type="text"] {
  background-color: #3CBC8D;
  color: white;
}

مشاهده در ادیتور

حالت فوکوس با :focus

«فوکوس (Focus)» وقتی ورودی فعال است. با «:focus» استایل ویژه بدهید. حاشیه یا پس زمینه را تغییر دهید.

input[type="text"]:focus {
  background-color: lightblue;
}

مشاهده در ادیتور

input[type="text"]:focus {
  border: 3px solid #555;
}

مشاهده در ادیتور

آیکن داخل ورودی با background-image

با «background-image» آیکن اضافه کنید. سپس با «background-position» جای آن را تنظیم کنید. پدینگ چپ را بیشتر بگذارید.

input[type="text"] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

مشاهده در ادیتور

انیمیشن عرض جستجو با transition

با «transition» تغییر نرم بسازید. هنگام فوکوس، عرض بیشتر شود. تجربه بهتر می شود.

input[type="text"] {
  transition: width 0.4s ease-in-out;
}

input[type="text"]:focus {
  width: 100%;
}

مشاهده در ادیتور

استایل textarea و غیرفعال کردن resize

نوشته های چندخطی در «textarea» قرار می گیرند. با «resize: none» دستگیره تغییر اندازه را حذف کنید.

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

مشاهده در ادیتور

استایل منوی کشویی select

گزینه ها را خوانا کنید. padding و پس زمینه ملایم بگذارید. کادر را ساده کنید.

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

مشاهده در ادیتور

دکمه های فرم: button، submit، reset

دکمه ها باید واضح باشند. پس زمینه مشخص، متن خوانا، و مکان نما روی دست.

input[type="button"], input[type="submit"], input[type="reset"] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

مشاهده در ادیتور

فرم واکنش گرا با media query

فرم باید روی موبایل هم خوب باشد. با «media query» لیبل و ورودی ها را ستونی کنید.

مشاهده در ادیتور

گام های عملی فرم CSS

  1. ساختار ساده فرم را بنویس.
  2. عرض ورودی ها را 100٪ کن.
  3. padding و margin منطقی بده.
  4. حالت :focus را مشخص و تست کن.
  5. واکنش گرایی را با media query بساز.

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

جمع بندی سریع

  • فرم CSS یعنی استایل فرم های HTML.
  • width و box-sizing نظم می دهند.
  • padding و margin خوانایی را بهتر می کنند.
  • :focus بازخورد فوری به کاربر می دهد.
  • فرم واکنش گرا، تجربه موبایل را عالی می کند.