مقدمه

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از مقدمه css)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

CSS چیست؟

  • CSS سرواژهٔ: (Cascading Style Sheets) است[۱]
  • CSS نحوه نمایش عناصر HTML را روی صفحه نمایش، کاغذ یا سایر رسانه‌ها تعریف می‌کند
  • CSS موجب صرفه جویی در کار می‌شود. CSS می‌تواند طرح چندین صفحه وب را به‌طور هم‌زمان کنترل کند
  • طرح‌های (به انگلیسی: stylesheet) خارجی در فایل‌های CSS ذخیره می‌شوند

نمایی از CSS - یک صفحه HTML - چندین طرح!

در اینجا ما یک صفحه HTML نمایش داده شده با چهار طراحی (به انگلیسی: stylesheet) مختلف را نشان می‌دهیم. برای دیدن طرح‌های مختلف بر روی لینک‌های "Stylesheet 1" ,"Stylesheet 2", "Stylesheet 3" ,"Stylesheet 4" کلیک کنید:

چرا از CSS استفاده می‌کنیم؟

CSS برای تعریف استایل صفحات وب شامل طراحی، چیدمان و تفاوت نمایش صفحه در دستگاه‌های مختلف با اندازه صفحه نمایش‌های متفاوت استفاده می‌شود.

مثالی از CSS
 1 body {
 2   background-color: lightblue;
 3 }
 4 
 5 h1 {
 6   color: white;
 7   text-align: center;
 8 }
 9 
10 p {
11   font-family: verdana;
12   font-size: 20px;
13 }


CSS یک مشکل بزرگ را حل کرد

HTML هرگز تمایلی برای داشتن تگ‌هایی برای قالب بندی یک صفحه وب نداشت!

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

<h1>This is a heading</h1>

<p>This is a paragraph.</p>


هنگامی که تگ‌هایی مانند <font>، و خاصیت‌های رنگ به قابلیت‌های نسخهٔ HTML 3.2 اضافه شد، به کابوسی برای توسعه‌دهندگان وب تبدیل شد. اضافه‌کردن مشخصات فونت و رنگ به هر تک صفحه در وب‌سایت‌های بزرگ، به یک پروسه طولانی و گران‌قیمت تبدیل شد.

برای حل این مشکل، کنسرسیوم جهانی وب (CSS (W3C را ایجاد کرد.

CSS قابلیت قالب بندی استایل را از صفحه HTML حذف کرد!

اگر نمی‌دانید HTML چیست، پیشنهاد می‌کنیم به آموزش HTML مراجعه کنید.

CSS موجب صرفه‌جویی زیاد در کارها می‌شود!

معمولاً تعریف استایل صفحه در فایل‌های .css خارجی ذخیره می‌شوند.

با داشتن یک فایل stylesheet خارجی، می‌توانید فقط با تغییر یک فایل، ظاهر وب‌سایت را به‌طور کامل تغییر دهید!


منابع آموزشی