مقدمه

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های 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 خارجی، می‌توانید فقط با تغییر یک فایل، ظاهر وب‌سایت را به‌طور کامل تغییر دهید!

صفحهٔ بعد»

«صفحهٔ قبل